I have the following javascript, I don't want this mousedown function to fire if the user is clicking on a delete div inside the .field_trip_mini_div. The delete div id is 'delete'. What code should I add so the mouse down function does not procede if the user clicked on the delete div? I tried changing the first line to
$(".field_trip_mini_div :not('#delete')").live({
But that didn't work. Is there a way I could stop it on the second line of code?
$(".field_trip_mini_div").live({
mousedown: function(){
$.ajax({
type: "POST",
url: "/field_trips/"+selected_field_trip_id+"/reload_div",
data: {id: selected_field_trip_id},
success: function(response)
{
$('#selected_fieldTrip_div').html(response);
}
});
});
Edit: I used # originally, thank you for the answers but it was a Stack Overflow input error.
Is delete an element inside field_trip_mini_div? If so you can check the id of the target of the clicked element using e.target:
$(".field_trip_mini_div").live({
mousedown: function(e){
if ($(e.target).attr("id")!= "delete") // This line right here
{
$.ajax({
type: "POST",
url: "/field_trips/"+selected_field_trip_id+"/reload_div",
data: {id: selected_field_trip_id},
success: function(response)
{
$('#selected_fieldTrip_div').html(response);
}
});
}
});
Some info on events and the event object: http://www.w3schools.com/jsref/dom_obj_event.asp
Use this:
$(".field_trip_mini_div :not('#delete')").on({
Note: Don't use "live" as it is deprecated; use "on" instead.
As delete is id use #, I suggest you to use on as live is deprecated.
$(".field_trip_mini_div :not('#delete')").live({
or you can skip the code when delete is clicked
$(".field_trip_mini_div").live({
mousedown: function(evt){
if (evt.target.id == "delete")
return;
$.ajax({
type: "POST",
url: "/field_trips/"+selected_field_trip_id+"/reload_div",
data: {id: selected_field_trip_id},
success: function(response)
{
$('#selected_fieldTrip_div').html(response);
}
});
});
Related
I want to add events to my DB via fullcalendar. So I want to add an event and set its id to the id it gets in my DB.
function addCalEvent(event) {
var jEvent = {};
jEvent['startTime'] = moment(event.start).unix();
jEvent['worker']="GUZ"
jEvent['title']=event.title;
if (event.end) {
jEvent['endTime'] = moment(event.end).unix();
}
$.ajax({
url: 'dux.html',
type: 'POST',
data: {
type: 'addNewEvents',
event: jEvent,
REQUEST_TOKEN: "REQUEST_TOKEN>",
},
datatype: 'json',
success: function(data) {
event.id=data;
event.title="NEW";
$('#calendar').fullCalendar('updateEvent', event);
},
});
}
The ajax retrieves the id of the added event and the id and title do get changed, but the 'updateEvent' method doesn't seem to be called, because there is no change to the rendered events title or id.
Ok,
apperently if you make a asynchronous ajax call the order in which commands are executed isn't the order you write it.
I need to add async: false to make this work.
You can manually call rerender events with $('#calendar').fullCalendar( ‘rerenderEvents’ )
Link to docs here
I have three checkboxes that who have checked/unchecked values populated from a model. I'm using an Ajax post on button click event to call controller actions for each checkbox changed event in order to update the DB.
Here is the code for one of the checkboxes (apart from the selector ID, they are all the same):
$(document).ready(function () {
//document.getElementById('UpdateButton').onclick = function () {
$("UpdateButton").click = function () {
$('#NatAm').change(function () {
// if ($('#NatAm').is(':checked')) {
$.ajax({
//url: '#Url.Action("NativeUpdate", "Transactions")',
url: '/Transactions/NativeUpdate',
//data: { isNativeUp: true },
type: 'POST',
dataType: "json"
});
//}
});
Edit (HTML/View Code):
#Html.CheckBox("NatAm", (bool)#ViewBag.NativeAm)
<input name="UpdateButton" id="UpdateButton" type="submit" value="Update" style="margin-left: 15px; margin-top: 3px;" class="btn btn-success" />
I cannot get this to work. Before adding the button, the ajax post was working fine. Thank you for your help!
Your click handler isn't right. You need to pass in the id of the button and use jQuery click handler. You also need not to nest the handlers:
$(document).ready(function() {
$("#UpdateButton").click(update);
$('#NatAm').change(update);
});
function update() {
$.ajax({
url: '/Transactions/NativeUpdate',
type: 'POST',
dataType: 'json'
});
}
JSFiddle Demo: https://jsfiddle.net/vLzwuwdo/
You're telling JQuery to look for 'UpdateButton' tags which in your case does not exist. You're missing the # which indicates an ID in your button.
Try this
$(document).ready(function () {
//document.getElementById('UpdateButton').onclick = function () {
$("#UpdateButton").click(function () {
$('#NatAm').change(function () {
// if ($('#NatAm').is(':checked')) {
$.ajax({
//url: '#Url.Action("NativeUpdate", "Transactions")',
url: '/Transactions/NativeUpdate',
//data: { isNativeUp: true },
type: 'POST',
dataType: "json"
});
//}
}));
id should be unique in same document (NatAm and UpdateButton), replace the duplicate ones by global classes will solve the first problem.
You should not define event inside another since every time you trigger the first it will create new event for the element, in your case every time you click new change event will be created and attached to the first element with NatAm.
Hope this helps.
I have a firework detonation system which uses JQuery to connect to a PHP script via AJAX to detonate the fireworks. The only problem is that if you click one launch button straight after another, there is a possibility of setting off more fireworks than you want.
I need a way to disable all other links on the page until the ajax has finished and received a response. I have tried:
//Prevent clicks
$("body").find("a").click(function (e) { e.preventDefault(); });
//Re-enable clickable links
$("body").find("a").unbind("click");
My current ajax script is:
$(document).ready(function() {
$(".button").on("click",function() {
//Disable all other links
$.ajax({
type: "POST",
url: "launch.php",
data: {FID:$(this).attr('id'),Length:$('#FireLength').val()},
success: function(e) {
//Re-enable other links once ajax is complete
}
});
return false;
});
});
What would be even better is, if the buttons were to grey out whilst waiting for the response. I have a demo script at http://joshblease.co.uk/firework/
One way using a variable disabled
$(document).ready(function() {
var disabled = false;
$('a').css('opacity','0.4');
$(".button").on("click",function() {
//Disable all other links
disabled = true;
$.ajax({
type: "POST",
url: "launch.php",
data: {FID:$(this).attr('id'),Length:$('#FireLength').val()},
success: function(e) {
//Re-enable other links once ajax is complete
disabled = false;
$('a').css('opacity','1');
}
});
return false;
});
});
$('a').click(function(event){
if(disabled)
event.preventDefault();
});
Update
Changed link opacity for a disabled effect.
I would use actual buttons, not links, and disable them when one is clicked. Use a class on the button distinguish it from other buttons that might be on the page.
<input type="button" class="launch" ... >
...
$(document).ready(function() {
$("input[type=button].launch").on("click",function(event) {
// We will handle the button, prevent the standard button press action.
event.preventDefault();
//Disable all other links
$('input[type=button].launch').disable();
$.ajax({
type: "POST",
url: "launch.php",
data: {FID:$(this).attr('id'),Length:$('#FireLength').val()},
success: function(e) {
//Re-enable other links once ajax is complete
$('input[type=button].launch').enable();
}
});
return false;
});
});
Further manage it with a flag as #MonkeyZeus suggests.
I'd manage this with a class (assuming there might be some links you want to work). All the links that you want to not work give them the class blockable.
You can also then style your a.disabled class in your css to grey out the links (or whatever you want)
$(document).ready(function() {
$(a.blockable).click(function(e) {
if($(this).hasClass('disabled'))
{
e.preventDefault();
}
}
$(".button").on("click",function() {
$('a.blockable').addClass('disabled');
$.ajax({
type: "POST",
url: "launch.php",
data: {FID:$(this).attr('id'),Length:$('#FireLength').val()},
success: function(e) {
$('a').removeClass('disabled');
}
});
return false;
});
});
I would approach this by declaring a variable and only allowing AJAX to fire if variable has not been tripped:
$(document).ready(function() {
var launch_processing = false;
$(".button").on("click",function() {
if(launch_processing === false){
launch_processing = true;
$.ajax({
type: "POST",
url: "launch.php",
data: {FID:$(this).attr('id'),Length:$('#FireLength').val()},
success: function(data) {
},
complete: function(){
launch_processing = false;
}
});
}
else{
alert('Are you mad?!?! Fireworks are in progress!');
}
});
});
I am trying to allow a button to be clicked only once and then some data be submitted via ajax. The problem I am facing is that a user can click 50x and the data is POST submitted each time ?
jQuery("#id").unbind('click');
jQuery.ajax({
type: "POST",
url: ajax_url,
data: ajax_data,
cache: false,
success: function (html) {
location.reload(true);
}
});
How can I ensure that if a user clicks #ID 100x - that the data is only submitted once ? And then #ID is re-enabled ?
You could use the .one() function in jQuery.
jQuery("#id").one('click', function()
{
jQuery.ajax({
type: "POST",
url: ajax_url,
data: ajax_data,
cache: false,
success: function (html) {
location.reload(true);
}
});
});
Bear in mind this will completely remove the click event, even if you have an error with your ajax, you still won't able to click it again.
just disable the button
$("#id").attr("disabled", "disabled")
and then in the success function enable it
$("#id").removeAttr("disabled")
Easiest way would be to use a flag which gets reset when the success is fired:
if(clicked == False){
clicked = True;
jQuery("#id").unbind('click');
jQuery.ajax({
type: "POST",
url: ajax_url,
data: ajax_data,
cache: false,
success: function (html) {
location.reload(true);
clicked = False;
},
error: function () {
alert("Error happened");
clicked = False;
}
});
}
You can disable to control, or use one of the many modal libraries to show the spinning wheel
see this Jquery modal dialog question on SO
You could disable the button on click event and enable it back when ajax request is completed.
In your click event you could disable the button and then re-enable the button in the success function of the ajax event.
Another option would be to set a parameter on the element that is being clicked to indicate the button was clicked and then check to see if it is set if it is don't send the ajax request if not then do send it. Once the ajax is done you can unset the parameter again to allow it to be run.
try this:
$(document).ajaxStart({ function() {
$('#submit_button').click(function(){
return false;
});
});
where: #submit_button is id of the element U want to disable
that code will disable clicking on the submit button
I have this HTML
<li>
<a rel="1" href="/jobwall/job/1">
<img src="http://lcl.moovjob.com/media/images/employers/simonainleydotinfo.jpg">
</a>
</li>
and I have this javascript
$('ul#jobs li a').mouseenter(function(){
$(this).parent().addClass('active');
$.ajax({
type: 'POST',
url: '/jobwall/job_tooltip',
data: 'employer_id='+$(this).attr('rel'),
success:function(html) {
$(this).parent($(this)).addClass('added');
}
});
}).mouseleave(function(){
$('#wrapper').append('Leave');
});
On mouse enter I am wanting to add a class the li that holds the a that has the mouseenter event on it, however I cannot get it to add the class on mouseenter.
You have two calls to .addClass(). Which one are you talking about?
The first one should work.
The second one will not because the value of this has changed inside the success: callback. You can cache it in a variable and reference it inside.
$('ul#jobs li a').mouseenter(function(){
// cache the parent here, because "this" will have different
// meaning in the callback
var $parent = $(this).parent().addClass('active');
$.ajax({
type: 'POST',
url: '/jobwall/job_tooltip',
data: 'employer_id='+$(this).attr('rel'),
success:function(html) {
// Inside here, "this" no longer references the DOM element
$parent.addClass('added'); // reference the parent you cached
}
});
}).mouseleave(function(){
$('#wrapper').append('Leave');
});
Another option would be to set the context: property of the AJAX call.
$.ajax({
type: 'POST',
context: this, // set the context to the current "this" for the callback
url: '/jobwall/job_tooltip',
data: 'employer_id='+$(this).attr('rel'),
success:function(html) {
$(this).parent().addClass('added');
}
});
And another option would be to use $.proxy() to retain the value of this.
$.ajax({
type: 'POST',
url: '/jobwall/job_tooltip',
data: 'employer_id='+$(this).attr('rel'),
success: $.proxy( function(html) { // Have $.proxy return a function
$(this).parent().addClass('added'); // with the proper "this"
}, this )
});
Your this inside of the success event will be the window not the anchor element.
Take a ref of the anchor outside the .ajax call and use it in the success event.
$('ul#jobs li a').mouseenter(function(){
var $this = $(this);
$this.parent().addClass('active');
$.ajax({
type: 'POST',
url: '/jobwall/job_tooltip',
data: 'employer_id='+$(this).attr('rel'),
success:function(html) {
$this.parent().addClass('added');
}
});
}).mouseleave(function(){
$('#wrapper').append('Leave');
});
You're mis-calling the parent method.
Change it to
$(this).parent()
Try
$(this).closest('li').addClass('added');
Or just
$(this).parent().addClass('added');