Question

I am trying to add a jquery-ui selectable to data that is returned from a jquery .post(). It seems as though the selector for that is created in the data from the post is not being recognized. I am thinking that I can use .live() but i’m not sure.

This is the code that I am using:

$.post('middleman.php', { request:"getfeedbacknav"}, function(data) {
       $('#feedbacknav').html(data);
});
$( "#selectable" ).selectable();

Here is the data that I am trying to make selectable:

<div id="feedbacknav" width="20%">
<h3>Feedback</h3>
<br>
<ol id="selectable" width="100%">
    <li class="ui-widget-content">
        <div width="8%"><img src="image/faces/sad_face_3.png" width="25px" height="25px">
        </div>
        <div width="88%" style="padding-top:8px;" id="fb_5678908'">
            intial feedback
        </div>
    </li>
    <li class="ui-widget-content">
        <div width="8%"><img src="image/faces/happy_face_3.png" width="25px" height="25px">
        </div>
        <div width="88%" style="padding-top:8px;" id="fb_1328896423'">
            Server : Bryan
            Comments : Ok
        </div>
    </li>
    <li class="ui-widget-content">
        <div width="8%"><img src="image/faces/happy_face_2.png" width="25px" height="25px">
        </div>
        <div width="88%" style="padding-top:8px;" id="fb_1328898803'">
            Server : Russ
            Comments : He was nice
        </div>
    </li>
</ol>

The ol is showing up when I inspect in chrome but it is not showing up when I view the page source. I am not getting any errors either.

Answer 1

You have to call .selectable after the HTML from the server is returned and is rendered in the browser. the way you have it now, it would be called immediately after the Post and the result of the Post is not yet available and so $( “#selectable” ) is empty.

$.post('middleman.php', { request:"getfeedbacknav"}, function(data) {
    $('#feedbacknav').html(data);
    $( "#selectable" ).selectable();
});