Is is possible to use AJAX on an onblur event from a textfield. I'd like html (inside a div container) to change whenever I tab out of a textfield. I see a lot of questions/tutorials using AJAX with forms but not on the individual components such as textfield or checkbox.
You can do it using plain JQuery. Assuming your form element has the ID of my_element:
$("#my_element").blur(function(){
$.ajax({url: '/my/data', type: 'GET'})
.done(function(response){
$("#my_div").html(response);
})
})
Related
Simple situation. I have form with textboxes, bound to observables. Observables has subscriptions to do some logic (server validation, whatever, just some ajax call).
There is also a button on form with some "save data" logic. Data should be saved only when all callbacks are finished.
Subscribtions are fired when value changed, mostly on focus lost, not just on every change.
Now you can simply type anything to textbox then immediately click on save button. What happens? Click event is called, and data are saved. But it is sometimes faster then subscribtion event is fired and server returns data.
How to "synchronize" click with "done" promise of subscriptions? I need to prevent to save data before everything is done. But there is no relation between subscription of textbox value and button. Everything is async, so I can't just call something like "wait for function" in click event. Other problem should be that subcription is fired later then click event.
Any solution for this?
Add a variable to manage the button state -
<button data-bind="disable: serverSideCheckInProgress">Save Data</button>
Within your ajax call -
//declare serverSideCheckInProgress false on init
saveData = function(){
serverSideCheckInProgress(true);
$.ajax({
url: "test.html",
context: document.body
}).done(function() {
serverSideCheckInProgress(false);
});
}
I have an ajax application that returns html including a element. I can give it an id and I am trying to grab it to make it into kendo dropdownlist.
But whatever I try putting the code before or after the ajax result I cannot transform my ajax element into a dropdown.
$jq(document).ready(function(){
$jq("#myselect").kendoDropDownList();
});
Any ideas how to se this with ajax generated elements?
Regards
KArel
remove document.ready event and then add this code $jq("#myselect").kendoDropDownList();
in the call back function of your intial ajax call where HTML is returned. if still not working, please create a JSFiddle soluction and post the link here.
Use the success callback of your Ajax request to initialize your 'element'. Also make sure that your 'element' is input or select html element.
I know MVC doesn't have autoposback functionality and that needs to be done using JS/JQuery, and that is when my problems start... don't know how to do it yet.
This is how I populate my ddl:
#Html.DropDownListFor(x => x.CurrentCountry,
new SelectList(Model.Countries.ToList(), "Code", "Name"))
and my URL have this format:
localhost/Products/?country=US¤cy=USD&category=17&page=2
How do I add postback functionality to take the selected country?
Thanks.
I know MVC doesn't have autoposback functionality and that needs to be done using JS/JQuery
Not necessary. You could put the dropdown in an HTML <form> and when the user submits this form the selected value will be sent to the server.
If on the other hand you want to transmit the selected value when the user changes selection then you need to use javascript and subscribe to the onchange event. For example if you use jQuery:
$(function() {
// subscribe to the change event of the dropdown
$('#CurrentCountry').change(function() {
// find the containing form and submit it
$(this).closest('form').submit();
});
});
I have a form with a checkbox in it, a textbox and a button. Whenever the button is clicked, it resubmits the form with whatever is in the textBox and checkBox. But whenever the checkBox changes, I also want it to resubmit the form. How can I do this?
You could add a bit of javascript that fires on the checkbox change, the jQuery below would do it -
$('#gosubmit').change(function () {
//submit form
});
I have a page with several forms on one page. I have a button (outside all forms) that I want to submit only ONE form, but all form data is getting submitted from all forms.
$("#indiv_save").click( function() {
alert($("#indiv_form").serialize()); // Shows only correct form
$.post("/admin/update", $("#indiv_form").serialize(), function(data) {
notify(data); // quick and easy feedback
});
});
The alert() call shows exactly what I want to submit, but then Firebug shows fields being submitted from all forms after the .post(), even though the serialize() function is identical.
All forms have different names and element ids.
What am I doing wrong?
You are making an ajax POST and returning. Depending on your button, it's going to attempt to submit the page's forms. What you need to do is prevent the default action:
$('#indiv_save').click(function(e)
{
e.preventDefault();
// Your Code Here
});
The default action for your button is probably "submit the form", and you are not preventing it.
Return false from your click function should do it.
The forms can't be inside a single all encompassing <form> tag, they have to be separated out in individual <form>'s instead.