I would like to listen for all io request in all my web pages, however, when I used the syntax below, I can ONLY listen for the io with the yui instance.
Y.on('io:success', myCallBack);
How can I write a custom method/event or something else to achieve this?
My question is actually the same as below URL:
http://yuilibrary.com/forum/viewtopic.php?p=26009
I googled for a while but did not find a practical answer for this, any help will be appreciated, thanks.
Try
(Y.io._map['io:0'] || new Y.IO()).publish({
'io:success': { broadcast: 2 },
'io:complete': { broadcast: 2 },
etc.
});
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>io.jsp</title>
<script src="/spring-test/scripts/yui_3.5.1/build/yui/yui-min.js"></script>
</head>
<body>
test
<script>
YUI().use("io-base", function(Y){
function onSuccess(transactionid,response,arguments){
alert('start!');
}
Y.Global.on('io:start',onSuccess);
});
Y1 = YUI().use("io-base", "node", function(Y1){
Y1.publish('io:start',{broadcast : 2});
Y1.io("http://www.yahoo.com.hk");
});
</script>
</body>
Finally I got one example , however it works only on FF, Chrome but fail in IE:
Please suggest if there is any improvement, thanks.
Related
So I followed a tutorial which has taught me some things about nodejs and mongodb. I now know how to insert new data from the server in to my database.
But what I can't seem to figure out is how to update existing data in a collection. I have searched on a lot of places but sadly no clear answer for me. I am a little of a noob still with this so excuse me if i say things that are probably wrong.
So this is what I've tried to set up:
Code from my Controller.js:
app.get("/button", function(req, res) {
mongo.connect(url_monitor, function (err, db) {
assert.equal(null, err);
db.numbers.update({ $inc: { number: -2}})
getData(res);
})
})
}
I am using the MVC model that has the: controller, model and view. So all pages in the view folder are .ejs files. I am also using jQuery and ajax to send a request to the controller.
button.js:
$(document).ready(function(){
$('#btn1').on('click', function(){
var number = {number: 0}
$.ajax({
type: 'GET',
url: '/button',
data: number,
success: function(number){
//do something with the data via front-end framework
location.reload();
alert('It works')
}
});
});
})
button.ejs:
<!DOCTYPE html>
<html lang="en">
<head>
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<script src="/assets/button.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todo List</title>
<link href="/assets/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Button test</h1>
<button id="btn1">Increase number</button>
</body>
</html>
So basically what I am trying to achieve is that once I press a button somewhere on a page, it would increase/decrease a value in the database in one of the specific collections. I am kinda lost with this, any help would be appreciated.
After searching for a very long time, i finally found the solution. If anyone else is having this issue then refer to this link: https://docs.mongodb.com/drivers/node/usage-examples/updateOne
I am using the layout taglib to extend a page to its template but i don't know how to pass a variable to the main layout and apply a conditional class.
Considering this is my main-layout.marko
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body class="#### (TITLE === 'REGISTER')?'ACTIVE':'INACTIVE' ####">
<layout-placeholder name="title"/>
<layout-placeholder name="body"/>
</body>
</html>
this is my registration.marko
<layout-use template="./layout.marko">
<layout-put into="title">
$data.title
</layout-put>
<layout-put into="body">
some content
</layout-put>
</layout-use>
and finally this is the code I use to render the page and pass the title data
router.get('/register', function(req, res, next) {
registration.render({
title: 'register'
}, res);
});
How can I create a conditional class on the main-layout.marko file that switches between active or inactive depending on the page title?
Thanks
You can pass data to a layout by adding additional attributes to your <layout-use> tag. See: marko-layout » Layout Data
For your example, the following will work:
In main-layout.marko:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body class="#### ${data.title === 'REGISTER' ? 'ACTIVE' : 'INACTIVE' } ####">
<layout-placeholder name="title">
${data.title}
</layout-placeholder>
<layout-placeholder name="body"/>
</body>
</html>
In registration.marko:
<layout-use template="./layout.marko" title="${data.title}">
<layout-put into="body">
some content
</layout-put>
</layout-use>
That should solve your problem, but let me know if you are still stuck.
there is another way of passing data t all of its template that is using $global in which you are passing your data .
and after using global you dont need to add attribute to any tag . you can access it by using like
out.global.username
I have a button link which I'm using the 'onClick' event to play a sound (the correct answer to a quiz question). I then want to add a delay so the sound has enough time to play out before the link function loads the next page in.
I've tried using the set time out function, but I can't get it to work. Is this the best way to do this?
HEAD
<script>
$("#correct").click(function()
{
var url = "question2.html";
//5000 is the number of milliseconds (or 5 seconds) that you want to wait before redirection.
var delay = 5000;
setTimeout(function() {
window.location.href = url;
}, delay);
});
</script>
BODY
<button onclick="document.getElementById('answer1').play()" id="correct">A) Reduce – make less waste in the first place</button>
This is using HTML5 tags. Therefore, it will only work with browser that support HTML5. However, I think is a bad idea to validate the answer via javascript, since people can cheat and look the code and know which answer is corrected.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- javascript/jQuery -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<div id='audio'>This will be replaced with an audio tag</div>
<button id="correct">A) Reduce – make less waste in the first place</button>
<script type='text/javascript'>
$("#correct").on('click',function (){
$("#audio").stop("true").delay('5000').queue(function() {
$(this).html('<audio controls="controls" autoplay="autoplay"><source src="song.mp3" type="audio/mp3" /></audio>');
});
});
</script>
</body>
</html>
I trying to create main page (part of node.js and mongoDB application) that includes login form.
To add view part I included js files with function that returns HTML, but as I can see much better is using template engine.
Everything is OK until I including one compiled swig part inside another one.
The output of main page is OK, but login part outputs like text on the page.
How is possible to output the login HTML as HTML instead of plain text?
Does more information needed to understand the issue?
Thank you in advance.
var swig = require('swig');
var mainPage_tpl = swig.compileFile(__dirname+'/../views/mainpage_tpl.html');
var formLogin_tpl = swig.compileFile(__dirname+'/../views/login_tpl.html');
var loginOutput = formLogin_tpl();
var mainPageOutput = mainPage_tpl({
title: 'Sometitle',
pagetitle: 'Somepagetitle',
content: loginOutput
});
exports.get = function(req, res){
res.writeHead(200, {'Content-Type': 'text/html'});
res.write(mainPageOutput);
res.end();
}
mainpage_tpl.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>{{title}}</title>
<link rel="stylesheet" href="/assets/reset.css" />
<link rel="stylesheet" href="/assets/style.css" />
<script type="text/javascript" src="/assets/jquery-2.0.0.js"></script>
<script type="text/javascript" src="/assets/script.js"></script>
</head>
<body id="login_page">
<h1>{{pagetitle}}</h1>
<div id="content">{{content}}</div>
</body>
</html>
If you want to include literal HTML, you need to tell Swig to not escape it using the safe filter:
...
<div id="content">{{ content|safe }}</div>
...
I am trying to learn how to use Google Local Search API. I am unable to set the local search center point to Pakistan. Please guide me. Thanks.
The line in code with the problem is:
localSearch.setCenterPoint("Pakistan, PAK");
The fiddle showing that results from NewYork are being displayed is here.
The whole code is,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Hello World - Google Web Search API Sample</title>
<script src="https://www.google.com/jsapi"
type="text/javascript"></script>
<script language="Javascript" type="text/javascript">
//<!
//google.load('search', '1');
google.load("search", "1", {"nocss" : true});
function OnLoad() {
// Create a search control
var searchControl = new google.search.SearchControl();
// Add in a full set of searchers
var localSearch = new google.search.LocalSearch();
searchControl.addSearcher(new google.search.NewsSearch());
// Set the Local Search center point
localSearch.setCenterPoint("Pakistan, PAK");
// tell the searcher to draw itself and tell it where to attach
searchControl.draw(document.getElementById("searchcontrol"));
// execute an inital search
searchControl.execute("Facebook");
}
google.setOnLoadCallback(OnLoad);
//]]>
</script>
</head>
<body>
<div id="searchcontrol">Loading</div>
</body>
</html>
I believe you need to know what the latitude and longitude of PAK is for it to find it.
setCenter(latlng:LatLng);