i want to start a ajax call. Ones i start the call on click at a button (a tab-bar from a modal), this call loads the formular data in the modal. After that i have to send the form.
So is there a shorter way as what i do
1)
$('#nav-register-tab').click(function()
{...do the ajax call...}
2)
$("#ajax_form").on("submit", function (event) {
event.preventDefault();
{...do the same ajax call..}
In my case i have double sourcecode for the same ajax call.
Is there a way to comibine in way like
"$('#nav-register-tab').click or $("#ajax_form").on("submit"...
Maybe there is a better way to do it, for the moment i put the ajaxcall in a function and call it on click or on submit. In this way i spend the double sourcecode.
$("#abc").on("submit", function (event)
{ event.preventDefault();
do_ajax_call($('#abc').serialize()); });
$('#def').click(function(){ do_ajax_call(false); });
function do_ajax_call(data){...}
Related
I have a form that needs to be submitted on all button presses or whenever a user leaves the page, is that possible if so how?
Using jquery to detect if a user leaves the page.
https://api.jquery.com/unload/
$( window ).unload(function() {
//call your function here that executes the form
return "Handler for .unload() called.";
});
using jquery to detect button presses.
$(document).on('click', '.buttonCLass', function(){
//code here
})
I was wondering if someone can help guide me how I can write a event when I'm using toggleClass in jQuery?
I have a list of items and when I click on an item, it highlights it, and when someone clicks another item from the list, the previous highlighted item goes away and highlights the current click. Also, if I click the same item that has been highlighted, it goes away.
Now I'm trying to write a function to call ajax when only its been highlighted. So it won't run the ajax function again when its being pressed again (when highlight is removed).
$(".media").on('click',function(){
var $this = $(this);
// highlighting the object
$this.toggleClass('selectMedia').siblings().removeClass('selectMedia');
// saving the id
var selId1 = $this.data('id');
$.post("ajax/ajax_sessions.php", {"sel_1":selId1}, function(data) {
alert(data); // alerts 'Updated'
});
});
Thank you for help!
Just check for the existance of the class before doing your AJAX request:
if ( ! $this.hasClass('selectMedia') ) return;
// Now do your AJAX request...
I want to have a function called for every ajaxComplete call regardless of the ajax call. I know I can set a default value using my spinner by saying ('#spinner').ajaxComplete(complete) however if I have an ajax request that implements it's own complete my default complete method is not called.
How can I make a central function get called when any ajax call has completed??
Attach your ajaxComplete to the document; the ajax event will bubble up:
$(document).ajaxComplete(function(e, xhr, settings) {
// Do whatever you need here.
});
Attach the ajaxComplete listener to the DOM. This allows us to monitor it for any
$(document).ajaxComplete(function(e,request, options){
//attach our listener for ajaxComplete to the DOM.
//whenever an ajax call is completed, the DOM will send this function
customAjaxCompleteFunction();
});
var customAjaxCompleteFunction = function(){
alert("Custom Function for Each ajax call on complete!");
}
I have a website that pages' contents loaded by ajax. All of my pages are seperate files actually and when I need to call a page, I just passed the link to my "pageLoader" function.
pageLoader handle with content loading and re-ignite/re-define the necessary functions like close button.
Since the actual function have ~250 lines, I did re-write a short version;
var pageLoader = function(link){
var page = $(link).attr("href").replace('#','');
if(page != lastCalledURL){
// Load the page.
$.ajax({
beforeSend: function(){ /* remove previously loaded content; */ },
success: function(data){
// remove the loaded content if user clicked to close button.
$("a.close-button").live("click", function(){
$(this).parent().fadeOut().remove();
return false;
});
// load another page if user click another page's link.
$("a.content-loader-link").live("click",function(){
pageLoader(this);
});
// handle with tabs
$("a.tabs").live("click", function(){
var index = $("a.tabs").index(this);
console.log(index);
return false;
});
}
});
lastCalledURL = page;
}
return false;
OK. If I click a link in the page, It calls pageLoader. If I click one of the links just once, pageLoader called once. If I click another link, pageLoader called twice. If I click another link again, pageLoader called third times and so on.
Same things happen for the links that bind with "live" function in the code. If I click a.tabs, it write to console twite. If I clicked another .tabs link, it write to console four times and increasing double for every click.
I don't why it happens. Please let me know if you have any idea.
You can solve it by using the bind and unbind. Like this:
$("a.tabs").unbind('click').bind("click", function(){
var index = $("a.tabs").index(this);
console.log(index);
return false;
});
But i would prefer that you attach this events in your $(document).ready function instead of everytime you make an AJAX call.
$(document).ready(function() {
// Attach your events here.
});
Those live event handlers "Attach a handler to the event for all elements which match the current selector, now and in the future." so you shouldn't need them in your ajax call.
I'm trying to do a simple update, but can't figure out somthing.
I have a table that i get from a DB with an Edit button that when i press change to a Save button so i can save with Ajax the record that the user just edit.
I'm doing the first part just fine, have one function that do all the jquery stuff on the page (that is working just fine).
Now I want to change the $('#a'+productID) line to save insted of edit. i am changing the link attribute also, so when the user presses save it will send him to a function that will make the Ajax request and update the record.
But i dont have a clue how to start that....I don't think it has any thing to do with any bind function becouse i am allready binded by calling the save function (or am i wrong and need to bind antway???) can any one help me out here?
P.S. the save function recives the productID do i have the right product when i will need it.
Don't have a code to send for the save function becouse i don't know how to start it and every thing i tried doesn't work....sorry :-(
It might be easier if you simply had both buttons on the page and toggled between them depending on the page state.
<a id="editButton" href="http://example.com/widget/edit/1">Edit</a>
<a id="saveButton" href="http://example.com/widget/update/1" style="display: none;">Save</a>
$(function(){
$('#editButton').click( function() {
// set up the form as edit...
$(this).hide();
$('#saveButton').show();
return false;
});
$('#saveButton').click( function() {
var button = $(this);
var href = button.attr('href');
$.post(href,$('form').serialize(), function() {
// change form back to readonly...
button.hide();
$('#editButton').show();
}
});
});