AJAX problems

Hey all. I’ve been running into a ton of problems lately because I’m developing a site that’s completely AJAX-driven. For example, instead of linking from mydomain.com/page1.html to mydomain.com/page.html, it instead does mydomain.com/#!/page1.html to mydomain.com/#!/page2.html. So here are the problems I’m having:

Problem 1: dynamically loading css and js.

Doing something like

[code=html]$(‘#mydiv’).load(‘page2.html’)[/code]

is great and all. But it doesn’t load in page2.html’s js and css. This is indeed fixable by using simple javascript such as

[code=html]
function loadjscssfile(filename, filetype){
var fileref=document.createElement(‘script’)
fileref.setAttribute(“type”,”text/javascript”)
fileref.setAttribute(“src”, filename)
}
[/code]

which I would run when clicking the link for page2 like so:

[code=html]
<a href=”#!/page2.html” onclick=”loadjscssfile(‘http://mydomain.com/page2.js’, ‘js’);”>link</a>
[/code]

however, the problem arises if I were to give my friend the link [url]http://mydomain.com/#!/page2.html[/url]. It would load the page just fine, but it doesn’t know what javascript files to load.

Problem 2: delegating handlers to future, not-currently-existing elements.

Let’s say I want to use a jQuery date picker. It’s usually quite simple, because I would just have something like this:

[code=html]
$(function() {
$(“#datepicker”).datepicker({dateFormat: ‘yy-mm-dd’, changeMonth: true, changeYear: true});
});
[/code]

however, #datepicker doesn’t exist until page2.html loads. The only thing I’ve been able to get working is:

[code=html]
$(‘#datepicker’).live(‘click’, function() { $(“#datepicker”).datepicker({dateFormat: ‘yy-mm-dd’, changeMonth: true, changeYear: true});
});
[/code]

but as I understand it, .live has been deprecated as of a few years ago. Now the recommended function is .on or .delegate. However, none of these has worked out for me. According to the documentation, the above is supposed to be the same as

[code=html]
$(document).delegate(“#datepicker”, “click”, function(){ $(“#datepicker”).datepicker({dateFormat: ‘yy-mm-dd’, changeMonth: true, changeYear: true}); }); // jQuery 1.4.3+
[/code]

or

[code=html]
$(document).on(“click”, “#datepicker”, function(){ $(“#datepicker”).datepicker({dateFormat: ‘yy-mm-dd’, changeMonth: true, changeYear: true}); }); // jQuery 1.7+
[/code]

but as of yet I haven’t been able to get any of those 2 to work. Any sort of advice to any of these questions would be greatly appreciated.

Also in #JavaScript _↴