I'm having an issue with autocomplete in jquery mobile. I want to create a text input that when the user inputs in it, the cities that correspond with what the user typed in shows up in a drop down menu, similar to how Google Search works.
My problem is that instead of a drop down menu, it just creates a bullet list of all the cities. I have the CSS theme implemented and all the necessary jquery/jquery mobile ui scripts enabled.
After watching the MVC pluralsight tutorial on MVC, I was able to connect to a database of city names and create the following code (these are just snippets):
View
<p>Hotel Location (City): <input type="text" data-autocomplete="#Url.Action("QuickSearch", "Booking")"/></p>
Javascript/Jquery
$(document).ready(function () {
$(":input[data-autocomplete]").each(function () {
$(this).autocomplete({ source: $(this).attr("data-autocomplete") });
});
});
Controller
public ActionResult QuickSearch(string term)
{
testautocompleteDataContext _db = new testautocompleteDataContext();
var cities = _db.CityTests
.Where(r => r.city.Contains(term))
.Take(10)
.Select(r => new { label = r.city });
return Json(cities, JsonRequestBehavior.AllowGet);
}
Thanks! I really appreciate the help :)
My mistake. I actually forgot to add jquery ui in my layout page! Stupid mistake hahaha
Related
I am just a newbie to programming so please be gentle.
I am working with Visual Studio Community 2015 edition.
My project uses a standard asp.net MVC 5 solution template.
I have a visual studio scaffolded input form that includes a create button.
I am having a problem trying to stop multiple submissions of the form due to double clicking.
I have been trying to implement a solution posted on stackoverflow a few years ago but after two days of trying I am no further forward.
The solution involves using the following jquery plugin (I must admit I do not know much about java yet!)
This jquery plugin code I am wanting to use is below and comes from this original post
Prevent double submission of forms in jQuery
jQuery.fn.preventDoubleSubmission = function() {
$('input[type="submit"]').data('loading-text', 'Loading...');
$(this).on('submit',function(e){
var $form = $(this);
$('input[type="submit"]', $form).button('loading');
if ($form.data('submitted') === true) {
// Previously submitted - don't submit again
e.preventDefault();
} else {
// Mark it so that the next submit can be ignored
$form.data('submitted', true);
$form.setFormTimeout();
}
});
// Keep chainability
return this;
};
jQuery.fn.setFormTimeout = function() {
var $form = $(this);
setTimeout(function() {
$('input[type="submit"]', $form).button('reset');
alert('Form failed to submit within 30 seconds');
}, 30000);
};
*/
The problem I am having is how to deploy the jquery plugin in my project and then how to call it when someone clicks the create button.
I have tried putting the plugin directly in the page view and also as a javascript file in the scripts folder but still cant seem to call the function to prevent double submissions.
I am trying to call the function by using the onclick property of the button but just cant get it to run. Does anyone have a memory of the previous solution and how to implement it in an ASP.NET MVC 5 cshtml view button click?
(Where do I put the plugin code and how do I call it from the create button)
Many thanks
Use This code in jquery side is prevent double click
$(document).on('submit', 'form', function () {
var button = $(this).find('input[type="submit"]');
setTimeout(function () {
button.attr('disabled', 'disabled');
}, 0);
});
If Not valid post time your form and validation after
//disabled Multiple Click Event on form
$(document).on('invalid-form.validate', 'form', function () {
var button = $(this).find('input[type="submit"]');
setTimeout(function () {
button.removeAttr('disabled');
}, 1);
});
I am a beginer ...I don't know how to write code during the radio button select change in MVC....I have used it like this
In csHTML page
#Html.RadioButtonFor(model=>Sales.Pay_Mode, true)Cheque
#Html.RadioButtonFor(model=>Sales.Pay_Mode, false)Cas
This is my cs page code....Where i want write the change event code and how i get the selected value in control page.My requirement is during radio button change i want change the style of the textbox enable as false..
#Html.TextBox("ChequeNo")
Considering the information that you have provided in your question, the following code would fulfill your expectation
#Html.RadioButtonFor(model => model.PayMode, "Cheque") Cheque
#Html.RadioButtonFor(model => model.PayMode, "Cas") Cas
#Html.TextBox("ChequeNo", null, new {id="theTextBox"})
<script type="text/javascript">
$("input[name='PayMode']").change(function () {
var selectedRadio = $("input[name='PayMode']:checked").val();
if (selectedRadio == 'Cas') {
$("#theTextBox").attr("disabled", "disabled");
} else {
$("#theTextBox").removeAttr("disabled");
}
});
</script>
The is no control events handler in MVC like in WebForms or something like this. You must use javascript code to implement your logic. For example with jQuery
$('.your-radio-class').change(function(){
$('#your-textbox-id').css('margin-left', '100px')
});
I searched a lot on net but couldnt find any solution. I am making a webapp in which I want 2 textbox to get data input from user. I want autocomplete feature in this textbox. The list of tags for autocomplete is available locally. I tried listview but what I want is that after user select some option from autocomplete hints, the textbox should have the selected value, and through some object, i should get the value of textbox to be used by javascript/php. This is a very basic thing, but I'm not able to do. Please help me out
I tried this jsfiddle.net/ULXbb/48/ . But the problem in this is that both listview gets same value after I select something in 1 listview.
In order not to add the same value to both search input, you need to target them using .closest(), .next(), .prev() and .find(). jQuery-Mobile, enhances list-view with data filter in a different way.
Demo
<form>
<input>
</form>
<ul data-role="listview">
<li>
<a>text</a>
</li>
</ul>
The form where the input is located, is on the same level of the ul. To target the input box, you need to use .prev('form').find('input'). Check the demo and the new code below.
$("input[data-type='search']").keyup(function () {
if ($(this).val() === '') {
$(this).closest('form').next("[data-role=listview]").children().addClass('ui-screen-hidden');
}
});
$('a.ui-input-clear').click(function () {
$(this).closest('input').val('');
$(this).closest('input').trigger('keyup');
});
$("li").click(function () {
var text = $(this).find('.ui-link-inherit').text();
$(this).closest('[data-role=listview]').prev('form').find('input').val(text);
$(this).closest('[data-role=listview]').children().addClass('ui-screen-hidden');
});
Thanks #user714852 I have extended your answer just add this line in the script tag:
$("#mylist li" ).addClass('ui-screen-hidden');
It will do wonders.
A working example: Listview Autocomplete - Enhanced
In my ASP MVC 3 view I have a number of fieldset elements that are hidden when the page loads. Based upon a user selection of a group of radio buttons, I need to make the corresponding fieldset visible.
I'd like to do this in jquery by making an array of the fieldset elements, then cycle through them, adjusting their visibility property if they match the selected radio button or not. Is this possible?
Since there is so much code in the fieldsets I attached the screen shot below to save space/make it more readable. The fieldsets I am trying to alter are inside of the RightDiv. If you need any more detail, please let me know. Thx
You can try this:
$(function(){
$('[name="TransactionType"]').change(function(){
var id = '#' + this.className; //Get the id from the clicked radio classname
$('#RightDiv').find('fieldset').hide();// hide all fieldsets;
$('#RightDiv').find(id).show(); // show the selected one.
});
});
Just note that in your html helper you are providing the the first overload as same name for all. All is well except i believe it will create duplicate ids for each of these. You may want to override it in the HTMLattributes.
#Html.RadioButton("TransactionType", false, new{#class="Enroll", id="Radio1"})
#Html.RadioButton("TransactionType", false, new{#class="New", id="Radio2"})
Sorry, posted a bit too soon on this. Tried the following below and it worked just fine.
$(document).ready(function () {
$('input[name=TransactionType]').change(function () {
var radioValue = $(this);
var elements = [];
$('#RightDiv').children().each(function () {
elements.push($(this));
});
});
});
I'm using some AJAX (ASP.NET Web Forms) to add new selectable elements on my site but the newly created ones aren't selectable. I guess this has to do with some events. Maybe it can be solved by using .on on those functions but I don't know how to do it. Anyone know how to fix that?
Here's my code:
$(".selectable").selectable({
filter: '.ui-widget-content',
stop: function () {
var result = $("#select-result").empty();
$(".ui-selected", this).each(function () {
var index = $(this).attr('id');
index = index.substring(12, index.length);
result.append(" #" + index);
});
}
});
when you load your page, jquery assign respective functions to each html tags. when you create some new div/html tags you should re-initialize the function because jquery doesn't know about your newly created html tags,
for the respective query
try re initializing the jquery function after adding new selectable element
hope this help..