0

Estou tentando carregar o conteudo do "home.html" dentro da div #conteudo porem parece que ele carrega somente uma parte do css e não carrega os sliders, codigo: 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>

Se eu carregar os CSS e JS dentro do home.html tudo funciona, porem creio que não seja uma boa pratica.

6
  • Se tu colocar o script carregar logo abaixo da referência da jquery, funciona?
    – Aline
    18/05/2017 às 17:24
  • Tentei aqui mas não funcionou, a principio eu achei que poderia ser conflito entra os dois jquerys de versões diferentes que estou importando pois o 1.11.0 é que veio com o template e o 3.2.1 eu coloquei por causa da função load(acho que não tem no 1.11.0 pois n funcionava antes de importar o mais recente), ja tentei colocar o codigo na parte de cima do html e na parte de baixo e não vai. 18/05/2017 às 18:06
  • Isso. Comenta o jquery 3.2.1 pq load é padrão, e aí tu coloca o arquivo do slider, o js, dentro do html da home, bem abaixo de tudo. Pode ser?
    – Aline
    18/05/2017 às 18:37
  • Eu fiz isso tirei o jquery mais novo e deixei so o antigo e mesmo assim não carrega. 18/05/2017 às 21:09
  • E colocou o js do slider dentro da home?
    – Aline
    19/05/2017 às 10:52

1 Resposta 1

0

Já que seu slider está sendo montado na home, adicione o JS do slider no arquivo home. O que deve ocorrer é que, no plugin de slider, as propriedades e ações estão sendo adicionados prevendo que os elementos já estão renderizados, o que não é o caso. EX:

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

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

Este script vai executar sem problemas, pois estou fazendo atribuição do evento a um elemento que já está adicionado a página.

Mas se você alterar para:

<body>

</body>

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

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

Este evento não vai ser chamado, porque a atribuição ocorreu antes de o elemento está adicionado. E é o que penso que deve estar ocorrendo com seu plugin. Para que funcione esta segunda hipótese, a atribuição deve mudar para:

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

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

Não sei o código do seu plugin, mas se tu adicionar ele após o load do html da home e funcionar, possivelmente ele prevê que no carregamento os elementos já devem estar adicionados.

4
  • O problema é que eu não estou clicando em alguma coisa pra realizar o evento, eu estou carregando o miolo da pagina logo após a pagina estar pronta (ready), eu achei o js que ta dando problema (front.js) eu tenho que importar ele no home e no index pois o meu menu onde aparece login, register ... precisa dele e o meu carousel e os outros tb precisam dele, fazendo desta forma ele carrega tudo certinho, eu so queria que ao carregar no index, ele carregasse para os proximos elementos que eu carregarei no miolo, pois carregar em cada HTML o front da conflito e começa a bugar as coisas 19/05/2017 às 15:49
  • Então, @JoãoCarlos, o problema do js que não carrega o que foi renderizado depois é esse que expliquei acima. O exemplo com o click foi só um indicador.
    – Aline
    19/05/2017 às 16:37
  • Entendi, meu professor me explicou a mesma coisa mais detalhada, a principio ele disse que do jeito que esta no meu trabalho não tem como resolver eu teria que mudar muita coisa, mas so pra exercitar os conceitos da disciplina é pra eu carregar o front.js nos htmls que usam ele. 22/05/2017 às 14:29
  • Ótimo que tenha entendido. (=
    – Aline
    22/05/2017 às 14:43

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .