Ajax reload even without changes

Question

To edit an event on Fullcalendar I click on an event, a modal apparead and is connected to a PHP file and has an AJAX call in JS. The problem is: when I open the modal and close it, even if I have made no changes it reload the page. Can someone please explain what's the problems in these code, I cant seems to find a solution and it's pretty annoying that reload without making changes.

JS call:

    $('#editNewEvent').modal('show').one('hidden.bs.modal', function (e) {
                if(event.nomeUtente == $("#nomeUtente").data('value')){
                        event.title = $('#editEname').val();
                        event.start = $('#editStarts').val();
                        event.end = $('#editEnds').val();
                        
                        $.ajax({
                            url: 'eventi/updateEvent.php',
                            type: 'POST',
                            data:  {start: event.start, _id: event.idAssenza, end: event.end, title: event.title},
                            success: function(data) {
                                    window.location.reload(true);
                            } 
                        });                             
                        $('#calendar').fullCalendar('updateEvent', event._id);
                    }
});

PHP editEvents:

require_once "../config.php";
  session_start(); 
   
    
    $id =           $_POST['_id'];
    $ename =        $_POST['title'];
    $starts =       $_POST['start'];
    $ends =         $_POST['end'];
    $nomeUtente =   $_SESSION['nomeUtente'];        

     // update the records
    $sql = "UPDATE assenze SET ename = '$ename', starts = '$starts', ends = '$ends' WHERE idAssenza = $id AND nomeUtente = '$nomeUtente'"; //

    if (mysqli_query($conn, $sql)) {
          echo "Record updated successfully";
        } else {
          echo "Error updating record: " . mysqli_error($conn);
        }

       mysqli_close($conn);

MODAL:

<div class="modal fade" id="editNewEvent" aria-hidden="true" aria-labelledby="editNewEvent" role="dialog" tabindex="-1" data-show="false" data-toggle="modal">
                    <div class="modal-dialog modal-simple">
                        <form class="modal-content form-horizontal" role="form">
                            <div class="modal-header">
                                <button type="button" class="close" aria-hidden="true" data-dismiss="modal">×</button>
                                <h4 class="modal-title">Modifica Assenza di <input type="text" name="editNomeUtente" id="editNomeUtente" value="editNomeUtente" disabled></h4>
                            </div>
                            <div class="modal-body">
                                <div class="form-group row">
                                    <label class="form-control-label col-md-2" for="editEname">Tipo:</label>
                                    <input list="assenza" name="editEname" id="editEname" style="margin-left: 15px;" />
                                    <datalist id="assenza">
                                        <option value="Normali">
                                        <option value="Straordinarie">                        
                                        <option value="Ferie">
                                        <option value="Malattia">
                                        <option value="Permesso">
                                        <option value="Smart Working">
                                        <option value="Trasferta">
                                        <option value="Assenza non retribuita">
                                        <option value="Altro">
                                    </datalist>  
                                    <input type="hidden" name="editNomeUtente" id="editNomeUtente" value="<?php echo $_SESSION["nomeUtente"]; ?>">
                                </div>                                  
                                <div class="form-group row">
                                    <label class="col-md-2 form-control-label" for="editStarts">Inizio:</label>
                                    <div class="col-md-10">
                                        <div class="input-group">
                                            <input type="datetime-local" class="form-control" id="editStarts" name="editStarts" data-container="#editNewEvent">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-md-2 form-control-label" for="editEnds">Fine:</label>
                                    <div class="col-md-10">
                                        <div class="input-group">
                                            <input type="datetime-local" class="form-control" id="editEnds" name="editEnds"data-container="#editNewEvent">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <div class="form-actions">
                                    <button class="btn btn-primary" data-dismiss="modal" type="button" id="salva">Salva modifiche</button>
                                    <button class="btn btn-sm btn-white btn-pure" id="annulla" href="">Annulla</button>                                 
                                </div>                  
                            </div>
                        </form>
                    </div>
                </div>

**Warning:** You are wide open to [SQL Injections](https://php.net/manual/en/security.database.sql-injection.php) and should use parameterized **prepared statements** instead of manually building your queries. They are provided by [PDO](https://php.net/manual/pdo.prepared-statements.php) or by [MySQLi](https://php.net/manual/mysqli.quickstart.prepared-statements.php). Never trust any kind of input! Even when your queries are executed only by trusted users, [you are still in risk of corrupting your data](http://bobby-tables.com/). [Escaping is not enough!](https://stackoverflow.com/q/32391315) — Dharman, Apr 13 '22 at 10:58

score 2 · Accepted Answer · edited Apr 13 '22 at 10:58

2

Because you trigger event it (hidden.bs.modal), event this will be call when you close modal -> call to -> eventi/updateEvent.php. I suggest you should be call event update when only you click to button Salva modifiche

edited Apr 13 '22 at 10:58

Dharman

30,962
25
85
135

answered Apr 13 '22 at 08:48

lost you

111
2

so instead of hidden.bs.modal i should put an click associated to the button? – aim0d Apr 13 '22 at 09:14
yes, should be put an click to the button – lost you Apr 13 '22 at 09:17
okay, thanks. Do you have any suggest of how can I do it? I didnt write the code that open the modal, so dont have any idea how can I rewrite it without destroy the code :( – aim0d Apr 13 '22 at 10:01
`$( "#salva" ).click(function() { alert( "Handler for .click() called." ); });` u can try above code, and put your code into the event – lost you Apr 13 '22 at 10:34
It did work, having problem with saving at first click, but it resolve the problem I was having thnks – aim0d Apr 13 '22 at 11:40

Ajax reload even without changes

1 Answers1