Jquery Mobile - Close Jqm-Datebox When Dialog Closes
// 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.
TodoMVC with MySQL Database
https://github.com/bartcc/app.todosThis 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.
Good Jquery Mobile Blog Post
Just got finished reading the following blog post: http://roughlybrilliant.com/jquery_mobile_best_practices#0bMost of it's obvious, but it's definitely on my list of good blog posts for Jquery Mobile beginners.
Reminds me how Jquery Mobile needs an official "Best Practices" document.
Loading Scripts Dynamically In Jquery Mobile
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:$(document).delegate('#page', 'pageshow', function() {
loadjscssfile("your.css", "css")
loadjscssfile("your.js", "js")});Best Jquery Calendar Plugin
FullCalendar can be found here: http://arshaw.com/fullcalendar/
I thought it looked the best and had the most API functions out of the HTML5 calendars I saw.
Jquery Add/Remove Class
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')
Global Variables In Javascript
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.
Jquery Serialize
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;
} );
http://api.jquery.com/serialize/
Also, you can use serializeArray() to get the data in a better format. Here’s a picture of the console.log output: 
Older Newer