I reload my page using an updatepanel. In my masterpage I do the following.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="App_Themes/Project/js/core.js"></script>
<script src="App_Themes/Project/js/libs/modernizr-1.6.min.js"></script>
When I partially reload a page with ajax (updatepanels), this files are nog loaded. So an slider is impossible to use.
Is there a way to load this files when I do a Ajax call?
You can use this function:
function ReloadScripts() {
var scriptTag = document.getElementsByTagName('script');
var src;
for (var i = 0; i < scriptTag.length; i++) {
src = scriptTag[i].src;
scriptTag[i].parentNode.removeChild(scriptTag[i]);
try {
var x = document.createElement('script');
x.type = 'text/javascript';
x.src = src;
//console.log(x)
document.getElementsByTagName('head')[0].appendChild(x);
}
catch (e) {}
}
};
On ajax call success method, just call this function
$.ajax({
type:"POST",
dataType: 'json',
error: function(data) {
//do error stuff
},
success: function(data) {
//do success stuff
// at last call this
ReloadScripts();
}
});
Put all your initialization/re-initialization code in a js function call pageLoad(), it gets called on all async postbacks:
function pageLoad()
{
//do work
}
$(document).ready() and pageLoad() are not the same!
I think what you need is not to reload the js libraries, you need to call the exact function that applies some property to the some elements which are loaded by your ajax call.
For example:
Your ajax appends some links to page like
<a id="someLink">link</a>
And there is a code that colors this element into blue at a method inside a js library like:
function colorBlue() {
$("a").css("color", "blue");
}
So here you do not need to reload whole libraries, just call this function after your ajax call:
function makeAjax() {
//here some ajax method is executed
colorBlue();
}
And that's it, your needed changes are done inside the library method.
PS: You can find which method applies the specific work to your elements by searching the class, tag name or id of the target elements inside js library. There you
Related
The question is that there are some functions that I call to initial some elements on the page. But after ajax success, I have to re-call those functions again and again in multiple places. I was wondering beside using the following combo
$(document).ready(function(){
function A
});
$(document).ajaxComplete(function(){
function A
});
I read that there are something I can do with the setTimeout and clock up the thread to delay the function call from the link http://googlecode.blogspot.com/2009/07/gmail-for-mobile-html5-series-using.html
but I have a hard time digesting it. If someone can break it down for me.
Update:
I meant that when I do an html updated inside multiple ajax success, I have to call function A to re initialize and the code above is my idea but I think there should be a better way
Example
$(document).on('click', 'a', function() {
$.ajax({
type: 'GET',
url: 'some url',
data: data,
success: function(data) {
$('#some-sector').html(data);
function A; <------- to init
}
});
});
$(document).on('click', 'b', function() {
$.ajax({
type: 'GET',
url: 'another url',
data: data,
success: function(data) {
$('#some-sector').html(data);
function A; <------- to init
}
});
});
Another Update:
So Basically there are some elements on the page that I need to update dynamically by calling function A. And from the example, I have multiple ajax that updates a page. Instead of calling function A in multiple the ajax success, I was wondering if there is a better way to do this. The only thing that i could think of it's the top code.
As far as i understand you are calling some group of functions on DOM ready
function as
$(document).ready(function(){
function_01();
function_02();
function_03();
});
and want to call the same function on the ajax request
$(document).ajaxComplete(function(){
function_01();
function_02();
function_03();
});
You can define a common function that call internally all the functions that are in need
function callAll()
{
function_01();
function_02();
function_03();
}
and then call as the following
$(document).ready(callAll);
$(document).ajaxComplete(callAll);
at what logic you want to cal this callAll method again and again..
update
try calling the function as below
$(document).ready(function () {
function callall()
{
alert("call all");
}
$(document).ajaxComplete(callall);
});
and this will call the initialize function after the ajax request is processed
Hope it helps...........
I want a SVG file to be loaded in a variable before $(window).load() will be fired.
I load the file using jQuery.get(). The problem is, that this function works asynchronously and by the time, when the SVG file is read, the $(window).load() is already invoked.
So I have following code:
var data;
$(document).ready(function () {
jQuery.get(
"my.svg",
function (_data) {
data = _data;
},
'text');
});
$(window).load( function () {
alert(data);
});
The alert will show "undefined". If it will be invoked later (after 5 seconds for example) then it will show the content of the SVG file.
Any suggestions? Thanks!
I agree that setInterval would probably be the solution you want IF you want to do stuff the hard way because you can never tell how long an AJAX request is going to take.
I would recommend restructuring your code to be more like this:
<script>
$(document).ready(function () {
//this can remain async: TRUE
jQuery.get(
"my.svg",
function (_data) {
//call function to do something to svg file
//if you are relying on the SVG to be there in order to call an action
//then why not wait for the SVG to load first and then call the action
svgAction(_data);
},
'text');
function svgAction(img_code){
//do something with img code now
}
});
</script>
As documented here: http://www.jblotus.com/2011/05/24/keeping-your-handlebars-js-templates-organized/
I am trying to use this function:
(
function getTemplateAjax(path, callback) {
var source;
var template;
$.ajax({
url: path,
success: function(data) {
source = data;
template = Handlebars.compile(source);
//execute the callback if passed
if (callback) callback(template);
}
});
}
//run our template loader with callback
(getTemplateAjax('js/templates/handlebarsdemo.handlebars', function(source) {
//do something with compiled template
$('body').html(template);
})()
)()
I am new to JS, so how can I use this?
I am trying to:
pass the path of the handlebars file
pass a json object which will be inserted in the template and an html should be returned back by the functions.
Update:
Got the answer, there was a typo in the code: this works.
While calling the function, the argument was source but was being used as template.
function getTemplateAjax(path, callback) {
var source;
var template;
$.ajax({
url: path,
success: function(data) {
source = data;
template = Handlebars.compile(source);
if (callback) callback(template);
}
});
}
getTemplateAjax('js/templates/handlebarsdemo.handlebars', function(template) {
data = {title: "hello!" , body: "world!"}
$('body').html(template(data));
})
The code is correct and you seem to be calling it correctly.
You should make sure that you have jQuery properly setup (just check the value of the jQuery global variable - it should not be "undefined").
Also, you should check if the handlebars really is where you think it is - maybe you should be using an absolute URL instead of a relative one.
First try to check whether your are goint in that function or not. If you are then check you are getting response from ajax call or not... and use try...exception - so that if something wrong in ajax setting you know it straightaway.
You can show results only if you do get the results back from your ajax call.
I want to load a Javascript file on the click event instead of loading at the page load event, for performance reasons.
Is there anyway to know that particular if javascript is already loaded?
Right now I am maintaining a global variable to check the 'loaded' event
var javascriptLoaded=false
if (!javascriptLoaded)
$.getScript('/scripts/test.js', function() {
javascriptLoaded = true;
setTimeout(function() {
callSomeFunctionhere();
}, 1000);
});
Is there any better way of doing this?
Yes. What you want to do is use the success callback. A call back method which will only be called once the ajax request to load the script has successfully finished. For example this is equivalent:
$.ajax({
url: "/myscript.js",
dataType: "script",
success: function(){
scriptLoaded = true;
//do some more stuff now that the script is loaded
}
failure: function(){
scriptLoaded = false;
}
});
A simple way to check if a script has been loaded is to see if that script is callable:
if($.fn.foo == undefined) {
$.getScript("/path/to/script/foo.js", function() {
// success
});
}
$(document).ready(handler) executes once the DOM is fully loaded. If content is later added to the page using AJAX, which contains a $(document).ready(handler) function, this function is executed immediately, per the jQuery API. Additionally, .ready can only be called on a jQuery object matching the current document.
This is not what I want, however :)
How can I achieve this .ready type of functionality for data loaded via AJAX after .ready has already fired, in a cross-browser compliant manner?
EDIT:
Here's a very simplified example. I do have a problem I'm trying to solve, but I'm more interested in understanding the way to do this properly.
Basically, the .ready function in ajaxPage.html is firing before importantDependency.js is completely loaded, so the first load of ajaxPage, importantDependency is missing, but subsequent loads see it.
index.html
...
<script type="text/javascript">
$(document).ready(function() {
alert("The document is ready");
$('#myButton').click(function() {
$('<div></div>').dialog({
open: function () {
$(this).load('ajaxPage.html');
}
});
});
});
</script>
...
ajaxPage.html
...
<script type="text/javascript" src="importantDependency.js"></script>
<script type="text/javascript">
$(document).ready() {
$('#thing').leverageImportantDependency();
});
</script>
...
EDIT 2:
I want to do this FROM the loaded content, not from the page calling the content. Modifying the calling page means duplicating code in every instance where this is called. I'd like the behavior to be attached to the content, not the page calling it.
Generally, you will want to do something like this:
$("#container").load(function(html) {
// container has been filled up, and is
// ready for JS processing
doSomethingWithNewContent();
});
That is to say, fire off something once the content has been replaced, by utilizing the appropriate ajax callback. Other examples include:
$.get("foo.html", function(html) {
$("#container").html(html);
$("#container").find(".foo").fancyThing();
});
$.ajax({
url: 'foo.html',
type: 'post',
success: function(html) {
$("#container").html(html).find(".foo").hide();
}
});
See:
http://api.jquery.com/jQuery.ajax/
http://api.jquery.com/jQuery.post/
http://api.jquery.com/jQuery.get/
http://api.jquery.com/jQuery.load/
EDIT: From what I understand from your edit, you want attach something, such as a an event handler or a plugin to some elements that keep getting replaced. There are a few ways to do this:
In the success callbacks, as
demonstrated above.
Using .live or
.delegate.
Using .liveQuery.
I'm not sure if I get your question, but when you have retrieved the data, you simply do whatever you want with it in the success handler of the ajax call:
$.ajax({
url: pageUrl,
success: function (data) {
$(".someContainer").html(data);
// TODO: This is your ready handler for the new content
}
});
You could use the complete property of an JQuery Ajax call. The complete function is called after success or error.
$.ajax({
url: "foo",
complete: function({
// I'm done
}
});
See: http://api.jquery.com/jQuery.ajax/