Conflict in Requisition

Navigation
0

I'm having trouble making the car.php page work by opening the visual DIV via the link when accessing the temporary address " link "

But when I enter the address " link " the effects work.

I leave below the codes used.

Page index.php: 

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8"/>
    <script src="js/rotinas.js"></script>
</head>
<body>
    <a style="cursor:pointer;" >
        <img style="width:20%; max-width:100px;" src="images/image01.jpg" onclick="consultarCarro();" />
    </a>        
    <div id="visual"></div>   
</body>
</html>

Request Script "rotinas.js" 

//Tratamento dos Status
function tratarEventos(e){
    if (e.target.readyState == 4){
        if (e.target.status == 200){
            document.getElementById('visual').innerHTML = e.target.responseText;
        } else if (e.target.status == 404){
            document.getElementById('visual').innerHTML = "<p>Arquivo não encontrado.</p>";
        }
    }
}

//Ir para a pagina carro.php
function consultarCarro(){
    var req = new XMLHttpRequest();
    req.open('GET','carro.php',true);
    req.onreadystatechange = tratarEventos;
    req.send();
    //aborta o request
xhr.abort();
}

Carpage.php: 

<!doctype html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="js/jquery.js"></script>
    <script src="js/xzoom.min.js"></script>
    <script src="js/setup.js"></script>
    <link rel="stylesheet" type="text/css" href="css/xzoom.css" media="all" /> 
</head>
<body>
    <!-- default start -->
    <section style="margin-left:15px;" id="default" class="padding-top5">
    <div class="row">
      <div class="large-5 column">
        <div class="xzoom-container">
          <img class="xzoom" id="xzoom-default" width="250" src="images/image01.jpg" xoriginal="images/image01.jpg" />
          <div class="xzoom-thumbs">
            <a href="images/image01.jpg"><img class="xzoom-gallery" width="44" src="images/image01.jpg"  xpreview="images/image01.jpg"></a>
            <a href="images/image02.jpg"><img class="xzoom-gallery" width="44" src="images/image02.jpg"></a>
            <a href="images/image03.jpg"><img class="xzoom-gallery" width="44" src="images/image03.jpg"></a>
            <a href="images/image04.jpg"><img class="xzoom-gallery" width="44" src="images/image04.jpg"></a>
            <a href="images/image05.jpg"><img class="xzoom-gallery" width="44" src="images/image05.jpg"></a>
          </div>
        </div>        
      </div>
    </div>
    </section>
    <!-- default end -->
  </body>
</html>

If friends can tell me where I'm wrong, I'll be grateful.

    
asked by anonymous 12.07.2018 / 00:32

1 answer

0

I was able to solve by changing the script of the Requisition and inserting the, and became thus the code working:

Page index.php: 

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8"/>
    <title></title>
    <script src="js/jquery.js"></script>
    <script src="js/rotinas.js"></script>
</head>
<body>
    <div class="visual">
        <a id="carro" style="cursor:pointer;">
            <img style="width:20%; max-width:100px;" src="images/image01.jpg" />
        </a>
    </div>
</body>
</html>

Request Script - routine.js: 

////// Para visualizar o item selecionado //////
$(document).ready(function(){
    $('#carro').click(function(){
       $.ajax({
           url:'carro.php',
           success:function(data){
           $('.visual').html(data);
           }
       });
    });
});

Carpage.php: 

<script src="js/jquery.js"></script>
<script src="js/xzoom.min.js"></script>
<script src="js/setup.js"></script>
<link rel="stylesheet" type="text/css" href="css/xzoom.css" media="all" /> 

    <div class="xzoom-container">

      <img class="xzoom" id="xzoom-default" width="250" src="images/image01.jpg" xoriginal="images/image01.jpg" />

      <div class="xzoom-thumbs">

        <a href="images/image01.jpg"><img class="xzoom-gallery" width="44" src="images/image01.jpg"  xpreview="images/image01.jpg"></a>

        <a href="images/image02.jpg"><img class="xzoom-gallery" width="44" src="images/image02.jpg"></a>
        <a href="images/image03.jpg"><img class="xzoom-gallery" width="44" src="images/image03.jpg"></a>
        <a href="images/image04.jpg"><img class="xzoom-gallery" width="44" src="images/image04.jpg"></a>
        <a href="images/image05.jpg"><img class="xzoom-gallery" width="44" src="images/image05.jpg"></a>

      </div>
    </div>

I hope you can come help someone in the future.

    
12.07.2018 / 04:26
Hangman Game - Hit Check Catching the TMDB genres using php [Json]