1

I'm creating an admin panel where users can create modify and delete events. I have an issue with Ajax maybe. The database is not updated, even if the ajax response looks good (the modal is hidden)

Working on a 7.2 Php version (if it matters) 

<div class="modal">
            <div class="modal_content">
                <label for="event_name">Nom de l'évènement</label>
                <input type="text" id="event_name">
                <label for="event_date">Date</label>
                <input type="text" id="event_date">
                <label for="event_desc">Description</label>
                <input type="text" id="event_desc">
                <label for="event_thumb">Affiche</label>
                <input type="text" id="event_thumb">
                <input type="hidden" id="event_id">
                <a class="save">Sauvegarder</a>
              </div>
          </div>




<script>
  $(document).ready(function(){

      $('.modal').hide();

    //  append values in input fields
      $(document).on('click','a[data-role=update]',function(){
            var event_id  = $(this).attr('id');
            var event_name  = $('#'+event_id).children('td[data-target=event_name]').text();
            var event_date  = $('#'+event_id).children('td[data-target=event_date]').text();
            var event_desc  = $('#'+event_id).children('td[data-target=event_desc]').text();

            $('#event_name').val(event_name);
            $('#event_date').val(event_date);
            $('#event_desc').val(event_desc);
            $('#event_id').val(event_id);
            $('.modal').show();
      });

      // now create event to get data from fields and update in database 

       $('.save').click(function(){
          var event_id  = $('#event_id').val(); 
         var event_name =  $('#event_name').val();
          var event_date =  $('#event_date').val();
          var event_desc =   $('#event_desc').val();

          $.ajax({
              url      : 'modifyEvent.php',
              method   : 'post', 
              data     : {event_name :event_name , event_date:event_date , event_desc:event_desc , event_id:event_id},
              success  : function(response){
                            // now update user record in table 
                             $('#'+event_id).children('td[data-target=event_name]').text(event_name);
                             $('#'+event_id).children('td[data-target=event_date]').text(event_date);
                             $('#'+event_id).children('td[data-target=event_desc]').text(event_desc);
                             $('.modal').hide(); 

                         }
          });
       });
  });
</script>

And there is my Php script : 

if(isset($_POST['event_id'])){

    $event_name = $_POST['event_name'];
    $event_date = $_POST['event_date'];
    $event_desc = $_POST['event_desc'];
    $event_id = $_POST['event_id'];

    //  query to update data 

    $result  = mysqli_query($connection , "UPDATE lepressclub_events SET event_name='$event_name' , event_date='$event_date' , event_desc = '$event_desc' WHERE event_id='$event_id'");
    if($result){
        echo 'data updated';
    }

}
?>

The database connection is good, the query is good too. But the database is not updated ..

Thanks for your help :)

Neels
  • 2,547
  • 6
  • 33
  • 40
Arthur Brunot
  • 11
  • 2
  • Inside `success()`, what is `console.log(response)`? Do you get `data updated` in the console then? – Qirel Jul 05 '19 at 20:13
  • Actually, your ajax won't even trigger. Your anchor is missing its `data` attribute, it should be something like `Sauvegarder` – Qirel Jul 05 '19 at 20:16
  • I believe there is another section of html that we are not seeing here that would have the element used to set all the values in the modal. So there are a couple places this could be going wrong. The values could not actually be getting set in the modal. Or the values being set and used in the query do not correspond with a record in the db. Either way you would get a successful response form teh ajax call which would close the modal. You need to console.log your response as @qirel says and echo out your query to make sure it is what you think it is – derek.wolfe Jul 05 '19 at 20:23
  • Your script is open for SQL Injection! Be sure to use prepared statements to [prevent SQL Injection](https://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php)! – Kryptur Jul 05 '19 at 20:50
  • Thanks everyone for your comments. As I previously said, the query is good, Im sorry if I didn't give the entire code I thought it would not be useful. I ll use prepared statements on the final version, just testing there. Anyway thank you, I guess the answer below is the solution. Working on it tomorrow – Arthur Brunot Jul 05 '19 at 21:02
  • Use your browser's developer tools/network tab to look at the request and responses of your ajax stuff. – James Jul 05 '19 at 23:03
  • Well, i tried to look at the network tab, my php script ( modifyEvent.php ) returns my values correctly. I tried to console.log the response, it only returns event_name new input ... Some help please :) – Arthur Brunot Jul 07 '19 at 17:52

1 Answers1

1

method: "post" is not a valid $.ajax parameter property. You should use type: "post".

The default type is "get", so $_POST should be empty.

The documentation can be found here.

$.ajax({
    url      : 'modifyEvent.php',
    type     : 'post',  // <- Here is the change
    data     : {event_name :event_name , event_date:event_date , event_desc:event_desc , event_id:event_id},
    success  : function(response){
        // now update user record in table 
        $('#'+event_id).children('td[data-target=event_name]').text(event_name);
        $('#'+event_id).children('td[data-target=event_date]').text(event_date);
        $('#'+event_id).children('td[data-target=event_desc]').text(event_desc);
        $('.modal').hide(); 
    }
});

Even though not directly related to your question, your PHP script allows for SQL Injection. Use prepared statements to prevent this. This is a huge security risk.

Kryptur
  • 745
  • 6
  • 17