.load of jquery does not load js nor css

Navigation
0

I'm trying to load the contents of "home.html" inside the div #content but it seems like it loads only part of the css and does not load the 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, but I think it's not a good practice.

    
asked by anonymous 18.05.2017 / 18:52

1 answer

0

Since your slider is being mounted on home, add the slider's 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'm doing the event assignment 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. For this second hypothesis to work, the assignment should change to: 

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

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

I do not know the code of your plugin, but if you add it after the load of the html of the home and work, possibly it predicts that in the loading the elements should already be added.

    
19.05.2017 / 16:42
PHP generates error 403 in part of the code Doubt Mysql + PHP