Reputation: 1338
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
}
Upvotes: 0
Views: 119
Reputation: 4731
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.
Upvotes: 2