How to trigger an aJax call on page load - javascript

This is the function which runs on click by default in somefile of wordpress
jQuery( function($) {
var $container = $('.grid');
$('.filters-button-group').on( 'click', 'button', function() {
var filterValue = $( this ).attr('data-filter');
var filterCategory = $( this ).attr('data-filter-category');
var getQuery = env.AJAX+'?action=get_events&tribe_event_category='+filterValue
$.ajax({
cache : false,
url: getQuery,
success: function(data){
$container.html( data.results )
}
});
});
}(jQuery))
This is the script i am trying to hit in another file of wordpress
jQuery( function($) {
$('.filters-button-group .autoTrigger').trigger('click');
}(jQuery))
Button is triggered but it dosn't perform the functionality which runs after clicking the button.

Related

jQuery dialog can not call second time

IE v11 on windows 10 using jQuery v2.2.2 and jQuery-ui v1.10.0
Can't get a dialog to open a second time. I was having trouble getting the ok button to close the dialog and solved that by getting a reference to the dialog with the 'PDdialog = '. Now on the second attempt I get error: Object doesn't support property or method 'dialog'. I even tried adding the .remove() in the Ok function.
$( document ).ready(function() {
$.ajaxSetup({ cache: false });
$( ".pnopener" ).on( "click", function() {
var pn = $(this).text();
var tag = $("<div id='pd-dialog' title='PN Details'></div>");
$.ajax({
type: "GET",
url: 'ajax/PNDetails.php?pn=' + pn ,
success: function (data) {
PDdialog = tag.html(data).dialog({
resizable: true,
height: 600,
width: 750,
modal: true,
buttons: {
Ok: function() {
PDdialog.dialog( "close" );
$( ".pd-dialog" ).remove();
}
}
}).dialog('open');
}
});
});
});
and just for clarity here is the calling html:
<span class="pnopener" style="color: darkorange;">[Changing string]</span>
This is in a table td.
more:
In Firefox the error is: TypeError: tag.html(...).dialog is not a function
Thanks!!

how to bind event to element after generateing

I have this script :
$(window).load(function () {
$(document).on('click', '.btn-delete-confirm', function () {...});
});
and I have this element :
<div id="attachments"></div>
and I have this script to load some html :
$(document).on('click', '.nav-tabs li a[href="#attach"]', function () {
$.ajax({
url: loadAttachmentsURL,
data: { equipmentId: equipmentId },
success: function (data) {
$("#attachments").html(data);
}
});
});
in my result from ajax I have some button that have .btn-delete-confirm class but when clicked on them nothing happen .
the sample of result like this :
<td><a data-id="73b2db39-199c-845c-8807-6c6164d2d97d" data-url="/Admin/EquipmentAttachment/Delete" class="btn-delete-confirm btn">Delete</a></td>
how can I resolve this ?
one way will be by attaching click event after html is set:
$(document).on('click', '.nav-tabs li a[href="#attach"]', function() {
var equipmentId = "?";
var loadAttachmentsURL = "/url";
$.ajax({
url: loadAttachmentsURL,
data: {
equipmentId: equipmentId
},
success: function(data) {
$("#attachments").html(data);
$(".btn-delete-confirm").click(function() {
alert("click!");
});
}
});
});
another will be attaching the click event to the document context:
$(document).on('click', ".btn-delete-confirm", function() {
alert("click!");
});
$(document).on('click', '.nav-tabs li a[href="#attach"]', function() {
var equipmentId = "?";
var loadAttachmentsURL = "/url";
$.ajax({
url: loadAttachmentsURL,
data: {
equipmentId: equipmentId
},
success: function(data) {
$("#attachments").html(data);
}
});
});
You are trying to add an eventlistener to something that isnt there yet.
This will result in an error, and the event wont fire again.
So try to add the listener AFTER the ajax import.
$(document).on('click', '.nav-tabs li a[href="#attach"]', function () {
$.ajax({
url: loadAttachmentsURL,
data: { equipmentId: equipmentId },
success: function (data) {
$('#attachments').html(data);
$('.btn-delete-confirm').on('click', function () {...});
}
});
});
Though .delegate() method is deprecated in jquery-3.0, its description is still worth to have a look:
Attach a handler to one or more events for all elements that match the
selector, now or in the future, based on a specific set of root
elements.
Exmaple:
// jQuery 1.4.3+
$( elements ).delegate( selector, events, data, handler );
// jQuery 1.7+
$( elements ).on( events, selector, data, handler );
Using document as a root element is not a big problem, but have you tried #attachments ?
$(window).load(function () {
$("#attachments").on('click', '.btn-delete-confirm', function () {...});
});

