Loading Scripts Dynamically In Jquery Mobile

11 Jun 2012 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

05 Jun 2012

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

05 Jun 2012 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

05 Jun 2012 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

05 Jun 2012

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