Can I bind asp.net dropdownlist using javascript/jquery? - javascript

Can I bind asp.net dropdownlist using javascript/jquery? I get the data from jquery ajax from a web method so I want to avoid postback at this point. But I still want to do postback and save all the data using server side code (i.e. I still be able to do this dropdownlist1.selecteditem.text) after binding it using clientscripts.
Is it possible and can someone explain me how it can be done?
Thanks,

Use Json ajax
Syntax:
$.ajax({
dataType: "json",
url: url,
data: data,
success: success
});
See simple example for json:
<script type="text/javascript">
$(document).ready(function () {
var msgbox = $("#status");
$("#Button1").click(function () {
$.ajax({
type: "POST",
//Page Name (in which the method should be called) and method name
url: "BeginJson.aspx/CheckDateTime",
// If you want to pass parameter or data to server side function you can try line
// data: "{}",
//else If you don't want to pass any value to server side function leave the data to blank line below
data: "{'args':'Somnath'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
//Got the response from server and render to the client
msgbox.html(msg.d);
}
});
});
});

Related

Open file upload dialog after Ajax post success

I have functionality in which it is required to open file upload dialog after Ajax call success event.
What I tried:
I tried applying below simple code in ajax success: and complete: event but it is not working.
$.ajax({
url: url,
type: 'GET',
dataType: 'json',
data: { id: eoid },
contentType: 'application/json; charset=utf-8',
success: function (data) {
// some logic
$("#fileupload").click();
}
});
What is problem:
If I put simple button and try to execute above code, it is working fine and opening dialog - but it is not working in case of ajax post afterwards.
Any guesses or am I missing something?
Thank you.
The problem is at dataType: 'json' . You are loading html with your ajax request so you should change it to dataType: 'html' else in any other format it will not be considered success. Or you can delete this property as stated in Jquery doc that Jquery does default: Intelligent Guess (xml, json, script, or html).

jquery ajax : what is the actual request sent?

What is the actual url sent to the server when I use the jquery ajax? And how do I access that value? For example, consider the following code:
<script>
$.ajax({
type: "POST",
dataType: "json",
url: "response.php",
data: {name:'Smith',age:10},
success: function(data) {
...
}
beforeSend: function(){
console.log(url);
// what do I put here to see what is being sent
// I am expecting to see "response.php?name=Smith&age=10"
}
...
So essentially what variable holds "response.php?name=Smith&age=10".
Thanks.
No variable holds
response.php?name=Smith&age=10
because you aren't sending the data as a query string. This would happen if you issued a GET request, but doesn't with a POST request.
You're sending the data in the request body of an HTTP post. The data is the data that you assigned to the data parameter. You don't need to round-trip it through jQuery's ajax methods. You've got it already. It's:
{name:'Smith',age:10}
does jQuery's interpretation of your data really matter?
The settings object is fully populated when beforeSend is called:
beforeSend: function(jqXHR, settings) {
console.log(settings.url);
console.log(settings.data);
}
$.ajax({ type: "POST", ... }) will log
response.php
name=Smith&age=10
and type: "GET"
response.php?name=Smith&age=10
undefined

Storing ajax jquery into a variable and acessing it with the variable

Can I call jquery ajax from a variable like this ?
var save = $.ajax({
type: "POST",
dataType: 'json',
url: "functions/ajaxInsertCheck.php",
data: dataString,
cache: false,
success: function(response){
alert(response.a);
}
// call ajax jquery
save
How can I call that request like its a function? Can anyone help?
You need to use a function. Functions encapsulate behavior we will want to invoke in the future. You can pass functions arguments which indicate how you want the function to execute.
Functions are typically used when we want to have reusable bits in our code or for code clarity:
function save(){ // declare a function and call it save
return $.ajax({ // a return means we're letting people from the outside use it
type: "POST",
dataType: 'json',
url: "functions/ajaxInsertCheck.php",
data: dataString,
cache: false,
success: function(response){
alert(response.a);
}
});
}
Then you can call it from your own code:
save(); // call the save function performing this action.
Note that there are plenty of examples of functions already in your code like alert and $.ajax that were defined by you by the browser and jQuery respectively.
If you mean, can you defer execution of the call as you've written it, then no. The call is executed immediately.
Check out the documentation at http://api.jquery.com/jquery.ajax/ - particularly under the heading "The jqXHR Object". It's different depending on the version of JQuery, but you get back an object that implements the Promise interface.
But using javascript features, you can make a function:
function saveFunction() {
$.ajax({
type: "POST",
dataType: 'json',
url: "functions/ajaxInsertCheck.php",
data: dataString,
cache: false,
success: function(response){
alert(response.a);
}
});
}
saveFunction();

jQuery AJAX call to .NET code-behind won't return

adAsText(file);
$.ajax({
url: "WebForm1.aspx/OnSubmit",
rn "abcd";
}
it is a success and all the contents of the file prints as an alert, but I can't get it to return. It there something wrong with the content/data type?
Your Code is not clear.
I think you should clear it as much as possible. The Error I see is that you are not calling the server side function anywhere. Then how you hope to be having returned data. First Call the function by passing a string value to it.
I think this is your problem, if not, please clarify more.
Try changing dataType to json. Even though it should infer, it's better to be explicit.
$.ajax({
url: "WebForm1.aspx/OnSubmit",
type: "POST",
data: file,
dataType: "json",
contentType: "plain/text; charset=utf-8",
processData: false,
error: function (msg) {
console.log(msg.d);
alert("error");
},
success: function (msg) {
console.log(msg.d);
alert(file);
}
});

Add cache to ajax json request

I have a basic ajax call to parse a json file. I need to make sure I am not hitting the feed every time someone visits the page. How would I go about adding some sort of cache so the feed only get's requested say every say 2 hours?
$(function () {
$.ajax({
type: "GET",
dataType: "json",
url: "my.json",
success: function (data) {
// do something with the data
}
});
May be you can use cookie store your time and check every time to know 2 hours time gap then you can call your function get the latest feed.
By default, is should get cached. You can set the option explicitly as shown below.
$(function () {
$.ajax({
type: "GET",
cache: true,
dataType: "json",
url: "my.json",
success: function (data) {
// do something with the data
}
});
You can also use the below statement for all ajax calls on the page.
$.ajaxSetup({cache: true});

Categories

Resources