I am using jquery address plugin for loading pages, but without hash(#).
index.html:
<a href="page.html">Link</a>
<div id="content">
<script>
$(document).ready(function() {
$.address.init(function(event) {
$('a').address();
}).change(function(event) {
// do something depending on the event.value property, e.g.
console.log(event.value);
$.ajax({
type: "POST",
url: event.value,
success: function(msg){
$('#content').html( $(msg).find("#content").html() );
}
});
});
$('a').click(function(e) {
$.address.value($(this).attr('href'));
});
});
</script>
</div>
page.html:
<div id="content">
<p>text</p>
<script>
$(document).ready(function() {
alert('loaded');
});
</script>
</div>
In #content div will be loaded #content html from page.html(maybe i should use other function, not .html(), correct me please), in that div is script tag, but i dont get alert when that page is loaded from ajax, it works on without ajax loading. Can someone help me ?
EDIT: I am getting this error when i'm trying to click on link with js function:
XMLHttpRequest cannot load javascript:;. Cross origin requests are only supported for HTTP.
DEMO: http://fbstatusi.com/desavanja/kalendar/mesecna_lista
click on link Zurka 123
document.ready
happens only once, when document is loaded. AJAX request does not cause it.
<div id="content">
<p>text</p>
<script type="text/javascript">
alert('loaded');
</script>
</div>
This should work.
Also try to change $(msg).find("#content").html()
to $(msg).find("#content")[0].innerHTML
, as jquery html strips out tags.
EDIT
Take a look at this thread there is a long discussion about why that happens. In case like this $(msg)
jquery will always remove script tags. But at the same time $(msg).filter("script")
returns scripts, so you can find those scripts first and then insert them all after $('#content').html( $(msg).find("#content").html() );