Develop Reference

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).

Ajax Call not returning Partial View

I am making an AJAX call, and then returning PartialView from Controller to populate it in a div.
The following is my code :-
var file = document.getElementById("file").files[0];
jq.ajax({
type: "POST",
url: '/Main/getData',
data: formData,
dataType: 'json',
contentType: false,
processData: false,
success: function (response) {
jq('#partialPlaceHolder').html(response);
},
error: function (error) {
alert("Some Error Occured");
}
});
[HttpPost]
public ActionResult getData(FormCollection form)
{
......
return PartialView("_pageMain", retMod);
}
As I debug the Code in Controller, there is no Error till the end, But still the AJAX throws the alert("Some Error Occured").
The PartialView is not populated in div. How to solve this?

You are setting the return data type to json
dataType: 'json'
try changing this to
dataType: 'html'
See here http://api.jquery.com/jquery.ajax/
dataType (default: Intelligent Guess (xml, json, script, or html))
Type: String
The type of data that you're expecting back from the server.

Why not to use .load() JQuery .load()?
Description: Load data from the server and place the returned HTML into the matched element.
And simple:
$('#partialPlaceHolder').load("#Url.Action('getData')", { form: formData })
Third parameter for .load() is callback function, so feels free with it.
BTW: I did not find using variable file in your code.

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

How to get request url in a jQuery $.get/ajax request

I have the following code:
$.get('http://www.example.org', {a:1,b:2,c:3}, function(xml) {}, 'xml');
Is there a way to fetch the url used to make the request after the request has been made (in the callback or otherwise)?
I want the output:
http://www.example.org?a=1&b=2&c=3

I can't get it to work on $.get() because it has no complete event.
I suggest to use $.ajax() like this,
$.ajax({
url: 'http://www.example.org',
data: {'a':1,'b':2,'c':3},
dataType: 'xml',
complete : function(){
alert(this.url)
},
success: function(xml){
}
});
craz demo

Since jQuery.get is just a shorthand for jQuery.ajax, another way would be to use the latter one's context option, as stated in the documentation:
The this reference within all callbacks is the object in the context option passed to $.ajax in the settings; if context is not specified, this is a reference to the Ajax settings themselves.
So you would use
$.ajax('http://www.example.org', {
dataType: 'xml',
data: {'a':1,'b':2,'c':3},
context: {
url: 'http://www.example.org'
}
}).done(function(xml) {alert(this.url});

Jquery Ajax Problem

Hi all;
var v_name = null;
$.ajax({
type: "GET",
url: "Testpage.aspx",
data: "name=test",
dataType: "html",
success: function(mydata) {
$.data(document.body, 'v_name', mydata);
}
});
v_name = $.data(document.body, 'OutputGrid');
alert(v_name);
first alert undefined before alert work why ?

In addition to the other answers, also keep in mind that by default .ajax GET requests are cached, so depending on your browser, it may look like all of your requests are returning the same response. Workarounds include (but are not limited to): using POST instead of GET, adding a random querystring to your url for each request, or adding 'cache: false' to either your ajax call or to the global ajaxSetup.

To make it work, you have to place the alert() in the success function:
$.ajax({
type: "GET",
url: "Testpage.aspx",
data: "name=test",
dataType: "html",
success: function(mydata) {
alert(mydata);
}
});
AJAX calls are asynchronous, and therefore JavaScript would evaluate alert(v_name); before the server responds to the AJAX call, and therefore before the success function is called.
Your AJAX applications must be designed in such a way to be driven by the AJAX response. Therefore anything you plan to do with mydata should be invoked from the success function. As a rule of the thumb, imagine that the server will take very long (such as 1 minute) to respond to the AJAX request. Your program logic should work around this concept of asynchrony.

$.ajax({
type: "GET",
url: "Testpage.aspx",
data: "name=test",
dataType: "html",
success: function(mydata) {
alert(mydata);
}
});