jquery.load does not load js or css

Asked

Viewed 631 times

0

I am trying to load the "home.html" content into the div #content but it seems that it only loads a part of css and does not load sliders, code: index.html

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta name="robots" content="all,follow">
    <meta name="googlebot" content="index,follow,snippet,archive">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Obaju e-commerce template">
    <meta name="author" content="Ondrej Svestka | ondrejsvestka.cz">
    <meta name="keywords" content="">

    <title>
        Obaju : e-commerce template
    </title>

    <meta name="keywords" content="">

    <link href='http://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100' rel='stylesheet' type='text/css'>

    <!-- styles -->
    <link href="css/font-awesome.css" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/animate.min.css" rel="stylesheet">
    <link href="css/owl.carousel.css" rel="stylesheet">
    <link href="css/owl.theme.css" rel="stylesheet">

    <!-- theme stylesheet -->
    <link href="css/style.default.css" rel="stylesheet" id="theme-stylesheet">

    <!-- your stylesheet with modifications -->
    <link href="css/custom.css" rel="stylesheet">

    <script src="js/respond.min.js"></script>
     	<script src="js/jquery-3.2.1.min.js"></script>





</head>

<body>

    <!-- *** TOPBAR ***
 _________________________________________________________ -->
    <div id="top">
        <div class="container">
            <div class="col-md-6 offer" data-animate="fadeInDown">
            </div>
            <div class="col-md-6" data-animate="fadeInDown">
                <ul class="menu">
                    <li><a href="#" data-toggle="modal" data-target="#login-modal">Login</a>
                    </li>
                    <li><a href="register.html">Register</a>
                    </li>
                    <li><a href="contact.html">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="Login" aria-hidden="true">
            <div class="modal-dialog modal-sm">

                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="Login">Customer login</h4>
                    </div>
                    <div class="modal-body">
                        <form action="customer-orders.html" method="post">
                            <div class="form-group">
                                <input type="text" class="form-control" id="email-modal" placeholder="email">
                            </div>
                            <div class="form-group">
                                <input type="password" class="form-control" id="password-modal" placeholder="password">
                            </div>

                            <p class="text-center">
                                <button class="btn btn-primary"><i class="fa fa-sign-in"></i> Log in</button>
                            </p>

                        </form>

                        <p class="text-center text-muted">Not registered yet?</p>
                        <p class="text-center text-muted"><a href="register.html"><strong>Register now</strong></a>! It is easy and done in 1&nbsp;minute and gives you access to special discounts and much more!</p>

                    </div>
                </div>
            </div>
        </div>

    </div>

    <!-- *** TOP BAR END *** -->

    <!-- *** NAVBAR ***
 _________________________________________________________ -->

    <div class="navbar navbar-default yamm" role="navigation" id="navbar">
        <div class="container">
            <div class="navbar-header">

                
                <div class="navbar-buttons">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation">
                        <span class="sr-only">Toggle navigation</span>
                        <i class="fa fa-align-justify"></i>
                    </button>
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#search">
                        <span class="sr-only">Toggle search</span>
                        <i class="fa fa-search"></i>
                    </button>
                    <a class="btn btn-default navbar-toggle" href="basket.html">
                        <i class="fa fa-shopping-cart"></i>  <span class="hidden-xs">3 items in cart</span>
                    </a>
                </div>
            </div>
            <!--/.navbar-header -->

            <div class="navbar-collapse collapse" id="navigation">

                <ul class="nav navbar-nav navbar-left">
                    <li class="active"><a href="index.html">Home</a>
                    </li>
                    <li class="dropdown yamm-fw">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="200">Men <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li>
                                <div class="yamm-content">
                                    <div class="row">
                                        <div class="col-sm-3">
                                            <h5>Clothing</h5>
                                            <ul>
                                                <li><a href="category.html">Camisas</a>
                                                </li>
                                                <li><a href="category.html">Moletons</a>
                                                </li>
                                                <li><a href="category.html">Calças</a>
                                                </li>
                                                <li><a href="category.html">Casacos</a>
                                                </li>
                                            </ul>
                                        </div>
                                        
                                        
                                        
                                    </div>
                                </div>
                                <!-- /.yamm-content -->
                            </li>
                        </ul>
                    </li>

                    <li class="dropdown yamm-fw">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="200">Ladies <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li>
                                <div class="yamm-content">
                                    <div class="row">
                                        <div class="col-sm-3">
                                            <h5>Roupas</h5>
                                            <ul>
                                                <li><a href="category.html">Camisas</a>
                                                </li>
                                                <li><a href="category.html">Moletons</a>
                                                </li>
                                                <li><a href="category.html">Calças</a>
                                                </li>
                                                <li><a href="category.html">Casacos</a>
                                                </li>
                                            </ul>
                                        </div>
                                        
                                        
                                        
                                    </div>
                                </div>
                                <!-- /.yamm-content -->
                            </li>
                        </ul>
                    </li>

                </ul>

            </div>
            <!--/.nav-collapse -->

            <div class="navbar-buttons">

                <div class="navbar-collapse collapse right" id="basket-overview">
                    <a href="basket.html" class="btn btn-primary navbar-btn"><i class="fa fa-shopping-cart"></i><span class="hidden-sm">3 items in cart</span></a>
                </div>
                <!--/.nav-collapse -->

                <div class="navbar-collapse collapse right" id="search-not-mobile">
                    <button type="button" class="btn navbar-btn btn-primary" data-toggle="collapse" data-target="#search">
                        <span class="sr-only">Toggle search</span>
                        <i class="fa fa-search"></i>
                    </button>
                </div>

            </div>

            <div class="collapse clearfix" id="search">

                <form class="navbar-form" role="search">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Search">
                        <span class="input-group-btn">

			<button type="submit" class="btn btn-primary"><i class="fa fa-search"></i></button>

		    </span>
                    </div>
                </form>

            </div>
            <!--/.nav-collapse -->

        </div>
        <!-- /.container -->
    </div>
    <!-- /#navbar -->

    <!-- *** NAVBAR END *** -->



    <div id="all">

        <div id="content">
        <div id="conteudo">
        
        </div>
        </div>
        <!-- /#content -->

        <!-- *** FOOTER ***
 _________________________________________________________ -->
        <div id="footer" data-animate="fadeInUp">
            <div class="container">
                <div class="row">
                    <div class="col-md-3 col-sm-6">
                        <h4>Pages</h4>

                        <ul>
                            <li><a href="text.html">About us</a>
                            </li>
                            <li><a href="text.html">Terms and conditions</a>
                            </li>
                            <li><a href="faq.html">FAQ</a>
                            </li>
                            <li><a href="contact.html">Contact us</a>
                            </li>
                        </ul>

                        <hr>

                        <h4>User section</h4>

                        <ul>
                            <li><a href="#" data-toggle="modal" data-target="#login-modal">Login</a>
                            </li>
                            <li><a href="register.html">Regiter</a>
                            </li>
                        </ul>

                        <hr class="hidden-md hidden-lg hidden-sm">

                    </div>
                    <!-- /.col-md-3 -->

                    <div class="col-md-3 col-sm-6">

                        <h4>Top categories</h4>

                        <h5>Men</h5>

                        <ul>
                            <li><a href="category.html">T-shirts</a>
                            </li>
                            <li><a href="category.html">Shirts</a>
                            </li>
                            <li><a href="category.html">Accessories</a>
                            </li>
                        </ul>

                        <h5>Ladies</h5>
                        <ul>
                            <li><a href="category.html">T-shirts</a>
                            </li>
                            <li><a href="category.html">Skirts</a>
                            </li>
                            <li><a href="category.html">Pants</a>
                            </li>
                            <li><a href="category.html">Accessories</a>
                            </li>
                        </ul>

                        <hr class="hidden-md hidden-lg">

                    </div>
                    <!-- /.col-md-3 -->

                    <div class="col-md-3 col-sm-6">

                        <h4>Where to find us</h4>

                        <p><strong>Obaju Ltd.</strong>
                            <br>13/25 New Avenue
                            <br>New Heaven
                            <br>45Y 73J
                            <br>England
                            <br>
                            <strong>Great Britain</strong>
                        </p>

                        <a href="contact.html">Go to contact page</a>

                        <hr class="hidden-md hidden-lg">

                    </div>
                    <!-- /.col-md-3 -->



                    <div class="col-md-3 col-sm-6">

                        <h4>Get the news</h4>

                        <p class="text-muted">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

                        <form>
                            <div class="input-group">

                                <input type="text" class="form-control">

                                <span class="input-group-btn">

			    <button class="btn btn-default" type="button">Subscribe!</button>

			</span>

                            </div>
                            <!-- /input-group -->
                        </form>

                        <hr>

                        <h4>Stay in touch</h4>

                        <p class="social">
                            <a href="#" class="facebook external" data-animate-hover="shake"><i class="fa fa-facebook"></i></a>
                            <a href="#" class="twitter external" data-animate-hover="shake"><i class="fa fa-twitter"></i></a>
                            <a href="#" class="instagram external" data-animate-hover="shake"><i class="fa fa-instagram"></i></a>
                            <a href="#" class="gplus external" data-animate-hover="shake"><i class="fa fa-google-plus"></i></a>
                            <a href="#" class="email external" data-animate-hover="shake"><i class="fa fa-envelope"></i></a>
                        </p>


                    </div>
                    <!-- /.col-md-3 -->

                </div>
                <!-- /.row -->

            </div>
            <!-- /.container -->
        </div>
        <!-- /#footer -->

        <!-- *** FOOTER END *** -->




        <!-- *** COPYRIGHT ***
 _________________________________________________________ -->
        <div id="copyright">
            <div class="container">
                <div class="col-md-6">
                    <p class="pull-left">© 2015 Your name goes here.</p>

                </div>
                <div class="col-md-6">
                    <p class="pull-right">Template by <a href="https://bootstrapious.com/e-commerce-templates">Bootstrapious.com</a>
                         <!-- Not removing these links is part of the license conditions of the template. Thanks for understanding :) If you want to use the template without the attribution links, you can do so after supporting further themes development at https://bootstrapious.com/donate  -->
                    </p>
                </div>
            </div>
        </div>
        <!-- *** COPYRIGHT END *** -->



    </div>
    <!-- /#all -->


    

    <!-- *** SCRIPTS TO INCLUDE ***
 _________________________________________________________ -->

 	<script src="js/jquery-1.11.0.min.js"></script>


    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.cookie.js"></script>
    <script src="js/waypoints.min.js"></script>
    <script src="js/modernizr.js"></script>
    <script src="js/bootstrap-hover-dropdown.js"></script>
    <script src="js/owl.carousel.min.js"></script>
    <script src="js/front.js"></script>
  <script>
