Dojo dialog appearing as static web page - javascript

I am attempting to code a simple example of a Dojo dialog box. I have copied the example shown in the Dojo reference here => http://dojotoolkit.org/reference-guide/1.7/dijit/Dialog.html
My code is shown below:
<!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=ISO-8859-1">
<title>Dialog Test</title>
<script language="JavaScript" type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dojox.widget.Dialog");
dojo.require("dijit.form.Button");
dojo.require("dijit.layout.TabContainer")
dojo.require("dijit.layout.ContentPane")
</script>
</head>
<body>
<div id="dialogOne" dojoType="dojox.widget.Dialog" title="My Dialog Title">
<div dojoType="dijit.layout.TabContainer" style="width: 200px; height: 300px;">
<div dojoType="dijit.layout.ContentPane" title="foo">Content of Tab "foo"</div>
<div dojoType="dijit.layout.ContentPane" title="boo">Hi, I'm Tab "boo"</div>
</div>
</div>
<p>When pressing this button the dialog will popup:</p>
<button id="buttonOne" dojoType="dijit.form.Button">Show me!
<script type="dojo/method" event="onClick" args="evt">
// Show the Dialog:
dijit.byId("dialogOne").show();
</script>
</button>
</body>
</html>
When the page loads in a browser, the Dialog doesn't work. I just see the text from the tabbed panes appear in the browser.
I've copied the code from the reference guide exactly so I'm very confused. Any suggestions?
Thanks.
James.

The Dojo samples unfortunately tend not to work fully 'as is', but are bits of skeleton code that need wrapping up in various standard bits of ceremony.
You've at least three things causing this not to work and render correctly. There may be other problems on top, but these will definitely cause it not to render:
You need to link to a version of the core Dojo scripts. Linking to a CDN version is a simple way to go. e.g. <script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js"></script>. Details are here: http://dojotoolkit.org/download/. Be sure to put this before your require scripting.
Add a link to a Dijit theme style sheet (CSS file) in your page, otherwise none of the widgets will display correctly. e.g. <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css‌​"/>
Add a class attribute on the body element describing which theme you want to use. e.g. <body class="claro">.
Only when you've done all those three things will it have a chance of working. There may be other problems too, but they're the fundamental three.

Related

jquery script not working inside HTML

( Answered: dont use <script type="text/javascript" src="jquery-1.8.0.min.js"></script> in html)
I am learning Jquery from this tutorial :
http://www.littlewebhut.com/javascript/getting_started/
I created One Html , 1 js file . put them on same physical folder ,put "jquery-1.8.0.min.js" in same folder , put a link of js file in html page
But it is not working .
my HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Demo</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>Heading one</h1>
<p>This is just some text for heading 1</p>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="my_code.js"></script>
</body>
</html>
My Jquery Page (my_code.js) :
$(document).ready(function(){
$("p").hide();
$("h1").click(function(){
$(this).next().slideToggle(300);
});
});
there is some minor mistake that is happening ,
I tried to search , but could not found relevant link .PLease suggest if I am missing something
Your code is working fine.There must be some problem with your jquery file path. Try including CDN hosted jquery library as follows or check your path:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
I have tried this on js fiddle and it's working fine I guess this is what you want ,right when on clicking the h1 tag you need that p to hide if I am not wrong ,
This is the js fiddle http://jsfiddle.net/Saranshshrma/7rzLW/1/
If this script is, small you can always put in, this
<script></script>
Tags before body content but remember put your Jquery before anything else any script or code you want to execute and you can post the chrome inspect element errors while executing this code
What error are you getting ? See the console/dev tools (f12) and notice you have to click the header text to trigger the effect:
http://jsfiddle.net/m5LL4/
$(document).ready(function(){
$("p").hide();
$("h1").click(function(){
$(this).next().slideToggle(300);
});
});
I did paste your code, just take a part of the html with the same jquery version and it works.
Is javascript enabled in your browser?
If you are using chrome Go Ctrl+H click on Setting in left side->show advanced Setting->Privacy->Content Settings->Allow all sites to run Javascript.
If already checked check for your jquery path file name.

How can I make document.write and ajax play nice?

