Ajax call to pass some parameters

Question

I got the below function trigger by a button on my webpage.

I need to pass a value from a text field to the ajax call. I have the below script but nothing is occuring.

function sentDateToServer(){
        var runDate = $('#rundate').html();
        $.ajax({
            type: 'GET',
            url: '/clientsurvey/planner.html?runDate=' + runDate,
            success:  function(response) {

            }
            error:  function(xhr, asdf,) {

            }
        });

What do you expect to occur? Why are you passing a query string to html? Did you mean .php? — Trevor, Apr 09 '11 at 03:46

score 2 · Answer 1 · answered Apr 09 '11 at 02:44

2

Assuming that you actually mean "input element" when you say "text field", then you should use the val() function to get its value, not the html() which would return the nested HTML content (there is indeed usually none in case of input elements).

var runDate = $('#rundate').val();

Don't forget to encodeURIComponent() it or, better, use the data option in $.ajax() settings.

answered Apr 09 '11 at 02:44

BalusC

1,082,665
372
3,610
3,555

could you give me an example, im not sure what to type in the success bracket – glenn Apr 09 '11 at 02:54
What do you need to do in the client side when the server side has successfully finished processing the ajax request and returned the response? Just put exactly the code there which achieves that. Or if you actually don't need/want to handle any success/error case, then just remove those handlers. Apart from that, is your initial problem solved or not? Is your server side now retrieving the expected parameter? – BalusC Apr 09 '11 at 02:56
can we go into the javascript chat? – glenn Apr 09 '11 at 02:58
serverside is using that parameter in a sql call to the db then thats returning a list into a table in my jsp page. – glenn Apr 09 '11 at 03:04
If the server side is receiving the parameter, then your initial question of passing the parameter is been answered. As to handling the response, that's a different question. You can find some examples in [this answer](http://stackoverflow.com/questions/4112686/update-current-page-with-a-servlet/4113258#4113258). If you stucks, press `Ask Question`. – BalusC Apr 09 '11 at 03:07
no i'm still not getting a get request being generated. geting a 404 not found error, i can't see rundate as my parameter in firebug function sentDateToServer(){ var runDate = $('#rundate').val; $.ajax({ type: 'GET', url: '/clientsurvey/planner?runDate=' + runDate, }); } – glenn Apr 09 '11 at 03:12
Then the URL is simply wrong. Do you know that the `/` in beginning of a relative URL takes you to the domain root? – BalusC Apr 09 '11 at 03:13
i use the same url format for a datatables function so it can't be that. – glenn Apr 09 '11 at 03:27
404 just means that URL does not exist. It's either a plain typo, or it's wrong as opposed to current context, or the code behind the URL just failed to start/initialize/listen. Forget the Ajax for a while and enter that URL plain in the browser address bar. Get it straight until you don't get 404 anymore and then paste that URL back in the Ajax call. For the remnant, I'd warmly recommend you to get yourself through some basic tutorials: http://stackoverflow.com/questions/543091/where-to-start-from-in-web-development/1843841#1843841 – BalusC Apr 09 '11 at 03:29
ok i got it working but only on a static value, i can't pass the value from my text field element the $('#textfieldid').val is not working – glenn Apr 09 '11 at 03:38
You need `val()`, not `val`. I also still assume that you actually mean "input element" when you say "text field". I.e. ``. – BalusC Apr 09 '11 at 03:43
ok got it going now, need to get it working with my spring controllers , thanks for your help buddy you been awesome! – glenn Apr 09 '11 at 03:51

score 0 · Answer 2 · answered Apr 09 '11 at 05:18

First, It could be that you need a comma after the success callback close bracket. Perhaps because this comma isn't there the ajax function doesn't know how to close itself therefore jquery ignores the function entirely.

Secondly, I agree with @Trevor's confusion about using /clientsurvey/planner.html? as your url for this request, this should be php or foxpro or something. If it is one of these languages then you don't even need the extension, you could just do '/clientsurvey/planner?runDate='+runDate and that should work.

Third, it is syntactically smarter to place the error callback before the success because if the ajax function throws an error then there is no sense in jQuery wasting memory and processing capability on reading in functions that will not executed.

so, your statement changes to the following:

function sentDateToServer(){
    var runDate = $('#rundate').html();
    $.ajax({url: '/clientsurvey/planner?runDate=' + runDate,
        type: 'GET',
        error: function(xhr, asdf,){
            alert(xhr + "\n\n" + asdf);
        },
        success:  function(response){
            //do something
        }
    });
});

Ajax call to pass some parameters

2 Answers2