I have cascade drop down lists and I should to send form data to controller in every onchange() event. That is why I should to do 2 different operations on onchange() event of dropdownlist.
1) This sends data to controller in every onchange() event of dropdowlists:(It is my first dropdownlist)
#Html.DropDownListFor(model => model.CategoryId, ViewBag.CategoryList as IEnumerable<SelectListItem>, "-",
new { id = "CategoryDDL", onchange = "$('#MyForm').trigger('submit');" })
2)This is for cascade dropdownlists:
<script type="text/javascript">
$(function () {
$("#CategoryDDL").change(
function () {
loadLevelTwo(this);
});
loadLevelTwo($("#CategoryDDL"));
});
function loadLevelTwo(selectList) {
// my some code...
}
</script>
In this case when I change CategoryDDL drop down list, 2 operations mix. It tries to do 2 operation together.
I want to alternate them. Firstly cascading operation works, then data submit operation works.
How can I do this?
EDIT:
Without loadLevelTwo() function, everything works well: when I change dropdown list, request goes to the controller to filter products.
Then I added loadLevelTwo() for cascading dropdown list. Because I have 2 dropdownlist. I want when I change first dropdownlist, second dropdownlist updated automatically. My script does this. But, these events together works mixed. In the controller, I have actions for filtering an for cascading drop down:
public ActionResult FilterProducts(CriteriaModel model) {}
and
public ActionResult GetSubCategoryByCategoryId(int id) {}
These methods work in same time. One line works in any action, then gets into other action. then come backs first action, So, it is surrounded while actions return view.
I send form after loadLevelTwo() function, but it doesn't fix the issue:
loadLevelTwo($("#CategoryDDL"));
$('#MyForm').trigger('submit');
I'd get rid of the onchange on server side and do everything on clienside :
$(function () {
$("#CategoryDDL").change(
function () {
loadLevelTwo(this);
});
loadLevelTwo($("#CategoryDDL"));
$('#MyForm').trigger('submit');
});
It is still not clear what you are asking to do. If you simply want to submit the form and call loadLevelTwo, you can do that through a single binding in your script (and remove the onchange from razor):
$(function () {
$("#CategoryDDL").on('change', function() {
loadLevelTwo(this); // load the next level
$("#MyForm").submit(); // submit the form
});
});
This will complete both tasks in succession.
Related
I have an MVC View (https://mydomain/Data/MyChart) that contains a dropdownlist where the onchange event triggers an ajax call to get data to populate a chart. This is working perfectly.
I now want to add the functionality whereby I could call this view and pass the item to select via a querystring parameter.
https://mydomain/Data/MyChart?station=ChartA
When doing this, I can retrieve the querystring value, and successfully set the item selected in the dropdownlist, however the onchange event does not triggered so the chart is not generated.
What am I missing?
.NET Fiddle to demo selecting dropdown and getting value in change event
https://dotnetfiddle.net/uZi8LU
.NET Fiddle demonstrating setting a value (querystring) to set the selected item and onchange NOT triggered:
https://dotnetfiddle.net/kCJMC4
Your new functionality pre-loads the page with a selected value, so the element it is not changed after the document is ready (for the pre-loaded value). The new functionality requires a once-off ajax call immediately once the document is ready:
<script type="text/javascript">
$(document).ready(function () {
alert($("#StationGroup option:selected").text());
// StationId Dropdown change function
$("#StationGroup").change(function () {
alert($("#StationGroup option:selected").text());
});
});
</script>
I have a form which is populated according to the item selected from popup form. When the input box named "organization" is populated the ajax function should be called. Any idea is highly appreciated ?
If I understand correctly you want to call an ajax function when an input is filled. You can bind an event to your input with
$('#your_input_id').on('blur', function() {
//your ajax call
});
this way your ajax function will be called when the focus is lost on your input
You could also bind when the user presses return / use a timer function to call the ajax function when the user stops typing for X seconds
You want event handler which calls by name attribute so the following code will work :
$('input[name="Organization"]').on('blur', function() {
//your ajax call
});
You can use
focusout jquery method
$('#your_input_id').focusout(function() {
// do stuff here
// use constraint .. it field is not empty whatever is it require
})
More detail Official site
I have a ng-table in my webapp with a lot of rows per page (up to 1000).
I also have a select-all checbox that call a function ng-change to set the flag selected to true in each table row.
The function require some seconds to be executed so user can click two or more time on the checkbox and i want to prevent this. I would like to disable the checkbox while the function is executed.
Is it possible to do this?
Thanks
perhaps you can create some marker for ng-disable. like this:
<input type="checkbox" ng-disabled="inProgress">
and in controller when treated your function add this marker:
$scope.runYourFunction = function() {
$scope.inProgress = true;
....... your function ........
$scope.inProgress = false; // in the end. it will enabled your checkboxes;
}
A very simple solution, not necessarily optimal, would be to update a logical property in your controller (set to true when the function is executed and back to false when finishes) and use a "ng-disabled" directive based on that property in your check-box.
I have a form where I add some inputs dinamically.
Every time the user select another "fornecedor" from addMaterialFornecedor select I add a input for preco.
My problem is that when I click the button and call the validate() function http://js.sapo.pt/SAPO/Ink/FormValidator/doc.html if I selected the "fornecedor"s before I click the button validate the form but if I click the button, selected the "fornecedor"s, and click again it will not validate :s
http://jsfiddle.net/rVQB4/3/
the javascript code I'm using:
function formValidate(form){
if(!SAPO.Ink.FormValidator.validate(form, options)){
//some debug
console.log(form);
return false;
}else{
//some ajax calls
return false;
}
}
Here is a video that exlain better the problem: https://dl.dropbox.com/u/6416035/stack3.ogv
sorry my english :s
thanks :)
Livequery works wonders for items dynamically added to a webpage by binding events to events dynamically added to the DOM. If this binding doesn't take place, events won't fire for those dynamic objects.
Here's an example:
$(document).ready(function() {
$("#myDynamicObject").livequery(function() {
$(this).change(function() {
// Do something.
});
});
});
See here for more information on how to use livequery.
The client is making a request to the server.
I need to take part of that request, and make the form button work with Ajax.
This piece of code works perfectly for links:
var pagination_render = function() {
var pagination = $('.pagination a');
pagination.each(function() {
$(this).click(function(event) {
load_server(this.href, '.houseindex');
return false;
});
});
};
pagination_render();
I tried numerous things for making the Ajax button work, and this is one of the tries:
var contact_user = function () {
$('.expanded').find('#submit').each(function() {
$(this).unbind('click');
});
$('.expanded').each(function() {
$(this).find('#submit').click(function(event) {
form_submit($(this).parent(), '.contactuser .msg');
return false;
});
});
}
Whenever there is a successful Ajax call, it goes through all of the expanded items, and then binds a click event.
Now, sometimes this code works, and sometimes it doesn't.. When it doesn't work, it disables other events (toggle links) I have set up.
It seems as if I need to wait a few ms for it to load the component into the DOM.. Do I?
So I get that when you call contact_user you:
First unbind any previous binded click events from the submit button. I see one possible problem there and is that you are looking for an id of #submit. You should only have one id in a single page. Therefore you only need to use $('#submit').each(...) or if you have several submit buttons in the page either use a class if there are several submit buttons inside an .expanded item or just use $('.expanded :submit')
Adding a custom event when clicking the submit button. Same thing, you can simplify this by $('.expanded :submit') or if you truly only have one button with an id of submit (quite confusing). Go with $('#submit').
In conclusion:
var contact_user = function(){
$('.expanded :submit').unbind('click');
$('.expanded :submit').click(function(){
form_submit($(this).parent(), '.contactuser .msg');
return false;
});
};
the :submit selector will select all <input type="submit" />.