Mehrfach AJAX verwenden ohne Refresh von Amit, 29.09.2016 17:09

Mehrfach AJAX verwenden ohne Refresh

Amit 29.09.2016 16:34

Hallo,

ich bin ein Programmieranfänger, habe eine Tabelle mit Teilnehmer und möchte mit ajax ohne zu refreshen Teilnehmer hinzufügen und löschen können. Ich kann nun ohne Probleme einen Teilnehmer hinzufügen, die Seite refreshen und dann den Teilnehmer löschen. Wenn ich jedoch einen Teilnehmer hinzufüge, die seite nicht aktualisiere und den neu erstellten Teilnehmer löschen möchte, dann löscht sich die ganze Tabelle. Ich weiß leider überhaupt nicht warum das passiert.

Das ist meine Tabelle in HTML

 <tr id='appointment-<?= $appointment_ID ?>'>
            <td id='timestamp '><?= $timestamp ?></td>
            <td ><?= $appointment ?></td>
            <td id="username" ><?= $username?></td>
           <td >    
                    <button id='<?= $appointment_ID ?>' type='button' data-toggle='modal' data-appointment='<?= $appointment_ID ?>' data-username='<?= $username ?>' data-tID='<?= $tID ?>' data-timestamp='<?= $timestamp ?>' data-user_='<?= $user_ ?>' data-target='#delete-modal' class='btn btn-labeled btn-danger btn-sm btn-delete' title='Cancel appointment <?= $appointment_ID ?>'><span class='btn-label'><i class='glyphicon glyphicon-trash'></i></span>Cancel</button>      
           </td>
        </tr>

Damit adde ich einen neuen Teilnehmer:

      $("#add-appointment-save-btn").on('click', function(){ 
       
        $.ajax({
            type: "POST",
            dataType: "json",   
            url: "ajax/addAppointment.php",
            data: $( "#frm_addAppointment" ).serialize(),

        }).done(function(data) {
                var aID=data.appointment_ID;
                var date= data.date;
                var time= data.timestamp;
                var username= data.username;
                var tID=data.tID;
                var user_=data.user_;
                $('#add-appointment-by-admin-modal').modal('hide');
                console.log(data);
                console.log(data.date);
                console.log(data['user_']);
                oTable.api().row.add( [
                       time
                       ,date
                       ,username
                       ," <button id='"+aID+"' type='button' data-toggle='modal' data-appointment='"+aID+"' data-username='"+username+"' data-tID='"+tID+"' data-timestamp='"+time+"' data-user_='"+user_+"' data-target='#delete-modal' class='btn btn-labeled btn-danger btn-sm btn-delete' title='Cancel appointment "+aID+"'><span class='btn-label'><i class='glyphicon glyphicon-trash'></i></span>Cancel</button>"


            //          " <button id='"/* $appointment_ID */+"' type='button' data-toggle='modal' data-appointment='"/* $appointment_ID */+"' data-username='"/* $username */"' data-tID='"+<?= $tID ?>+"' data-timestamp='"/* $timestamp */+"' data-user_='"/*= $user_ */+"' data-target='#delete-modal' class='btn btn-labeled btn-danger btn-sm btn-delete' title='Cancel appointment "/* $appointment_ID */+"'><span class='btn-label'><i class='glyphicon glyphicon-trash'></i></span>Cancel</button>"

                ]).draw();
                    
               var n = noty({text: '<strong>Add Appointment</strong>: Successful'});
               $("#frm_timestamp_add option[value='"+time+"']").remove();
               $("#frm_user_add option[value='"+user_+"']").remove();

        
            }).fail(function( jqXHR, textStatus ) {
                 alert( "Request failed: " + textStatus );
            });
    });

Damit lösche ich einen Teilnehmer:

$("#delete-modal-save-btn").on('click', function(){ 

        var appointment_ID = $("#appointment_delete").val();

        $.ajax({
            type: "POST",
            dataType: "json",   
            url: "ajax/cancelAppointment.php",
            data: $( "#delete_form_id" ).serialize(),

            success: function(data){

               $('#delete-modal').modal('hide');
               oTable.fnDeleteRow($('tr#appointment-' + appointment_ID ) [0]);
               var n = noty({text: '<strong>Delete</strong>: Successful'});
            }
        });
    });
    
    $('#add-appointment-by-admin-modal').on('show.bs.modal', function(e) {

        //get data-id attribute of the clicked element
        var tID = $(e.relatedTarget).data('tid');
        $("#tID_add").val(tID); 
      
        console.log($(e.relatedTarget).data());
        
     
    });

Ich wäre über jede Hilfe Dankbar

Beitrag melden

– Informationen zu den Bewertungsregeln

Mehrfach AJAX verwenden ohne Refresh

Matthias Apsel Homepage des Autors 29.09.2016 16:42

– Informationen zu den Bewertungsregeln

Hallo Amit,

Damit lösche ich einen Teilnehmer:

