I need two clicks to activate Jquey function

Asked

Viewed 77 times

0

Hello, I am learning how to work with AJAX/JSON requests, and I came across a problem (which I think is more to do with Jquery, but I added PHP and AJAX tags, because you never know). come on;

  1. when accessing the page in the browser, an AJAX request will be made to a PHP file that accesses the BD and generates a JSON. This contains the items that will compose the RADIOS INPUTS from my form.

  2. The first FORM INPUT contains the CHECKED property.

  3. My javascipt.js Archive has a second function contained in "$(Document). ready". This function makes the request according to the selected INPUT. The problem is that for this event to be triggered I need to make 2 clicks. I would like the information to be shown as soon as it was loaded (this was the intention to assign CHECKED to the first INPUT).

Can someone help us? From now on, thank you.

Function that loads data via AJAX request:

//função pra carregar inputs
function carregarItens() {
  var radios = "";

  $.ajax({
    url: "primeira.php",
    cache: false,
    dataType: "json",
    success: function(data) {
      if (data[0].erro) {
        $("h1").html(data[0].erro);
      } else {
        for (var i = 0; i < data.length; i++) {
          radios += '<input id="teste" type="radio" name="noticia"';
          radios += 'value="' + data[i].id;
          radios += '"/>' + data[i].produto + '</br>';
        }
        $('form').html(radios);
        $('input:first').prop('checked', true);
      }
    }
  });
};

Code responsible for changing the content according to the input selected:

//consulta dinamica
$(document).ready(function() {
  $('form').on('change', function() {
    $('input[type="radio"]').on('change', function() {**

      var noticia = $(this).val();
      var itens = "";

      $.ajax({
        url: "processa.php",
        method: "POST",
        cache: false,
        dataType: "json",
        data: {
          noticia: noticia
        },
        success: function(data) {
          if (data[0].erro) {
            $("#resultado").html(data[0].erro);
          } else {
            for (var i = 0; i < data.length; i++) {
              itens += "<div>";
              itens += "<p>" + data[i].id + "</p>";
              itens += "<p>" + data[i].produto + "</p>";
              itens += "<p>" + data[i].valor + "</p>";
              itens += "</div>";
            }
            $("#resultado").html(itens);
          }
        }
      });
    });
  });
});

Structure of the HTML file:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Teste Sem refresh</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="javascript.js"></script>
  <link href="stylesheet.css" rel="stylesheet">
</head>

<body onload="carregarItens()">
  <h1>Busca sem refresh</h1>
  <h2></h2>
  <form></form>
  </br>
  <div id="resultado"></div>
</body>

</html>
php jquery html ajax

  • From what I understand you want to upload the information as soon as you select a right radio button?

  • It wouldn’t be because you need to capture the event change so much of form as in the input? I believe only of input be sufficient.

  • uses the dblclick(function(){});

  • I think the PHP tag should be removed.

1 answer

0

Try to add at the end of $(document).ready:

$('form input[type="radio"]:first').trigger('change');

And you only need to assign change to inputs, no need for pro form.

The function is like this:

$(document).ready(function() {

    $('input[type="radio"]').on('change', function() {

      var noticia = $(this).val();
        var itens = "";

        $.ajax({
            url: "processa.php",
            method: "POST",
            cache: false,
            dataType: "json",
            data: {
                noticia: noticia
            },
            success: function(data) {
                if (data[0].erro) {
                    $("#resultado").html(data[0].erro);
                } else {
                    for (var i = 0; i < data.length; i++) {
                        itens += "<div>";
                        itens += "<p>" + data[i].id + "</p>";
                        itens += "<p>" + data[i].produto + "</p>";
                        itens += "<p>" + data[i].valor + "</p>";
                        itens += "</div>";
                    }
                    $("#resultado").html(itens);
                }
            }
        });
    });


/////
    $('form input[type="radio"]:first').trigger('change');

});

Browser other questions tagged php jquery html ajax

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