Paul's Programming Notes     Archive     Feed     Github

Sisyphus.js

I'm really impressed with sisyphus.js and its usage of HTML5 localStorage. It makes it so users won't need to re-enter data into a form when they close the window.

It's super easy to implement, you only need to include the following in your header:

<script type="text/javascript" src="sisyphus.min.js"></script>

And, you will need to activate it on the form you want to save with something like this:
$('form').sisyphus();

Source:  http://simsalabim.github.com/sisyphus/

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.

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.

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.

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