Change data without refresh with jquery

Asked

Viewed 1,083 times

3

I confess that I don’t get a lot of Jquery and that’s why I’m in need of some help. I would like to update a product information, but without having to refresh the page. Example.:

When the user clicks the link Main Photo

inserir a descrição da imagem aqui

Automatically change as image below:

inserir a descrição da imagem aqui

The problem is only in Jquery and not in the BD change I’m making with PHP/Mysql.

The link code follows below:

$mostrar .= "<a href='?principal=s&foto=".$jmFotos->IDFotos."&key=".$keyProdutos."' class='btn btn-primary btn-xs'>Foto Principal</a>";
jquery

  • look about $.ajax(); in jquery, you will need a php page that will receive the data to register in the BD, and a function in ajax/jquery that sends the data to the php page

  • Hello Matheus. I understand how it works, but I don’t get a lot of jquery. Would you have an example? Just the jquery part.

  • Which class makes the button green and ticked?

  • Sawn this question and the answers there? You have examples of how to do that.

  • Hello Sergio. I will take a look at the page informed.

  • Hello Dvd, step to bootstrap btn-Success class.

Show 1 more comment

2 answers

2

I believe you are trying to send data to the database without the page refreshing, because then if this is what I am thinking according to what I read in the question. There goes a script so you don’t have refresh

on your page just in your form change it to form action="" method="" class="ajax"

<script type="text/javascript">
$(document).ready(function(){
    $('.ajax').submit(function(){            

            var dados = jQuery(this).serialize();


            $.ajax({
                    type: "POST",
                    url: "salvar.php", /* aqui voce insere o nome do arquivo */
                    data: dados,
                    success: function( data )
                    {
                            alert( data );
                    }
            });

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

  • Hello Victor. Actually I would like to pass the data via link.

  • just change the url, already tried to do this ?

  • Okay. I’ll try here and get back to you.

  • Ok otherwise I will try to edit the code before leaving the service to help

  • when I click on the link, it gives refresh. It is in this structure: $show .= " <a href='edit-products.php? main=s&foto=". $jmFotos->Idfotos."&key=". $keyProducts." ' class='btn btn-Primary btn-Xs'>Main Photo</a>";

  • in case this would have to be in another file, for example, I did a quick test. And in my index I put the file I wanted to do Insert in the database, a page called save.php, it made the "connection" to the other file and entered the data into the database normally, if you have the script and the link on the same page might not even work, and the script I created has Submit, IE, it must have a button with type Submit, otherwise it won’t work, if this is a link mask button, add type Submit to it to check

Show 1 more comment

1

$('.envia_imagem').click(function(){
  $.ajax({
    url: 'url que recebe.php',
    method: 'POST',
    data: $('.input_com_a_imagem'),
    beforeSend: function(){
      alert('enviando'):
    },
    success: function(e){
      alert('funcionou');
    }
  });
});

I believe it already works, just edit the id’s/ classes

I have not tested pq to without ide here, and jquery links

  • Hello Matheus. Actually I would like to pass the data via link.

  • change from 'POST' to 'GET' in the ajax method, and then on the php page just use $_GET['field name']

Browser other questions tagged jquery

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