Make all JavaScript work as normal on ajax content - javascript

I am working on a normal bootstrap theme which contains js slider, popup, text-rotation, masonry boxes etc..
The theme contains all relevant js library and main.js
All of these will load new content via ajax on user specified actions.
Here is the js/ajax for text-rotation:
In the example below i have to call the "$('.text-rotation').owlCarousel" in order to make the text-rotation to work properly.
function getCon(type,id)
{
var postData = { id: id, type: type}
$.ajax({
url : 'getcontent.php',
type : 'post',
data : postData,
success : function( resp ) {
var cont = $('#cont', resp).html();
$('#conta').after(cont);
$('.text-rotation').owlCarousel({
loop: true,
dots: false,
nav: false,
margin: 10,
items: 1,
autoplay: true,
autoplayHoverPause: false,
autoplayTimeout: 3800,
animateOut: 'zoomOut',
animateIn: 'zoomIn'
});
}
});
}
When not calling "$('.text-rotation').owlCarousel" it simply displays the text in list format.
In order to make the all the ajax load content work properly on all section i.e the slider, popup, etc.. i'll have to find the relevant theme functions and code them all on the respective ajax functions.
Is there any predefined js code which i may call on ajaxComplete so tha all ajax content works normal as it works on page load ??
I tried to call the main.js from "getScript" function inside the ajax success but not working..

The short answer is: no.
jQuery code acts on the DOM that exists when the code is run; if you add to the DOM later on there isn't any general-purpose way for jQuery code to go back and act on the new elements as though they had been there in the first place.
Your options are
rewrite your code to not depend on event bindings / manipulation of the AJAX-based content -- instead use delegated event bindings on elements that are always present
defer your main code init until after all AJAX calls have completed, so the DOM is already in place when you add your bindings
Write specific code to add necessary event bindings / modify newly added DOM chunks individually, as they're loaded

Related

Bootsrap-select retains default options inside SetTimeout call

I am initializing a bootstrap-select control successfully on document.ready, but if I put it inside a setTimeout, all my options are ignored and the default options are used instead. I have tried debugging through the selectpicker js code but I can't figure out why this behavior is different. Please note I did see a very similar question but it was never successfully answered (Bootstrap-Select plugin not working with time consuming page load).
Here is my JS code:
$(document).ready(function () {
...display code
setTimeout(function () {
$('#mySelect').selectpicker({
container: 'body',
actionsBox: true,
liveSearch: true,
maxOptions: 16,
noneSelectedText: 'Sites',
selectedTextFormat: 'count>0'
});
...more display code
}, 100);
});
If I remove the setTimeout, the selectpicker displays with the options listed in the code, but if I leave the setTimeout, only the default options are used. Does anyone know why this is the case and how to get it to use the correct options when called from within the setTimeout?

Owl crousal slider not working when loading data via ajax