$(document).ready(function() {
      $('#conteudo').load('home.html', function(){
    	  return false;
      });  
      
});
</script>

</body>

</html>

home html.

<meta charset="utf-8">
<div class="container">
	<div class="col-md-12">
		<div id="main-slider">
			<div class="item">
				<img src="img/main-slider1.jpg" alt="" class="img-responsive">
			</div>
			<div class="item">
				<img class="img-responsive" src="img/main-slider2.jpg" alt="">
			</div>
			<div class="item">
				<img class="img-responsive" src="img/main-slider3.jpg" alt="">
			</div>
			<div class="item">
				<img class="img-responsive" src="img/main-slider4.jpg" alt="">
			</div>
		</div>
		<!-- /#main-slider -->
	</div>
</div>

<!-- *** ADVANTAGES HOMEPAGE ***
 _________________________________________________________ -->
<div id="advantages">

	<div class="container">
		<div class="same-height-row">
			<div class="col-sm-4">
				<div class="box same-height clickable">
					<div class="icon">
						<i class="fa fa-heart"></i>
					</div>

					<h3>
						<a href="#">Temos compromisso com o cliente</a>
					</h3>
					<p>Nós sabemos como prover o melhor serviço possivel!</p>
				</div>
			</div>

			<div class="col-sm-4">
				<div class="box same-height clickable">
					<div class="icon">
						<i class="fa fa-tags"></i>
					</div>

					<h3>
						<a href="#">Melhores Preços</a>
					</h3>
					<p>Os melhores preços da internet estão aqui!</p>
				</div>
			</div>

			<div class="col-sm-4">
				<div class="box same-height clickable">
					<div class="icon">
						<i class="fa fa-thumbs-up"></i>
					</div>

					<h3>
						<a href="#">100% de satisfação garantida</a>
					</h3>
					<p>Ou seu dinheiro de volta!</p>
				</div>
			</div>
		</div>
		<!-- /.row -->

	</div>
	<!-- /.container -->

