Error when passing the result of a json array to html;

Asked

Viewed 28 times

0

I am with the following situation, I have a page that receives the name of a city, between São Paulo or Osasco, both the request of going via Ajax, and the data in json is coming back from php to Js, but I have another page called cards.php that should show the weather forecast data in 7 cards. But when I click the Ubmit button, it doesn’t change the screen, and cards.php doesn’t change the values. I put the cards in the index to see, it receives one of the values, but it disappears very fast, at the time it receives passes 2 seconds already gone and is empty. In the console, there is time that an error appears, but also appears too fast and you can not see the error.

Project at Github https://github.com/Marcos-Vinicius1801/Challenge

index.

main.js

$(document).ready(function(){
  $("#enviar").submit(function(e){
   e.preventDefault();
  });

$("#enviar").click(function(){
    var city = $('#city').val();

    $.post("http://localhost:5000/cidade.action.php",
        {city: city}, function(data){
              for(var i = 1; i < data.length; i++){
                // alert(data[i].probability);
                if(data[i].probability)
                {
                    $('#data'+i).html(data[i].probability);
                    break;
                }
            }
    },'json').fail(function(){
        alert("Cidade não encontrada!");
    });
  });
})

php.

  <section class="cards container animar_interno">
     <h2 class="subtitulo"></h2>
     <ul class="cards_lista">
        <li class="grid-1-3">
           <div class="cards_icone">
           </div>
           <h3 id="data1"></h3>
           <p id="texto1"></p>
           <p id="maxima1"><img src="img/upload.png" alt="Máxima"></p>
           <p id="minima1"><img src="img/low.png" alt="Minima"></p>
           <p id="precipitacao-chuva1"><img src="img/raindrop-close-up.png" alt="Preciptação de chuva"></p>
           <p id="possibilidade-chuva1"><img src="img/protection-symbol-of-opened-umbrella-silhouette-under-raindrops.png" alt="Chance de chover"></p>
        </li>

</ul>
php javascript ajax

1 answer

0

I discovered the mistake, I was using two events with the same id, then one nullified the other, after having placed the ajax request under the e. preventDefault(); worked perfectly.

Browser other questions tagged php javascript ajax

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