How to dynamically load a collapsible div with json return data?

Re: How to dynamically load a collapsible div with json return data?

10 years ago

1. Big yellow box, top of the page:

http://jquerymobile.com/demos/1.1.0/docs/api/events.html

2. Call .trigger("create") on the parent of your added content after you add it. This creates any widget objects that need to be created for the new content.

Tamunoemi..

Re: Re: How to dynamically load a collapsible div with json return data?

9 years ago

Hello Sir, I'm using your iscrollview, and i want to display scroll-able list of specific height say 30% in collapsible <div>.

This is what i have done.

<!DOCTYPE html>

<html>

<head>

<title>iScroll demo: custom scrollbar</title>

var myScroll,myScroll1;

function loaded() {

myScroll = new iScroll('wrapper', { scrollbarClass: 'myScrollbar' });

myScroll1 = new iScroll('wrapper1', { scrollbarClass: 'myScrollbar' });

}

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

document.addEventListener('DOMContentLoaded', loaded, false);

</script>

#wrapper {

display: block;

position:relative;

left: 0px;

width:100%;

height: 30%;

background:#aaa;

overflow:auto;

}

#wrapper1 {

display: block;

position:relative;

left: 0px;

width:100%;

height: 60%;

background:#aaa;

overflow:auto;

}

#scroller {

position:relative;

/*-webkit-touch-callout:none;*/

-webkit-tap-highlight-color:rgba(0,0,0,0);

float:left;

width:100%;

padding:0;

}

#scroller ul {

position:relative;

list-style:none;

padding:0;

margin:0;

width:100%;

text-align:left;

}

#scroller li {

padding:0 10px;

height:20px;

line-height:20px;

border-bottom:1px solid #ccc;

border-top:1px solid #fff;

background-color:#fafafa;

font-size:14px;

}

</style>

</head>

<body>

<h1>SPGIS EpiCollect</h1>

</div>

<h2>Which National Park?</h2>

<li>Pretty row 1</li>

<li>Pretty row 2</li>

<li>Pretty row 3</li>

<li>Pretty row 4</li>

<li>Pretty row 5</li>

<li>Pretty row 6</li>

<li>Pretty row 7</li>

<li>Pretty row 8</li>

<li>Pretty row 9</li>

<li>Pretty row 10</li>

<li>Pretty row 11</li>

<li>Pretty row 12</li>

<li>Pretty row 13</li>

<li>Pretty row 14</li>

<li>Pretty row 15</li>

<li>Pretty row 16</li>

<li>Pretty row 17</li>

<li>Pretty row 18</li>

<li>Pretty row 19</li>

<li>Pretty row 20</li>

<li>Pretty row 21</li>

<li>Pretty row 22</li>

<li>Pretty row 23</li>

<li>Pretty row 24</li>

<li>Pretty row 25</li>

<li>Pretty row 26</li>

<li>Pretty row 27</li>

<li>Pretty row 28</li>

<li>Pretty row 29</li>

<li>Pretty row 30</li>

<li>Pretty row 31</li>

<li>Pretty row 32</li>

<li>Pretty row 33</li>

<li>Pretty row 34</li>

<li>Pretty row 35</li>

<li>Pretty row 36</li>

<li>Pretty row 37</li>

<li>Pretty row 38</li>

<li>Pretty row 39</li>

<li>Pretty row 40</li>

</ul>

</div>

<h2>Create Site Form</h2>

</div>

</div>

</body>

</html>

applenoose

Re: How to dynamically load a collapsible div with json return data?

10 years ago

Hi - thanks for your speedy reply. So, when I change to 'pageinit' on the second line, it just endlessly produces the two rows from the db, one after another on the page. Not sure what you mean by .trigger("create") - as I mentioned, this stuff is very new to me and I APPRECIATE YOUR HELP when you have a sec:

.html:

<BR> Latest Blog Posts<BR>

</div>

javascript:

$(document).ready(function(){

$(document).bind('pageinit', function(){

var blog = $('#blog');

$.ajax({

url: 'myurl.php',

dataType: 'jsonp',

jsonp: 'jsoncallback',

timeout: 5000,

success: function(data, status){

$.each(data, function(i,item){

var blogpost = '<div data-role="collapsible" data-collapsed="true" data-content-them="f"><h4>'+item.title+'</h4>'

+ '<p>'+item.date+'<br>'

+ item.blog_text+'</p></div>';

blog.append(blogpost);

});

},

error: function(){

blog.text('We could not load your data, please try again.');

}

});

haga0054

Re: Re: How to dynamically load a collapsible div with json return data?

10 years ago

Don't use $(document).ready. Stop it you!

When you bind to pageinit this will run for every single page. So if you start at page 1, the pageinit code will execute. Go to page 2 from a link, pageinit code will execute, go to page 3... well you get the idea. You can specify a page you want to call this on. For example: if on page 2 initialization you want to add a new button you would do $('#page2').on('pageinit, function(e){ code });
For .trigger('create'); after you append a new collapsible div to your blog div, call trigger create. In your case change it to this: blog.append(blogpost).trigger('create');

applenoose

Re: How to dynamically load a collapsible div with json return data?

10 years ago

Haha - still in my rookie year! Thank you! Only problem I have now is it just keeps listing the two rows of the db, alternating, five times each?!? No clue....is this a php issue?

$(document).ready(function(){

$(document).bind('pageinit', function(){

var blog = $('#blog')

$.ajax({

url: 'myurl.php',

dataType: 'jsonp',

jsonp: 'jsoncallback',

timeout: 5000,

success: function(data, status){

$.each(data, function(i,item){

var blogpost = '<div data-role="collapsible" data-collapsed="true" data-content-them="f"><h4>'+item.title+'</h4>'

+ '<p>'+item.date+'<br>'

+ item.blog_text+'</p></div>';

blog.append(blogpost).trigger('create');

});

},

error: function(){

blog.text('We could not load your data, please try again.');

}

});

haga0054

Re: Re: How to dynamically load a collapsible div with json return data?

10 years ago

Can you show me an example? I am a bit confused. Even attaching a screen shot would be helpful.

p.s. I still see $(document).ready ()

applenoose

Re: How to dynamically load a collapsible div with json return data?

10 years ago

So if I change that top line to $(document).bind(), nothing loads to the page, but if I keep it as .ready, it loads. Of course, it is loading the same two rows over and over, but it is definitely not loading if I use .bind. Here are the complete files, I can not thank you enough. I've attached a screenshot at the bottom.

JS:

$(document).ready(function(){

$(document).bind('pageinit', function(){

var blog = $('#blog')

$.ajax({

url: 'http://www.ellasfashion.com/aaa/questionbank.php',

dataType: 'jsonp',

jsonp: 'jsoncallback',

timeout: 5000,

success: function(data, status){

$.each(data, function(i,item){

var blogpost = '<div data-role="collapsible" data-collapsed="true" data-content-them="f"><h4>'+item.title+'</h4>'

+ '<p>'+item.date+'<br>'

+ item.blog_text+'</p></div>';

blog.append(blogpost).trigger('create');

});

},

error: function(){

blog.text('We could not load your data, please try again.');

}

});

HTML:

<!DOCTYPE html>

<html>

<head>

setTimeout(function () {

var myScroll;

function loaded() {

myScroll = new iScroll('wrapper', {

hScrollbar: false,

vScrollbar: false,

checkDOMChange: false });

myScroll.refresh();

}, 100

});

document.addEventListener('DOMContentLoaded', loaded, false);

</script>

</head>

</div>

<BR> Latest Blog Posts<BR>

</div>

<ul>

<li><a href="contact.html" id="cell" data-icon="custom" data-transition="none" data-theme="b" data-prefetch>Contact</a></li>

</ul>

</div>

</div>

</body>

</html>

Attachments

photo copy.png
Size : 152.81 KB Downloads : 1636 Download

haga0054

Re: Re: How to dynamically load a collapsible div with json return data?

10 years ago

Replace all your js with this

$(document).on('pageinit', function(){
var blog = $('#blog');
$.ajax({
url: 'http://www.ellasfashion.com/aaa/questionbank.php',
dataType: 'jsonp',
jsonp: 'jsoncallback',
timeout: 5000,
success: function(data, status){
$.each(data, function(i, item){
var blogpost = '<div data-role="collapsible" data-collapsed="true" data-content-them="f"><h4>'+item.title+'</h4>'
+ '<p>'+item.date+'<br>'
+ item.blog_text+'</p></div>';
blog.append(blogpost).trigger('create');
});
},
error: function(){
blog.text('We could not load your data, please try again.');
}
});
});

This is the appropriate syntax. Let me know what happens.

Also, are you entering on this page? Or do you navigate from a different page?

EDIT: Also it looks like you are using JQuery 1.7.1 and JQuery Mobile 1.0.1. Those are not compatible! Either use JQ 1.6.4 with JQM 1.0.1 OR JQ 1.7.1 with JQM 1.1.0.

watusiware

Re: How to dynamically load a collapsible div with json return data?

10 years ago

I see you are using iScroll.

I'd suggest you try my iScroll plugin for jQuery Mobile:

https://github.com/watusi/jquery-mobile-iscrollview

You'll be here till the cows come home trying to get it to play nice with jQuery Mobile otherwise. ;)

applenoose

Re: How to dynamically load a collapsible div with json return data?

10 years ago

Watusiware - thank you, let me get past this one issue, thanks!

Haga0054: still produces 6 of each row in the db. There are only two rows in the db. Here are the files at this point, totally bizarre because I am not doing anything special with the SQL.

.php:

$sql = "SELECT id, title AS title, date AS date, summary AS summary, blog_text AS blog_text, author AS author FROM tpblog ORDER BY id";

$result = mysql_query($sql) or die ("Query error: " . mysql_error());

$records = array();

while($row = mysql_fetch_assoc($result)) {

$records[] = $row;

}

mysql_close($con);

echo $_GET['jsoncallback'] . '(' . json_encode($records) . ');';

?>

.html:

<!DOCTYPE html>

<html>

<head>

setTimeout(function () {

var myScroll;

function loaded() {

myScroll = new iScroll('wrapper', {

hScrollbar: false,

vScrollbar: false,

checkDOMChange: false });

myScroll.refresh();

}, 100

});

document.addEventListener('DOMContentLoaded', loaded, false);

</script>

</head>

</div>

<BR> Latest Blog Posts<BR>

</div>

<ul>

<li><a href="contact.html" id="cell" data-icon="custom" data-transition="none" data-theme="b" data-prefetch>Contact</a></li>

</ul>

</div>

</div>

</body>

</html>

Javascript:

$(document).on('pageinit', function(){

var blog = $('#blog');

$.ajax({

url: 'http://www.ellasfashion.com/aaa/questionbank.php',

dataType: 'jsonp',

jsonp: 'jsoncallback',

timeout: 5000,

success: function(data, status){

$.each(data, function(i, item){

var blogpost = '<div data-role="collapsible" data-collapsed="true" data-content-them="f"><h4>'+item.title+'</h4>'

+ '<p>'+item.date+'<br>'

+ item.blog_text+'</p></div>';

blog.append(blogpost).trigger('create');

});

},

error: function(){

blog.text('We could not load your data, please try again.');

}

});

watusiware

Re: How to dynamically load a collapsible div with json return data?

10 years ago

It's probably this:

$(document).on('pageinit', function()

You're running that function any time any page is initialized.

Use a selector for your page instead of $(document).

Jumping ahead, if you are going to use collapsable content inside of a scroller, you will need to call refresh() on the scroller every time a collapsible expands or collapses, because that changes the height of the content. (You could also try the experimental iScroll feature that polls for changes to the height.)

That might be something I can support in jquery.mobile.iscrollview in the future.

haga0054

Re: Re: How to dynamically load a collapsible div with json return data?

10 years ago

Exactly this - which is why I asked if you are navigating to that page from another. Everytime you initialize a new page, you are adding new content. So as Watusiware stated, you can change the syntax to this:

('#myPageId').on('pageinit', function(){....
....
...}

applenoose

Re: How to dynamically load a collapsible div with json return data?

10 years ago

Gents,

Thank you immensely. So, when I id my blog.html page as "blogpage", such as <div data-role="page" id="blogpage">

and in the load-json.js file, the first line is:

$('#blogpage').on('pageinit', function(){

...nothing loads on the blog.html page. If I change it back to (document), it again loads the rows 6 times each.

So, I am new to this, but gaining an understanding. Should I instead combine the load-json.js file into the header of the blog.html page?

And, I have the navigation to the blog.html page set from clicking on a button on a social.html page. Not sure if that matters though.

I've been using Freeman's Pro jQuery as my book of learning. Here is how the blog.html page is currently set up:

<!DOCTYPE html>

<html>

<head>

$('#blogpage').on('pageinit', function(){

var blog = $('#blog');

$.ajax({

url: 'http://www.ellasfashion.com/aaa/questionbank.php',

dataType: 'jsonp',

jsonp: 'jsoncallback',

timeout: 5000,

success: function(data, status){

$.each(data, function(i, item){

var blogpost = '<div data-role="collapsible" data-collapsed="true" data-content-them="f"><h4>'+item.title+'</h4>'

+ '<p>'+item.date+'<br>'

+ item.blog_text+'</p></div>';

blog.append(blogpost).trigger('create');

});

},

error: function(){

blog.text('We could not load your data, please try again.');

}

});

</script>

setTimeout(function () {

var myScroll;

function loaded() {

myScroll = new iScroll('wrapper', {

hScrollbar: false,

vScrollbar: false,

checkDOMChange: false });

myScroll.refresh();

}, 100

});

document.addEventListener('DOMContentLoaded', loaded, false);

</script>

</head>

</div>

<BR> Latest Blog Posts<BR>

</div>

<ul>

<li><a href="contact.html" id="cell" data-icon="custom" data-transition="none" data-theme="b" data-prefetch>Contact</a></li>

</ul>

</div>

</div>

</body>

</html>

Thanks!

Craig

haga0054

Re: How to dynamically load a collapsible div with json return data?

10 years ago

A few things for you here:

A fiddle to help picture the initialization process. http://jsfiddle.net/H93KS/. Notice the document is initialized every time a new page is visited, but the others are only triggered when that certain page is initialized.
It looks to me that you are using multiple pages here. I am a bit confused about how you have everything set up. Is there a way I can see this page? If not can you perhaps explain HOW you get to the page. For example: I have 1 document, myPages.html and inside the user enters at page 1 goes to page 2 clicks on blogs and that's where the information is.
Have you tried to debug your JavaScript? Try to debug and see why it might not be getting triggered.
When you say it isn't working it leads me to believe there is a problem somewhere else. Usually this means the JavaScript isn't getting executed because it might be in the wrong spot. If you go to the blog site and hit refresh does it show up?

applenoose

Re: How to dynamically load a collapsible div with json return data?

10 years ago

Hi - I have not debugged as yet, but will. This stuff is all new to me, so I am not working within an *optimized* environment. So, here is the flow.

I have a page, social.html. This page has three list view links, one of which is link to blog.html:

<!DOCTYPE html>

<html>

<head>

var myScroll;

function loaded() {

setTimeout(function () {

myScroll = new iScroll('wrapper');

}, 100);

}

window.addEventListener('load', loaded, false);

</script>

function progress() {

$('body').append('<div id="progress">LOADING</div>');

}

</script>

</head>

<body>

</div>

<li><a href="twitter.html" data-transition="none" rel="external">Twitter</a></li>

<li><a href="rss.html" data-prefetch data-transition="none" rel="external">Industry News</a></li>

</ul>

<p>Check back here to review important update

for your Continuing Education, Pre-Licensing,

Webinar and industry focused commentary.</p>

</div>

</div>

<ul>

<li><a href="contact.html" id="cell" data-icon="custom" data-transition="none" data-theme="b" data-prefetch>Contact</a></li>

</ul>

</div>

</div>

</body>

</html>

Then, I have the blog.html file (last post) which has the load-json.js now in the header.

applenoose

Re: How to dynamically load a collapsible div with json return data?

10 years ago

THINK I GOT IT:

$(document).delegate('#blogpage','pageinit', function(){ ....

that seems to have done the trick and is only loading each row one time!

I will test some more, and thanks a zillion for the kind help.

Craig

Response title

Attachments

jQuery Forum