I am working on some wordpress project and my owl content will load via ajax. Now, what happens, when i load content via ajax, it loads content but not show is slider. Here is javascript code that i have already done:
function runAjax(objects){
var $response;
$.ajax({
url:wpAjaxUrl,
async:false,
cache:false,
type:"POST",
//data:{'action':objects.action,'product_id':objects.product_id},
data:objects,
dataType:"json",
beforeSend:function(){
$(".loader_div").show();
},
success:function(response){
$response=response;
//console.log($response.subcategory_products);
},
complete:function(response){
if(objects.action=='get_product_images'){
// var owl1=$("#owl-related-accessories");
// owl1.data('owlCarousel').reinit();
$.getScript("http://localhost/inox/wp-content/themes/inox/js/jquery.min.js");
$.getScript("http://localhost/inox/wp-content/themes/inox/owl-carousel/owl.carousel.js");
$.getScript("http://localhost/inox/wp-content/themes/inox/owl-carousel/owl.carousel-related-accessories.js");
$.getScript("http://localhost/inox/wp-content/themes/inox/js/owl.js");
}
$(".loader_div").hide();
}
});
return $response;
}
There are so many ajax request so that i have created a general function for requesting ajax.I hope you understand well. Here you can see that i have reload all owl's javascript code.In the following code i have get ajax response and append in owl crousal div.
$("#owl-related-accessories").html($ajaxRes.relatedHtmlData);
You something ommit, it is not only need to download script $.getScript( also is need to run it to take effects on new created elements with JS. See all calls of functions in your html page (<script> with $( document ).ready(function() </script> and without it but is functions of carousel) and after run AJAXA call it all in Browser JS console and see if it have effect. Also see in your browser js consle if no erros after you run Ajax, because error stop js script run in place where error ocur
During ajax return success: Define owl carousel there. Means after returning ajax success, define owl carousel there.
success: function(data) {
//Return ajax success response here
jQuery('#cross_container').html(data);
//run owl Carousel here
jQuery('.cross-sell-box').owlCarousel({
items: 3,
loop: true,
margin: 10,
autoplay: true,
autoplayTimeout: 1000,
autoplayHoverPause: true,
nav: true
});

after clicking {Permalink}, call function

I need to bind a function to initialize a js plugin after {Permalink} is clicked so Tumblr IPA "redirects" the browser to a new page, with the post details.
How can I do so? There's not so much documentation on how {Permalink} really works, whether it's ajax or whether it has some callback function (which I would appreciate).
Of course this would try to initialize before the "new" page is loaded. I think it's ajax though.
$("#{Permalink}").click(function() {
$('.jqzoom').jqzoom({
zoomType: 'standard',
lens:true,
preloadImages: false,
alwaysOn:false
});
});
{Permalink} renders a string that is the URL to the post: http://sample.tumblr.com/post/123
For reference, Tumblr theme operators don't have anything to do with javascript. They render mainly strings.
You need to bind the actual element that is clicked:
HTML
...
jQuery
$(".permalink").click(function() {
...
});
Reference: http://www.tumblr.com/docs/en/custom_themes#posts

make head loaded script available to AJAX loaded content

content called by AJAX
content requires different shapes and sizes of cluetips (I use plugin),
so I have them in one file, which is called in head tag:
&ltscript type="text/javascript" src="/resources/js/jquery.clues.js">
sample cluetip launcher from jquery.clues.js:
$('.clue550K3').cluetip({
splitTitle: '|',
showTitle: false,
positionBy:'mouse'
});
There are many like this in jquery.clues.js.
PROBLEM:
File: jquery.clues.js is not available to jQuery fetched content.
Way I make it work:
I call jquery.clues.js on each AJAX fetched page (content), but since file is called in body it is being fetched multiple times (if I have e.g. multiple AJAX fetched contents on same page).
File is exactly same.
https://hmvc/resources/js/jquery.clues.js?=1339917292974
https://hmvc/resources/js/jquery.clues.js?=1339917294563
https://hmvc/resources/js/jquery.clues.js?=1339917243432
etc.
QUESTION:
I need to either
make AJAX content to read head delivered jquery.clues.js
force browser to stop fetching file once it is fetched once
Is there a way to do this?
SEE THIS EXAMPLE: http://readydata.org.uk/stackstuff/
Wrap your jquery.clues.js with a function:
window.updateClues = function () {
$('.clue550K3').cluetip({
splitTitle: '|',
showTitle: false,
positionBy:'mouse'
});
};
updateClues();
Then on AJAX success call updateClues(). It will download only once, and execute after each request and onload.

jquery slider effect on ajax generated divs

I have the following script in between the head tags on my page:
$.ajax({
type: "POST",
url: "my script that gets what I need",
context: document.body,
success: function(data){
//data is now the value that PHP echoed
phpsaid = data.split('|');
var size_ind = phpsaid.length/6;
var size_per = 6;
for (var i_one =0; i_one<size_ind; i_one++){
for(var i_two =0; i_two<1; i_two++){
if(i_one == 0 ){
var i_get = 0
}
else{
var i_get = i_one * 6;
}
$("#big_container").append("<div class ='neato'><div class ='c1'>"+phpsaid[i_get]+"</div><div class ='c2'>"+phpsaid[i_get+1]+"</div><div class ='c3'>"+phpsaid[i_get+2]+"</div><div class ='c4'>"+phpsaid[i_get+3]+"</div><div class ='c5'>"+phpsaid[i_get+4]+"</div></div>")
}
}
}
});
Then in the main body I have:
<div id ="big_container">
</div>
The ajax script above is generating the divs to go inside big_container. The client has specified that it be done strictly in that way (meaning generate all divs with ajax on the fly), so conceptual arguments of different ways to tackle it unfortunately won't help much here.
Here is my problem:
I also want to apply the following plugin to all elements of big_container. This of course works perfectly when I hard code the div elements into the page, but I cannot get it to work on the ajax generated divs within #big_container.
$(function(){
$('#big_container').bxSlider({
mode: 'vertical',
ticker: true,
tickerSpeed: 4500,
displaySlideQty: 5
});
});
How do I get the plugin function to apply to the ajax generated div's once they have in fact been generated?
Insert your initialization code after $("#big_container").append("...");
It will look like
$("#big_container").append("<div class ='neato'>..and so on..");
}
} // the end of the 'for' loops
$("#big_container").bxSlider({
mode: 'vertical',
ticker: true,
tickerSpeed: 4500,
displaySlideQty: 5
});
If you call ajax again on the page and add a new content to the existing one then it is better to write the call of the bxSlider as
$("#big_container .neato:last").bxSlider({
mode: 'vertical',
ticker: true,
tickerSpeed: 4500,
displaySlideQty: 5
});
just after .append part
This is a common problem people face that elements generated by ajax (dynamically inserted in to dom) doesn't take action or notified by any of the listener or any plugin inside ready because they are not registered in the ready event. To solve this kind of problem I use a different approach like the following
$(document).ready(function(){
myReadyFunction();
});
function myReadyFunction()
{
$("#big_container .neato:last").bxSlider({...});
// All other codes that normally reside inside ready event.
}
After each ajax call, upon success (if required) simply call myReadyFunction(); and in your case you can place your $("#big_container").bxSlider({...}) inside the myReadyFunction(); and call the myReadyFunction(); after successful ajax call and initially call myReadyFunction(); inside ready event too.

Categories

Resources