0

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;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"></script>
            <!-- 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>
Improve this question
3
  • You don't have any div with the id of "title0" or "title1" etc. so there's nothing for jquery to set the text into. Commented Jul 10, 2009 at 16:32
  • @Seth: it looks like it's actually replacing the inner text of the anchor tag inside the div. That should be ok, though. Commented Jul 10, 2009 at 16:36
  • you are right...I missed the php. part of it where the id is set. blarg, I don't like that language. Commented Jul 10, 2009 at 16:40

3 Answers 3

Reset to default
4

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;
                 });
            });
});
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Can you post what the rendered page looks like? Say using View Generated Source with the Firefox Web Developer plugin.
Weird. that works for me in my simple test. Are you sure the service call is returning data?
Yes, I tried doing a alert and it wasn;t showing up anywhere so I must have a problem someplace which means it's not getting the data. This is all using code ignitor, so feature is the folder and getevent is the function that has the JSON data. I'm still learning all of this so probably make a simple mistake
0

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.

Improve this answer

1 Comment

The value of what I am pulling in my JSON is just text
0

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;
    });
});
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.