I have a issue:
while i call a inline script (wich uses jQuery too) from another page with ajax - it seems, that jQuery is no more defined (?), and I cannot use any of jQuery functions, that should be applied (according to inline script) to content.
It's basically a news list, which holds links to particular news items. I prefer using inline-script at this time, because I won't need this functionality elsewhere.
$.ajax({
url: href,
cache: false,
success: function(html){
$('#fancy_ajax').append($(html).find('.mainContentPadded'));
}
});
As you can see, I'm simply calling a part of another page and appending its contents to page.
When I load full page (not the part of it) - jQuery works as expected (that's why I came across the idea, that it needs to be "rebinded").
Thank you!
I have a issue:
while i call a inline script (wich uses jQuery too) from another page with ajax - it seems, that jQuery is no more defined (?), and I cannot use any of jQuery functions, that should be applied (according to inline script) to content.
It's basically a news list, which holds links to particular news items. I prefer using inline-script at this time, because I won't need this functionality elsewhere.
$.ajax({
url: href,
cache: false,
success: function(html){
$('#fancy_ajax').append($(html).find('.mainContentPadded'));
}
});
As you can see, I'm simply calling a part of another page and appending its contents to page.
When I load full page (not the part of it) - jQuery works as expected (that's why I came across the idea, that it needs to be "rebinded").
Thank you!
Share Improve this question asked Jan 29, 2010 at 14:25 Kristaps KarlsonsKristaps Karlsons 4821 gold badge7 silver badges22 bronze badges 2- 2 What error messages are you getting? – Matchu Commented Jan 29, 2010 at 14:27
- Actually, I'm currenty testing with onClick (which calls a function, that is defined in inline javascript) - and it turns out that my function is not defined. Also - inline javascript is not visible, when I inspect the current portion of page with FireBug. – Kristaps Karlsons Commented Jan 29, 2010 at 14:45
2 Answers
Reset to default 2So if I understand your question correctly you have some JavaScript contained within the html variable ? If so it will not work, because JavaScript that is retrieved from an AJAX hit is not executed by the browser due to security risks.
I remend you include the necessary javascript code in your page that is initiating the the Ajax request so that it is already available when you append the new content.
*edit...
monksp added a great link as a ment that shows how to have jQuery do exactly what you want.
Here's also some code to do the same but manually:
<html>
<head>
<title>Test JavaScript JSON</title>
</head>
<script src="https://www.google./jsapi"></script>
<script>
google.load('jquery', '1.3.2');
</script>
<body>
<script type="text/javascript">
$(document).ready(function() {
$.getJSON('testjs.json', function(json){
$(document.body).append(json.html);
eval(json.js);
});
});
</script>
</body>
</html>
Here's the content of testjs.json:
{"html":"<p class=\"newelement\">Click me</p>","js":"$(\".newelement\").click(function() { alert($(this).text()); });"}
And finally there are a bunch of existings plugins and other things to include javascript dynamically. I used YUI Get in the past: http://developer.yahoo./yui/3/get/
I'm confused by the question, I think. The bit of javascript that you have posted, is that loaded into the page via ajax? Like, you load the page in a browser, then something happens and that javascript gets loaded into the page? That won't work, because any javascript that gets loaded that way won't get executed.
I'd remend loading it in the originating page's javascript if possible. If not, you could take the results of the ajax request, and walk through it looking for script tags, and eval() their contents as part of your success function. It's not really efficient (or super safe, make sure you absolutely trust where the loaded contents is ing from), but it'll get the job done.