My programming skills are rudimentary at best, so please forgive me if I sound a little clunky discussing these things. I'm learning, but at a chimp's pace.
Here's my issue: I'm using JQuery Mobile to bring in some form content as a dialog via ajax. This content is contained in the document itself, in second div with a data-role="page" attribute.
Within that second page div, I have some javascript that defines a few vars, then writes them into the doc with document.write().
However, when I click the link (the far right link in the nav), instead of popping up a nice dialog, Firefox instead briefly loads a new page with the fist var (not dynamically but as a static page), then redirects back to the starting page, leaving a "wyciwyg(00000)..." in my browser history. Upon said redirect, "WYCIWYG" is displayed in the browser's title bar. Other browsers choke in slightly different ways (Safari doesn't redirect, Chrome displays all the vars and doesn't redirect, etc.), but the WYCIWYG-in-the-history factor is in play in all three. If I remove the document.write commands, the link behaves as expected.
I've scoured the web for hours and not found an answer... similar problems show up in 10 year old Mozilla bug reports, but not much else. The only resolution I've found is not to use document.write() in content loaded via ajax. Unfortunately, I have no clue what the alternative would be, or how I would even begin to execute it. The Javascript code originated at Google - front-end code for a transit trip planner.
Below is some stripped-down code that illustrates the issue. Any guidance would be greatly appreciated, bearing in mind the whole chimp's-pace thing. Thanks in advance.
<!DOCTYPE HTML>
<html>
<head>
<title>WYCIWYG</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile.structure-1.2.1.min.css" />
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css">
<script type='text/javascript' src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
<script>
var startExample = "USC";
var endExample = "201 N Los Angeles St.";
var zip = "90012";
</script>
</head>
<body>
<div data-role="page">
<div data-role="navbar">
<ul data-mini="true">
<li>Service 1</li>
<li>Service 2</li>
<li>PLAN TRIP</li>
</ul>
</div>
</div>
<div data-role="page" id="planTrip">
Some document.write js:
<script>
document.write(startExample);
document.write(endExample);
document.write(zip);
</script>
</div>
</body>
You could simply use jQuery.html() on placeholder elements:
Source: http://jsfiddle.net/fiddlegrimbo/suD6s/6/
Demo: http://fiddle.jshell.net/fiddlegrimbo/suD6s/6/show/light/
<div data-role="page" id="planTrip">
Some document.write js:
<p id="start"></p>
<p id="end"></p>
<p id="zip"></p>
<script>
$("#planTrip #start").html(startExample);
$("#planTrip #end").html(endExample);
$("#planTrip #zip").html(zip);
</script>
</div>

ASP.NET, Master Pages and jQuery

I'm trying to create a little script to allow me to set the style of a couple of menu items (done via a simple div with li items, which contain an each to send me to the correct page) but I'm not getting nowhere so I'm in need of help.
I have the following code on the master page:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="MILLS001_PAINEL.Site1" EnableTheming="True" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Title</title>
<script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../js/menu.js"></script>
<link href="../css/reset.css" rel="Stylesheet" type="text/css" />
<link href="../css/style.css" rel="Stylesheet" type="text/css" />
<!--[if gte IE 9]>
<style type="text/css">
.gradient {
filter: none;
}
</style>
<![endif]-->
<asp:ContentPlaceHolder ID="head" runat="server"></asp:ContentPlaceHolder>
</head>
<body>
<div id="banner" class="gradient">
<div id="menu">
<ul>
<li>Painel de Gestão</li>
<li>Cockpit Operacional</li>
</ul>
</div>
<div id="logo"></div>
</div>
<div>
<asp:ContentPlaceHolder ID="Placeholder" runat="server">
</asp:ContentPlaceHolder>
</div>
</body>
</html>
The menu is defined in the master page, now I have this script to add certain classes (already created in CSS) to allow me to add/remove styles to the menu items:
$(document).ready(function () {
$('menu').find('li').hover(function() {
$(this).addClass("hovered");
},
function() {
$(this).removeClass("hovered");
});
$('menu').find('a').click(function(e) {
alert(e);
$(this).parent().addClass("active");
});
});
For some reason, I can't make this to work although I do not see any errors.
I had a problem with another script in which I had to reference names by using '[id$=name]', because Master page name mangling creates that problem, but it doesn't seem to be the case here...
Could anyone help me see what is wrong here?
Thanks in advance
EDIT
Got the hover thing working, but now I can't make to seem the active class to stay in place after the page refresh (apparently, a default behaviour of ASP).
You need to do:
$('#menu') <-- note the # sign
in your selectors.... Otherwise it looks like it should work OK
API Reference: jQuery ID Selector
To address your edit:
Element state is not automatically preserved between page loads. The browser doesn't look for "the same element" and try to make it appear the same. If you want the menu to remain open, you need to persist some data (whether through postback data or (I would recommend) some browser side state saving (e.g. localStorage)) and handle it manually in your menu code
Oh....rereading your question I think it might be simpler than that....
On page load, you could do something like:
$('[href=' + window.location.path + ']').addClass('active');
the window.location.path would likely need some pre-processing before the selector though to handle extra url parameters and variations of the path (e.g. ./index.html and index.html) in the href. However, note the various types of matching available with the attribute selector...namely *=...might make your href matching a lot easier...but I'm not gonna write all your code =0D
API Reference: jQuery Attribute Selector
Your selector looks incorrect, looks like your missing the # which notes it's an ID. Should be:
$('#menu').find('a').click()
And a slightly different approach:
$('#menu a').click()

JQuery Mobile Widget not Formatting on Dynamic Content on Re-Visits

