The code below is a simple abstraction of what I want to do - it deals with publish and subscribe of the dojo event model. My aim is to publish an event, and subscribe a method to that event.
<html>
<head>
<script>
dojoConfig={async:true, parseOnLoad: true}
</script>
<script type="text/javascript" src="dojo/dojo.js">
</script>
<script language="javascript" type="text/javascript">
require(["dojo/topic","dojo/domReady!"],
function(topic){
function somethod() {
alert("hello;");
}
try{
topic.publish("myEvent");
}
catch(e){
alert("error"+e);
}
//topic.publish("myEvent");
try{
topic.subscribe("myEvent", somethod);
}catch(e){alert("error in subscribe"+e);}
});
</script>
</head>
<body></body>
</html>
I get no alerts, not even in try and catch blocks. Developer console also shows no errors. Is this the correct way to handle publish and subscribe?
You're very close but have made one little mistake. You're subscribing to the topic after you're publishing to it, so you're not catching it. If you put the pub after the sub it'll work.
Here's your sample with slight modifications and comments:
<html>
<head>
<script>
dojoConfig={async:true, parseOnLoad: true}
</script>
<!-- I used the CDN for testing, but your local copy should work, too -->
<script data-dojo-config="async: 1"
src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js">
</script>
<script language="javascript" type="text/javascript">
require(["dojo/topic","dojo/domReady!"],
function(topic){
function somethod() {
alert("hello;");
}
try{
topic.publish("myEvent");
/* ignored because no one is subscribed yet */
}
catch(e){
alert("error"+e);
}
try{
topic.subscribe("myEvent", somethod);
/* now we're subscribed */
topic.publish("myEvent");
/* this one gets through because the subscription is now active*/
}catch(e){
alert("error in subscribe"+e);
}
});
</script>
</head>
<body></body>
</html>
Related
I'm beginner in Javascript.
I'm learning Browser Object Model.
Then, I had a error message from Chrome console.
My codes are below.
<html>
<head>
<title>
</title>
<meta charset="UTF-8" />
<script type="text/javascript">
function showLinks() {
showLinks_NOT_ERROR1();
showLinks_NOT_ERROR1();
showLinks_WANTED_BUT_ERROR();
}
function showLinks_NOT_ERROR1() {
console.log(document.links[0].href);
console.log(document.links[1].href);
}
function showLinks_NOT_ERROR2() {
alert(document.links[0].href);
alert(document.links[1].href);
}
function showLinks_NOT_ERROR3() {
document.write(document.links[0].href);
}
function showLinks_WANTED_BUT_ERROR() {
document.write(document.links[0].href);
document.write(document.links[1].href);
}
</script>
</head>
<body onload="showLinks();">
google
yahoo
</body>
</html>
As you could see in showLinks_NOT_ERROR3, just one document.write(document.links[0].href); has no error but two document.write(document.links[0].href); document.write(document.links[1].href); has error.
Why does this error happen?
Further to my comment:
When using document.write always note:
'document.write()' is used to write to the document stream.
Calling 'document.write()' on a closed document stream automatically calls document.open(), which will clear the document.
See the correct answer marked in this post:
document.write clears page
<!DOCTYPE html>
<html>
<head><title>Test</title></head>
<body>
google
yahoo
<script type="text/javascript">
function showLinks() {
showLinks_NOT_ERROR1();
showLinks_NOT_ERROR2();
showLinks_WANTED_BUT_ERROR();
}
function showLinks_NOT_ERROR1() {
console.log(document.links[0].href);
console.log(document.links[1].href);
}
function showLinks_NOT_ERROR2() {
alert(document.links[0].href);
alert(document.links[1].href);
}
function showLinks_NOT_ERROR3() {
document.write(document.links[0].href);
}
function showLinks_WANTED_BUT_ERROR() {
document.write(document.links[0].href);
document.write(document.links[1].href);
}
showLinks();
</script>
</body>
</html>
This code should work for you. Here the showLinks function is called before the document stream is closed.
I have a function that receives data from a server and shows a dropzone.js form,
function requestData() {
// showDropzone(); // displaying dropzone from here works,
$.post("/userids/",null, function(data, status) {
jsonarray = JSON.parse(data);
showDropzone(); // here, it calls the function but dropzone is not displayed
});
}
function showDropzone(){
$("#content").html('<form id="dropzone" action="/target" class="dropzone"></form>');
}
Dropzone doesn't show when I call it from inside the post method, but it does when I call it from outside of it. I have no idea what is causing this, there is no error or warning, and I've tried with all possible dropzone configurations, but even forceFallback set to true doesn't work.
EDIT:
Here is the complete html,
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="dropzone.js"></script>
</head>
<body>
<div id="container">
<div id="content"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
requestData();
});
function requestData() {
// showDropzone(); // displaying dropzone from here works,
$.post("/userids/",null, function(data, status) {
jsonarray = JSON.parse(data);
showDropzone(); // here, it calls the function but dropzone is not displayed
});
}
function showDropzone(){
$("#content").html('<form id="dropzone" action="/target" class="dropzone"></form>');
}
</script>
</body>
</html>
:D I bet form#dropzone adds to the #content, but you don't see it ... because it's EMPTY!! (no input inside) :D Check out my fiddle!
http://jsfiddle.net/U5wCw/
Change your code to
$("#content").html('<form id="dropzone" action="/target" class="dropzone"><input type="text"/></form>');
I'm running a Node server with express which renders jade. I'm trying to make my client side use knockout.js but the view never updates... I don't get any errors in the console and I just can't figure out what is wrong.
Page:
extends layout
block content
script(src='knockout/knockout-2.2.1.debug.js', type='text/javascript')
script(src='js/app.js', type='text/javascript')
p Hi,
strong(data-bind="text: firstName")
rendered html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/stylesheets/style.css">
</head>
<body>
<script src="knockout/knockout-2.2.1.debug.js" type="text/javascript"></script>
<script src="js/app.js" type="text/javascript"></script>
<p>Hi,<strong data-bind="text: firstName"></strong></p>
</body>
</html>
app.js:
function AppViewModel() {
this.firstName = ko.observable("Bert");
this.lastName = ko.observable("Bertington");
}
ko.applyBindings(new AppViewModel());
is there something I'm missing here or is it just not possible to make this happen with Node.js and express?
You need to make sure you call ko.applyBindings() after the DOM has already been loaded.
Either wrap the code in app.js in window.onload, in jQuery's ready() function, or move your script tag to be below <p>Hi,<strong data-bind="text: firstName"></strong></p>.
// this is my js file
(function () {
//START THE APP WHEN DOCUMENT IS READY
$(function () {
function AppViewModel() {
var self = this;
self.firstName = "Hamza";
// self.lastName = ko.observable("Bertington");
}
ko.applyBindings(new AppViewModel());
});
})();
I'm just starting using Qunit and would like to know whether is there a way to capture/verify/omit alerts, For example:
function to_test() {
alert("I'm displaying an alert");
return 42;
}
and then have something like:
test("to_test", function() {
//in this case I'd like to test the alert.
alerts("I'm displaying an alert", to_test(), "to_test() should display an alert");
equals(42, to_test(), "to_test() should return 42" ); // in this case I'd like to omit the alert
});
I'm open to the suggestion of using another unit testing tool as well.
Thanks in advance!
Alright, looks like Sinon.JS is what you are looking for. I've never used it before, but I did to answer your question.
You can replace the global function alert (which is actually window.alert) with a temporary function that will record the message that would have been displayed.
It's easy to do in javascript (window.alert = function(msg) { savedMsg = msg; }). So you could do that within your test.
The complexity comes only from cleaning up after you've run your test. That's where you need Sinon.JS which can integrate with QUnit. You'll need this integration script.
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/qunit/git/qunit.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://code.jquery.com/qunit/git/qunit.js"></script>
<script type="text/javascript" src="sinon-1.1.1.js"></script>
<script type="text/javascript" src="sinon-qunit-0.8.0.js"></script>
<script>
function to_test() {
window.alert("I'm displaying an alert");
return 42;
}
$(document).ready(function(){
module("Module A");
test("first skip alert test ", function() {
var stub = this.stub(window, "alert", function(msg) { return false; } );
equals(42, to_test(), "to_test() should return 42" );
equals(1, stub.callCount, "to_test() should have invoked alert one time");
equals("I'm displaying an alert",stub.getCall(0).args[0], "to_test() should have displayed an alert" );
});
});
</script>
</head>
<body>
<h1 id="qunit-header">QUnit example</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture">test markup, will be hidden</div>
</body>
</html>
<script language="JavaScript">
function del_rcd(param)
{
if(confirm("Do you really want to delete it"))
{
window.location = 'controller/del_task_ctl.php?param='+param;
}
}
</script>
<script language="javascript">
function popup(id)
{
window.open("detail.php?tid="+id, "Preview","width=600,height=500,scrollbars=yes");
}
</script>
<script language="javascript">
function popupcomp(id)
{
window.open("edit_task.php?tid="+id, "Preview","width=600,height=500,scrollbars=yes");
}
</script>
<script language="javascript">
function popupclose(id)
{
window.open("close.php?qid="+id, "Preview","width=600,height=500,scrollbars=yes");
}
</script>
Is JavaScript disabled in Firefox?
Just as a side-note. The "language" attribute is quite obsolete (See point 7). Instead write
<script type="text/javascript">
</script>
I just made this quick test under OSX Firefox and it just works:
<html>
<head>
<script type="text/javascript">
function del_rcd(param){
if(confirm("Do you really want to delete it"))
{
window.location = 'controller/del_task_ctl.php?param='+param;
}
}
function popup(id)
{
window.open("detail.php?tid="+id, "Preview","width=600,height=500,scrollbars=yes");
}
function popupcomp(id)
{
window.open("edit_task.php?tid="+id, "Preview","width=600,height=500,scrollbars=yes");
}
function popupclose(id)
{
window.open("close.php?qid="+id, "Preview","width=600,height=500,scrollbars=yes");
}
</script>
</head>
<body>
<input type="submit" Text="Click me" onclick="del_rcd('test')"/>
</body>
</html>
Additionally what I always recommend web devs is to install Firebug and optionally PageSpeed. This is a must especially when you deal with JavaScript. Firebug automatically shows you syntax or JavaScript runtime errors.
I am submitting a form to this script by calling these js function
but submit button only works in IE and on all other browsers Submit button is not working