button, jquery und modals

Ich versuche Modals und js besser zu verstehen. Ich habe versucht, Schaltflächen zu verwenden, die PHP-Dateien betreffen, um den Inhalt der PHP-Dateien in einem modalen Fenster erscheinen zu lassen, sobald die Schaltfläche geklickt wird.button, jquery und modals

so ...

Schaltfläche_1 bekommt DATEI_1 und legt es in modal, sobald es angeklickt wird.
button_2 ruft file_2 ab und setzt es in modal, sobald es angeklickt wird. usw.

Ich habe das meiste davon erreicht, aber aus irgendeinem Grund muss jede Schaltfläche zweimal geklickt werden (für das erste Erscheinen des modalen Fensters), damit das Modal funktioniert. Danach funktioniert ein einfacher Klick, bis die Seite aktualisiert wird. An diesem Punkt werden erneut zwei Klicks benötigt.

Mein Code funktioniert gut, wenn ich nicht versuche, die Informationen aus der PHP-Datei in ein modales Fenster einzufügen. Also ... ich vermute, es ist darauf zurückzuführen, dass der Button zwei Dinge tun muss. 1. Holen Sie sich die Info und 2. öffnen Sie das modale Fenster.

Wie kombiniere ich beides mit einem Klick?

Ich habe versucht, Dateien vorzufixieren.

<link rel="prefetch" href="/folders/to/php/files/1.php">

Ich habe auch versucht, das modale im HTML vorzufüllen.

Ich habe versucht, die Last anstelle von Klick in der Funktion zu verwenden.

Ich habe meine Versuche nicht geändert, dass ich zuerst auf die Tasten doppelklicken muss.

Jede Hilfe wird geschätzt !!

BONUS: Wenn ich die Tasten bekommen könnte, um ihre zugehörige Datei dynamisch zu finden, wäre das ein Bonus. Bedeutung Ich könnte einfach Schaltflächen hinzufügen oder entfernen und sie würden die richtigen Dateien finden. Alles, was ich tun müsste, ist, so viele Dateien wie Buttons hinzuzufügen. Vielen Dank für Ihre Zeit und Hilfe!

Hier sind die Codes:

$("#liste > button").on('click', apar); 

function apar() { 
    $(this).addClass("active").siblings().removeClass("active"); 
    $('#main_p').load("/folders/to/php/files/" + (1 + $(this).index()) + ".php"); 

    $(document).ready(function() { 
    // Do something with the DOM 
    $('.active').click(function() { 

    }); 
    }); 

} 

function renderHTML(data) { 


    var htmlP = data.url; 

    $('#main_p').html(htmlP); 

} 

// On page load, click on the first `btn` to automatically load the data for it 
$('#liste > button:first').click(renderHTML);

.btn { 
    margin: 5px; 
    padding 0px 5px; 
    text-align: center; 
    background-color: #0095ff; 
    color: #FFF; 
    border: none; 
} 

.btn:hover, 
.btn:focus { 
    outline: none !important; 
    color: #FFF; 
} 

.active { 
    background-color: #891; 
}

<!doctype html> 
<html> 

<head> 
    <title> Modals </title> 



    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 





</head> 

<body> 

    <div id="liste"> 
    <button class="btn" data-toggle="modal" data-target="#myModal_1"> 
     <div class="tree">to file 1</div> 
    </button> 
    <button class="btn" data-toggle="modal" data-target="#myModal_2"> 
     <div class="tree">to file 2</div> 
    </button> 
    <button class="btn" data-toggle="modal" data-target="#myModal_3"> 
     <div class="tree">to file 3</div> 
    </button> 

    <h4 id="main_tit"></h4> 
    <div class="main_p" id="main_p"></div> 
    <div id="main_ima"></div> 

    <script src="js/main.js" async></script> 
</body> 

</html>

hier ist das Beispiel einer 1.php Datei:

<div id="myModal_1" class="modal fade" role="dialog"> 
<div class="modal-dialog"> 

<!-- Modal content--> 
<div class="modal-content"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal">&times;</button> 
    <h4 class="modal-title">Look 1</h4> 
    </div> 
    <div class="modal-body"> 
    <?php 

     echo "I have the 1.php <br>"; 
     echo "its a go!"; 

    ?> 
    </div> 
    <div class="modal-footer"> 
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
    </div>

UPDATE: Ich habe das addierte automatische Auswahl auf Knopf.So habe ich die Schaltfläche Attribute im HTML entfernt und haben diese an der Spitze des JS hinzugefügt:

var idVar = $("#liste").find("button").each(function(index){ 
$(this).attr("data-target","#myModal_" + (1+$(this).index())); 
$(this).attr("data-toggle","modal"); 
$(this).attr("class","btn"); 
});

Quelle

2017-09-02 Aloha

An der Spitze Ihrer JS-Datei gibt es $("#liste > button").on('click', apar);

Versuchen Sie, es zu ändern:

$('body').on('click', '#liste > button', apar);

Und es am Ende des Codes setzt nach dem $('#liste > button:first').click(renderHTML);

Lassen sie mich wissen, wenn dies nicht hilft.

Bearbeiten: Versuchen Sie, neue benutzerdefinierte Klasse für diese Schaltflächen in HTML zu erstellen. Es ist gut, eine Markierung auf Ihre benutzerdefinierten Klassen zu setzen, so etwas wie l-custom-Klasse oder Custom, versuchen, diesem Beispiel zu folgen:

HTML:

<div id="#liste"> 
    <button type="button" class="l-liste-button">btn1</button> 
    <button type="button" class="l-liste-button">btn2</button> 
    <button type="button" class="l-liste-button">btn3</button> 
</div>

JS:

function apar(){ 
    //some code for apar function.. 
} 
function renderHTML(){ 
    //some code for renderHTML function 
} 

$('body').on('click', '.l-liste-button', apar); 
$('body').on('click', '.l-liste-button:first', renderHTML);

Hier ist JSFiddle

Quelle

2017-09-02 20:46:32

Danke. Ich habe es versucht, aber nach der Änderung brauche ich immer noch den Doppelklick. – Aloha

Ich denke, ich habe deine Frage missverstanden. Sie benötigen also einen Doppelklick-Ereignis-Listener, damit Ihr Modal funktioniert? Funktionen müssen auch mit Doppelklick ausgeführt werden? –

Es benötigt derzeit einen Doppelklick, aber ich möchte nur einen einzigen Klick. Sobald ich auf alle Knöpfe doppelgeklickt habe, funktioniert ein einzelner Klick, bis ich die Seite aktualisiere, dann brauche ich noch einmal einen Doppelklick. Ich möchte, dass es immer ein einziger Klick ist. Danke – Aloha

button, jquery und modals

Antwort

Verwandte Themen