jquery and json pull data from var

Question

I have this code:

 $.getJSON("Featured/getEvents",
             function(data){
           $.each(data.events, function(i,event){
             var title = event.title.substr(0,20);
             $("#title-"+i).text("Text");
                     if ( i == 4 ) return false;
               });
             });

I am doing this in conjuction with a php loop to render a div 5 times, I want to place my content into the ID's from the JSON using var and the .text(), but it is not working, How do I get a var, in this case title into the jquery text() so it can place it in the corresponding div?

This is the corresponding php(partial) that this connects to:

<?php for($i = 0; $i <= 4; $i++)
    { ?>

    <div id="event-item-<?= $i?>" class="event">
     <div class="column-left">
     <div class="title"><h3><a href="" id="title-<?= $i?>"></a></h3></div>

This is the rendered version:

<div id="event-item-0" class="event">
   <div class="column-left">
        <div class="title"><h3><a href="" id="title-0"></a></h3></div>
             <div class="inner-left">
                <img src="http://philly.cities2night.com/event/85808/image_original" class="image" width="133" height="100">
                <p class="author">Posted by: <br> <a href="#">Brendan M. (22 Events)</a></p>
      </div>
      <div class="inner-middle">
      <p class="description" id="description-0"></p>

      <p class="notify"><img src="images/recommened_ico.png" alt="Recommened Event" width="98" height="21"></p>
      <p class="links">
      <!-- AddThis Button BEGIN -->
      <a href="http://www.addthis.com/bookmark.php?v=250&amp;amp;pub=philly2night" onmouseover="return addthis_open(this, '', '[URL]', '[TITLE]')" onmouseout="addthis_close()" onclick="return addthis_sendto()"><img src="http://s7.addthis.com/static/btn/lg-share-en.gif" alt="Bookmark and Share" style="border: 0pt none ;" width="125" height="16"></a><script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js?pub=philly2night"&gt;&lt;/script&gt;
      <!-- AddThis Button END -->
      <a href="#" class="button">View Event</a></p>
      </div>
     </div>


     <div class="column-right">
      <ul id="event-options">
       <li class="total-attending"><span><a href="#">502</a>Attending</span></li>
       <li class="rsvp"><span><a href="#">RSVP</a></span></li>
       <li id="like" class="notlike"><span>(3) Likes <br><span class="message"><a href="javascript:;" class="likeon">Do You Like it?</a></span></span></li>
       <li class="comment"><span><a href="#">Comments (200)</a></span></li>

       <li class="location"><span><a href="#">Location Name</a></span></li>
      </ul>
      </div>
     </div>

        ...     
</div>

Answer 1

It should be as simple as referencing the variable.

$("#title-"+i).text( title );

or, if your title includes mark up,

$("#title-"+i).html( title );

If this doesn't work, make sure that you aren't getting any javascript errors that prevent the code from running.

EDIT: This may or may not be related, but I would avoid using event as a variable name. Too easy to confuse with the window.event object and it may cause other problems. Generally, I'd use evt in this case.

Other possibilities: You aren't running the getJSON method after the document is done loading or the method isn't relative to the current page. If the simple things don't seem to be getting you anywhere, you may try using Firefox/Firebug to step through the code and see what it is doing. My simple example with your mark up and just using jQuery to set the text of the anchor worked fine so I don't think the problem is in the code where the text is being set.

$(function() {
    $.getJSON("/Featured/getEvents",
            function(data){
                 $.each(data.events, function(i,evt){
                    var title = evt.title.substr(0,20);
                    $("#title-"+i).text(title);
                    if ( i == 4 ) return false;
                 });
            });
});

Answer 2

You want to use .html(val).

Edit: Actually, .text(val) will place the text inside the element as-is. Using .html(val) will let any HTML you are adding render appropriately.

Answer 3

Did you try this, using title instead of "Text"?

$.getJSON("Featured/getEvents", function(data){
    $.each(data.events, function(i,event){
        var title = event.title.substr(0,20);
        $("#title-"+i).text(title);
        if ( i == 4 ) return false;
    });
});