I have the following jquery script that is supposed to post data to the data base,
//delegated submit handlers for the forms inside the table
$('#issue').on('click', function (e) {
e.preventDefault();
//read the form data ans submit it to someurl
$.post('<?php echo base_url() ?>pharm_profile/dept_issue/', $('#Issues_Form').serialize(), function () {
//success do something
alert("Success Approved Successfully");
var url = "<?php echo base_url() ?>pharm_profile";
$(location).attr('href',url);
}).fail(function () {
//error do something
alert("Failed please try again later or contact the system administrator");
})
})
Whenever I click the button, the script runs twice / posts the data twice. How can I control that to only once?
This can happen if your DOM has more than one element "#issue" inside. This can happen, even if only one is shown,
On the other hand, the "on" actually gets registered every time you add an element with id "issue". So if you on happen to add this elements dynamically, each time you add it, a new click event handler gets assigned...
To be pragmatic, because it doesn't seam that you really wanted that behavior... before the "on" registration use the off..
$('#issue').off('click');
$('#issue').on('click',function....);
Related
I got this select tag in my form, which contains the name of a room
<select class = 'form-control' id = 'room_select' name = 'room'>".$rooms."</select>
I got 4 rooms so this select contains 4 options
$(document).ready(function(){
$("select").msDropDown();
$("#room_select").change(function(e){
e.preventDefault();
$("#room_select_form").submit();
});
$("#room_select option[value='<?php echo $room; ?>']").attr('selected', 'selected');
});
Then I got this doc ready function first one .msDropDown(); is to be able to get images in the options. Then I got the change function which I googled around and put in a preventdDefault to not refresh page, (still refresh) I thought that I could use an ajax funciton to do this but I dont really know how to write it down or even if it works.
So currently the problem is that my function changes the room value as seen last in the code, but it refreshes the select tag and I see room nr 1 again,
Your page is getting refreshed, because you are submitting the form in onchange listener. You need to put e.preventDefault(); in your form submit listener to prevent default form submit and then you can call ajax in you submit listener.
$(document).ready(function(){
$("select").msDropDown();
$("#room_select").change(function(e){
$("#room_select_form").submit();
});
$("#room_select option[value='<?php echo $room; ?>']").attr('selected', 'selected');
$("#room_select_form").submit(function(e){
e.preventDefault(); // to prevent page refresh
// your Ajax call goes here....
});
});
I am trying to start a PHP function in Wordpress on the click of a link. I've managed to do it using a form-submit, but I want to do it on a link click.
I've pulled together an AJAX request but it doesn't seem to work - any thoughts much appreciated.
HTML Link Code
Ajax Click
Javascript Function
<script>
// Create a function to pick up the link click
$('#link_id').click(function(event){
event.preventDefault(); // prevent default behaviour of link click
var data = {
action: 'test_response_php', // This is the PHP function to call - note it must be hooked to AJAX
};
// Post to The Wordpress URL
jQuery.post("<?php echo admin_url('admin-ajax.php'); ?>", data, function(response) {
alert(response);
});
});
PHP Function
function php_function() {
echo 'Hello World';
// Some interesting server side stuff
}
add_action('wp_ajax_nopriv_test_response_php', 'php_function');
add_action('wp_ajax_test_response_php', 'php_function');
Change your anchor tag like this:-
Ajax Click
You were missing id tag in anchor and you are running click event on id click.
I have 3 buttons
<div onclick="javascript:newmessage()" class="mailcontents">New Message</div>
<div onclick="javascript:inboxmails()" class="mailcontents">Inbox</div>
<div onclick="javascript:sentmailsbox()" class="mailcontents">Sent</div>
and the divs where the content has to be displayed
<div id="inbox"></div>
<div id="sent"></div>
Onclick of each I am changing the content by calling the respective functions
var times = 0;
function inboxmails(){
times++;
location.hash = times;
$('#inbox').empty();
$('#sent').empty();
$('#newmessage').empty();
$.ajax({
success: function (data) {
$('#inbox').append('inbox data');
}
});
}
function sentmailsbox(){
times++;
location.hash = times;
$('#inbox').empty();
$('#sent').empty();
$('#newmessage').empty();
$.ajax({
success: function (data) {
$('#sent').append('sent data');
}
});
}
function newmessage(){
$('#inbox').empty();
$('#sent').empty();
$('#newmessage').empty();
$.ajax({
success: function (data) {
$('#newmessage').append('new message data');
}
});
}
I have also added hashing which adds hash tag and a numberical value to the url
Here is the plunker code https://plnkr.co/edit/tTMzTFIHD03pkIt4CkHO?p=preview
But when I click on the back button of browser it must reload the previous ajax content. i.e, if I click on inbox, it displays inbox data and next I clicked on sent, it displays sent data, and then when I click the browser's back button it must display inbox content inbox data i.e, the previous content.
I understood how to change a url using hashing. But I am unable to understand and also could not find a proper example to pushstate i.e push history back / display the pervious ajax content.
I have checked various examples. But I am not understanding how to go to load ajax content using hashing.
Please help !!!
Thanks in advance !!!
You've not bound any function to a hashtag change event. In JavaScript you could use this event to fire off the AJAX call again:
window.onhashchange = doThisWhenTheHashChanges;
See Mozilla
There is also this JQuery library you can look at which addresses cross browser compatibility issues and a full list of alternative solutions
sir,
when i click on "Rename Day button" jquery popop calender appears in my screen , once if i click on its submit button it is forwarding to my page but is not refreshing the exact div.. I do not where should i specify div target for refreshing my particular div..
jquery function for submit
function okButton(){
$("#formId").submit();
};
$(this).submit({
target: '#userTemplateRightmiddlediv'});
};
struts.xml
<!-- Rename Selected Day for User Template -->
<action name="EditDayAction"class="com.ebhasin.fitnessbliss.dao.DynamicTableOperationsService" method="RenameDayUserTemp">
<result name="success">/jsps/userTemplateRightmiddlediv.jsp</result>
</action>
Extend the functionality of your 'okButton' to stop the default form submission behavior, then create an ajax function to connect to your XML file, return the data, and then insert the data into the .html() of the element with an ID of userTemplateRightmiddlediv
function okButton(){
$("#formId").submit(function(e){ //'e' for 'event'
e.preventDefault();//stop the page from refreshing
$.ajax({
url: 'Struts2 URL Here',
dataType: 'xml',
success: function(xml){
//function(xml) represents an object returned from our XML file, we can work with it however we want by using normalized jquery procedures
$("#userTemplateRightmiddlediv").html(xml);
}
});
});
}
Edit
Changed to reflect portability with Struts 2.
You're trying to fire two submits. $ is a function that returns an object. 'submit' is a method of that object. If the jquery object is holding a form, it's like pressing the submit button on that form so the page refreshes and all the remaining code doesn't matter. You're trying to submit twice but $(this).submit doesn't really make sense.
If I had to guess, maybe you want something more like this:
$('#formId').submit( function(e){
e.preventDefault(); // stops the page from reloading
//maybe ajax or something else to change this div you're talking about.
} )
I have a thumb gallery where I am using ajax/javascript to submit a form per image to report the image as broken seamlessly along with php. The form and script is templated so the script is in the header and then the form is printed multiple times on the same page with a hidden field with a different id for the value per thumb. So basically this is what i have.
javascript in header
just a quick idea of the forms i have. Just a quick idea not what I actually have.
image1 followed by the form
image2 followed by the form
So when you hit the button it basically submits all of the forms at the same time. I am sure it can be fixed with a (this) or something like that so it only submits a single form at a time. Let me know please.
$(function() {
$(".submit").click(function() {
var imgId = $("#imgId").val();
var dataString = 'imgId='+ imgId;
if(imgId==''){
$('.success').fadeOut(200).hide();
$('.error').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}else{
$.ajax({
type: "POST",
url: "inc/brokenImgReport.php",
data: dataString,
success: function(){
});
$('.error').fadeOut(200).hide();
$('.success').fadeIn(200).show();
setTimeout(function() {
$('.success').fadeOut(200); }, 2000);
}
return false;
});
});
in a page with multiple forms. You can refer individual form as an array element forms[0],forms[1] and likewise, on click of submit button. you can do
forms[0].submit
forms[1].submit
and likewise
$(document).ready( function(){
$('form.your_class_if_needed').submit( function(){
do_your_stuff_here()
})
})
Every form with class your_class_if_needed will have the function you define attached to its submit method. Within that function, $(this) will refer to each specific form -- not all of them. You can then easily select, process, and assemble your form fields and values within the context of each form, and submit them with $.ajax() or $.post().