Update sql Sem Reload with a click on Link

Question

I would like that in this script below when clicking on the link it did the update in sql without Reload. it was made to perform through a Ubmit in a more would like it to be through a link even more not concegui do. how can I do this?

  <script type="text/javascript"  
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
  </script>
  <script type="text/javascript">
  jQuery(document).ready(function(){
    jQuery('#ajax_form').submit(function(){
        var dados = jQuery( this ).serialize();

        jQuery.ajax({
            type: "POST",
            url: "update.php",
            data: dados,
            success: function( data )
            {
                alert( data );
            }
        });

        return false;
    });
    });
    </script>

Link to do the update

   <a href="#" id="<?php echo $id?>">Mudar</a> // Pagando o id da linha

update php.

  <?php
  include"../../../../../clientes/assets/config.php";
  $sql = "UPDATE notificacoes_geral SET status_lido='1' AND id= $id ";
  $resultado = mysql_query($sql) or die( mysql_error());

?>

Answer 1

If I understand correctly you want to send data via ajax no more on submit of a form but when an anchor is clicked.

In this case you need to change the selectors in jQuery. Changing the this to point to the form and the selector to which the event receiver must be connected.

forehead like this:

jQuery('#<?php echo $id?>').on('click', function(){
    var dados = jQuery('#ajax_form').serialize();

    jQuery.ajax({
        type: "POST",
        url: "update.php",
        data: dados,
        success: function( data )
        {
            alert( data );
        }
    });

    return false;
});

Note: I used the same PHP selector that generated the anchor ID you want <a href="#" id="<?php echo $id?>">Mudar</a>. But I don’t know what your PHP looks like and if that’s not easy, use a selector with other DOM references to find this element a.

Answer 2

Good afternoon Fábio. Well, I took the liberty of making a few minor changes that I think are a little bit better.

In the code below, I left the tag <a> out of the form, but you can leave it inside without problems.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("body").delegate(".btnUpdate", "click", function(e){
        e.preventDefault() //Para anular o comportamento padrão do link
        var id = $(this).attr("id");
        var dados = $("#ajax_form").serializeArray();

        $.ajax({
            url: "update.php",
            type: "POST",
            data: dados,
            success: function (data, textStatus, jqXHR) {
                                alert(data)
                                console.log(data);
            },
            error: function (jqXHR, textStatus, errorThrown) {
                                alert(jqXHR)
                                console.log(jqXHR);
            }

        });

    })

});


</script>

<?php $id = 1; ?>

<form id="ajax_form">
    <input type="hidden" id="id" name="id" value="<?=$id?>" />
    <input type="text" id="nome" name="nome" />
    <input type="text" id="email" name="email" />
</form>

<a href="#" id="<?php echo $id?>" class="btnUpdate">Mudar</a>

Note that I created the . btnUpdate class, and by clicking on the link with that class, I recover the id value via the . attr() function. But also note that I added an Hidden field to the form to receive the id value, so I can serialize the id along with the other form fields.

You just need to define how you will handle the return of update.php processing. Simply replace Alert(data) and console.log() with your business rule.

NOTE: I put the $id in my hand only for example.

I hope I’ve helped!