$("#delete-modal-save-btn").on('click', function(){ 

        var appointment_ID = $("#appointment_delete").val();

Ich kann in deinem Code kein Element mit der ID appointment_delete finden.

Bis demnächst
Matthias

--
Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.

Beitrag melden

– Informationen zu den Bewertungsregeln

Mehrfach AJAX verwenden ohne Refresh

Amit 29.09.2016 17:09 (Versionen)

– Informationen zu den Bewertungsregeln

Hallo Matthias, ich dachte der Rest wäre nicht relevant.

Delete-Container:

<div class="modal fade"  id="delete-modal">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id='delete-modal-title'></h4>
      </div>
      <div class="modal-body">
          <p><strong>Are you sure?</strong></p>
            <form id='delete_form_id'>

                     <input type='hidden' name='tID' id='tID_delete' value=''>
                     <input type='hidden' name='timestamp' id='timestamp-delete' value=''>
                     <input type='hidden' name='user_' id='user_delete' value='' />
                     <input type='hidden' name='appointment' id='appointment_delete' value='' />

                </form> 
          <input type='hidden' id='delete-id' value='' />
          <input type='hidden' id='delete-type' value='' />
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Abort</button>
        <button type="button" class="btn btn-primary" id='delete-modal-save-btn'>Accept</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

cancelAppointment.php:

<?php
include_once('inc_user.php');
include_once('database.php');
include_once('../includes/php/functions.php');
//include_once('../includes/php/js_css_include.php');

$time = filter_input(INPUT_POST, 'timestamp');
$user = filter_input(INPUT_POST, 'user_');
$aID = filter_input(INPUT_POST, 'appointment');
echo $data='{ "appointment_ID" : '.$aID.'}';
if ($aID != "" && $aID != 0) {
    cancelAppointmentByAdmin($aID);   
}

Add-Container:

<?php
        $arrUsers = getAdditionalUsers($clientID);
        $availible= setArrayOfAvailibleAppointments($tID);

?>
<div class="modal fade"  id="add-appointment-by-admin-modal">
    
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">New Appointment</h4>
            </div>
            <form class="form-horizontal" role="form" id='frm_addAppointment' name='frm_addAppointment'>
                
                <div class="modal-body">
                    <div class="form-group">
                        <label for="frm_adminID" class="col-sm-2 control-label">Appointment</label>
                        <div class="col-sm-8 required">
                            <select name='frm_timestamp_add' id='frm_timestamp_add' class='form-control'>
                                <option value='' DISABLED SELECTED style='background-color:#E0E0E0'>Select an appointment time</option>
                                <?php foreach( $availible as $time  ) { ?>
                                    <option value="<?= $time;?>"><?= date("H:i", $time);?></option>
                                <?php } ?>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="frm_adminID" class="col-sm-2 control-label">User</label>
                        <div class="col-sm-8 required">
                            <select name='frm_user_add' id='frm_user_add' class='form-control'>
                                <option value='' DISABLED SELECTED style='background-color:#E0E0E0'>Select a User</option>
                                <?php foreach( $arrUsers as $user_ ) { ?>
                                    <option value="<?= $user_;?>"><?= $user_;?></option>
                                    
                                <?php } ?>
                                    
                            </select>
                        </div>
                    </div>

                    <input type='hidden' name='tID' id='tID_add' value='<?=$tID;?>'>
                   
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                  <button type="button" class="btn btn-primary" id="add-appointment-save-btn" >Save</button>
                </div>
             
            </form>
            
         </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

addAppointment.php:

<?php
include_once('inc_user.php');
include_once('database.php');
include_once('../includes/php/functions.php');

$time = filter_input(INPUT_POST, 'frm_timestamp_add');
$user_ = filter_input(INPUT_POST, 'frm_user_add');
$tID = filter_input(INPUT_POST, 'tID');
$username=  trim(strchr($user_,"(",true));
$userID=  strstr($user_, '(');
$userID=str_replace('(', '', $userID);
$userID=str_replace(')', '', $userID);
$date=date("H:i", $time);
insertAppointmentByAdmin($userID, $time, $tID, 1);
$aID = getAppointmentID($userID, $time, $tID, 1);
$data= array('user_'=> $userID, 'username'=> $username, 'date'=> $date, 'timestamp'=> $time,'tID'=> $tID ,'appointment_ID'=> $aID);
echo json_encode($data);

   $('#delete-modal').on('show.bs.modal', function(e) {

        //get data-id attribute of the clicked element
        var tID = $(e.relatedTarget).data('tid');
        $("#tID_delete").val(tID); 
        var timestamp = $(e.relatedTarget).data('timestamp');
        $("#timestamp-delete").val(timestamp); 
        var user_ = $(e.relatedTarget).data('user_'); 
        $("#user_delete").val(user_);
        var appointment = $(e.relatedTarget).data('appointment'); 
        $("#appointment_delete").val(appointment);
        console.log($(e.relatedTarget).data());
        
  $('#add-appointment-by-admin-modal').on('show.bs.modal', function(e) {

        //get data-id attribute of the clicked element
        var tID = $(e.relatedTarget).data('tid');
        $("#tID_add").val(tID); 
      
        console.log($(e.relatedTarget).data());
        
     
    });
    });

Beitrag melden

– Informationen zu den Bewertungsregeln

Mehrfach AJAX verwenden ohne Refresh

Rolf b 30.09.2016 15:56

+1 Informationen zu den Bewertungsregeln

Uff. Das ist mir jetzt zu viel zum durchforsten :)

Ich würde aber mal annehmen, dass dein Delete-Form nur nach einem Refresh korrekt befüllt ist und ansonsten nicht. Oder nicht richtig. Damit liefert Dein $( "#delete_form_id" ).serialize() etwas, was serverseitig auf alle Rows der Tabelle passt und sie damit leert.

Der Debugger ist dein Freund, trenne mal Serialisierung und Ajax-Aufruf und speichere das Ergebnis der Serialisierung in einer Variablen. Benutze die Entwicklertools deines Browsers, um Dir anzusehen, was da drin steht. Bzw. schau Dir an, was in den entsprechenden Hidden-Feldern steht.

Rolf

Beitrag melden

+1 Informationen zu den Bewertungsregeln

Mehrfach AJAX verwenden ohne Refresh

Amit 04.10.2016 11:57

– Informationen zu den Bewertungsregeln

Ich habe soweit das Problem gefunden. Die Zeile, die ich in Ajax erzeuge hat keine id. Eine Zeile mit ID wird erst nach dem refreshen erzeugt. Ich probier gerade eine id zuzuweisen, bekomme es jedoch nicht ganz hin

var tr= oTable.api().row.add( [
                       time
                       ,date
                       ,username
                       ," <button id='"+aID+"' type='button' data-toggle='modal' data-appointment='"+aID+"' data-username='"+username+"' data-tID='"+tID+"' data-timestamp='"+time+"' data-user_='"+user_+"' data-target='#delete-modal' class='btn btn-labeled btn-danger btn-sm btn-delete' title='Cancel appointment "+aID+"'><span class='btn-label'><i class='glyphicon glyphicon-trash'></i></span>Cancel</button>"

                ]).draw();
                tr.id="hallo";

var tr= oTable.api().row.add( [
                       time
                       ,date
                       ,username
                       ," <button id='"+aID+"' type='button' data-toggle='modal' data-appointment='"+aID+"' data-username='"+username+"' data-tID='"+tID+"' data-timestamp='"+time+"' data-user_='"+user_+"' data-target='#delete-modal' class='btn btn-labeled btn-danger btn-sm btn-delete' title='Cancel appointment "+aID+"'><span class='btn-label'><i class='glyphicon glyphicon-trash'></i></span>Cancel</button>"

                ]).draw();
                tr.setAttribute("id", "Hallo", 0);

Funktioniert allerdings beides nicht.

Beitrag melden

– Informationen zu den Bewertungsregeln

Mehrfach AJAX verwenden ohne Refresh
pl Homepage des Autors 04.10.2016 12:41

formulare

jquery

php
+1 Informationen zu den Bewertungsregeln
Hallo,

ich bin ein Programmieranfänger, habe eine Tabelle mit Teilnehmer und möchte mit ajax ohne zu refreshen Teilnehmer hinzufügen und löschen können. Ich kann nun ohne Probleme einen Teilnehmer hinzufügen, die Seite refreshen und dann den Teilnehmer löschen. Wenn ich jedoch einen Teilnehmer hinzufüge, die seite nicht aktualisiere und den neu erstellten Teilnehmer löschen möchte, dann löscht sich die ganze Tabelle. Ich weiß leider überhaupt nicht warum das passiert.

Dann solltest Du Dir mal Dein Konzept gründlich durch den Kopf gehen lassen oder auch mal auf einem Stück Papier skizzieren. Z.B. kann ja das Bearbeiten der Tabelle nach dem CRUD Prinzip komplett im Browser erfolgen ohne dass dabei mit dem Server kommuniziert wird.

Die Kommunikation mit dem Server (via Ajax) brauchst Du nur zum Datenabgleich. Beispielsweise kannst Du die Daten im Browser als Replik auffassen und beim Datenabgleich dafür sorgen, dass nur Differenzen abgeglichen werden -- Stichwort Datenkonsistenz.

MfG
Beitrag melden

+1
Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

Amit: Mehrfach AJAX verwenden ohne Refresh

Mehrfach AJAX verwenden ohne Refresh

Mehrfach AJAX verwenden ohne Refresh

Mehrfach AJAX verwenden ohne Refresh

Mehrfach AJAX verwenden ohne Refresh

Mehrfach AJAX verwenden ohne Refresh

Mehrfach AJAX verwenden ohne Refresh

Mehrfach AJAX verwenden ohne Refresh