Passing jquery variable to ajax data

Question

I am trying to pass these variables from 3 hidden fields to the data of the the ajax.

I am getting the correct variables. I verified via console.log. I tried to parse json but it didnt for me.

The error i am getting uncaught exception: [Exception... "Could not convert JavaScript argument" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: http://code.jquery.com/jquery-latest.js :: :: line 7740" data: no] Line 2

I am trying to pass these variables using the ajax request to my controller. The other variables in the datastring I have no issues at all. When a user clicks on a star rating the values are posted and inserted to a db.

Here are the variables:

       var TweetUserId =  $(this).parents().prevAll('input[type=hidden:first]') ;
          var TweetScreenName =  $(this).parents().prevAll('input[type=hidden:second]') ;
          var TweetPostText = $(this).parents().prevAll('input[type=hidden:third]') ;
 // making it an object didnt work
         //  TweetUserId = new Object; TweetUserId = (TweetUserId);
          // TweetScreenName = new Object; TweetScreenName = (TweetScreenName);
         //  TweetPostText = new Object; TweetPostText = (TweetPostText);

Here is the request

          $.ajax({
              url: '/Home/GetRating', //your server side script
              dataType: "json",
              data: { id: ratingid, value: value, TweetUserId: TweetUserId, TweetScreenName: TweetScreenName, TweetPostText: TweetPostText, tweetday: dateoftweet, tweettime: timeoftweet }, //our data
              type: 'POST',
              success: function (data) {
                  //$('#ratemsg').html(data);
                  msg.html(" The TweetId is " + ratingid + " the vote value is " + value + " " + dateoftweet + "  " + timeoftweet  );
                  //       console.log(hiddenValue);
              },
              error: function (jxhr, msg, err) {
                  //  $('#response').append('<li style="color:red">' + msg + '</li>');
                  msg.html(data);
              }
          });
      });

  });

Answer 1

1. your are using selectors the wrong way and some are invalid :first :second :third
   (they should go outside the [type=hidden] and there are no :second :third .. use the :eq() selector instead
2. You are passing elements instead of their value to the ajax request..

Use this when populating the variables..

 var TweetUserId =  $(this).parents().prevAll('input[type="hidden"]:eq(0)').val();
 var TweetScreenName =  $(this).parents().prevAll('input[type="hidden"]:eq(1)').val();
 var TweetPostText = $(this).parents().prevAll('input[type="hidden"]:eq(2)').val();

---

As a general pattern, it is better to cache a jQuery object when you intend to use it multiple times, instead of re-selecting it ..

so you could improve your code with

 var hiddenElements = $(this).parents().prevAll('input[type="hidden"]'),
     TweetUserId =  hiddenElements.eq(0).val(),
     TweetScreenName =  hiddenElements.eq(1).val(),
     TweetPostText = hiddenElements.eq(2).val();