Develop Reference

How to tell ajax to run particular URL only when a pop up banner is clicked?

I am trying to pop-up a feedback banner, when a particular page is loaded.
Here is the code for that.
$(window).on('load', function() {
$('#review_modal').modal('show');
});
Now I want if someone clicks any button of pop up banner, (either Give feedback or No thanks) it runs a particular URL which only does is (Never show that user feedback again)
Here is my code for that which is wrong.
$(window).on('click', function() {
$.ajax({
type: "POST",
url: "/update_feedback_status",
});
});
I am very very new to ajax, but I need this to be done as soon as possible.
How should I fix it? HO wto tell ajax that On click means clicking on the button of that popup banner which is #reviewmodal.

You should add the click event listener to the elements in popup model instead of window.
For example:
<div id="review_modal" class="modal">
<button>Give feedback</button>
<button>No thanks</button>
</div>
<script>
$('#review_modal button').on('click', function() {
$.ajax({
type: "POST",
url: "/update_feedback_status",
});
});
</script>

How to prevent repeatative submit while using ajax or javascript?

I have a controller in c# and inside the controller there is a save method. The save method saves/updates data that is submitted by submit button click and javascript. The problem is, if you click on the button multiple time, it should only process the very first click and rest of them should be identified as duplicate submit and should be discarded by controller. How to do this in c# mvc web application?

Disable the button after it's clicked. So it can just be clicked once.

Simple way
when button clicked disabled it then actived again after you got response result from ajax! u can also add loader that make ur web look so cool!
<button id="btnSend" onClick="send()">submit</button>
<script>
btnSend=document.getElementById("btnSend");
function send(){
btnSend.disabled=true;
//set disabled button here
$.ajax({ type: "GET",
url: "http://www.google.de",
async: false,
success : function(text)
{
btnSend.disabled=false;
//set active to button
// add your code here
},
fail : function(text)
{
btnSend.disabled=false;
//set active to button
// add your code here
}
});
}
</script>

I would also disable the button on the client side. But you could also check if the submitted data is different from the stored data. If no changes were made you could just return without further saving logic.
Should it be possible to just save the data once? Maybe a redirect to a different view after saving could be a possible solution in special cases.

Javascript Alert function not waiting

I have a Signup page where after the form's submit I send a AJAX POST. There is no problem at all except that, in the success function, I have an alert function that doesn't wait for the user input, but executes the next function immediately.
This is the SubmitHandler Function:
submitHandler: function (form) {
$("#Sign_Button").attr("disabled", "disabled");
$.ajax({
type: "POST",
url: "ws/users/insert.php",
data: $("#form_sign").serialize(),
success: function (data) {
$("#Sign_Button").removeAttr("disabled");
console.log(data);
if (data.success == 1) {
alert("Success.");
window.location.href='./index.php';
}
}
});
}
Note: I tried with window.location.href and window.location, but in both cases it does the same thing: Popup the alert but also redirect to index.php without waiting, closing the popup alert.
NOTE: Please note that both with Alert and Confirm I have the same behaviour

As was answer in this question, you can pause the code using the alert inside of an if. This will also show only an "OK" button (instead of confirm's "yes/no").
It's important to put the ! before the alert call, as the alert function will return always undefined
this is the part of the code with the alert pausing the code:
if (data.success == 1) {
if(!alert("Success."))
window.location.href='./index.php';

I guess you want to use the confirm dialog instead of alert.
Example usage:
if (window.confirm("Do you really want to leave?")) {
window.open("exit.html", "Thanks for Visiting!");
}
More info here

This is the exact behaviour that is expected.
The alert dialog should be used for messages which do not require any response on the part of the user, other than the acknowledgement of the message.
Dialog boxes are modal windows - they prevent the user from accessing the rest of the program's interface until the dialog box is closed.

You would need to put the alert on the ./index.php page
Or you can use the dialog element
(function() {
var showBtn = document.getElementById('showBtn');
var myDialog = document.getElementById('myDialog');
showBtn.addEventListener('click', function() {
myDialog.showModal();
});
})();
<dialog id="myDialog">
<form method="dialog">
<div>Success</div>
<button>Ok</button>
</form>
</dialog>
<button id="showBtn">Show</button>

How can I open a modal window after successful AJAX call?

I am using a modal window plugin for user signup and login pages. After a successful AJAX call how can I open it automatically? I.e. without clicking or submission it should be opened automatically after a successful AJAX call. Please advise on this.

try to define in call back of success field in ajax
$.ajax({
url: "demo_test.txt",
success: function(result){
$('#my-modal').modal();
},
error: function(){
console.log("Something went wrong");
}
});

success: function(result){
$("yourmodel").animatedModal();
}

$("#yourmodalidgoeshere").animatedModal();
//triggers opening of Modal.
$("#yourmodalidgoeshere").click();
The click() helps to trigger the modal. It worked for me. It didn't try with ajax call. I wanted to load the modal on click of an element . Inside the javascript function I had used the above lines and it worked well.

JavaScript, if submit is true (using colorbox and jquery validate)

I'm using the jQuery validation plugin for a form contained in a colorbox. I want to close the colorbox and open a second colorbox (saying thank you) if the validation is successful, and then send the user to their original destination.
The script captures the destination of the user and puts it in a variable, then opens a colorbox. Users can exist the colorbox in four different ways, clicking off the bock, clicking the x in the upper right corner, clicking the close button, or a successful submit. Then they continue on their way.
What I need is something like an if submit successful, then open thank you colorbox. What I've tried so far just breaks everything.
$('#lookUpSubmit').unbind('click').click(function(){
$form.submit();
});
$("#lookUpCancel").unbind('click').click(function(){
$.colorbox.close();
});
$(document).bind('cbox_closed', function() {
window.location = destination_url;
});
$form.validate({
submitHandler: function(form) {
form.submit();
},
//some stuff
});

What exactly happens when de submit was successful ? Do you redirect to a page or something ? As far as JavaScript is Client based you have no influence or whatsoever on where the server brings you. You could implement the Thank You Popup on the Webpage which you are redirected after a successful submit !

The information you've provided is a bit vague. What do you mean specifically by "everything breaks"?
What you describe could be caused by a number of things:
Is $form actually defined somewhere, or did you mean to use $(form)?
Have you verified that your unbind/bind chaining is working properly?
$('#lookUpSubmit').unbind('click').click(function(){
alert("B2K Was Here!");
});
Submitting a form will reload the page or redirect to the action url. You need to prevent the submission.
$('#formid').submit(function(e) {
e.preventDefault();
// validate here
if ( valid ) {
$.ajax({
type: 'POST',
url: this.action,
data: $(this).serialize(),
success: function() {
// open thank you colorbox here
}
});
}
});