We Keep Coding

Javascript Sweetalert is sending form multiple times

my following javascript function is sending the form multiple times.
4 to 9 posts at the same time and I cannot get it right now.
Here is the function:
function formModal(url, id, type, text, send_type) {
$(document).ready(function () {
$('#' + id).on('submit', function (e) { //id of form
$.ajax({
url: url, // PHP file
data: $(this).serialize(),
type: send_type,
success: function (data) {
console.log(data);
// Success Alert
swal({
html: true,
title: text,
type: type,
timer: 1500,
showConfirmButton: false
});
setTimeout(function () {
// Refresh after 2 seconds
window.location.href = "";
}, 2200);
},
error: function (data) {
//Error Alert
swal("Oops...", "Something went wrong :(", "error");
}
});
e.preventDefault(); //This is to Avoid Page Refresh and Fire the Event "Click"
});
});
};
The function will be used in a HTML/ PHP Script:
<script> formModal('/dashboard_scripts/module/wiki/edit_wiki_article.php', 'edit_article', 'success', 'Artikel wurde gespeichert', 'GET') </script>

what are you doing in your code , why $(document).ready() inside the function formModal() and then inside that $(document).ready() you are binding submit handler which means every time you call the formModal() you are binding a submit event handler and thats the main reason of multiple submits of the form. you should either remove the submit handler from the function and make a simple ajax call or change
$('#'+id).on('submit', function (e) {
to
$('#'+id).off('submit').on('submit', function (e) {
Sweet Alert has nothing to do with the multiple submits of your form

Accordion dropdown with travel logic component

I want to create a dropdown accordion with specific behaviors :
Each time a accordion is shown, an AJAX request is performed to get all items information;
When deploying the dropdown, the first accordion must be shown;
Each time the user click on an accordion item, clicked item must be close, and the next one should be open;
By clicking on an item in the final accordion, the dropdown should be closed.
I've created the dropdown first of all. Please click on the Tachometer:
https://codepen.io/anon/pen/LzmjJe
Here is the javascript :
$(window).ready(function () {
// Collapse accordion every time dropdown is shown
$('.dropdown-accordion').on('show.bs.dropdown', function (event) {
$(this).find('.dropdown-menu').first().stop(true, true).slideDown();
var accordion = $(this).find($(this).data('accordion'));
accordion.find('.panel-collapse.in').collapse('hide')
});
// Collapse accordion every time dropdown is shown
$('.dropdown-accordion').on('shown.bs.dropdown', function (event) {
//Afficher le collapse commune
$("#collapseCommune").collapse('show');
});
$('.dropdown-accordion').on('hide.bs.dropdown', function () {
$(this).find('.dropdown-menu').first().stop(true, true).slideUp();
});
// Prevent dropdown to be closed when we click on an accordion link
$('.dropdown-accordion').on('click', 'a[data-toggle="collapse"]', function (event) {
event.preventDefault();
event.stopPropagation();
$($(this).data('parent')).find('.panel-collapse.in').collapse('hide')
$($(this).attr('href')).collapse('show');
})
$(".dropdown-accordion #collapseCommune").on("show.bs.collapse", function () { // Occurs when the collapse commune is shown
var element = $(this)
$(".dropdown-accordion #collapseCommune > .panel-body").empty();
$.ajax({
url: "somewhere",
method: 'GET',
datatype: "json",
timeout: 5000,
beforeSend: function () {
//LOADING
element.append("<div class='loader'></div>")
},
success: function (res) {
//ENQUEUE CHART
console.log(res);
element.find(".loader").remove();
res.forEach(function (element) {
addItemToAccordion($(".dropdown-accordion #collapseCommune > .panel-body"), element, "accordion-commune");
})
},
error: function (err) {
//SHOW ERROR
//element.find(".loader").remove();
}
});
})
})
But i'm stuck for the rest, mainly because creating a component might be better, but i don't know how to begin.
Please suggest a module which work similar to mentioned above.

Interplay between <form> and .ajax()

Folks,
I'm learning Ajax by tinkering. At first, I had a form with button, which made an Ajax call to a dummy controller action. The HTML and JavaScript on the client side.1
<form method="post">
<button name="btnSaveProject" title="When you save this project, it willl be available for 30 days.">
Save
</button>
</form>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script>
<script>
$(document).ready(function () {
$("button[name='btnSaveProject']").click(function () {
console.log("make ajax call");
$.ajax({
url: "/Project/Save",
type: "GET",
timeout: 8000,
cache: false
}).done(function () {
console.log("ajax call successful");
}).fail(function (jqXHR, textStatus) {
console.log("something went awry. " + textStatus);
}).then(function () {
console.log("always just in case");
});
});
});
</script>
A strange thing was happening when I clicked the button. The Ajax call would reach the server (I know thins because I had a break point in the controller action, which triggered). But neither neither .done(), nor .fail(), nor .always() was getting called back on the client-side.
Then I have moved the <button> out of the <form>, and now .done(), and .always() get called back as expected. There seems to be some interplay between the can Ajax call. What is this interplay? Where can I learn more about it? What do I have to do to be able to use Ajax inside a <form>?
Here's the server-side code, but I suspect that it's a non-factor.
// AJAX: /Project/Save
public ActionResult Save() {
System.Threading.Thread.Sleep(600); /// <bring-up>A bit of latency to make the Ajax call more noticeable.</bring-up>
return Json("lorem ipsum", JsonRequestBehavior.AllowGet);
}
1 I have stripped down the code and kept only the parts that I think are applicable to the question. If I have stripped down too much, please let me know: I'll post more code.

You can add a type to your button:
<button type="button" name="btnSaveProject"
or just prevent the defaults of button to submit the form with event.preventDefault():
$("button[name='btnSaveProject']").click(function (e) {
e.preventDefault();
// other code as is
});

Since the button is in a form its default click action is to submit the form, So in your case as soon as the ajax request is sent the actual page is submitted which I think is reloading the page causing the callback handler to unload that is why those are not getting called
One solution is to prevent the default action of the click event by calling event.preventdefault()
$(document).ready(function () {
$("button[name='btnSaveProject']").click(function (e) {
//prevent the default action of the button click which is to submit the form
e.preventDefault()
console.log("make ajax call");
$.ajax({
url: "/Project/Save",
type: "GET",
timeout: 8000,
cache: false
}).done(function () {
console.log("ajax call successful");
}).fail(function (jqXHR, textStatus) {
console.log("something went awry. " + textStatus);
}).then(function () {
console.log("always just in case");
});
});
});
But since you are using a form, instead of a button click event it will be better to use a form submit event like
$(document).ready(function () {
$("form").submit(function (e) {
//prevent the default action of the button click which is to submit the form
e.preventDefault()
console.log("make ajax call");
//your ajax code
});
});
Another option is to set the type of the button to button so that the form submit will not be triggered like
<button type="button" name="btnSaveProject" title="When you save this project, it willl be available for 30 days.">Save</button>

Prevent click before AJAX response

I'm submitting a file with ajax.
Until I get the answer from the request, I show a modal window, but if my users click on the modal before it get the answer, the AJAX request gets canceled. I'm looking for a way to prevent that.
I'm using https://github.com/malsup/form/ to post with ajax
Full code is here : http://jsfiddle.net/WC9xn/4/
Thanks
$('form').on('submit', function (e) {
// Show loading modal popup
$("#dialog-modal").dialog({
height: 140,
modal: true
});
$(".ui-dialog-titlebar").hide();
e.preventDefault();
// prevent native submit
$(this).ajaxSubmit({
url: '/unitary/import_ajax',
type: 'post',
dataType: 'json',
iframe: true,
success: function (data) {
$('#dialog-modal').hide();
if (data == 'error') {
alert('error, invalid file');
} else {
var event = jQuery.Event;
submitForm(event, data);
}
}
})
});
function submitForm(event, data) {
//Do some stuff
}

$('form').off('submit').on('submit', function (e) {
// Show loading modal popup
$("#dialog-modal").dialog({
height: 140,
modal: true
});
havent tried, but see if it works, just add the off('submit').

I tried everything without success...
Remember that I'm using ajaxSubmit() with iframe option on. (for compatibility with IE).
Apparently, clicking on the modal actually clicks on the iframe witch cause the POST ajax request to get canceled.
I decided to recreate a modal on my own without jquery. Here's what I'm using now
var loading = $('<div>').prop('id', 'loading');
loading.html('<div id="loading_box"></div><span id="loading_txt"><span id="loading_txt">Import...</span>');
$('form').on('submit', function(e) {
loading.appendTo('body');
// disable left click
var event = $(document).click(function(e) {
e.stopPropagation();
e.preventDefault();
e.stopImmediatePropagation();
});
// disable right click
$(document).bind('contextmenu', function(e) {
e.stopPropagation();
e.preventDefault();
e.stopImmediatePropagation();
});
$(this).ajaxSubmit({
[...]

Close dialog box from within AJAX loaded content

I have a jquery ui dialog that loads its content via ajax:
$('#register').click(function(e) {
var tag = $('<div></div>');
$.ajax({
url: 'signup.html',
success: function(data) {
tag.html(data).dialog({modal: true}).dialog('open');
}
});
e.preventDefault();
return false;
});
I have a second script within the content that is supposed to close the dialog when the submit button is pressed
$(function() {
$('form #submit').click(function(e) {
$(this).parents('.ui-dialog').dialog('close');
e.preventDefault();
return false;
});
});
When i click the submit button, i get the error:
Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'
What is it that i am missing to allow me to close the dialog from the content that has been loaded via ajax?

You have to call dialog('close') on the element where dialog('open') was called before. You're calling the function on$('.ui-dialog')instead of$('.ui-dialog ...')`.
You should define id or class for the tag element in your code:
var tag = $('<div id="signup-id"></div>');
Then find the correct element in click handler like this:
$(this).parents('.ui-dialog').children('#signup-id').dialog('close');
Note: You can find #signup-id in click handler directly like $(this).children('#signup-id') if you're sure that signup.html never contains element with signup-id id.

Define you tag dialog in html
<div id="tag_dialog" style="display:none">
</div>
then on document ready:
$(document).ready(function(){
$('#tag_dialog').dialog({
modal:true,
autoOpen:false,
//you could give some other options such as width, height .....
});
$('#register').click(function(e) {
$.ajax({
url: 'signup.html',
success: function(data) {
$('#tag_dialog').html(data).dialog('open');
}
});
e.preventDefault();
return false;
});
$('form #submit').click(function(e) {
$('#tag_dialog').dialog('close');
e.preventDefault();
return false;
});
});