I am trying to create a a page that pulls in some content via AJAX.
Here are the details:
The base page has a bulleted list which is clickable.
This list is inside a content element which itself is in a parent
element (<div id="parent_container"><div id="base_content"><ul
id="the_list">...</ul></div></div>)
On clicking a list item, the content_container is hidden, and the new
content is retrieved via AJAX as html (also tried it as text) and is
added to the parent_container.  An additional element is added
containing a button to "return" to the base page.

As long as the new content does not contain javascript, everything
works; if javascript is present, the page hangs and sometimes crashes
the browser (FF3).
What am I missing, so I can stop banging my head against the wall???

        function GetContent(cid) {
                var pgcontent = new String("");
                var lbpg = 'content_'+cid+'.htm';
                $.ajax({async: false,cache: false,type: "GET",dataType: "html",
                        contentType: "application/x-www-form-
urlencoded;charset=ISO-8859-15",
                        url: lbpg,
                        success: function(html) { pgcontent = html; }
                });
                return pgcontent;
        }

        $("li").click(function(){
                var lbcontent = GetContent($(this).attr('id'));
                if (lbcontent != "" && lbcontent.length > 0) {
                        $("#base_content").hide();
                        // add the return button && and our new content
                        $("#parent_container").prepend('<div 
class="button_return"><a
onClick="lbreturn();">'
                                + '<img src=".\/images\/sys\/lb_return.png" 
\/><\/a><\/div>\n\n'
                                + lbcontent);
                }
        });


Thanks!
Mitch

Reply via email to