why this code is not loading pages ajax jquery

Guys What I am trying to do is load a page on navigation click with ajax and put some delay in it loading
when nothing is clicked I want load home page following loading animation with jquery and a delay with PHP code
and if something on nav is clicked I want to load that particular file
but this code don't seem to be working
var res = {
loader: $('<div />', {class: 'loader' } ),
container: $('.content')
};
$(document).ready(function(){
$.ajax({
url: 'templates/delay.php',
beforeSend, function(){
res.container.append(res.loader);
},
success, function(){
res.container.find(res.loader).remove();
$('.content').load('templates/pages/home.php');
}
});
$('ul#nav_a li a').click(function(){
$.ajax({
url: 'templates/delay.php',
beforeSend, function(){
res.container.append(res.loader);
},
success, function(){
res.container.find(res.loader).remove();
var page=$(this).attr('href');
$('.content').load('templates/pages/'+page+'.php');
return false;
});
});
}
});
I will not discuss the code itself, but just improve it.
Try this code and tell me if you get what you want : ( comments inside the js code )
$(document).ready(function(){
$.ajax({
url: 'templates/delay.php',
// old code : beforeSend,
beforeSend: function(){
res.container.append(res.loader);
},
// old code : success,
success: function(){
res.container.find(res.loader).remove();
$('.content').load('templates/pages/home.php');
}
// beforeSend and success are keys with functions as values that's why we use ":" and not ","
// the "," comma is used to separate ajax settings
});
$('ul#nav_a li a').click(function(){
var page = $(this).attr('href');
$.ajax({
url: 'templates/delay.php',
// old code : beforeSend,
beforeSend: function(){
res.container.append(res.loader);
},
// old code : success,
success: function(){
res.container.find(res.loader).remove();
$('.content').load('templates/pages/'+page+'.php');
// old code
// return false;
// });
// we close our ajax.success function
}
})
// old code
// }
// return false is used to prevent browser to run the a href that's why we use it in the a.click function and not inside the ajax block
return false;
})
})
var res = {
loader: $('<div />', {class: 'loader' } ),
container: $('.content')
};
$(document).ready(function(){
res.container.append(res.loader);
$('.content').load( "templates/pages/home.php", function() {
res.container.find(res.loader).remove();
});
$('ul#nav_a li a').click(function(){
var page=$(this).attr('href');
$('.content').load( 'templates/pages/'+page+'.php', function() {
res.container.find(res.loader).remove();
});
});
}
});
Just copy and paste it.

Second jQuery function failing to run

