Question

I think I may be missing something or haven’t grasped a fundamental of jQuery. I have searched for hours but yet to find an answer to my question.

I’ve got an old website that I’m upgrading to use jQuery and many of the links call a JavaScript onClick call that passes multiple parameters, as per the example below:

<a href="#" onclick="displayData('Book Title', 'ISBN', 'dateOfPublishing', 'Price');">View Details</a>

The problem is that I’ve updated the old displayData function with various jQuery code and the displayData function is within the

$(document).ready(function() { 
});

code, and this seems to prevent the function displayData being called using the onClick as it says object expected. I’ve moved the displayData function out from the $(document).ready() but by doing so, this has prevented references to other functions within the $(document).ready() code being referenced.

A cut down example of what I have is below:

<script>
  $(document).ready(function() {
    function displayData(title, isbn, dt, price) {
      // there's a call to jQuery AJAX here
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "WebServices/BookService.asmx/GetBookReviews",
            data: "{isbn: '" + isbn + "'}",
            dataType: "json",
            success: function(msg) {
                DisplayReviews(msg.d);
            }
        });
      return false;
    }

    function DisplayReviews(data) {
       // data normally formatted here and passed to formattedData variable
       var formattedData = FormatData(data);
       $('#reviewScreen').html(formattedData);
    }

    function FormatData(data) {
      // function reformats data... code removed for space..
      return data;
    }


  });
</script>


<table>
  <tr><td><a href="#" class="reviewLink" onclick="displayData('Book Title', '1234141HABJA1', '2010-01-12', '$15.99');">View Reviews</a></td><td>Book Title</td></tr>
  <tr><td><a href="#" class="reviewLink" onclick="displayData('Book TItle 2', '516AHGN1515', '1999-05-08', '$25.00');">View Reviews</a></td><td>Book Title 2</td></tr>
</table>

What I’d like to do is to be able to remove the onclick="displayData();" within the link and instead us a jQuery click reference, something like

$('a.reviewLink').click(function() {
  displayData(parameters go here....);
});

I just don’t know how I’d pass the parameters to the function from the link as they would not longer be in the HTML onclick attribute.

If I continue to use the onclick attribute in the link, and move the displayData(params) out of the $(document).ready() code block, it works fine, but the moment I try and reference any of the other functions within the $(document).ready() code block I get the dreaded object expected error with the other functions such as DisplayReviews(param).

I don’t know if this makes any sense…. sorry if it’s confusing, I’m not the worlds best programmer and don’t know all the terminology necessarily, so have tried as best I can to explain. I hope you can help.

Many thanks

Answer 1

The init code should go into the .ready(), not your library functions, those can be defined in a seperate .js file.

<script src="yourFunctions.js"></script>
<script>
    $(document).ready(function(){

         $('a.reviewLink').click(function() {
             displayData(parameters go here....); // in yourFunctions.js
         });

    });
</script>

An alternative to passing inline parameters without using inline javascript, is to use HTML5’s ‘data-‘ attribute on tags. You can use it in xhtml, html etc as well and it just works.

html:

<div data-name="Jack" data-lastname="black">My name is</div>

jquery:

 $('div').click(function(){
      alert($(this).attr('data-name') + ' ' + $(this).attr('data-lastname'));
 });

Note: You HAVE to use either jQuery’s .attr() or native .getAttribute() method to retreive ‘data-‘ values.

I use ‘data-‘ myself all the time.