I need two clicks to activate Jquey function

Question

I need two clicks to activate Jquey function

Navigation

#1 by (0 votes)

0

Hello, I'm learning to work with AJAX / JSON requests, and I came across a problem (which I think has more to do with Jquery, but I have added the PHP and AJAX tags because you never know). Let's go;

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

The first INPUT of the FORM contains the CHECKED property.

My javascipt.js file 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 give 2 clicks. I would like the information to already be displayed as soon as it was loaded (this was the intention to assign CHECKED to the first INPUT).

Could anyone help? Thanks in advance.

Function that loads the data through the 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 content based on selected% with%:

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

HTML file structure:

<!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><scriptsrc="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 html jquery ajax

asked by anonymous 02.02.2017 / 22:17

1 answer

Web api 2 within MVC project. How to prevent redirection to the login page when the token is not valid Concept of implementing a RecyclerView

score 0 · Answer 1

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

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

And you only have to assign changes to inputs, you do not need pro forma.

The function looks 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');

});