I have a single page jQuery Mobile app with four "data-role='pages'" in place; so, essentially, it's one HTML doc with four "pages."
Each "page" also has a navigation footer that I am populating dynamically through javascript. I defined a variable called "theFooter," and assigned all my empty footer divs (with classes of "footer") like so:
$('.footer').html(theFooter);
Now, in order to get this to work properly, I have to populate those footers PRIOR to the page being created, otherwise jQuery Mobile won't apply it framework to make the footer bar look like a mobile app nav bar.
So I achieve that through this:
$( "div[data-role='page']").live('pagebeforecreate', function (evt) {
console.log("BEFORE CREATE run."); //writes to my fireBug console to alert me that the 'page' has been run
$('.footer').html(theFooter);
});
It works like a dream, the first time around. Let's suppose the pages are "about," "contact," "mission," and "calendar"…
You click "about"… perfect.
You click "contact".. perfect.
You can do this for each of the "pages," and each time the "pagebeforecreate" is fired and the footer looks GREAT.
HOWEVER, if now you click on, say, "about" again (or any of the ones that you've already visited), the page transitions and the content is in place, but there is NO JQUERY MOBILE FORMATTING. And it is not firing the 'pagebeforecreate' function again, which makes sense, because it has already been created the first time.
I've tried working with 'pageinit' and 'pagebeforeshow' firings, but have gotten nowhere.
I have tried .trigger() and .page() methods… and got nowhere.
Can someone explain exactly how to make that JQuery Mobile formatting stick?
If you call .trigger('create') on the parent element of the widget you can enhance it's markup at any point in time:
$( "div[data-role='page']").live('pagebeforecreate', function (evt) {
console.log("BEFORE CREATE run."); //writes to my fireBug console to alert me that the 'page' has been run
$('.footer').html(theFooter).trigger('create');
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,height=device-height,user-scalable=no,initial-scale=1.0"/>
<link rel="stylesheet" href="jquery.mobile-1.0.1.css" />
<title> Hello World </title>
<script src="jquery.js"></script>
<script src="jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$('#omtList').html('<ul data-role="listview" data-split-icon="delete" data-split-theme="d"> <li><h3>Broken Bells</h3><p>Broken Bells</p>Purchase album </ul>').trigger('create');
});
</script>
</head>
<body>
omt
<div>
<div id="omtList">
</div><!--/content-primary -->
</body>
</html>

What is currently the best HTML/CSS/Javascript configuration?

I'm getting more into jQuery and so have set up a HTML/Javascript/CSS base site which I use for all my tests.
Since these tests will eventually turn into PHP and ASP.NET MVC websites, I want to use this opportunity to get the basics down right again for modern browsers and web standards before building the scripting languages on top of it.
I've selected to use:
XHTML 1.0 Strict
UTF-8 encoding
as few CSS references as possible (put everything in 1 CSS file for loading speed)
as few Javascript references as possible (1 javascript file plus the jquery code base reference - I assume using the Google jQuery code base is best practice for speed)
I check my code as I build it with the http://validator.w3.org
Is there anything else I need to consider?
Here is an example of one of my test websites:
index.htm:
<!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>Text XHTML Page</title>
<link href="css/main.css" rel="stylesheet" type="text/css" media="all"/>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="javascript/main.js"></script>
</head>
<body>
<h1 class="highlightTitle">Text</h1>
<p class="main">First</p>
<p>Second</p>
<p id="selected" class="regular">Third</p>
<p>Fourth</p>
<form action="">
<div>
<input type="button" value="highlight it" onclick="highlightIt();countThem()" />
<input type="button" value="highlight title" onclick="highlightTitle()" />
<p>here is another paragraph</p>
</div>
</form>
</body>
</html>
main.cs:
p.highlighted {
background-color:orange;
}
h1.highlightTitle {
background-color:yellow;
}
h1.deselected {
background-color:#eee;
}
p.regular {
font-weight: bold;
}
main.js:
google.load("jquery", "1.3.2");
function highlightIt() {
$('#selected')
.toggleClass('highlighted');
}
function countThem() {
alert("there are " + $("p.main").size() + " paragraphs");
}
function highlightTitle() {
$("h1").toggleClass("deselected");
}
Personally I would bind to the click event via jQuery to ensure nice separation, like this:
$("#yourId").bind("click", highlightIt);
This way you can bind to multiple event handlers. If you just use onclick AFAIK you can only ever use one handler.
BTW you can also use custom event and event namespaces:
$("#yourId").bind("beforeHighlighting", doSomething);
is triggered by
$("#yourId").trigger("beforeHighlighting");
and
$(".hasAHelptext").bind("helptext.click", showHelptextFct);
$(".hasAHelptext").bind("click", otherFct);
// will only remove the showHelptextFct event handler
$(".hasAHelptext").unbind("helptext.click");
HTH
Alex
Move the <script> blocks to the bottom of the page.
With regard to CSS and JS files in general, I wouldn't combine all JS files to a single file during development. It gets very hard to develop in one big JS file. Rather use a module that combines them on-the-fly or during deployment.
I usually go with (both CSS and JS):
one general file:
project.css
and one per page:
project_welcome.css
and any special components (login controls, ad area views etc) have a seperate one as well.
That way you can apply some organizing techniques and won't go crazy managing that single large file.
HTH
Alex
I would recommend putting the JS calls below the body tag. If your scripts are hanging, then the page can load and let the behavior (JS) load after the fact. I've noticed that speed greatly improves with this method.
Check this out: http://stevesouders.com/hpws/rule-js-bottom.php

Categories