Ajax and external JS scripts - javascript

Have the issue here when I dynamically load a php page the external JS file linked into that PHP pages doesn't seem to take effect. There is know JS code in the HTML file to call functions, the JS files does all the work by modifying certain tags.
HTML page will load the PHP file which is linked to the JS script. Relevant code below.
This does work if loaded directly, just not when loaded dynamically I've similar issues like this in the past where the solution was to use the call back feature when loading the content however since all the JS is in a external file not sure of the best method.
HTML code to load PHP file
<script>
$(document).ready (function() {
$('#test').click(function(event) {
$('#content').empty();
$('#content').load('view/search.php');
})
})
</script>
How the JS is linked into the PHP file
<script type="text/javascript" src="edit.js"></script>
Again all the code works when loading the PHP page directly.
Many Thanks

Loading HTML containing script tags is supported. However, keep in mind that load will just insert your content into the DOM. Therefore, if you have a <script src="edit.js"></script> being inserted, the DOM will try to load edit.js from the current directory, not from the directory of the php file you're loading.

make the php file output the content of edit.js in a script tag
e.g.
<script>
<?php
echo file_get_contents('edit.js');
?>
</script>

If i understand your question correctly this has worked for me. Then the js file is loaded when the click is made. The cons of this method is that if it is clicked multiple times, the file will load each time, cluttering your DOM which can result in a slow site.
<script>
$(document).ready (function() {
$('#test').click(function(event) {
$('#content').empty();
$('#content').load('view/search.php', function() {
$.getScript(path+to+script);
});
})
})
</script>

Related

Javascript handling PHP in Wordpress index.html causing loading issues, not matching fiddle code

I have a wordpress site where I have retrieved data from the wordpress database using a php script called within index.php.
I want to handle the data acquired through the php script with a JavaScript/jQuery script that will format the data.
The issue is that the code I am using works in JS Fiddle ( https://jsfiddle.net/ocmLe17o/6/) works; it logs the correct raw variable from the HTML and parses it successfully. However, in Wordpress when I include the .js file running the said code in the functions.php file and call the php script, I get no an undefined output console.logged as the svg_links_parsed variable. ("VM691:1 Uncaught SyntaxError: Unexpected token u in JSON at position 0
at JSON.parse ()"
I suspect the issue may be with the order in which Wordpress loads scripts, and I've tried enqueueing the script after the php including, but I get the same issue.
TL;DR: It works in Fiddle but not wordpress, how do I guarantee the script fires after the php code is inserted if in Wordpress the header is called first and the script is in the header?
Example HTML:
<!DOCTYPE HTML>
<body>
<input type='hidden' id='cover_links' value='["img\/TTEST_1.svg","img\foo.svg","img\/Bar.svg","img\/Derp.svg"]'>
</body>
Javascript:
var raw_src = jQuery("input").val();
console.log(raw_src); //In Fiddle this logs the input string, in Wordpress it's Undefined!
var svg_links_parsed = JSON.parse(raw_src);
document.write(svg_links_parsed);
You may want to wait until the page is loaded to be sure the script runs after the input tag is loaded into the dom. Stick your code in a document ready :
$( document ).ready(function() {
// do stuff after page is loaded.
});

how to include/insert HTML file using Javascript

Using Wordpress, I have the file search-form.php in my child theme's folder.
How do I insert this during a JavaScript routine from a file 404.php in the same folder?
I've tried using: <script type="text/javascript" src="search-form.php"></script> but this does not output the contents of search-form.php at the place I am calling it from.
Help appreciated.
You could use php includes:
<?php include "searchform.php";?>
This runs on server side, wich is good for loading speed.
Or you could use iframes:
<iframe src="searchform.php">Old browser!!</iframe>
Or you could dynamically load it with js/ajax:
<div id="show">loading...</div>
<script>
body.onload=function(){
//see ajax tutorials
document.getElementById("show").innerHTML=ajaxdata;
}
</script>

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:

How to call a function only when all scripts are loaded?

I am sharing a script tag with client to deploy my web application on client's website.
Basically by this way, he can embed my app wherever he want on his site.
The script which I give him just calls one action method in my MVC application and receives a javaScript as a response.
As a fist step, this returned JavaScript inserts all js and css references (required by my application) in the client's head tag
function createScriptElement(src) {
var tmp = document.createElement("script");
tmp.src = src;
var head = document.getElementsByTagName("head")[0];
head.appendChild(tmp);
};
and then in second step, it writes the html content inside one dynamic div.
document.write(format("<div id='mycontainer'>{0}</div>{1}", AppHtml,initcalls ));
The "initcalls" contains the initial function in my app's javascript which I expect to execute immediately. So I put it in Script tag as below.
contents of initcalls are:
<script type=\"text/javascript\"> function icInitApp() { ..... }; </script>
The problem is: there are some dependencies in my application on the js references. The HTML is getting loaded before the head tag in client's page recognizes and loads the js references.
Is there any way to hold my (thus dynamically rendered) application's init function until all js references are fully loaded by head tag?
I tried giving setTimeout() with 5 seconds but it will not be proper solution accepted by client.
A similar kind of situation is discussed in the link below
How to detect if javascript files are loaded?
You can also try to use the $(window).load() event since this will be fired when the page is fully loaded.
$(window).load(function(){
//your code here
});
PS: Be aware that you will need to load the jQuery in your page to make the above code work.
You can try with jQuery:
$(document).ready(function()){
// Your code goes here
};

Modifying Javascript to run after AJAX load

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.

Categories