I am using a autocomplete option for a textbox in asp.net mvc3 by calling a controller method to display list of values associated with ids in textbox.
#Html.TextBox("tbxSearch", null,
new { data_url = Url.Action("GetSearchData"), data_maxValues = 10, data_valueHiddenId = "#Id", #class = "searchTextbox" })
Now I want to use Jquery to get data_valueHiddenId value in alert
$(document).ready(function () {
ConfigureAutoComplete("#tbxSearch");
$("#btnSearchPerson").click(function () {
alert($("#data_valueHiddenId").val());
});
});
data-maxValues is an attribute, not an element.
You can write $('#tbxSearch').data('maxValues')
$(document).ready(function () {
ConfigureAutoComplete("#tbxSearch");
$("#btnSearchPerson").click(function () {
alert($($(this).attr("data_valueHiddenId")).val());
});
});
Related
I'm trying to get the hang of using ajax loads (mostly via jquery) to make my site more efficient. Wondering if anyone can provide any suggestions re "best practices" for using ajax?
Is there a way to simplify a script for multiple ajax calls? For example, I currently have the working script:
$(document).ready(function() {
$('#dog').click(function () {
$('#body').load("dog.html");
});
$('#cat').click(function () {
$('#body').load("cat.html");
});
$('#bird').click(function () {
$('#body').load("bird.html");
});
$('#lizard').click(function () {
$('#body').load("lizard.html");
});
});
The script just gets longer and longer with each additional function. Is there a simpler, more efficient way to write this script to cover multiple load scripts?
Also, should I be using ajax loads to replace the majority of actual links?
Here is a suggestion, since the code you posted seems to have a pattern between the id and the filename:
$(document).ready(function () {
$(document).on('click', 'commonParentElementHere', function (e) {
$('#body').load(e.target.id + ".html");
});
});
This suggestion uses .on() and you just need to add a commonParentElementHere, a id or a class of the common parent of those elements.
Another option is to use a class on all elements that should be clickable, and then use the code passing the id to the html file name, like:
$(document).ready(function () {
$(document).on('click', '.theCOmmonClass', function () {
$('#body').load(this.id + ".html");
});
});
I'd say give all the elements you want to click on a class say ajax then.
$(document).ready(function() {
$('.ajax').click(function () {
$('#body').load(this.id + ".html");
});
});
Assuming that the id matches the file name the script can be simplified to:
$(document).ready(function() {
$('#dog,#cat,#bird,#lizard').click(function () {
var fileName = this.id + ".html";
$('#body').load(fileName);
});
});
This script simply specifies each id in a single selector that separates each id with a comma. This will calls the click function to be fired for each element. With the anonymous function attached to the click event, the id of each element is obtained and concatenated to create the file name which is then passed to the load function.
If the id doesn't always match the element you could use the following approach.
var mappings = [
{id: "fileName1", file:"file.html"},
{id: "fileName2", file:"file2.html"}
];
$(document).ready(function() {
for(var i = 0; i < mappings; i++){
createMapping(mappings[i]);
}
function createMapping(mapping){
$("#" + mapping.id).click(function(){
$('#body').load(mapping.file);
});
}
});
When my ASP MVC 3 page loads, the user may or may not have a value selected from a group of radio buttons. If, when the page loads, a value is selected (before the user clicks on a button), how would i activate a jquery function?
Currently I use a .change() method to activate some code which decides what menu to display:
$(document).ready(function () {
$('input[name=TransactionType]').change(function () {
//Clear out values
$('input:text').val('');
$('input:text').text('');
//Display input fields
var radioValue = $(this);
$('#RightDiv').children().each(function () {
if (radioValue.attr('id') == $(this).attr('id')) {
$(this).show();
} else {
$(this).hide();
}
});
});
});
Something like that should work :
$('input[name=TransactionType]').change(function () {
//Your code
}).filter(':checked').trigger('change');
I am asuming the input are checkbox's, if that's not the case, you can remove the .filter().
Trigger doc : http://api.jquery.com/trigger/
I want to create custom dropdown in mvc3 c#, so there can be provision to add click event in each option of dropdown.But I don't want any alternative like jquery or create for loop to add attribute manually.Is there is any way to create custom dropdown using htmlhelper or base class.Please help me regarding this.
Suppose this is your dropdown then you use the following way to define events.
<%=Html.DropDownList("ddl", ViewData["MyList"] as SelectList, new { onchange = "this.form.submit()" })%>
And in your jquery code:
$(document).ready(function() {
$("#ddl").change(function() {
var strSelected = "";
$("#ddl option:selected").each(function() {
strSelected += $(this)[0].value;
});
var url = "/Home/MyAction/" + strSelected;
$.post(url, function(data) {
// do something if necessary
});
});
});
I am using webgrid in my razor view in MVC 3.
Below is how my webGrid looks, I want to make the entire row clickable and on click pass values to the javascript method also.
I am able to achieve calling my javascript method on text of all columns. I want the same to happen for click of anywhere on the entire row.
Please guide me on this. Thanks
#grid.GetHtml(
columns: grid.Columns(
grid.Column("CompanyName", format: #<text>#item.CompanyName</text>, header: "ABC"),
grid.Column("CompanyAddress", format: #<text>#item.CompanyName</text>, header: "DEF"),
))
}
You have to use JQuery to add row click functionality
Add htmlAttributes: new { id="MainTable" } in your webgrid.
<script type="text/javascript">
$(function () {
var tr = $('#MainTable').find('tr');
tr.bind('click', function (event) {
var values = '';
var tds = $(this).find('td');
$.each(tds, function (index, item) {
values = values + 'td' + (index + 1) + ':' + item.innerHTML + '<br/>';
});
alert(values);
});
});
</script>
I have done this in my project with adding a class style: "click_able" on specific column like.
grid.Column("CompanyName", style: "click_able", format: #<text>#item.CompanyName</text>, header: "ABC"),
and then add click function like.
<script type="text/javascript">
$(".click_able").click(function () {
// Do something
});
It working fine in my case.
I'm new to KnockoutJs and I wonder if anyone can help with this.
I have a viewmodel, populated from a Mvc3 controller, bound to a dropdown and this is working fine.
I have additional data stored in the "platforms" observableArray, and
I would like this data to be displayed in textboxes, dependant on the
selected value in the dropdown.
Here is my code so far:-
<script type="text/javascript">
$(document).ready(function () {
var sampleSubmission = function () {
this.selectedPlatform = ko.observable();
this.platforms = ko.observableArray();
this.showSearch = ko.observable(false);
this.craftText = ko.observable();
this.showSerialNumber = ko.observable(0);
this.selectedPlatform.subscribe(function (platformId) {
} .bind(this));
};
var sampleSubmissionViewModel = new sampleSubmission();
ko.applyBindings(sampleSubmissionViewModel);
//Load the platforms
$.ajax({
url: '#Url.Action("GetPlatforms", "Home")',
type: 'GET',
success: function (data) {
sampleSubmissionViewModel.platforms(data);
}
});
});
</script>
Does anyone have any ideas how I achieve this?
Thanks in advance.
You can bind the dropdown list's value to the selectedPlatform, like this:
<select data-bind="options: platforms, value: selectedPlatform, optionsText: 'name'"></select>
I modified your code and took some best guesses at what you wanted to do and created a sample.
Here is the fiddle: http://jsfiddle.net/johnpapa/DVXH7/