</div>
<!-- /#advantages -->

<!-- *** ADVANTAGES END *** -->

<!-- *** HOT PRODUCT SLIDESHOW ***
 _________________________________________________________ -->
<div id="hot">

	<div class="box">
		<div class="container">
			<div class="col-md-12">
				<h2>Mais vendidas da semana</h2>
			</div>
		</div>
	</div>

	<div class="container">
		<div class="product-slider">
			<div class="item">
				<div class="product">
					<div class="flip-container">
						<div class="flipper">
							<div class="front">
								<a href="detail.html"> <img src="img/camisaExemplo.jpg"
									alt="" class="img-responsive">
								</a>
							</div>
							<div class="back">
								<a href="detail.html"> <img src="img/camisaExemplo.jpg"
									alt="" class="img-responsive">
								</a>
							</div>
						</div>
					</div>
					<a href="detail.html" class="invisible"> <img
						src="img/camisaExemplo.jpg" alt="" class="img-responsive">
					</a>
					<div class="text">
						<h3>
							<a href="detail.html">Fur coat with very but very very long
								name</a>
						</h3>
						<p class="price">$143.00</p>
					</div>
					<!-- /.text -->
				</div>
				<!-- /.product -->
			</div>

			<div class="item">
				<div class="product">
					<div class="flip-container">
						<div class="flipper">
							<div class="front">
								<a href="detail.html"> <img src="img/calcaEx.jpg" alt=""
									class="img-responsive">
								</a>
							</div>
							<div class="back">
								<a href="detail.html"> <img src="img/calcaEx.jpg" alt=""
									class="img-responsive">
								</a>
							</div>
						</div>
					</div>
					<a href="detail.html" class="invisible"> <img
						src="img/calcaEx.jpg" alt="" class="img-responsive">
					</a>
					<div class="text">
						<h3>
							<a href="detail.html">White Blouse Armani</a>
						</h3>
						<p class="price">
							<del>$280</del>
							$143.00
						</p>
					</div>
					<!-- /.text -->



				</div>
				<!-- /.product -->
			</div>

			<div class="item">
				<div class="product">
					<div class="flip-container">
						<div class="flipper">
							<div class="front">
								<a href="detail.html"> <img src="img/tenisEx.jpg" alt=""
									class="img-responsive">
								</a>
							</div>
							<div class="back">
								<a href="detail.html"> <img src="img/tenisEx.jpg" alt=""
									class="img-responsive">
								</a>
							</div>
						</div>
					</div>
					<a href="detail.html" class="invisible"> <img
						src="img/tenisEx.jpg" alt="" class="img-responsive">
					</a>
					<div class="text">
						<h3>
							<a href="detail.html">Black Blouse Versace</a>
						</h3>
						<p class="price">$143.00</p>
					</div>
					<!-- /.text -->
				</div>
				<!-- /.product -->
			</div>

			<div class="item">
				<div class="product">
					<div class="flip-container">
						<div class="flipper">
							<div class="front">
								<a href="detail.html"> <img src="img/tenisEx.jpg" alt=""
									class="img-responsive">
								</a>
							</div>
							<div class="back">
								<a href="detail.html"> <img src="img/tenisEx.jpg" alt=""
									class="img-responsive">
								</a>
							</div>
						</div>
					</div>
					<a href="detail.html" class="invisible"> <img
						src="img/tenisEx.jpg" alt="" class="img-responsive">
					</a>
					<div class="text">
						<h3>
							<a href="detail.html">Black Blouse Versace</a>
						</h3>
						<p class="price">$143.00</p>
					</div>
					<!-- /.text -->
				</div>
				<!-- /.product -->
			</div>

			<div class="item">
				<div class="product">
					<div class="flip-container">
						<div class="flipper">
							<div class="front">
								<a href="detail.html"> <img src="img/calcaEx.jpg" alt=""
									class="img-responsive">
								</a>
							</div>
							<div class="back">
								<a href="detail.html"> <img src="img/calcaEx.jpg" alt=""
									class="img-responsive">
								</a>
							</div>
						</div>
					</div>
					<a href="detail.html" class="invisible"> <img
						src="img/calcaEx.jpg" alt="" class="img-responsive">
					</a>
					<div class="text">
						<h3>
							<a href="detail.html">White Blouse Versace</a>
						</h3>
						<p class="price">$143.00</p>
					</div>
					<!-- /.text -->


				</div>
				<!-- /.product -->
			</div>

			<div class="item">
				<div class="product">
					<div class="flip-container">
						<div class="flipper">
							<div class="front">
								<a href="detail.html"> <img src="img/tenisEx.jpg" alt=""
									class="img-responsive">
								</a>
							</div>
							<div class="back">
								<a href="detail.html"> <img src="img/tenisEx.jpg" alt=""
									class="img-responsive">
								</a>
							</div>
						</div>
					</div>
					<a href="detail.html" class="invisible"> <img
						src="img/tenisEx.jpg" alt="" class="img-responsive">
					</a>
					<div class="text">
						<h3>
							<a href="detail.html">Fur coat</a>
						</h3>
						<p class="price">$143.00</p>
					</div>
					<!-- /.text -->




				</div>
				<!-- /.product -->
			</div>
			<!-- /.col-md-4 -->

			<div class="item">
				<div class="product">
					<div class="flip-container">
						<div class="flipper">
							<div class="front">
								<a href="detail.html"> <img src="img/calcaEx.jpg" alt=""
									class="img-responsive">
								</a>
							</div>
							<div class="back">
								<a href="detail.html"> <img src="img/calcaEx.jpg" alt=""
									class="img-responsive">
								</a>
							</div>
						</div>
					</div>
					<a href="detail.html" class="invisible"> <img
						src="img/calcaEx.jpg" alt="" class="img-responsive">
					</a>
					<div class="text">
						<h3>
							<a href="detail.html">White Blouse Armani</a>
						</h3>
						<p class="price">
							<del>$280</del>
							$143.00
						</p>
					</div>
					<!-- /.text -->



				</div>
				<!-- /.product -->
			</div>

			<div class="item">
				<div class="product">
					<div class="flip-container">
						<div class="flipper">
							<div class="front">
								<a href="detail.html"> <img src="img/tenisEx.jpg" alt=""
									class="img-responsive">
								</a>
							</div>
							<div class="back">
								<a href="detail.html"> <img src="img/tenisEx.jpg" alt=""
									class="img-responsive">
								</a>
							</div>
						</div>
					</div>
					<a href="detail.html" class="invisible"> <img
						src="img/tenisEx.jpg" alt="" class="img-responsive">
					</a>
					<div class="text">
						<h3>
							<a href="detail.html">Black Blouse Versace</a>
						</h3>
						<p class="price">$143.00</p>
					</div>
					<!-- /.text -->
				</div>
				<!-- /.product -->
			</div>

		</div>
		<!-- /.product-slider -->
	</div>
	<!-- /.container -->

