I have a form in a jquerymobile dialog box that I am submitting via jQuery Ajax.
Currently my problem is that once the form is submitted the same dialog box is opened again on top of the original dialogbox.
So that my url reads before submission:
url/index.php#&ui-state=dialog
and then after submission:
url/index.php#&ui-state=dialog#&ui-state=dialog&ui-state=dialog
Has anyone ever encountered something like this before?
[edit added code example]
$(function(){
$("#form").submit(function(e){
e.preventDefault();
var dataString = $("#form").serialize();
errorInput = $("input[name=valOne]#valOne").val();
$.ajax({
type: "GET",
url: "formHandler.php",
data: dataString,
dataType: "text",
success: function(data){
if(data.toLowerCase().indexOf("error") >= 0){
alert(data);
$(".ui-dialog").dialog("close");
$("#valOne").val(errorInput); //the reentering info so user doesn't have to
}else{
$(".ui-dialog").dialog("close");
location.href="index.php";
}
},
error:function (xhr, ajaxOptions, thrownError){
alert(thrownError);
}
});
});
});
You can set your own handler on form with this submit
Use two forms for page and for your dialog window.
Have you tried using $.mobile.changePage("url here") instead of location.href?
More details here http://jquerymobile.com/test/docs/api/methods.html
Would it not be easier to just refresh the page with JS instead of loading it again? It might be calling the dialog functions twice.
I had similar problem with forms. I decided to use <div data-role="fieldcontain"> instead. Now it works good with no "refresh effect". In this case you shouldmake your own message instead of .serialize.
Related
I have a simple issue. I am posting data from a form to my DB using an AJAX request. I have coded in a loading GIF using the beforeSend and complete commands in my AJAX request.
<script>
$(function(){
//email the link
$("##emailTicket#get_active_tickets.ticket_id#").submit(function(){
// prevent native form submission here
$.ajax({
type: "POST",
data: $('##emailTicket#get_active_tickets.ticket_id#').serialize(),
url: "actionpages/email_dashboard_ticket.cfm",
beforeSend: function(){
$('.loader').show()
},
complete: function(){
$('.loader').hide();
},
success: function() {
$("##emailTicketResponse#get_active_tickets.ticket_id#").html("");
$("##emailTicketResponse#get_active_tickets.ticket_id#").append( "Ticket successfully sent." );
}
});
return false;
});
});
</script>
Everything seems to be working correctly however the loading GIF only flashes for a split second because the request doesn't take long at all to complete. Sometimes you can't even see it and users are confused if clicking the submit button actually did anything.
Is there a way to delay the 'complete' part of the function so that the animated GIF appears on the screen longer?
complete: function(){
$('.loader').hide();
},
I was able to achieve this by modifying my complete code in my function and adding a delay in milleseconds:
complete: function(){
$('.loader').hide(3000);
},
I have created a form in my view that calls some method in controller.
I want to do two things on my submit button function:
Use Ajax function to display output on the same page,
Get data (in the same method that is displaying the output) using $this->input->post function
You can write two functions on your button ... For type="button"
<input type="button" value="Don't show this again! " onclick="function1();function2();" />
You can do using ajax like this:
$.ajax({
url: "Here is the url path",
type: "GET",
data: {},
beforeSend:function(){
//do something like loading image
},
success:function(response){
alert(response); //do something
},
error:function(e){
alert("something wrong"+e);
}
})
When dealing with OAuth from the server, such as Twitter and Facebook, you most likely will redirect the user to an URL asking for app permission. Usually, after clicking a link, you send the request to the server, via AJAX, and then return the authorization URL.
But when you try to use window.open when the answer is received, your browser blocks the popup, making it useless. Of course, you can just redirect the user to the new URL, but that corrupts the user experience, plus it's annoying. You can't use IFRAMES, but they are not allowed (because you can't see the location bar).
So how to do it?
The answer is quite simple, and works cross browser without any issues. When doing the AJAX call (I'll be using jQuery in this example), just do the following. Suppose we have a form with two buttons, Login with Twitter and Login with Facebook.
<button type="submit" class="login" value="facebook" name="type">Login with Facebook</button>
<button type="submit" class="login" value="twitter" name="type">Login with Twitter</button>
Then the Javascript code where the magic happens
$(function () {
var
$login = $('.login'),
authWindow;
$login.on('click', function (e) {
e.preventDefault();
/* We pre-open the popup in the submit, since it was generated from a "click" event, so no popup block happens */
authWindow = window.open('about:blank', '', 'left=20,top=20,width=400,height=300,toolbar=0,resizable=1');
/* do the AJAX call requesting for the authorize URL */
$.ajax({
url: '/echo/json/',
type: "POST",
data: {"json": JSON.stringify({"url": 'http://' + e.target.value + '.com'})}
/*Since it's a jsfiddle, the echo is only for demo purposes */
})
.done(function (data) {
/* This is where the magic happens, we simply redirec the popup to the new authorize URL that we received from the server */
authWindow.location.replace(data.url);
})
.always(function () {
/* You can poll if the window got closed here, and so a refresh on the main page, or another AJAX call for example */
});
});
});
Here is the POC in JSFiddle http://jsfiddle.net/CNCgG/
This is simple and effective :)
Try adding async: false. It should be working
$('#myButton').click(function() {
$.ajax({
type: 'POST',
async: false,
url: '/echo/json/',
data: {'json': JSON.stringify({
url:'http://google.com'})},
success: function(data) {
window.open(data.url,'_blank');
}
});
});
Consider the code below. If myField1 does NOT equal myField2, then the alert appears. When I click okay on the alert pop up my form is still there, with all of the fields still populated with the data I had previously entered. However, when I modify the fields so that myField1 DOES equal myField2, and then submit the form it is actually submitted TWICE! Why is this?
$(document).ready(function(){
$("#myForm").submit(function() {
var myField1 = $('#myID1).val();
var myField2 = $('#myID2).val();
if(myField1 == myField2)
{
$.ajax({
type: "POST",
url: 'myFile.php',
dataType: 'html',
data: {myData:myField1,
myData2:myField2},
success: function(data){
alert(data);
}
});
return false;
}
else
{
alert('These two fields are not equal!)
}
});
});
Okay, so I found this on another question and it solves the problem:
$('#myForm').unbind('submit').bind('submit',function() {
// do stuff here...
});
By unbinding the event, then re-binding it, the form no longer submits twice.
Your submit event is going to fire the submit action of the form unless you prevent it from doing so. Running an AJAX call in does not prevent this from happening. You need to stop this yourself.
You need:
$("#myForm").submit(function(event) {
event.preventDefault()
...
I'm trying to disable a submit button until an ajax function is completed.
Right now, I have only been able to figure out how to disable the button for a specified time when the user is typing.
How can I disable the submit button until the ajax data loads? Thank you.
<script>
$('#comment_comment').keyup(function() {
$("#new_comment_button").attr("disabled", true);
setTimeout(function() { $("#new_comment_button").removeAttr("disabled"); }, 2000);
});
$('#comment_comment').preview({ key:'my key',
selector : {type:'rich'},
preview : {
submit : function(e, data){
$.ajax({
dataType: 'script',
url: this.form.attr('action'),
type: 'POST',
data: data
});
},
},
autoplay : 0,
maxwidth : 350,
display : {display : 'rich'}
});
</script>
Disable the button when starts the AJAX with simple JS and enable it when the AJAX request finishes.
It would be something like this
$.ajax({...
success: function(){
submitButton.enable(); // Pseudo-code
},
...
});
You can do several things with the AJAX request. See this post for more information
EDIT: If you want to prevent the double submit request, there is a way to do it but I can't remember :/ and I didn't found it on google.
This is a way to do it, but I don't like it