Databases
StackOverflow2013
Postsdbo
POUsing jquery mobile ajax- my calender only appears after i refresh page?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POUsing jquery mobile ajax- my calender only appears after i refresh page?
    text
    copied!<p>Didn't know how to word the question but when i move from my index page to my events.html page using jquery mobile, my calender does not appear until i press the refresh button on the browser. Does anyone know what i might be missing, Im sure its to do with the ajax call from the other page</p> <pre><code> &lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no" /&gt; &lt;meta name="apple-mobile-web-app-capable" content="yes" /&gt; &lt;meta name="apple-mobile-web-app-status-bar-style" content="black" /&gt; &lt;title&gt; &lt;/title&gt; &lt;link rel="stylesheet" href="https://s3.amazonaws.com/codiqa-cdn/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /&gt; &lt;link rel="stylesheet" href="css/my.css" /&gt; &lt;script src="https://s3.amazonaws.com/codiqa-cdn/jquery-1.7.2.min.js"&gt; &lt;/script&gt; &lt;script src="https://s3.amazonaws.com/codiqa-cdn/mobile/1.2.0/jquery.mobile-1.2.0.min.js"&gt; &lt;/script&gt; &lt;!--added for calendar--&gt; &lt;link rel="stylesheet" type="text/css" href="../css/mdp.css"&gt; &lt;link rel="stylesheet" type="text/css" href="../css/prettify.css"&gt; &lt;script type="text/javascript" src="../js/prettify.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="../js/lang-css.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(function() { prettyPrint(); }); &lt;/script&gt; &lt;script type="text/javascript" src="../js/jquery.ui.core.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="../js/jquery.ui.datepicker.js"&gt;&lt;/script&gt; &lt;!-- loads mdp --&gt; &lt;script type="text/javascript" src="../jquery-ui.multidatespicker.js"&gt;&lt;/script&gt; &lt;!-- mdp demo code --&gt; &lt;script type="text/javascript"&gt; &lt;!-- var latestMDPver = $.ui.multiDatesPicker.version; var lastMDPupdate = '2012-03-28'; $(function() { $('.mdp-version').text('v' + latestMDPver); $('#mdp-title').attr('title', 'last update: ' + lastMDPupdate); $('#with-altField').multiDatesPicker({ altField: '#altField' }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div data-role="page" id="index"&gt; &lt;div data-theme="a" data-role="header"&gt; &lt;h3&gt; Create Event &lt;/h3&gt; &lt;/div&gt; &lt;div data-role="content"&gt; &lt;form id="newevent" &gt; &lt;div data-role="fieldcontain"&gt; &lt;fieldset data-role="controlgroup"&gt; &lt;label for="textinput1"&gt; Event &lt;/label&gt; &lt;input name="" id="textinput1" placeholder="" value="" type="text" /&gt; &lt;/fieldset&gt; &lt;/div&gt; &lt;div data-role="fieldcontain"&gt; &lt;fieldset data-role="controlgroup"&gt; &lt;label for="textarea1"&gt; About &lt;/label&gt; &lt;textarea name="" id="textarea1" placeholder=""&gt; &lt;/textarea&gt; &lt;/fieldset&gt; &lt;/div&gt; &lt;div id="with-altField"&gt;&lt;/div&gt; &lt;input type="hidden" id="altField" name="dates"&gt; &lt;input value="Submit" type="submit" /&gt; &lt;/form&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; </code></pre> <p>The calender appears here once i refresh</p> <pre><code>&lt;div id="with-altField"&gt;&lt;/div&gt; </code></pre> <p>This is the page will calls the above content </p> <pre><code>&lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no" /&gt; &lt;meta name="apple-mobile-web-app-capable" content="yes" /&gt; &lt;meta name="apple-mobile-web-app-status-bar-style" content="black" /&gt; &lt;title&gt; &lt;/title&gt; &lt;link rel="stylesheet" href="https://s3.amazonaws.com/codiqa-cdn/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /&gt; &lt;link rel="stylesheet" href="css/my.css" /&gt; &lt;script src="https://s3.amazonaws.com/codiqa-cdn/jquery-1.7.2.min.js"&gt; &lt;/script&gt; &lt;script src="https://s3.amazonaws.com/codiqa-cdn/mobile/1.2.0/jquery.mobile-1.2.0.min.js"&gt; &lt;/script&gt; &lt;script&gt; function id1() { $.ajax({ type: 'POST', cache: false, url: 'some.php', dataType: 'json', success: function(data) { console.log(data.key); // Outputs "value" console.log(data.key2); // Outputs "value2" } }); return false; } &lt;/script&gt; &lt;/head&gt; &lt;body onload="id1()"&gt; &lt;div data-role="page" id="index"&gt; &lt;div data-theme="a" data-role="header"&gt; &lt;h3&gt; Options &lt;/h3&gt; &lt;/div&gt; &lt;div data-role="content"&gt; &lt;ul data-role="listview" data-divider-theme="b" data-inset="true"&gt; &lt;li data-role="list-divider" role="heading"&gt; Menu &lt;/li&gt; &lt;li data-theme="c"&gt; &lt;a href="event.html" data-transition="slide"&gt; Create Event &lt;/a&gt; &lt;/li&gt; &lt;li data-theme="c"&gt; &lt;a href="#page1" data-transition="slide"&gt; Check Events &lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>How i got it working added script inside content</p> <pre><code> &lt;div id="content"&gt;&lt;/div&gt; &lt;script&gt; $(function(){ $("#content").load(("new-event.php"), function(){ // $('#content').load($('new-event.php').attr('href'), function () { $('#content').trigger("create"); }).trigger("create"); return false; }); &lt;/script&gt; rest of code and other scripts &lt;div&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload