I have a list of files and in the end of each li-element I got a button, which looks like
<div class="settingsBtn"></div>
In the dialog I got a form. A want to submit some data and then close dialog. To be honest I think I'm missing something simple, the submit works but I don't want to load any html data on the php side, I just want to close the dialog.
I accomplished this but enable ajaxform plugin and I handle it manually:
$(document).delegate("#myDialog", "pageinit", function() {
$('#myForm').submit(function() {
$(this).ajaxSubmit({
success: function() {
$('.ui-dialog').dialog('close');
}
});
return false;
});
});
But it seems like a wrong solution. I don't have an ajax loader picture, and the jquery mobile framework has everything for ajax handling, but I didn't find how to close the dialog =(
I'd appreciate any help, thanks.
Related
I'm new to jQuery mobile, I have just started using it for a WordPress site that's supposed to be only used via a smartphone. I like the way it looks now that I added jQm to the equation.
The problem I have is that after I submit a form, it correctly takes me to the "thank you" page, which at this point is just a single line of text reading "thank you for playing", but immediately after that it goes back to the original form where it came from. I might not be able to explain this better, so I recorded a video with the issue here: http://screencast.com/t/QMD0BProSg
If I disable ajax with "$.mobile.ajaxEnabled = false;" it works, meaning it doesn't go back to my form, but having ajax enabled and working the way it's supposed to, will get rid of a couple of other issues I have. Fixing this behaviour will save me a lot of time!
Here's the HTML:
<form id="stop-spin" action="/thanks-for-playing" method="post">
<input type="hidden" id="stop-spin-nonce" name="stop-spin-nonce" value="c96ef6a79f">
<input type="hidden" name="_wp_http_referer" value="/spinner/">
</form>
<div class="play-button">
</div>
I removed the extra elements for the sake of simplicity, but it's worth noting that my form doesn't have a button inside, what I do is capture the Click event of the #stop-rotation anchor via jQuery and I do the form submit there.
Here's my jQuery:
$( document ).on( 'pageinit ready', function() {
$( document ).on( 'click', '.play-button a#stop-rotation', function() {
$( '#stop-spin' ).submit();
});
});
I might be missing something obvious here, can anyone help me out with this?
At the moment this little app is local only, but I can try and build a fiddle or upload to my test server if anyone wants to take a look at it as a whole.
Thanks in advance for any assistance
Corrected your code, this should do the job. You'll never need the ready() event in JQM, replace it with pageinit() or pageshow() for example.
$( document ).on( 'pageinit', function() {
$( '.play-button a#stop-rotation' ).on( 'click', function() {
$( '#stop-spin' ).submit();
return false;
});
});
Am trying to understand jquery. Am a bit slow, maybe cause I come from a COBOL background.
I learn as i do, instead of just reading. php, jquery are all just hobbies for me
I used to have these update form pages. I wanted to try and put them in dialogs.
I trying using Dialog with an I frame, I did not like it, The iframes were very slow to load, of of the pages being loaded contained jquery tabs, which where even slower to load. And several other problems.
So I trying moving away from iframes. I stripped the pages and kept the meat(the body of my php/html file)(minus the body tag), So now I load a short version of my Form onto the dialog, It loads beautifully and looks good.
So next I wanna submit my for data, this is where I am a bit lost....
I am guesting I have to use Ajax, but on returning from Ajax with a OK/Fail message I am lost again.
My submit buttons were not jquery dialog buttons, Must they be so?
Must I use buttons:
{
"Save" : function () {
.....
"Close" : function () {
$(this).dialog("close");
.....
}
These are ugly and I have less control on where to place them and how the look.
All you need to do is make sure you have a form in your dialog box.
The, add a listener on your form. Let's say you have
<form id="myForm">
<input id="myInput" name="myName" type="text" />
</form>
Then you would add a listener :
$("#myForm").die().live('submit',function(e) {
e.preventDefault();
$.ajax({
type : POST,
url : localhost:8080/myUrl,
dataType : 'json',
cache: false,
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
data : $("#myForm").serialize(),
success : function(){ //do what you want here, like displaying validation errors...},
error:function (xhr, ajaxOptions, thrownError){ //manage ajax errors}
});
return false;
});
So your Save button is just a plain input type="submit"
Have fun !
I have a few links on my site that will need to show a modal dialog when the user clicks on one of them. The modal will contain a message like: You are now leaving the "SECTION NAME" part of "SITE NAME". The user will then either accept which will allow the user to continue on with their request or cancel which will keep the user where they are.
An example of a link would be: My Interests
So as you can see the class of leaving-section would cause the link to do what I have specified above, and will also open the link in a new tab/window BUT the user must first accept that they are aware they are being taken to another part of the site.
I have looked at the docs but I haven't seen any examples where a) the dialog is created on the fly rather than hiding and showing a div and b) allowing the user to confirm and being sent to their original location i.e. the url which they clicked.
This is what I have so far:
$("#leaving-section").dialog({
resizable: false,
modal: true,
buttons: {
"I understand, take me there": function () {
$(this).dialog("close");
},
"I want to stay where I am": function () {
$(this).dialog("close");
}
}
});
$('.leaving-section').click(function (event)
{
event.preventDefault();
var $dialog = $('#leaving-section');
$dialog.dialog('open');
});
But I want to the modal to be created by jquery instead of the div being embedded in the page! Also how do I get the first button to send them off to their original destination?
Thanks to all who can help. Thanks
I just had to solve the same problem. The key to getting this to work was that the dialog must be partially initialized in the click event handler for the link you want to use the confirmation functionality with (if you want to use this for more than one link). This is because the target URL for the link must be injected into the event handler for the confirmation button click. I used a CSS class to indicate which links should have the confirmation behavior.
Here's my solution, abstracted away to be suitable for an example.
<div id="dialog" title="Confirmation Required">
Are you sure about this?
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#dialog").dialog({
autoOpen: false,
modal: true
});
});
$(".confirmLink").click(function(e) {
e.preventDefault();
var targetUrl = $(this).attr("href");
$("#dialog").dialog({
buttons : {
"Confirm" : function() {
window.location.href = targetUrl;
},
"Cancel" : function() {
$(this).dialog("close");
}
}
});
$("#dialog").dialog("open");
});
</script>
<a class="confirmLink" href="http://someLinkWhichRequiresConfirmation.com">Click here</a>
<a class="confirmLink" href="http://anotherSensitiveLink">Or, you could click here</a>
I believe that this would work for you, if you can generate your links with the CSS class (confirmLink, in my example).
I think this plugin may be help
http://jqueryui.com/demos/dialog/#modal-confirmation
Heres an example of how you can do it:
http://jsfiddle.net/yFkgR/3/
Or to do something besides cancel
http://jsfiddle.net/yFkgR/4/
You can just define your own buttons. You can style the dialog box anyway you want, i just used the default.
also to use ajax to load the html you can take a look at:
jQuery UI Dialog window loaded within AJAX style jQuery UI Tabs
There is an open option you can use to load html from a remote web page. I jquery you can create a div just be doing
$("<div>");
it will create the closing tag too. Or as suggested in the post you can also use
$('a.ajax')
I'm using jQuery UI Autocomplete search and open events. But the open event is only called when the request is successful and there are elements. There does not seem to be an event when the response is successful but empty.
I display and hide a spinner logo when triggering the request, like this :
search: function() {
$('.spinner').show();
},
open: function() {
$('.spinner').hide();
}
This works well when there are elements in the server response but if the server response is empty the spinner stays forever...
Thanks for your answers.
PS : I'm not alone : remove spinner from jquery ui autocomplete if nothing found ;)
As of jQuery UI v1.9 you can do something like the following:
$('#field').autocomplete({
source: source_url,
search: function(event, ui) {
$('#spinner').show();
},
response: function(event, ui) {
$('#spinner').hide();
}
});
This is a known open enhancement for future versions of jQuery UI...
http://bugs.jqueryui.com/ticket/6777
Will have to wait and/or use a workaround (like sending a special response from the server and handle this case in the open event).
If you're stuck on an older version of jQuery ui, the right answer is to use the class ui-autocomplete-loading, which gets added and removed while the request/response is in flight.
I'm loading a customer info page using jQuery. There's a list of customers with a link next to it:
View
That triggers this function:
function load_customer(id) {
$("#dashboard").load('get_info/' + id);
}
That works perfectly. On the page I'm loading, I have a jQuery UI modal dialog form for adding new information.
<div id="addinfo">
<form><input type="hidden" name="customer_id" value="<?php echo $c->id; ?>" /></form>
</div>
My javascript:
$("#addinfobutton").click(function(){
$("#addinfo").dialog("open");
return false;
});
$("#addinfo").dialog({
autoOpen:false,
width:400,
height:550,
modal: true
});
When you select a customer the first time, it populates the hidden field correctly, but then it stays the same even after selecting other customers.
I thought that by loading a new customer page, the form would reset as well... but apparently it's being stored/cached somewhere. If I echo the ID anywhere else in the page, it shows correctly... just not in the "addinfo" div.
Any help/suggestions would be appreciated! Thanks!
JQuery dialog's dont reload the content for you when you open them. I tend to have an AJAX call replacing the content of the div that the dialog is on (or tweakng some values in it) when the dialog is opened.
If you want a hidden field, then I wouldn't put it within the dialog, you should be able to retrieve the value from outside the dialog.
After some more researching, it seems the dialog is being cached client-side after it's called. So to get around that, I just added the customerId to the end of the popup div's ID name... so each customer page will have a unique dialog ID.
However, if it's caching each of those dialogs, won't there be a performance loss if you open quite a few? How can you clear them without having to do a full page refresh?
I guess if the #addinfo div is updated it should capture the new content...anyway this would destroy the dialog after closing it to insure a new instance will be created:
$("#addinfobutton").click(function(){
openDialog('#addinfo');
return false;
});
function openDialog(elm) {
$(elm).dialog({
autoOpen:true,
width:400,
height:550,
modal: true,
close: function() {
$(this).dialog('destroy');
}
});
}