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.
Related
I have a problem in my current application. I load lots of page content via ajax and it works always as expected. However, every time user visits another page of my application and clicks back button, those ajax calls is sent every time. I found myself deleting all of the content before ajax call and load it after that. Is there a simple way for such a case ? I mean, I would like to know if there is a way that I can be informed as back button is clicked so I don't need to make another ajax call ?
This is html file:
<div id="contentToBeLoaded">
</div>
It's my current java script now:
$(document).ready(function(){
$("#contentToBeLoaded").empty(); // This is to the handle back button is clicked
$.ajax({
type: 'GET',
url: '/pageToLoadContent',
dataType: 'html',
success: function(html) {
$("#contentToBeLoaded").html(html);
},
error: function(error) {
console.log(error);
}
});
}
I have an Ajax call that looks like this:
$("#start-upload-btn").click(function(){
$.ajax({
type: "post",
url: "",
data: {
newProjectName: $('#project-name').val(),
csrfmiddlewaretoken: csrfToken
},
success: function(data){
$("#file-upload").click();
}
})
});
Upon success I want to perform a click on the element with id #file-upload to launch the file selection dialogue, but putting the code in success function fails to work. It works anywhere else. Is there something special about the scope of the Ajax success function? I really cannot figure this out.
Thanks
There is nothing inherently problematic about issuing a click on any normal element (including a button) from an ajax success callback.
The problem is that a file-input dialog is not a "normal element". It has some specific security limitations - one of which clearly limits your interaction with it.
This is demonstrated by the following fiddle: https://jsfiddle.net/qhfwobpz/
You'll see that issuing a click on the file-upload directly works without a problem. Doing it from an ajax callback yo'll see the callback is called, but the file dialog never shows.
This answer gives more detail as to the "why" and it boils down to you can open the dialog from an event issued by the user but not purely programatically.
On my page I open up a popup using:
sideWindow = window.open(address,'pop',"height=200,width=200,scrollbars=1");
$(sideWindow).load(loadComplete);
And it triggers the function loadComplete after loading correctly.
After opening the window the user can change it address after and I redirect the popup using:
sideWindow.location.href=newAddress;
However it is not triggering loadComplete after it finishes loading as desired. What is the best way to perform the redirect so it will trigger loadComplete after the new page finishes loading?
Notes:
I do not have access to the source of the pages I am loading.
loadComplete should not run until after the images are loaded so $(sideWindow.document).ready would trigger to early.
Figured I'd turn this into an answer. Here is how you'd open in a new window:
As you can see it waits till a successful response to open the new window. I haven't used this because I'm not big on pop ups (I prefer to keep it in the DOM). That being said this should do the trick.
// AJAX window.open()
$('#btnAJAX').on("click", function(){
$.ajax({
url: "/user/login/",
context: document.body,
async:false, //NOTE THIS very important turns call to blocking
success: function(){
success = true
}
});
if(success){
window.open('http://google.com') //opens new page on success
}
})
There is a lot of posts on the subject in stackoverflow like:
window.open() works different on AJAX success
I am using a Ajax to call a MVC controller to submit a form, on a successful call I want to display a dialog box, currently its working the way I want to but the box opens for about a second then closes.
$("#addBtn").click(function () {
$(".container form").ajaxSubmit({ url: '/umbraco/Surface/Basket/AddNow', type: 'post', success: function () { afterSuccess(); } })
});
function afterSuccess() {
BootstrapDialog.alert('Test');
}
Why this is happening?
The problem was not in the Java Script, the problem was in the html of the page. I moved the submit button out side of the form.
This must happen quite a lot! - Hope this helps some else.
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
}
});
}
});