I'm using ASP.NET MVC with jquery. I have a couple of dropdownlists. When I select one via mouse click and then scroll down over the items using the mouse/cursor, the list closes before a selection can be made, before the mouse can be clicked. This doesn't happen when I open them and then up/down arrow to select an item. It doesn't happen all of the time, but a lot. Just to try something different, I added a jquery "select" control with hardcoded values (options) and it displays the same behavior. Any ideas?
<%: Html.DropDownList("Accounts", (IEnumerable)ViewData["Accounts"], "-- Select an account --")%>
Thank you
Does the "Accounts" dropdown have any other jQuery handler set on it? It sounds like a hover handler (or some similar event) is performing an action on the dropdown.
DropDownList just gets rendered as a standard HTML <select> tag, which I really hope IE7 can handle correctly :) So I suspect some JavaScript fowl play is happening.
Jquery handlers being used, but the select control I added just for testing doesn't have any handlers and it displays the same behaviour.
jQuery(function () {
jQuery("#Accounts").change(function () {
var accountID = jQuery("#Accounts > option:selected").attr("value");
jQuery.ajax({
type: "GET",
contentType: "application/json; charset=utf-8",
url: changeAccountUrl + "/" + accountID,
data: "{}",
dataType: "json",
success: function (value) {
if (value == null || value.length <= 0) {
jQuery("#DefaultIndex").val("no default index");
document.getElementById("lblResults").innerHTML = "";
}
else {
jQuery("#DefaultIndex").val(value);
document.getElementById("lblResults").innerHTML = "";
}
}
});
jQuery("#gridShipments").trigger("reloadGrid");
});
});
jQuery(function () {
jQuery("#Status").change(function () {
jQuery("#gridShipments").trigger("reloadGrid");
document.getElementById("lblResults").innerHTML = "";
});
});
Related
I want to use autocomplete widget in asp.net mvc4 app. I was able to call the action to get list of autcompletition values from controller. Unfortunetely I am not able to add it to list of suggestions. I think that .map(data, function(item) in success part of autocomplete ajax call is not working. But I really do not know why. I am sure that all the scripts and css are load corectly. I am stating controller action returining suggestions list, also script in view and response from firebug. I was also trying the demo example from jqueryui page and it was working, but somehow it does not work over my returned data. Can someone help me and tell me why? Thank you in advance.
Action in Controller:
public ActionResult GetCities(int RegionId, string Name)
{
var ret = db.Cities.Where(c => c.RegionId == RegionId &&
c.Name.Contains(Name)).Select(a => new{ CityId = a.CityId, Name = a.Name});
return Json(ret);
}
Script in view:
<script type="text/javascript">
$(function() {
$("#City").autocomplete({
source: function(request, response) {
$.ajax({
url: "#Url.Action("GetCities")",
dataType: "json",
contentType: "application/json; charset=utf-8",
method: "POST",
data: "{'RegionId': " + $("#Region").val() + ", 'Name': '" + request.term + "'}",
success: function (data) {
response( $.map( data, function( item ) {
return {
label: item.Name,
value: item.Name
}
}));
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
},
minLength: 2
});
});
Response (from firebug)
[{"CityId":16,"Name":"Kordíky"},{"CityId":94,"Name":"Korytárky"}]
So I find out it was working, the only problem was, that I had breakpoint in visual studio and this breakpoint was supressing autocomplete suggestion list.
for Mvc Artitecture you must delete already imbended #Scripts.Render("~/bundles/Jquery") and #Scripts.Render("~/bundles/Jqueryval")
on all .cshtml files at the end and for also views/Shared/_layout.cshtml at the
end and put our jaquery suitable files on his suitables .cshtmls files in head...and lets enjoy.
How set in the drop-down list item selected by the user?
Scenario:
1. User not enter all required values in form
2. Click sent.
3. Page is refresh and value in dropdown list is not selected. How select the value?
I have working script which retrieve data for the list.
$('#userid').select2({
placeholder : " --- select ---",
minimumInputLength: 2,
ajax: {
url: "index.php?modul=getusers",
contentType: 'application/json; charset=utf-8',
dataType: 'json',
data: function (term, page) {
return {
q: term,
page_limit: 10
};
},
results: function (data, page) {
return { results: data };
}
},
allowClear: true,
formatSelection: function(data) {
return data.text;
}
});
Standard data in ajax call:
{"text":"sample text", "id":"1"}
Input:
<input type="text" value="<? echo $_POST['userid']; ?>" class="input" id="userid" name="userid">
I tried to add the following code, but it doesn't work
initSelection: function(element, callback) {
var id=$(element).val();
if (id!=="") {
$.ajax("index.php?modul=getusersfriend&q="+id, {
dataType: "json"
}).done(function(data) { callback(data); });
}
},
Make sure that you have a properly formatted JSON Object being returned in your call back in initSelection. The discussion for that has been addressed here already.
But so far looks good. You may want to bind the change event of the select or the submit event of the form to serialize its value before the form is submitted.
You can store its value on your server (yucky) or just serialize the form object and get the value to pass to initSelection when the select2 is loaded.
Which is what would happen here:
var id=$(element).val();
Here is a simple example of serializing your form.
PS: Don't really see what bootstrap has to do with anything.
I am developing an MVC4 mobile app that uses several forms which are loaded into a section on the layout via ajax. I've got jQuery mobile set with Ajax turned off so I can manage the Ajax myself. Most of the forms work fine, the load and submit via ajax as they should. However, so far there is one form that refuses to fire the form submit and submit the form via ajax like the rest. First, the form is loaded when a user clicks to add a contact and this works fine:
// Handle the add contact button click
$('#btnAddNewContact').on('click', function (e) {
e.preventDefault();
// Make sure a location was selected first.
var locationID = $('#cboLocation').val();
if (locationID.length === 0) {
//$('#alertTitle').text('REQUIRED');
$('#alertMsg').html("<p>A Contact must be associated with a Location.</p><p>Please select or add a Location first.</p>");
$('#alertDialogDisplay').click();
} else {
SaveOpportunityFormState();
$.cookie('cmdLocationId', locationID, { path: '/' });
$.mobile.loading('show');
$.ajax({
url: '/Contact/Add',
type: 'GET',
cache: false,
success: function (response, status, XMLHttpRequest) {
$('section.ui-content-Override').html(response);
// Refresh the page to apply jQuery Mobile styles.
$('section.ui-content-Override').trigger('create');
// Force client side validation.
$.validator.unobtrusive.parse($('section.ui-content-Override'));
},
complete: function () {
$.cookie('cmdPreviousPage', '/Opportunity/Add', { path: '/' });
AddContactLoad();
ShowSearchHeader(false);
$.mobile.loading('hide');
},
error: function (xhr, status, error) {
// TODO - See if we need to handle errors here.
}
});
}
return false;
});
Notice that after successfully loading the form the AddContactLoad() function is fired. This works fine and here is that code:
function AddContactLoad() {
$('#contactVM_Phone').mask('(999) 999-9999? x99999');
$('#frmAddContact').on('submit', function (e) {
e.preventDefault();
if ($(this).valid()) {
$.mobile.loading('show');
$.ajax({
url: '/Contact/Add',
type: 'POST',
cache: false,
data: $(this).serialize(),
success: function (response, status, XMLHttpRequest) {
if (!response) { // Success
ReturnToAddOpportunity();
} else { // Invalid Form
$('section.ui-content-Override').html(response);
// Force jQuery Mobile to apply styles.
$('section.ui-content-Override').trigger('create');
// Force client side validation.
$.validator.unobtrusive.parse($('section.ui-content-Override'));
AddContactLoad();
$.mobile.loading('hide');
}
},
complete: function () {
},
error: function (xhr, status, error) {
// TODO - See if we need to handle errors here.
}
});
}
return false;
});
$('#btnCancel').on('click', function (e) {
e.preventDefault();
// See where add contact was called from.
var previousPage = $.cookie('cmdPreviousPage');
if (previousPage.indexOf("Detail") >= 0) {
ReturnToOpportunityDetails();
} else {
ReturnToAddOpportunity();
}
return false;
});
}
If I click the cancel button, that code is fired so I know this is working too. Here is my form code:
#using (Html.BeginForm("Add", "Contact", FormMethod.Post, new { #id = "frmAddContact" }))
{
#Html.ValidationSummary(true)
#Html.AntiForgeryToken()
-- Form Fields Here --
<div class="savecancel" >
<input type="submit" value="Save" data-mini="true", data-theme="b", data-inline="true" />
Cancel
</div>
}
As you can see the form is named frmAddContact and that is what the AddContactLoad() function is attaching the submit event to. To save my sole I cannot figure out why the form does not submit via the ajax post like every other form in the app. Am I missing some kind of initialization, I just don't know. If anyone can please help I'd really appreciate it!!
As it turns out, I had created a custom unobtrusive Ajax validator for a phone number then copied and pasted it to do the same with a zip code. Unfortunately in the process I forgot to rename a variable and thus an error was occurring in the validation script which caused the problem. In the mean time, if you're reading this, you might take a note of the code here and how to inject HTML into a page via Ajax and jQuery mobile. I've never found this in a book or on the web and it contains some very useful methodology and syntax. On the form submit the reason I'm checking for the empty response is I just return null from the controller to validate the form was valid and the save worked in which case I send them to a different HTML injection i.e. that page they originally came from. If null is not returned I inject that page with the HTML containing the original form and error markup so the user can make corrections then resubmit. I'm also calling a form load method that attaches handlers to the HTML once it's injected into the main page. Hope this helps somebody!
When I add category in controller action I return JSON object:
return Json(new { categoryName = category.Name, isPrimary = isPrim ? "1" : "-1", categoryId = categoryId }, JsonRequestBehavior.AllowGet);
In JS handler function I add item on page:
...
var totalLink = "<li style='color: #bbbbbb;'>" + result.categoryName + "<a class='removeCategoryButton' href='#lnk#'>remove</a></li>";
var lnk = '#Url.Action("RemoveCategoryFromLocation", "Location", new{locationId = Model.Location.TicketId, categoryId=-1})';
totalLink = totalLink.replace('#lnk#', lnk);
totalLink = totalLink.replace('-1', result.categoryId);
$('#otherCategories').append(totalLink);
...
When I click on remove link I call the following function:
$(function () {
$('.removeCategoryButton').click(function (event) {
event.preventDefault();
$.ajax({
url: this.href,
type: 'POST',
context: this,
success: function (result) {
if(result.categoryName == 1) {
$(this).closest('li').remove();
}
}
});
return false;
});
});
But I get the following error:
This request has been blocked because sensitive information could be disclosed to third party web sites when this is used in a GET request. To allow GET requests, set JsonRequestBehavior to AllowGet.
This error happens only when I add item and want to remove it as soon after add on page. If I refresh page and click on remove link it works without problem.
Just to note when I get the error from above category is removed, so call works it just from some reason pop this error.
You seem to be adding the remove links dynamically and yet you have subscribed to the .click event handler only once when the DOM is ready. So make sure you do it in a lively manner. But since the .live() method is deprecated, depending on the jQuery version that you are using you should use either .delegate() or the .on() methods.
So with the latest version of jQuery it is recommended to use .on():
$(document).on(events, selector, data, handler);
$(document).on('click', '.removeCategoryButton', function () {
$.ajax({
url: this.href,
type: 'POST',
context: this,
success: function (result) {
if(result.categoryName == 1) {
$(this).closest('li').remove();
}
}
});
return false;
});
Notice that you no longer need to wrap this in a document.ready callback.
I'm working on a simple Jquery Mobile application that does a search, presents results, and then allows you to click on a result to go to a dynamic detail page. On the detail page there is a collapsible list which uses an ajax call to get its content.
It appears to be working fine on the surface, but when I inspect it with Firebug I notice that every time you go to a detail page and expand the collapsible list, the ajax fires multiple times.
So, for instance, I do a search, go to the detail page, expand the collapsible list, the ajax fires once. I go back to the results page, click on another result, go to the detail page, expand the collapsible list, and the ajax fires twice, etc. Each time I expand the collapsible list, the ajax fires one more time...so if I look at 10 results, the ajax fires 10 times.
It would appear that the dynamic pages are accumulating in the DOM, and each time I click on the collapsible list, it's firing on all the selectors that have built up in the DOM (at least that's my theory).
How do I make sure that my ajax only fires once rather than multiple times?
I'm using Jquery Mobile 1.0.1 with Jquery 1.6.4. I'm using php to get the data.
Here's my code for the search page:
$('form#searchCompanies').submit(function(event) {
getSearchResultsCompanies();
return false;
});
function getSearchResultsCompanies() {
$.ajax({
type: "POST",
url: baseURL + 'server/searchCompanies.php',
data: $("form#searchCompanies").serialize(),
dataType: 'json',
success: function(results){
$('#companyList li').remove();
for ( var i=0; i < results.length; i++) {
$('#companyList').append('<li>' + results[i].CompanyName + '</li>');
}
$('#companyList').listview('refresh');
}
});
return false;
}
$('.companyDetail').live('click', function(event) {
//save companyid so that we can reference it on detail page
var companyid = $(this).attr('data-uid');
localStorage.setItem('thisCompanyId', companyid);
});
Here's the code for the detail page:
$('#companyDetailPage').live('pageshow', function(event) {
var companyid = localStorage.getItem('thisCompanyId');
$.ajax({
type: "POST",
url: baseURL + 'server/getCompanyDetail.php?companyid=' + companyid,
data: {companyid: companyid},
dataType: 'json',
success: function(company) {
$.each(company, function(index, company) {
$('#companyName').html(company.CompanyName);
//etc...pulls in more data to populate the page
});
}
});
//this is the call that fires multiple times
$('#companyContacts').live('expand', function(event) {
$('#companyContactList li').remove();
$.ajax({
type: "POST",
url: baseURL + 'server/getCompanyContacts.php?companyid=' + companyid,
dataType: 'json',
success: function(results){
for ( var i=0; i < results.length; i++) {
$('#companyContactList').append('<li>' + results[i].LastName + 'etc...more data</li>');
}
$('#companyContactList').listview('refresh');
}
});
return false;
});
});
The html div that gets populated looks like this:
<div data-role="collapsible" data-collapsed="true" id="companyContacts" class="cmdCompanyContacts">
<h3>Contacts (<span id="totalContacts"></span>)</h3>
<ul id="companyContactList" data-role="listview"><li></li></ul>
</div>
I've searched high and low for a resolution, and tried reworking my code from various angles, but I'm not able to solve this problem. Any help would be deeply appreciated. Thanks.
I had this problem too. I tried the suggestion found here, but still had the multiple event triggering problem after trying this. Here is what else I had to do. I changed it from this:
$(‘#myPage’).bind(‘pageinit’, function (event) {
$(‘#myButton’).live(‘click’, function (event, ui) {
to this:
$(‘#myPage’).bind(‘pageinit’, function (event) {
$(‘#myButton’).click(function (event, ui) {
Rather than using jquery live i would like to suggest you to use javascript function call when you click for the page change.Write your ajax call in that function so that its been called only once.Hope this helps