如何使用jquery将动态变量附加到div？

Question

I'm having some difficulty getting this to work. What I want to do is take dynamic variables from the onclick and place them into a div I am appending to another div in the document. Since each each item will have variables associated from a database query, I figured populating the buildTicket() variables from the database would be easier.

I know I'm doing something wrong. I just can't figure out what.

If you have a better way, I'm all ears.

Here is my javascript:

<script type="text/javascript">
$(document).ready(function(){
$(function() {
buildTicket = function(eventname,ticketprice,venueid,userid) {
    $(".ticketbtn").click(function(){
      $(".ticketwindow").append("<div class='ticket'>" + eventname + " - " +     eventprice + "</div>");
    });
}
});
</script>

Here is my HTML:

<div class="ticketbtn" onclick="buildTicket('Some Show','12.00','1','2');">
        <img src="assets/images/tixicon.png" alt=""> <div class="eventname">Some Show</div>
        <div class="ticketprice">Adult - 12.00    </div>
    </div>

<div id="ticketwindow">

</div>

Can someone help me figure this out?

(sorry for the code formatting. Still trying to figure out how to use stackoverflow's forms properly.)

Thanks, Joe

Answer 1

You are binding the onClick listener on click of your button.

If you must use the onClick element attribute then the following code will work although you should become familiar with the principles of Unobtrusive JavaScript .

$(document).ready(function(){
    var buildTicket = function(eventname,ticketprice,venueid,userid) {
        $("#ticketwindow").append("<div class='ticket'>" + eventname + " - " + eventprice + "</div>");
    });
});

Answer 2

Firstly, $(function() { is equivalent to $(document).ready(function() { so you only need one of them.

Secondly, you don't need to use the onclick attribute if you are binding to click() with jQuery, or vice versa.

If you just use the onclick attribute, then you can remove your document ready handler, and your click() binding, all together and simply define the buildTicket() function.

Thirdly, the eventprice variable is misnamed in buildTicket() .

Here is a working fiddle, using jQuery to bind to the click event of your button div. http://jsfiddle.net/BdJAL/

Answer 3

I quote from your question: "I figured populating the buildTicket() variables from the database would be easier."

If you want to get hold of database data in your JavaScript how about making an HTTP request to get it. Obviously, you could do this in the normal XJAX way using XMLHttpRequest: http://www.w3schools.com/xml/xml_http.asp Or you could call up some server side code to produce JSON for you and reference it in a <script> tag eg <script type="text/javascript" src="../js/jsonFromServerSideCode.jsp"></script>