Tuesday, June 26, 2012

Write To Closest Div (with certain class)

The following code makes it so I don't have to mention specifically what page needs to load before a script runs. This is good for having the same function on several different pages in Jquery Mobile.

var pageId = $(this).closest('div.diagramPage').attr('id');

$(document).delegate(pageId, 'pageshow', function() { }

I included the class because I don't want to end up moving code around and having it write to a different div.

Monday, June 18, 2012

Fixing: "The requested URL /jquery-1.6.3.min.js was not found on this server."

In Wordpress, the following is the error message that occurs at the top of the page:

Not Found

The requested URL /jquery-1.6.3.min.js was not found on this server.

www.4llw4d.freefilesblog.com


I fixed this error by editing the all-in-one SEO plugin's code (all_in_one_seo_pack.php). I'm pretty sure the following part of the code is the culprit:

 $url = "http://www.4llw4d.freefilesblog.com/jquery-1.6.3.min.js"; 
 $ch = curl_init();  
 $timeout = 5;  
 curl_setopt($ch,CURLOPT_URL,$url); 
 curl_setopt($ch,CURLOPT_RETURNTRANSFER,1); 
 curl_setopt($ch,CURLOPT_CONNECTTIMEOUT,$timeout); 
 $data = curl_exec($ch);  
 curl_close($ch); 
 echo "$data";
}

I tried changing it to something else, like: http://code.jquery.com/jquery-1.6.3.min.js However, it just prints the entire contents onto the page.

The solution: Switch from the Pro 1.72 version of All-In-One SEO to the newest unpaid version.

Jquery Mobile - Display Loading Message

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.

Thursday, June 14, 2012

Best Jquery Mobile Datebox Plugin

The currently reigning champion of datebox plugins for Jquery Mobile: http://dev.jtsage.com/jQM-DateBox/

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.

Wednesday, June 13, 2012

TodoMVC with MySQL Database

https://github.com/bartcc/app.todos

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.

Good Jquery Mobile Blog Post

Just got finished reading the following blog post: http://roughlybrilliant.com/jquery_mobile_best_practices#0b

Most 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.

Monday, June 11, 2012

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")
});

Tuesday, June 5, 2012

Best Jquery Calendar Plugin

FullCalendar
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: