I want to load a AJAX form into my page with it's own validation.js attached to it. How can I do that?
I tried to load every one with its own $.ajax request, then output the HTML on the page successfully, but the validation.js doesn't work on the form.
Can I load a JavaScript file then a HTML file (with ajax) in my existing page, then get the HTML output on the page to respond to this JavaScript functions?
use the following javascript for adding a javascript file in async mode after the page has loaded.
(function() {
var d=document,
h=d.getElementsByTagName('head')[0],
s=d.createElement('script');
s.type='text/javascript';
s.async=true;
s.src='/js/myfile.js';
h.appendChild(s);
}());
if you have a number of files to load this way, you can convert this into a function call.
function asyncLoader(scriptName)
{
var d=document,
h=d.getElementsByTagName('head')[0],
s=d.createElement('script');
s.type='text/javascript';
s.async=true;
s.src = scriptName;
h.appendChild(s);
}
this method does not guarantee/notify when the js file will be loaded. for that you can put some event call in the file which is being loaded.
if you are loading some html from ajax and adding it to a your current html (as innerHtml) you can put the <script> tag inside that html and it will behave same as above code.
see this question and its answers for more details.
EDIT:
following is a JQuery way using $.getScript
$.getScript("path/my_script.js", function(){
console.log( "Load was performed." );
}); //JQuery can also be used instead of $
doing the same using $.ajax
$.ajax({
url: "path/my_script.js",
dataType: "script",
success: function(){
console.log( "Load was performed." );
}
});
Related
I am having an Anchor link, on click of Anchor link, I am registering new JavaScript file html page.
On registering the JavaScript file dynamically, document is reloaded partially (As I see reload icon in browser for some time).
I want to call my JavaScript function once the script got registered (Obviously when reload icon get stopped in the browser). But the function MyJavaScriptFunction got called while document is still reloading.
Using setTimeOut resolves the issue but I don't want to use it as page loading time is not fixed. Please help.
The code I am using is as follow:
function addScriptDynamically(src, callback) {
var s = document.createElement('script');
s.setAttribute('src', src);
s.onload = callback;
document.body.appendChild(s);
}
addScriptDynamically('URL Of JS File',function(){
MyJavaScriptFunction();
})
What I tried so far...
Option-1:
addScriptDynamically('URL Of JS File',function(){
$(document).ready(function(){
MyJavaScriptFunction();
});
})
Option-2:
addScriptDynamically('URL Of JS File',function(){
$(window).load(function(){
MyJavaScriptFunction();
});
})
jquery has a function for this purpose.
Using jquery
$(function () {
//write your function code here.
})
This function is called only when the content of the page are first loaded.
2)
Using Javascript
window.onload = function(){
//write your function code here.
}
I am loading a PHP file using Ajax below which works great except I want to be able to load some javascrip/jQuery items within that file to function on the main index page.
prices();
function prices()
{
$.ajax({
type: "GET",
url: "inc/load_prices.php",
cache: false,
success: function(response){
$("#prices").hide().html(response).fadeIn(500);
}
});
}
setInterval(prices, 600000);
Inside load_prices.php I have some stock ticker type output which works fine outside the AJAX call using the below. However when loading the contact via AJAX it wont trigger the webticker.min.js file and wont render properly.
<!-- If loading this without AJAX the ticker works fine -->
<script src="js/jquery.webticker.min.js"></script>
<script>
$("#ticker").webTicker({
duplicate:true,
hoverpause:false,
});
</script>
How do I allow the contents of the prices() AJAX function to render properly when needed to reference jQuery?
Not sure but in load_prices.php
src="../js/jquery.webticker.min.js"
as both are in different directory
If interpret Question correctly, use $.getScript() to load webticker.min.js once. Not certain what purpose is of calling .webTicker() every 600000 ms?
$.getScript("js/jquery.webticker.min.js")
.then(function() {
$("#ticker")
.webTicker({
duplicate:true,
hoverpause:false
});
});
I have some code on a main page (index.php) that calls a php script (access.php) with javascript, as seen below.
The php (access.php) also has javascript but when I load it into the current page (index.php) then the javascript content in (access.php) is not working. Maybe this can't be done. Any thoughts?
The javascript does fire when I load access.php in a browser by itself.
$.post("access.php",
{FullName : response.name,ID: response.id,Email:response.email,UD:userDevice},
function(data)
{
document.getElementById('Container').innerHTML = data;
});
Perhaps I should have stated this before but it's using the Facebook Java SDK. MY END GOAL: I want to SEND VARS to a php that also has more/new Facebook-Java script that I can run from within the index.php.
This method worked. :)
$( "#Container" ).load( "access.php",
{FullName : response.name,ID: response.id,
Email:response.email,UD:userDevice} );
I wrote a short AJAX code which is getting Facebook contents from a PHP file (in the PHP file I have declared class="gallery-img-link" as <a> and class="img-responsive img-thumbnail" as <img>).
I have the gallery-img-link on the bottom of site as jQuery script, the problem is when I add those classes by hand its working fine, but when I try to load those by a AJAX get request it seems to doesn't work.
Should I use it in a document.ready function?
I have tried live as well, but that didn't helped at all.
$(document).ready(function(){
$(\'#loading-image\').show();
$.ajax({
method:\'get\',
url:\'ajax.php\',
success:function(data){
$("#facebook").html(data);
},
complete: function(){
$(\'#loading-image\').hide();
}
});
});
For all JavaScript DOM manipulations you Need the DOM to be fully loaded.
Without having your PHP and other Code around I can just correct your JS:
$(document).ready(function(){
$('#loading-image').show();
$.ajax({
method: get ,
url: ajax.php ,
success: function(data){
$("#facebook").html(data);
},
complete: function(){
$('#loading-image').hide();
}
});
});
UPDATE:
Go Into the f12 Developer Tools in your Browser, and go to the Network Tab, then have a llok o all loaded Files, on should be ajax.php. Have a look what the File of that COntent is
Basicly the problem was that the content has been loaded but the "photo java script file" wasnt waiting to get the page loaded, so this function couldnt work at all. Becasue those AJAX loaded after "reading JS function".
I'm using jquery's .html() function to inject a html file into a partial div of the main page of my application. In the injected partial html page, there is a javascript reference such as script(src='../../javascripts/partialFunctions.js').
The jquery function and the main page are like:
$('.partialDiv').html(htmlResult);
<div>main page</div>
<div class='partialDiv'></div>
<input type='button'>button</input>
When the user click a specific button on the main application page, the jquery function will got called and the html file will got injected to the main page.
The problem is every time a new htm file got injected, the browser will load the script file. So there will be many duplicated javascript functions after the user clicked the button several times.
How can I do this dynamically and avoid the duplication of javascript functions?
Thanks in advance!
You can remove the script tags and references from the htmlResult page.
Then use $.getScript('myscript.js') to import the necessary JavaScript files.
More info on getScript() here
So to load in the script and make sure it only loads in once:
var window.foo = false; //Outside the document.ready
$('.partialDiv').html(htmlResult);
if(window.foo == false){
$.getScript("js/myScript.js", function(data, textStatus, jqxhr){
console.log('Script loaded');
window.foo = true;
});
}
I just did a quick test, it looks like script tags are stripped out anyways when you call .html(). So you should be able to simply do:
var html = "<html><script></script></html>",
cleanedHtml = $(html).html();
myEl.html(cleanedHtml);