Paul's Programming Notes     Archive     Feed     Github

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

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')