I have created two user-defined functions within the "head" section of an HTML page and I am calling them with a script just before the closing "body" tag. The trouble is that the second function is not working, unless I include an "alert" statement in the first function (which halts the execution until I dismiss the alert).
I am guessing it is caused by the first function not actually finishing completely before the second one starts and by having my alert statement it gives the first function time to finish.
Function one is to build a list of images in DIV tags.
Function two implements FlexSlider to initiate a slideshow of the images.
Calling the below as it is will render a page with all images shown. If I uncomment the alert box and run it again, the screen is rendered with my images, I dismiss the alert box, and then FlexSlider kicks in and starts the slideshow.
Here are the two functions defined in the "head" section.
<script type="text/javascript">
var buildslider = function () {
$.ajax({
type: "GET",
url: "/myImages/homepageslider/PhotoGallery.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('img').each(function() {
var location = '/myImages/homepageslider/';
var url = $(this).attr('src');
var alt = $(this).attr('alt');
$('<div class="slide-group"></div>').html('<img src="'+location+''+url+'" alt="'+alt+'"/>').appendTo('.slides');
});
}
});
//alert("buildslider finished");
};
var runslider = function() {
$('.flexslider').flexslider({
selector: '.slides > .slide-group',
controlNav: false,
directionNav: false
});
};
</script>
And here is the code near the closing "body" tag.
<script>
$(document).ready(function() {
buildslider();
runslider();
});
</script>
What am I doing wrong and how do I correct this so it can be done properly?
Thank you in advance.
David.
Return the ajax() returned object from the first function. This is a jQuery "promise" object which will then expose done and fail methods. These methods take a function, so you can just insert your second function into done. See example below:
<script type="text/javascript">
var buildslider = function () {
return $.ajax({
type: "GET",
url: "/myImages/homepageslider/PhotoGallery.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('img').each(function() {
var location = '/myImages/homepageslider/';
var url = $(this).attr('src');
var alt = $(this).attr('alt');
$('<div class="slide-group"></div>').html('<img src="'+location+''+url+'" alt="'+alt+'"/>').appendTo('.slides');
});
}
});
};
var runslider = function() {
$('.flexslider').flexslider({
selector: '.slides > .slide-group',
controlNav: false,
directionNav: false
});
};
</script>
Then run with:
<script>
$(document).ready(function() {
buildslider().done(runslider);
});
</script>
It also makes it easier to handle failures in a more general way:
<script>
$(document).ready(function() {
buildslider().done(runslider).fail(function(){
alert("#%&£ happens!");
});
});
</script>
Using promises is far more flexible than using callbacks, and supports multiple done() functions, so is now the preferred way to do this.
Note: A simpler shortcut for DOM ready is $(function(){ your code here }); or if you want it to have a locally scoped $ use jQuery(function($){ your code here }); which acts as both a DOM ready handler and provides a locally scoped $ to avoid clashes (e.g. with other plugins).
<script type="text/javascript">
var buildslider = function () {
$.ajax({
type: "GET",
url: "/myImages/homepageslider/PhotoGallery.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('img').each(function() {
var location = '/myImages/homepageslider/';
var url = $(this).attr('src');
var alt = $(this).attr('alt');
$('<div class="slide-group"></div>').html('<img src="'+location+''+url+'" alt="'+alt+'"/>').appendTo('.slides');
});
}
});
//alert("buildslider finished");
};
var runslider = function() {
$('.flexslider').flexslider({
selector: '.slides > .slide-group',
controlNav: false,
directionNav: false
});
};
$( document ).ajaxComplete(function( event, xhr, settings ) {
if ( settings.url === "/myImages/homepageslider/PhotoGallery.xml" ) {
runslider();
}
});
</script>
Now Just call the buildslider() only no need to call the runslider() in your document.ready..
try something like this
var buildslider = function () {
$.ajax({
type: "GET",
url: "/myImages/homepageslider/PhotoGallery.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('img').each(function() {
var location = '/myImages/homepageslider/';
var url = $(this).attr('src');
var alt = $(this).attr('alt');
$('<div class="slide-group"></div>').html('<img src="'+location+''+url+'" alt="'+alt+'"/>').appendTo('.slides');
$('.flexslider').flexslider({
selector: '.slides > .slide-group',
controlNav: false,
directionNav: false
});
});
}
});
};
final script block
$(document).ready(function() {
buildslider();
});
Note : execute slider code after ajax is successfully completed.

Execute function on option selected from jQuery ui autocomplete option list

Hi I have the code below for autocomplete which works fine but my only issue is that when a user clicks on an option from the autocomplete list, it should trigger another function (doSomething()). This however is not being done. Granted if the user makes a selection and presses "enter" the function is executed.
var url = "http://myURL";
var field = "myField";
$(document).ready(function () {
$("#tags").autocomplete({
source: function (req, add) {
var suggestions = search(req.term, url, field);
add(suggestions);
},
select: function( event, ui ) {
doSomething();
}
});
});
function search(value, listurl, field) {
var coll = new Array();
var url =
listurl + "?$filter=startswith(" + field + ",'" + value + "')";
$.ajax({
cache: true,
type: "GET",
async: false,
dataType: "json",
url: url,
success: function (data) {
var results = data.d.results;
for (att in results) {
var object = results[att];
for (attt in object) {
if (attt == field) {
coll.push(object[attt]);
}
}
}
}
});
return coll;}
function doSomething() {
}
Thanks for any suggestions.
Got this resolved like this:
$('#tags').on('keyup change', function () {
doSomething();
}).change();
$('#tags').on('autocompleteselect', function (e, ui) {
doSomething();
});
Thanks to this SO link
I know this is an old topic, but I came across this problem and I found another solution which I believe JQuery provides for. You can use the close event to do this.
Examples (extracted from http://api.jqueryui.com/autocomplete/ and adapted for this question):
1) When you initialize the autocomplete
$( "#tags" ).autocomplete({
close: function( event, ui ) { doSomething(); }
});
or
2) Binding an listener to the close event
$( "#tags" ).on( "autocompleteclose", function( event, ui ) { doSomething(); } );

Categories

Resources