</div>

If I load the CSS and JS inside the home.html everything works, however I think it is not a good practice.

jquery load

  • If you put the script just under the jquery reference, it works?

  • I tried here but it didn’t work, at first I thought it could be conflict between the two jquerys of different versions that I’m importing because 1.11.0 is what came with the template and 3.2.1 I put because of the load function(I don’t think there is in 1.11.0 because n worked before importing the most recent), I tried to put the code on top of html and bottom and it won’t.

  • That’s it. Comments jquery 3.2.1 pq load is default, and there you put the slider file, js, inside the home html, well below everything. It can be?

  • I did that took out the newest jquery and left only the old one and still does not load.

  • And put the slider js inside the home?

  • So when I put the JS inside the home works, it’s right to do it yourself?

Show 1 more comment

1 answer

0

Since your slider is being mounted on the home, add the slider JS to the home file. What should happen is that in the slider plugin, the properties and actions are being added predicting that the elements are already rendered, which is not the case. EX: 

<body>
   <p>Teste</p>
</body>

<script>
   $(document).ready(function(){
      $("p").click(function(){ 
        $(this).html("Outro teste");
      }
   });
</script>

This script will run smoothly as I am assigning the event to an element that is already added to the page.

But if you change to:

<body>

</body>

<script>
    $(document).ready(function(){
       $("p").click(function(){ 
         $(this).html("Outro teste");
       }

       $("body").append("p");
    });
</script>

This event will not be called because the assignment occurred before the element is added. And that’s what I think should be happening with your plugin. In order for this second hypothesis to work, the assignment must change to:

<script>
        $(document).ready(function(){
           $(document).on("click", "p", function(){
              $(this).html("Outro teste");
           });

           $("body").append("p");
        });
</script>

I don’t know the code of your plugin, but if you add it after the home html load and it works, possibly it predicts that on loading the elements should already be added.

  • The problem is that I am not clicking anything to hold the event, I am carrying the content of the page right after the page is ready (ready), I found the js that ta giving problem (front.js) I have to import it in the home and index because my menu where login appears, Register ... needs him and my Carousel and the others need him, doing so he carries everything straight, I just wanted that when loading the index, he carried to the next elements that I will carry in the core, for click on each HTML the front of the conflict and start bugging things

  • So, @Joãocarlos, the problem of js that does not load what was rendered later is the one I explained above. The example with the click was only an indicator.

  • I understand, my teacher explained to me the same more detailed thing, at first he said that the way this work has no way to solve I would have to change a lot, but only to exercise the concepts of the discipline is for me to carry the front.js in the htmls that use it.

  • It’s great that you understand. (=

Browser other questions tagged jquery load

You are not signed in. Login or sign up in order to post.