Pass Daten durch in ajax Modal

Question

i haben einen Knopf auf der einen Seite geladen Eingabefelder zu füllen, die ein ajax modal unter Verwendung des folgenden Codes öffnen <button onclick="showAjaxModalcal('<?php echo base_url();?>index.php?modal/popup/add_appointment','09-15-2019');"

Das Skript für das ajax modal ist die unten

<script type="text/javascript"> 
    function showAjaxModalcal(url,data) 
    { 
    // SHOWING AJAX PRELOADER IMAGE 
    jQuery('#modal_ajax .modal-body').html('<div style="text-align:center; margin-top:200px;"><img src="assets/images/preloader.gif" style="height:25px;" /></div>'); 

    // LOADING THE AJAX MODAL 
    jQuery('#modal_ajax').modal('show', {backdrop: 'true'}); 

    // SHOW AJAX RESPONSE ON REQUEST SUCCESS 
    $.ajax({ 
     url: url, 
     data: {date_timestamp:data}, 
     success: function(response) 

     { 
      jQuery('#modal_ajax .modal-body').html(response); 
      //window.scrollTo(0, 0); 
      $('html, body').animate({ scrollTop: 0 }, 'fast'); 
     } 
    }); 
} 

</script>' 

die Modal enthält einen Eingang mit den

<input type="text" name="date_timestamp" id="date_timestamp" class="form-control datepicker" data-format="d-m-yyyy" placeholder="">

Namen eingereicht, was ich versuche zu erreichen ist dieses Eingabefeld automatisch zu füllen, wenn die ajax-modal mit dem Wert öffnet 09-15-2019. Das Datum ist nicht immer gleich.

Das Problem ist, dass mit dem folgenden Code i "NetworkError: 400 Bad Request - http://**************/index.php?modal/popup/add_appointment&date_timestamp=09-15-2019"

Answer 1

bekommen Wenn ich richtig verstehe, wollen Sie date passieren Eingang zur modalen wenn modal zeigen, wo, wie die date und modalen HTML beide auf derselben Seite.

einfachste Lösung

mit Bootstrap-modal Ereignis-Listener und Attributdaten ein und lassen Sie Bootstrap die Beinarbeit für Sie tun

Modal Ruftaste mit Attributdaten data-date (Datum kann dynamisch sein und ein beliebiger Wert sein kann)

<button data-toggle="modal" data-modal="#modal_ajax" data-date="09-15-2019">Whatever</button> 

Ereignis-Listener Skript

$(document).ready(function(){ 
    $('#modal_ajax').on('show.bs.modal', function (e) { 
     var date = $(e.relatedTarget).data('date'); 
     $("#date_timestamp").val(date); 
    }); 
}); 

Hinweis: Lassen Sie sich

Ihr Ansatz

von modalen Auslöseknopf entfernen

<button onclick="showAjaxModalcal('09-15-2019');">whatever</button> 

Und Script los Ajax Methode erhalten

url von onclick="showAjaxModalcal() Funktion befreien

<script type="text/javascript"> 
function showAjaxModalcal(data) { 
    alert(data); 
    // SHOWING AJAX PRELOADER IMAGE 
    $('#modal_ajax .modal-body').html('<div style="text-align:center; margin-top:200px;"><img src="assets/images/preloader.gif" style="height:25px;" /></div>'); 
    $('#modal_ajax').modal({ 
    backdrop: 'true' 
    }).on('shown.bs.modal', function() { 
    alert(data); 
    $("#date_timestamp").val(data); 
    }); 
} 
</script> 

Sidenote: In Ajax Verfahren gibt es keine Eingabe mit Datum

success: function(response){ 
    jQuery('#modal_ajax .modal-body').html(response); 
    //window.scrollTo(0, 0); 
    $('html, body').animate({ scrollTop: 0 }, 'fast'); 
} 

Fiddle

aufzufüllen definieren