I've been displaying the ajax loading message when loading a php file (especially when there's a chance it won't run instantly).
I've been doing the following:
$.mobile.showPageLoadingMsg ();
$('#phpDiv').load('file.php',function(){
$('#phpDiv').trigger('create');
});
$.mobile.hidePageLoadingMsg ();
"showPageLoadingMsg" will start to display the ajax loading message and "hidePage~" will close it. The stuff in the middle loads what the php file returns into a div, then creates DOM contents for it with the trigger('create') function.
// this will make sure the datebox closes when the dialog closes $(document).delegate('#closeButton', 'click', function() { $(".ui-datebox-container").hide(); $(".ui-datebox-screen").hide(); });
Make sure your #closeButton is the same as the button which closes the dialog.
This project is a modification of the TodoMVC (used to sample how a language is structured by making a To-Do list). It adds database support and ends up being a very cool To-Do list.
At first, I loaded all of my scripts in the header (even when the scripts weren't needed when the page was being loaded).
I found this website that partially explained how to load scripts when the page loads. However, Jquery Mobile needs to use the delegate function to load the script when a page is showing.
I copied the function from the website above:
function loadjscssfile(filename, filetype){ if (filetype=="js"){ //if filename is a external JavaScript file var fileref=document.createElement('script') fileref.setAttribute("type","text/javascript") fileref.setAttribute("src", filename) } else if (filetype=="css"){ //if filename is an external CSS file var fileref=document.createElement("link") fileref.setAttribute("rel", "stylesheet") fileref.setAttribute("type", "text/css") fileref.setAttribute("href", filename) } if (typeof fileref!="undefined") document.getElementsByTagName("head")[0].appendChild(fileref) }
Now, you need to add code to the top of the data-role="page" where you want the script to load:
Problem: In Jquery Mobile, I used the mobile.changePage (method) to switch pages. Now the button for the previous page is still blue.
Solution: Add Id's to the list items you'll be dealing with. Then use Jquery to remove the class "ui-btn-active" from the old button, and add the "ui-btn-active" class to the new button.
Here's the code: $('#listItem1').removeClass('ui-btn-active') $('#listItem2').addClass('ui-btn-active')
Problem: I had two different <script> (javascript) sections, and I was unable to pass a variable from one set of <script> tags to the other.
Turns out it doesn't have anything to do with the script tags, and I just needed to learn a bit more about scope in Javascript. Apparently global variables are a common thing (maybe still not a good practice?) and as long as a variable is used outside of a function.. You'll be able to access the variable anywhere on the page.
Solution: Take the variable outside of the function.
I spent a while looking for a good way to pass variables from HTML to Javascript (ajax) to PHP. Turns out Jquery’s serialize function is exactly what I needed.
Here’s an example of the code:
//this will send all the inputs in the form to php with ajax
$('#form').submit( function() {
var data = form.$('input').serialize();
$.ajax({
type: "POST",
url: "process.php",
data: data,
success: function(msg){
alert( "Your quote request has been submitted!" );
}
});
return false;
} );
