Jquery use after load function

Question

I'm failing to use jquery functions after I'm using partials - .load() function. I've tried functions like .val() and background-image change, and nothing happens. I guess it has something with the .load() because I cant find any other reason... Maybe I have to use live func or something... Thats my main div at home page which I load inside it when I'm navigatin at my site:

<div id="mainContent">
</div>

Thats the other page which I load into the mainContent :

<div id="carNavigation" onload="rentPics()">
<div class="carDivs" id="d1"></div>
<div class="carDivs" id="d2"></div>
<br>
<div class="carDivs" id="d3"></div>
<div class="carDivs" id="d4"></div>
<div class="carHeads" id="mazHead">Mazda</div>
<div class="carHeads" id="toyHead">Toyota</div>
<div class="carHeads" id="porHead">Porsche</div>
<div class="carHeads" id="infHead">Infinity</div>
</div>

And thats my js code:

$(document).ready(function() {
    $('#mainContent').css('background-image', 'url(wood.jpg)');
   });

function loadPage(str)
{
    if (str=="Aboutus")
    {
        $('#mainContent').load('aboutus.html');
        $('#mainContent').css('background-image', 'url(familycar.png)');
    }
    if (str=="rentcar")
    {
        $('#mainContent').load('rentCar.html');
        $('#mainContent').css('background-image', 'url(wood.jpg)');
    }
    if (str=="registration")
    {
        $('#mainContent').load('registration.html');
    }
}
function rentPics()
{
    $('#d1').css('background-image','url(familycar.png)');
}

CSS Code:

/* Rent Car Page Css*/
.carDivs
{
    border: 1px solid black;
    float:right;
    width:200px;
    height:200px;
    border-radius: 65px;
    box-shadow: 0px 0px 15px 15px #FFFFFF;
}
#d1 ,#d2
{
    margin-left: 100px;
    margin-right: 155px;
    margin-top: -120px;
}

#d3, #d4
{
    margin-top: 112px;
    margin-left: 100px;
    margin-right: 155px;
}

#mazHead
{
    margin-left: 235px;
}
#toyHead
{
    margin-left: 683px;
    margin-top: -26px;
}
#porHead
{
    margin-top: 269px;
    margin-right: 87px;
    margin-left: 217px;
}
#infHead
{
    margin-top: 268px;
    margin-left: 260px;
}

.carHeads
{
    display:inline-block;
    font-family: Copperplate, "Copperplate Gothic Light", fantasy;
    font-size: 26px;
    vertical-align:top
}

please post full code including the css.

Don Rhummy
– Don Rhummy

2013-11-12 18:06:57 +00:00
Commented Nov 12, 2013 at 18:06 — Don Rhummy
– Don Rhummy, Commented Nov 12, 2013 at 18:06
Use "onload" attribute on body tag...

Pradeep shyam
– Pradeep shyam

2013-11-12 18:22:23 +00:00
Commented Nov 12, 2013 at 18:22 — Pradeep shyam
– Pradeep shyam, Commented Nov 12, 2013 at 18:22

eightyfive · Accepted Answer · 2013-11-12 18:12:54Z

2

You must call rentPics() after your 'page' has loaded into the DOM.

Something like that:

$.load("url_to_your_page_containing_carNavigation", function () {
   renderPics();
});

The second argument (the function...) will be called only when the page has finished loading, and thus, when #d1 will be available in the DOM tree.

See official $.load documentation for further details.

answered Nov 12, 2013 at 18:12

eightyfive

4,7593 gold badges39 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Juvi Over a year ago

Just worked, cant give you a positive one since I'm rookie but hope the others will:)

Collectives™ on Stack Overflow

Jquery use after load function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related