I am trying to get my form to submit when a user either clicks enter or mouse clicks. I have seen some examples as well as the example on the jQuery UI site. The example that I am following is jQuery UI autocomplete submit onclick result. Therefore my code looks like this.
<script type="text/javascript">
$(document).ready(function() {
$("#myInput").autocomplete({
source: "fh_autocomplete_search.php",
minLength: 2,
select: function(event, ui) {
if(ui.item){
$("#myInput").value(ui.item.value);
}
$("#myInput").submit();
}
});
$( "#myInput" ).bind( "autocompleteselect", function(event, ui) {
})
});
</script>
I'm not sure what should go under the .bind section of the code. Or really what it is even doing. And I have been here and read it but still just not clicking http://api.jquery.com/bind/ When I put an alert under it and select a ui.item from the #myInput box the alert does go off. But nothing fills or submits. If I put an alert under the if(ui.item) part it doesn't go off. If someone could explain to me what is going on and suggest some code to put under the .bind section I would greatly appreciate it.
If the id of the form is myForm:
$(document).ready(function() {
$("#myInput").autocomplete({
source: "fh_autocomplete_search.php",
minLength: 2,
select: function(event, ui) {
$("#myInput").val(ui.item.value);
$("#myForm").submit();
}
});
});
Also see this example.
I'm not entirely sure you need to write code for the "autocompleteselect" event. The default behavior of the event is to replace the text in the textbox with the users selection from the menu of items.
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;
});
});
I was wondering if there is someway to change the url of a reload when I close the modal window...
Right now I have this in the onClose event...
, close: function (event, ui) {
//debugger;
//if($url.contains)
location.reload(true);
}
ideally I would like to be able to pass a couple of parameters to the location.reload(true) function.
Or maybe there is another way to reload?
You can change your location.href directly and it will load corresponding page. such as:
location.href = location.href + '?a=1'
I have an ASP.NET MVC 3.0 partial view which is render inside a jquery ui dialog.
Inside this partial view I have some link which help me to display some more info.
#foreach (StatusType status in ViewBag.Status)
{
<li>#status.StatusMessage<a href='#' status='#status.StatusCode'><img src=#Url.Content("~/Content/Images/information.png") alt="See detail"/></a></li>
}
I've bound those link with the click event:
$('a[status]').live('click', function (e) {
if (e.preventDefault)
e.preventDefault();
else
e.returnValue = false;
var status = $(this).attr('status');
alert('#Model.Code');
...});
What is happening is when I click the first time on the link it will display me the correct Code (let's say 12). When I will load the partial view again for another code (66) it will display me two alert message, the first one with 12 (the old value I've clicked before) and the second one with 66.
The more partial view I will load the more value I will have in my alert.
I don't understand why it is keeping me like an history of all the code I've clicked.
If somebody have any idea on this problem, it will be welcomed, it just driving me mad.
Thanks in advance.
UPDATED
The use of the on instead of the live works, but I still have an issue with the dialog.
I've change the code with the solution proposed:
$('#StatusDiv').on('click', 'a[status]', function (e) {
e.preventDefault();
var status = $(this).attr('status');
alert('#Model.Code');
$('#StatusDialog').dialog({
autoOpen: false,
width: 800,
resizable: true,
title: 'Status Info',
modal: true,
open: function (event, ui) {
alert('#Model.Code');
$(this).load('#Url.Action("ViewStatusInfo")', { clientId: clientId, Code: '#Model.Code', status: status
});
}
});
$('#StatusDialog').dialog('open');
});
The first alert display the correct code, but the second alert inside the open function display the old one. On the second click it will work correctly but I don't understand how it can pick the old value since the first display is correct...
Thanks again for your help.
First of all: do not use live in last versions of jquery.
$('#list').on('click', '.status', function(e){
e.preventDefault();
alert(this.href);
});
Here we bind event to #list and when we will insert new links, everything will work.
Demo: jsfiddle.net/wPSH2/
I'm trying to build a simple prototype of an app and I cannot seem to get JQM to change to either an internal or external page with $.mobile.changePage($('#page2')) or $.mobile.changePage('page2.html').
I have successfully binded the form submit to the button, but when clicking (tapping), it changes the same page. After a second click/tap, it redirects.
$("#fd-login button#login-fd-submit").on('click', function(e) {
forge.logging.info('login-fd-submit clicked');
$.mobile.changePage('page2.html');
});
For a "local" page in your "src" directory:
$("#fd-login button#login-fd-submit").on('click', function(e) {
forge.logging.info('login-fd-submit clicked');
forge.file.getLocal('page2.html', function(file) {
$.mobile.changePage(file);
}, function(err) {
forge.logging.log("error");
});
});
If you are using a jQuery object instead, then its mostly likely not trigger.io and need to see more code.
It seems that $(element).on("click", function() {}); doesn't work for this. $(element).live("click", function() {}); works perfectly.
Try using:-
$("#fd-login button#login-fd-submit").on('tap', function(e) {
e.preventDefault();
e.stopImmediatePropagation();
forge.logging.info('login-fd-submit clicked');
$.mobile.changePage('page2.html');
});
Update: Changed to use tap event.
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')