Using jQuery 1.4 I've come across an issue with external JS in an ajax response being removed when accessing it using html().
I'm creating an endless scrolling effect for a tumblr theme using an ajax request to load the next page. Tumblr outputs JS in audio and slideshow posts to render <embed> elements (Flash players) to show the content. The markup cannot be changed.
Everything works fine using jQuery 1.3.2, the external JS is executed and renders the players, however in 1.4 the javascript is removed and I'm left with the fallback text. The JS is included in the response, but when using html() within the ajax callback I can't retrieve or get the javascript to execute.
I want to use jQuery 1.4 because I'm using some of it's new features in other parts, I can get it to work using split but I'm not sure how reliable it is to split the response on a specific string.
I've prepared a basic sample (includes 2 files, test.html & request.html) demonstrating the issue. Open test.html to load a local request from request.html
Is this behaviour deliberate, can I get around it, or am I just doing it wrong?
From the jQuery docs on .ajax():
If html is specified, any embedded
JavaScript inside the retrieved data
is executed before the HTML is
returned as a string. Similarly,
script will execute the JavaScript
that is pulled back from the server,
then return the script itself as
textual data.
I'm not finding any way around it... But it seems to be behaving different from 1.3.2 and the "1.3-compat" plugin doesn't seem to fix it either.
This looks like a bug in 1.4 to me—I get the same results using your sample code; switching back to 1.3.2 allows the embedded scripts to execute again.
The documentation certainly doesn't mention anything about any changes in 1.4 which prevent the execution of scripts in retrieved HTML. I'd post a question at the jQuery forum and see if anyone else is having the problem; you might get the attention of one of the jQuery devs too.
Related
I'm trying to scrape the following page using hQuery: http://www.oddsportal.com/search/Paris+SG/soccer/
I realised half way that the odds of each game are included using JS (before, it's just -). Is there any way to get the page after the javascript has been executed or should I find another website??
My guess is that you would have to use another browser (not hQuery) and look into the code and see if there are any events that are emitted that you can catch up on.
You cannot using PHP
Scraping a site gives you whatever the server responds with to the HTTP request that you make (from which the "initial" state of the DOM tree is derived, if that content is HTML). It cannot take into account the "current" state of the DOM after it has been modified by Javascript.
You can using other powerful tools like selenium
You would need PhantomJs PHP wrapper for that is easy to use and gives more control and features, please see my answer here
Scraping a dynamically loading website with php curl
Hope it helps
trying to use document.getElementById() in jsreport using the scripts section on the left menu, but it reports back
Error occured - Error during rendering report: document is not defined
What gives? This is simple JavaScript to target a particular ID.
Scripts that are included as part of the report generation request rather than inline with the template do not contain document or any other objects generated by the browser.
If you are trying to use Javascript to modify the document, you are almost certainly doing something wrong. It's not meant to generate interactive content, so your template and data should already be fixed by the time you send the request. You can probably work around this with require.js, but why would you? If you are really generating a report, you can do everything ahead of time before you ever request output.
The problem is asynchronous related. the document.getElementById must come after the the element you want to target is built. So putting the script at the bottom of the page fixes the issue.
I have problem to get .load() function working in Wordpress. Initially I was using 3.0.5 version of WP, wanted to get some content from external page (same domain), so I used this code
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery(".someclass").load("http://www.mydomain.com #someid");
});
...and it worked. However, after update of Wordpress to latest version (and installation of plugins /some use jquery or mootools/, this piece of code isnt pulling any content anymore. I tried to write different code for noConflict mode but also without success (but JS is working if I change line to some alert func). I also deactivated all plugins, removed other js (like for menu), but still no content was displayed. If I use same code in a separate file (in the same directory where WP theme is) - it works.
I would be thankful if someone have advice what to try next or where to look for potential problem. Or maybe to suggest some other approach how to get content from external page (and specific div). If I put that separate file into iframe and call it within sidebar, it's working but then there's a problem of iframe links opening within iframe box.
Your problem is the same origin policy, which in lamens terms means you can't do ajax requests to different domains (even subdomains) as it is security risk, you browser simply won't let you do it. Specifically in your case you are attempting to load www.infostar.rs from inforstar.rs.
You will need to come up with another idea, personally I would just do it in PHP with:
echo file_get_contents('http://domain.com');
Alternatively would could look into forcing non-www in htaccess.
I am new to dojo and somewhat new to symfony as well and am having a wee problem here: I want to reload a part of my page using Ajax but it includes a Javascript which needs to be executed. This isn't reallly a problem in prototype or Jquery but I just can't figure it out in dojo. (I need to use dojo because it's a part of symfony and already in heavy use on the page I'm supposed to modify. I also know this is probably improped technique but it's just a little mod I need to do and this would be the easiest way ...)
Can you help??
Thanks,
thomas
You can do it by using dojo's require tool
For more information regarding this, take a look at the documentation
dojo.require("my.path.to.file", false, true);
Call this when you want to load the javascript file, mostly after the ajax request is complete. So that if this javascript is to alter/perform some operations on the ajax loaded content placed into DOM, you won't get NOT_FOUND dom exception.
I am trying to building a XSS widget and am having issues with Webkit browsers loading the external javascript files which I am appending into the dom. It works as below:
Widget.js appends 3 javascript files into the dom (jquery, data, content)
Jquery.js is standard jquery with a custom namespace
Data.js is a javascript array
Content.js is a set of jQuery instructions to build the widget based off the data in Data.js
In firefox the browser does exactly 100% of the time what im telling it and the widget loads where ever you placed the include javascript on the page.
However in Webkit ie Safari, the browser returns the 3 files in a random order, and executes once returned. This means that when Content.js looks for $ to do jquery magic it fails. Likewise if jQuery is available and it loads the data late if fails due to lack of data.
Suggestions please?
The best way to do this is to just concatenate the files on the server--that way you go from making 3 http requests to one, and the scripts are parsed and executed together.
If you can't do that, do you have to add the script tags by appending them to the dom? If you just added them in HTML, it should work:
<script src="widget.js"></script>
<script src="jquery.js"></script>
<!--etc -->