Modifying Javascript to run after AJAX load - javascript

I am using a little javascript thingy (app?) from http://code.google.com/p/tumblrbadge/ to load my most recent tumblog post into my webpage. However, when I load the 'tumblr' section with AJAX using Jquery, the script does not get executed. I understand why this is and that I need to include the javascript file in the and execute it after the AJAX load is complete. My problem is this: I do not fully understand the tumblrbadge code and, when I include the script in the and call tumblrBadge() after loading, it does not run. How must I modify the tumblrbadge code to allow it to be run on demand from the ?
All of this is hosted at http://jquerytest.webs.com

It looks like your problem is that the script tags within the tumblr section of your site are not being executed. When you insert html into a page using ajax, you have to parse out the contents of any script tags and execute them separately.
After the content of the tumblr tab is inserted in your page, get all of its script tags with $("#contentOfTumblrTab script") and evaluate their innerHTML using eval().

Try $(window).onload instead of $(document).ready.

Related

How to load content with AJAX that contains a script?

So I am working on a website trying to use jquery/ajax to load content into the home page. Current test site is [http://newconstructionflorida.net] the home & about me page work without any issue, however the property search link does not load.
The content/property-search.php file I am trying to load contains a script:
<script src="//idx.diversesolutions.com/scripts/controls/Remote-Frame.aspx?MasterAccountID=115580&SearchSetupID=143&LinkID=0&Height=2000"></script>
What am I missing to be able to get this script to execute when loaded via AJAX? If I insert it into the home page directly it works without issue so it must be related to the jquery/ajax.
Loading .js scripts via ajax is not a good idea since .js scripts functionality is always bound to the loaded HTML DOM and my not work properly if loaded asynchronously via ajax after the DOM is fully loaded.
What you can do is loading the script once the ajax response is completely received using javascript functions like getScript() or .append().
See this answer here on how to use javascript to append an external script to your page:

Reload page without <script> tags

I need to render a page without executing it's JavaScript (however inject my own script), showing the user how the page would look from a bot's POV.
So far I have thought of loading the page using ajax, removing all <script></script> tags from the loaded data, injecting my own <script></script> tags and replacing page html with the filtered data.
Are there any better ways of achieving this?
Maybe not a better way, but an alternative to using javascript to do what you want:
You can write a (php) server-side script, use file_get_contents() to get the original page contents, use php to remove and replace javascript page contents (str_replace, substr_replace, preg_match) then call this php script in an iframe.
See my related answer for more detail: https://stackoverflow.com/a/17262334/888177
<meta http-equiv="refresh" content="5; url=http://example.com/">
Meta refresh.
EDIT:
So, here's something you can do:
Check out this jquery plugin called fancybox.
What it does is, load remote url content into a neat popup div on the page. You can check if you can modify it's code to make it work how you want.
Also quick headsup: bots don't have cookies as well. So, stripping just script tags won't do. Also have to disable cookies in the request.

jQuery load function modified to include relevant scripts

Ive been playing with the load, get, ajax and get scripts function.
The most appropriate to the majority of function where I intend to load in content on a page would be the load function. It is a simple and effective way of getting the relevant content from an associate page.
But since it does not include scripts and the new content does not respond to the pages ready. functions I was wondering if there was a simple enhancement we could make that would allow the scripts of the page to be refreshed to include loaded content.
Something like
function loadall(url,container){
$(container).load(url);
scritps.reset();
}
What would be the way of doing this.

How to load a script file and execute it?

I have feedburner script which displays feeds, it looks like this:
<script src="http://feeds.feedburner.com/cnn/HIkg?format=sigpro" type="text/javascript" ></script>
I want to load this script which is on a different html page, so basically I'm loading html file with this script in it using:
$('#' + items[i]).load('content/' + items[i] + '.html');
This piece of code does load the html page but the script is not executed(working). How do I get the script to work once loaded?
According to the documentation :
Script Execution
When calling .load() using a URL without a suffixed
selector expression, the content is passed to .html() prior to scripts
being removed. This executes the script blocks before they are
discarded. If .load() is called with a selector expression appended to
the URL, however, the scripts are stripped out prior to the DOM being
updated, and thus are not executed.
If your url is just a plain url without a selector specified than the script should execute before it is removed.
Check the value of items[i] and check if it is a plain url without a selector or not.
If the url looks fine, you might be running into a cross-side scripting issue. The documentation also mentions:
Due to browser security restrictions, most "Ajax" requests are subject
to the same origin policy; the request can not successfully retrieve
data from a different domain, subdomain, or protocol.
If possible though I still would recommend for any script to be in an external file as that is good practice and doesn't clutter the html. Then you can use .getScript() as recommended by Raminson.
You can use the $.getScript() utility function:
Load a JavaScript file from the server using a GET HTTP request, then execute it.
$.getScript("/test.js")

Include OpenX ad in a jquery-ui dialog?

I'm loading some content into a jquery-ui dialog via .ajax. That's all working fine but now I've been given an OpenX ad to embed into the dialog & can't figure out how to do it. I know all the script is stripped when coming in via ajax, & I know how to use $.getScript to load .js files for use in the dialog, but the OpenX ad script I've got uses document.write so I think it's expecting to be embedded inline into the desired position on the page.
I've tried appending the escaped script string into the div on ajax success of the main content as below, but this results in the page being redirected to a page with just the ad on it.
Attempt shown below:
$("#" + idHelpPage).find(".adScript").append("<script type='text/javascript'>var m3_u = (location.protocol=='https:'?'https://d1.openx.org/ajs.php':'http://d1.openx.org/ajs.php');var m3_r = ... etc etc
I'm ok with jquery but not great with javascript, would really appreciate any help! Also if you want to see any other code.
Certainly this question was asked quite some time ago; however, the openX ajs.php file returns a document.write() function. If you use jQuery's $(document).ready() class method, it will overwrite your current page.
document.write() will only correctly execute (without overwriting your current page) if it is called during the page load procedure.
There's two ways to overcome this obstacle, and that would entail using AJAX (if your openX server is on the same URL domain as your website, or if you have server side scripting such as PHP, ASP, etc) or JSONP (if your openX server is on a different domain).
You'll have to setup a server side script with PHP, ASP, etc to have your jQuery call using AJAX/JSONP and have that server script load in the URL and return the contents of the document.write() function that the ajs.php file returns.

Categories