Conflict in Requisition

Asked

Viewed 33 times

0

I’m having trouble making the page car php. work opening in the DIV visual through the link when accessing the provisional address "https://www.pbfjacarepagua.com.br/teste/index.php"

But when I enter the address "https://www.pbfjacarepagua.com.br/teste/carro.php" the effects work.

I leave below the codes used.

Pagina 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 "routines.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();
}

Page car.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 going wrong, I’d be grateful.

php javascript html ajax

  • OK dvd, includes the . js in index.php, but it didn’t work either. Take a look, and see what’s going on.

  • has a variable xhrthat does not exist and is giving error in this line: xhr.abort();

  • But I don’t think that’s the problem. It’s just that I can’t say for sure now whether charging . js via Ajax will work. You can take that doubt by putting a alert("teste"); in one of the . js to see if the alert appears. Return as it was before to test.

  • I think I decided to change the request script. I just posted the change in the provisional address so you can take a look and tell me what you think, if you can stay that way. I will answer my question with the amendments that...

  • I opened the index and only one image of the car appeared. When clicking on it nothing happens.

  • Try now as I was transferring the files with the changes, OK?

  • Now it worked..

Show 2 more comments

1 answer

0

I managed to solve by changing the Request script and inserting the , and so the code was working:

Pagina 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);
           }
       });
    });
});

Page car.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.

Browser other questions tagged php javascript html ajax

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