jQuery AJAX post with fileupload

Question

I have a functional page posting data to a Page WebMethod

[WebMethod()]
public static string sayHello(string pTest, string pText)
{
  return pTest + \" - \" + pT         


        

Answer 1

Can't tell for all plugins, but I'm using jQuery Form without any problems. No flash involved, it just creates hidden iframe instead.

Here's a demo.

but how will it then be possible to both post data and upload with only one click
The process is the same as with normal ajax request. You declare a form element, but instead of $('#myform').submit(); do $('#myform').ajaxSubmit().

Answer 2

Assuming sayHelloButton is the id of the submission button on the form you are using to upload the file, be sure to add: event.preventDefault(); to your $("#sayHelloButton").click() function or use javascript.void(); on the form to prevent the browser from posting the data using its default behavior. Otherwise, your ajax code will never even execute.

$("#sayHelloButton").click(function (event) {
event.preventDefault();
var name = $('#name').val();
var text = $('#text').val(); 
var dataString = JSON.stringify({
  pTest: name,
  pText: text
});