Trying to inject element after .load fires

Question

I am trying to set the contents of .myShop, after it is loaded from an external xml file. So far no luck. I think my timing is correct but I also think a loaded element may not be part of the DOM?

Here is what happens: "index.html" loads "template_xml.js". "template_xml.js" fires a function to get some common page elements from "common.html". All works well up to here. Then "template_xml.js" loads some data from "index.xml", in which I would like to replace every occurance of MY SHOP with the shops name.

I think this is the trouble code:

            $(".pagecontent").html($(this).find("pageText").text(), function(){
                $(.shop_name).text("My Great Store Name");
            });

But it does not set the html of .shop_name to "My Great Store Name". All help is appreciated. The website is at http://chainery.comoj.com

EDIT I will try to add relevent code without overwhelming.

INDEX.HTML - this is a pretty straight forward html file, like a template. It has all the html elements and loads the javascripts. Here is the piece where "pagecontent" resides

         <!-- Begin Right Column -->
    <div id="content">
        <div class="page_navigation"></div>
        <div id="loading"></div>
        <div class="pagecontent"></div> <!-- USED FOR NON PRODUCT BOXES -->
        <ul class="content"></ul> <!-- USED FOR PRODUCT BOXES -->
        <div style="clear:both; height:10px;"><!--spacer for navigation--></div>
        <div class="page_navigation"></div>
    </div>
     <!-- End Right Column -->

This loads template_xml.js- this file gets loads different elements of a "common.html" file into index.html, just a snippet of text.

COMMON.HTML - this page is stright html and contains elements that reside on multiple pages.

<!-- START Navigation -->
    <div id="menu">
        <ul id="navMenu">
            <li id='home'><a href="#index" rel="ajax">Home</a></li>
            <li id='about'><a href="#">About</a></li>
            <li id='info'>
                <a href="#information">Information</a>
                <ul>
                   <li><a href="#metals">Metals</a></li>
                   <li><a href="#sizing">Jewelry Sizing</a></li>
                   <li><a href="#findings">Findings</a></li>
                </ul>
            </li>
            <li id='faqs'><a href="#faqs" rel="ajax">FAQs</a></li>
            <li id='privacy'><a href="#">Privacy</a></li>
            <li id='contact'><a href="#">Contact</a></li>
        </ul>
    </div>

TEMPLATE _XML.JS - THIS page does the javascript, first loading common elements from common.html into index.html. Then loads an xml file to populate the remainder.

Here is the function that loads the xml file and puts it into index.html:

 /* Load up non-product pages */
function get_page_XML(thePage){
//hide the content 
$('.page_navigation').hide();
$('.content').hide();
$('.pagecontent').hide();
$('#loading').show();
/* unhighlight current menu tab */
$('#navMenu li[class="current_page_item"]').attr('class', '');
$.wtMeta('hTab','');

$.get("page_xml/"+thePage+".xml", function(data) {
    /* set the meta tag that identifies this xml */
    $.wtMeta('xmlFile',thePage);
    if(($(data).find(':first-child').attr('type')) == "content"){
        $(".pagecontent").html('');
        $(data).find('Page').each(function () {
            /* set the title */
            $("title").text($(this).find("pageName").text()+" jewelry");
            //document.title = $(this).find("pageName").text();
            /* if the title is photos do something */



            /* set the content */
             $(".pagecontent").html( $(this).find("pageText").text() );
             $(".shop_name").text("My Great Store Name");




            /* set correct menu tab */
             $.wtMeta('hTab',$(this).find("hMenuHighlight").text());
        });

        $(".pagecontent").show();
        hMenuTabs();
    }else{
        /* load product page */
        loadProducts(data,thePage);
    }
    $('#loading').hide();
});
}

Thank you for your time, Todd

score 3 · Accepted Answer · answered Nov 03 '11 at 12:38

3

you are missing quotes, do it like this

$('.shop_name').html("My Great Store Name");

answered Nov 03 '11 at 12:38

Senad Meškin

13,597
4
37
55

that was just a typo, thanks for pointing it out though it would have caused problems later. – maddogandnoriko Nov 03 '11 at 12:44

score 2 · Answer 2 · answered Nov 03 '11 at 12:40

2

.html() doesn't take a function that way. You need to write it like this:

 $(".pagecontent").html( $(this).find("pageText").text() );
 $(".shop_name").text("My Great Store Name");

answered Nov 03 '11 at 12:40

Blazemonger

90,923
26
142
180

.html() **does** take a callback function. But it doesn't take an argument + callback function. – jAndy Nov 03 '11 at 12:41
@jAndy I think of a callback function as one that's called after a certain condition is met, not one that's called regardless of conditions. But I suppose that's not the only definition: http://stackoverflow.com/q/824234/901048 -- Edited my phrasing. – Blazemonger Nov 03 '11 at 12:43
Still not changing the contents of .shop_name. I had solved a similar problem before with the .live selector, but I don't think that applies here. – maddogandnoriko Nov 03 '11 at 12:50
@maddogandnoriko I suggest you post your HTML, then. And some more context for your JavaScript, so we can see what `$(this)` is. – Blazemonger Nov 03 '11 at 12:51

Trying to inject element after .load fires

2 Answers2