Search jQuery

jQuery Forum

Using jQuery

yousefk

jQuery('#xx').html(html);

in Using jQuery • 11 years ago

Hi I'm trying to build a page dynamically when document is ready, but I got an empty page with the text "undefined"

$(document).ready(function () {

var html;

html += "<div data-role='page' id='home1' >";

html += "<div data-role='header' data-theme='a'>";

html += " <h1> page 1</h1>";

html += " <a href='Applications.aspx' data-icon='delete' class='ui-btn-right11'>Close</a>";

html += " </div>";

html += " <div data-role='content'> ";

html += " <div data-role='collapsible' >";

html += " <h3>Toolbar</h3>";

html += " <canvas id='AToolBarCanvas1' style='height: 248px;'></canvas>";

html += " </div>";

html += " <div><canvas id='AmainCanvas1' height=550 tabindex='12'></canvas></div> ";

html += " </div>";

html += " <div data-role='footer' data-position='fixed' data-id='pFooter11' data-theme='a'>";

html += " <a href='APlayerMobile.aspx' data-icon='info' class='ui-btn-Info11'>Info</a>";

html += " <a href='ApPlayerMobile.aspx' data-icon='gear' class='ui-btn-Setup11'>Setup</a>";

html += " <a href='#home' data-icon='grid' data-iconpos='left' class='ui-btn-Keyboard11'>Keyboard</a>";

html += " <div data-role='navbar' >";

html += " <ul>";

html += " <li><a href='#home' data-icon='home' data-iconpos='left' class='ui-btn-active11'>Home</a></li>";

html += " <li><a href='#home' data-icon='home' data-iconpos='left' class='ui-btn-active15'>Home1</a></li>";

html += " </ul>";

html += " </div>";

html += "</div>";

alert(html);

jQuery('#divData').html(html);

return false;

});

</script>

</body>

</html>

Replies(13)

jay.blanc..

Re: jQuery('#xx').html(html);

11 years ago

It will actually work but change the first line to var html = ''; to define the html variable

yousefk

Re: jQuery('#xx').html(html);

11 years ago

it does not work :(, it keep empty, I also tried:

jQuery('#divData').html('<div data-role="page" id="home11" >' +

' <div data-role="header" data-theme="a">' +

' <h1> page 1</h1>' +

' <a href="Applications.aspx" data-icon="delete" class="ui-btn-right11">Close</a>' +

' </div>' +

' <div data-role="content"> ' +

' <div data-role="collapsible" >' +

' <h3>Toolbar</h3>' +

' <canvas id="AToolBarCanvas1" style="height: 248px;"></canvas>' +

' </div>' +

' <div><canvas id="AmainCanvas1" height=550 tabindex="12"></canvas></div> ' +

' </div>' +

'</div>');

and also without + (simple one string line, nothing :(

FYI, if I do it hard coded as is, it works, mean that the text is OK:

<a href="Applications.aspx" data-icon="delete" class="ui-btn-right11">Close</a>

</div>

<h3>Toolbar</h3>

</div>

</div>

yousefk

Re: jQuery('#xx').html(html);

11 years ago

one more comments, when I try:

html += '<div id="home11" >';

html += ' <h1> page 1</h1>';

html += '</div>';

$('#divData').html(html);

it works!!!

Somehow the '<div data-role="page" id="home11" >' cause the problem!

Anyone have an idea why if I write it (hard coded) it works, but in runtime this not work? (seems like in runtime data-role="page" not defined!!!

dsvick

Re: jQuery('#xx').html(html);

11 years ago

What does your mark up look like? This fiddle works fine for me: http://jsfiddle.net/zaQ2h/

Of course I only have the one single element in the markup.

yousefk

Re: jQuery('#xx').html(html);

11 years ago

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

<body>

$(document).ready(function () {

var html = '';

//clear page

//jQuery('#divData').html(html);

//build the page

html += '<div data-role="page" id="home11" >';

html += ' <div data-role="header" data-theme="a">';

html += ' <h1> page 1</h1>';

html += ' </div>';

html += ' <div data-role="content"> ';

html += ' <div data-role="collapsible" >';

html += ' <h3>Toolbar</h3>';

html += ' <canvas id="AToolBarCanvas1"></canvas>';

html += ' </div>';

html += '</div>';

//alert(html);

$('#divData').replaceWith('<div>'+html+'</div>');// html(html);

return false;

});

</script>

</div>

</body>

</html>

yousefk

Re: Re: jQuery('#xx').html(html);

11 years ago

I tried:

$('#divData').html(html);

$('#divData').replaceWith(html');

nothing work!

dsvick

I cut and pasted your code in the post above and it worked fine on a test page. Do you maybe have some sort of conflict in one of the include files?

Try to run it with only the include needed for JQuery and see if it runs, if so then add the other include files back in one at a time and see which one breaks it.

yousefk

Re: Re: jQuery('#xx').html(html);

11 years ago

The problem was as you said: CONFLICT in the include JS.

TNX

yousefk

Re: jQuery('#xx').html(html);

11 years ago

hi,

it does not make science since when I do that in hard code it works fine, but I'll check that again. I past all the HTML file, does it works for you without using the test page?

Thanks anyway for your effort.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

<body>

$(document).ready(function () {

var html = '';

//clear page

//jQuery('#divData').html(html);

//build the page

html += '<div data-role="page" id="home11" >';

html += ' <div data-role="header" data-theme="a">';

html += ' <h1> page 1</h1>';

html += ' </div>';

html += ' <div data-role="content"> ';

html += ' <div data-role="collapsible" >';

html += ' <h3>Toolbar</h3>';

html += ' <canvas id="AToolBarCanvas1"></canvas>';

html += ' </div>';

html += '</div>';

//alert(html);

$('#divData').replaceWith('<div>'+html+'</div>');// html(html);

return false;

});

</script>

</div>

</body>

</html>

yousefk

Re: jQuery('#xx').html(html);

11 years ago

Hi, I find that when I remove the following :

it works, but without all the mobile UI.

What should I do ? :(

here my complete JS:

<link rel="stylesheet" href="Scripts/mobile/jquery.mobile.structure.min.css" />

<link rel="stylesheet" href="Scripts/mobile/jquery.mobile.min.css" />

yousefk

Re: jQuery('#xx').html(html);

11 years ago

Hi,

I think their is a bug, I took the code in: http://jquerymobile.com/demos/1.0/docs/about/getting-started.html

here:

<!DOCTYPE html> 
<html> 
	<head> 
	<title>My Page</title> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head> 
<body> 

<div data-role="page">

	<div data-role="header">
		<h1>My Title</h1>
	</div><!-- /header -->

	<div data-role="content">	
		<p>Hello world</p>		
	</div><!-- /content -->

</div><!-- /page -->

</body>
</html>

it works fine, then I try to build the same dynamically , but this not works at all!

Empty page!!!!!!!

here, not works:

<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
var html = '';
html += '<div data-role="page">';
html += '<div data-role="header">';
html += '<h1>My Title</h1>';
html += '</div>';
html += '<div data-role="content">';
html += '<p>Hello world</p> ';
html += '</div>';
html += '</div>';
jQuery('#divData').html(html);
return false;
});
</script>
<div id="divData">
</div>
</body>
</html>