jQuery Modalbox (Datepicker & Fileupload)

Smustyle · 18.02.2014

Guten Abend

Ich verwende dieses jQuery Modalbox Plugin "" auf einer Website. Funktioniert soweit auch alles einwandfrei. Allerdings stellen sich mir 2 Probleme in den Weg.

1.)
Innerhalb dieser jQuery Modalbox möchte ich den jQuery Datepicker verwenden. Ausserhalb der Modalbox funktioniert der Datepicker, allerdings habe ich es bisher nicht erreicht, dass dieser auch innerhalb funktioniert. Im Netz habe ich bereits mehrmals gelesen, dass die "Z-Index" Eigenschaft angepasst werden muss. Habe dies auch versucht, allerdings ohne Erfolg.

PHP:

echo '<a href="javascript:void(0)" id="addEvent" class="openmodalbox little">';
     echo '<span class="modalboxContent" id="test">';
          echo '<h7 id="addEvent_Title">Neuer Event</h7>';
          echo '<form method="post" action="Eventpage.php" id="addEvent_form">';
               echo '<input type="text" id="addEvent_StartDate" class="addEvent_formInputs" name="addEvent_StartDate" required placeholder="Startdatum (YYYY-MM-DD)"/>';
          echo '</form>';
     echo '</span>';
echo '</a>';

Link zum Plugin:
http://jqueryui.com/datepicker/

2.)
Wahrscheinlich zum grösseren Problem. Es handelt sich wiederum um ein Problem innerhalb der jQuery Modalbox. Ich möchte das jQuery Fileupload Plugin gerne darin aufbauen. Doch auch dies funktioniert überhaupt nicht. Ich kriege die Buttons des Fileuploads zwar in die Modalbox, doch es werden nach Auswahl von Dateien keine Elemente aufgelistet. Ich vermute, es liegt irgendwie an der Höhe der Modalbox. Komme aber nicht auf einen grünen Zweig.

Link zum Plugin:

Ich wäre um jede Hilfe sehr dankbar.

Mit freundlichen Grüssen

Smustyle

Talirion · 19.02.2014

leider sehe ich so da nicht ganz durch, und bei php reicht es such wenn du deinen Html code so einbindest ohne echo:

HTML:

<?php>
...
</php>
<a href="javascript:void(0)" id="addEvent" class="openmodalbox little">
     <span class="modalboxContent" id="test">
          <h7 id="addEvent_Title">Neuer Event</h7>
          <form method="post" action="Eventpage.php" id="addEvent_form">
               <input type="text" id="addEvent_StartDate" class="addEvent_formInputs" name="addEvent_StartDate" required placeholder="Startdatum (YYYY-MM-DD)"/>
          </form>
     </span>
</a>
<?php>
...
</php>

das erhöt die übersicht

und vermutlich sollte dein Link außerhalb der Modalbox liegen also so in der Art :

HTML:

<?php>
...
</php>
<a href="javascript:void(0)" id="addEvent" class="openmodalbox little">Neuer Event</a>
<span class="modalboxContent" id="test">
          <h7 id="addEvent_Title">Neuer Event</h7>
          <form method="post" action="Eventpage.php" id="addEvent_form">
               <input type="text" id="addEvent_StartDate" class="addEvent_formInputs" name="addEvent_StartDate" required placeholder="Startdatum (YYYY-MM-DD)"/>
          </form>
</span>
<?php>
...
</php>

und deine Dateiauswahl sehe ich auch noch nicht

was aber nun fehlt ist der rest, dein einbinden von JQuery, dein javascript code welcher die sache initialisiert usw.

ohne kann dir vermutlich keiner helfen

LG

Smustyle · 19.02.2014

Ich habe deshalb das ganze in einem PHP-Tag verwendet, da der gepostete Code Teil einer IF-Abfrage ist.

Hier die Einbindung von CSS und jQuery.

HTML:

        <link rel="stylesheet" href="css/style.css" media="all">
        <link href="css/custom-theme/jquery-ui-1.10.3.custom.css" rel="stylesheet">

        <script src="//code.jquery.com/jquery-1.9.1.js"></script>
        <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>      
            <!-- load jQuery 1.8.2-->
        <script src="js/jquery-1.8.2.js"></script>          
        <script src="js/jquery.ui.core.js"></script>
        <script src="js/jquery.ui.widget.js"></script>
        <script src="js/jquery.ui.datepicker.js"></script>

Hier der Javascript Teil. Darin enthalten die Event-Auslösung für die Modalbox sowie der Datepicker.

HTML:

<script type="text/javascript">
$(document).ready(function() {
$( "#addEvent_StartDate" ).datepicker({
    dateFormat: 'yy-mm-dd'

});

function DirectCall_EventStatus(){
        jQuery.fn.modalBox({
            directCall : {
                element : '#addEventStatus'
            },
          
            setTypeOfFadingLayer : 'none',
            callFunctionAfterShow :  function(){dateClick();
            setTimeout(function(){jQuery.fn.modalBox('close');}, 2000);
            }
        });
    }

Der Teil vom Fileupload werde ich ebenfalls noch hinzufügen.

Talirion · 20.02.2014

so habe deinen code jetzt mal in eine "funktionierende" geschichte gewandelt, guck mal ob dir das vielleicht hilft:

HTML:

<!DOCTYPE html>
<html>
    <head>
       <title>Page Title</title>
       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
       <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
       <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
   
    </head>
<script type="text/javascript">
$(function() {
    $( "#addEvent_StartDate" ).datepicker({
        dateFormat: 'yy-mm-dd',
    });
  
    /*
    hier musst du deine Modalbox noch erstellen....
    */
    $( "#myModalBox" ).dialog({
        autoOpen: false,
        height: 300,
        width: 350,
        modal: true,
    });
    /*
    hier noch der Link um diese zu öffnen
    */
    $( "#addEvent" )
      .button()
      .click(function() {
        $( "#myModalBox" ).dialog( "open" );
      });
});

// Ohne FUNKTION im moment
function DirectCall_EventStatus(){
        jQuery.fn.modalBox({
            directCall : {
                element : '#addEventStatus'
            },
        
            setTypeOfFadingLayer : 'none',
            callFunctionAfterShow :  function(){dateClick();
            setTimeout(function(){jQuery.fn.modalBox('close');}, 2000);
            }
        });
    }
  
</script>
    <body>
    <a href="javascript:void(0)" id="addEvent" class="openmodalbox little">Neuer Event</a>
    <div id="myModalBox">
        <span class="modalboxContent" id="test">
            <h7 id="addEvent_Title">Neuer Event</h7>
            <form method="post" action="Eventpage.php" id="addEvent_form">
                <input type="text" id="addEvent_StartDate" class="addEvent_formInputs" name="addEvent_StartDate" required placeholder="Startdatum (YYYY-MM-DD)"/>
            </form>
        </span>
    </div>
     </body>
</html>

Smustyle · 20.02.2014

Danke schonmal für deine Unterstützung. Da wäre ich allerdings wieder beim Standard-jQuery. Wie du auf folgendem Link sehen kannst, ist das von mir verwendete jQuery Modalbox Plugin nicht das gleiche. Du kannst das Plugin aufrufen, indem du auf das "+"-Icon klickst.

Link:

Talirion · 20.02.2014

ich hab nochmal rumgespielt, hier kannste mal testen... aber irgendwie vertragen sich deine modalbox und der datepicker nicht wirklich ..... hier mal mein ergebnis...

http://jsfiddle.net/mqrMk/1993/embedded/result/

auf das kleine + unter Result drücken ^^

Viel Glück

Smustyle · 20.02.2014

Funktioniert schonmal. Allerdings nur ein einziges Mal. Beim erneuten Öffnen klappt es nicht mehr. Darf ich dennoch erfahren, was du gemacht hast?

Ich denke dann mal, dass ich die Modalbox wechseln sollte. Würdest du mir zur Standard-Variante raten? Oder kennst du andere Plugins?

Unter dem selben Link habe ich dir auch noch den FileUpload eingerichtet. Leider nicht in einer Modalbox. Das Ziel wäre aber, dass dies ebenfalls in einer Modalbox funktionieren sollte.

Link:

P.S. die Modalbox funktioniert nun nicht mehr.

Talirion · 21.02.2014

Also ja ich würde dir zur Dialog box raten, diese kannst du auch anpassen vom stiel her... deine modalbox sollte glaube noch einen link besitzen ... z.b.:

HTML:

<a href="javascript:void(0)" id="addEvent" class="openmodalbox little">

<Button>Neu<Button>

        <span class="modalboxContent" id="test">
            <h7 id="addEvent_Title">Neuer Event</h7>
            <form method="post" action="Eventpage.php" id="addEvent_form">
                <input type="text" id="addEvent_StartDate" class="addEvent_formInputs" name="addEvent_StartDate" required placeholder="Startdatum (YYYY-MM-DD)"/>
            </form>
        </span>
</a>

des weiteren hatte ich die Modalbox auf eine Eigene Class angewendet da ich so sicherstellen konnte das erst die Modalbox dann das Datefield erstellt wird. Leider hat ja dann der Datepicker nicht mehr richtig funktioniert.

Tip mach erst mal alles mit JQuery, wenn alles gefällt kannst du immernoch extras & andere Plugins einbauen

und php auch noch mal was:

PHP:

<php>

if(was) {

</php>
      <h1>isch erscheine nur wenn WAS ist</h1>
<php>
}

</php>

so nun aber viel spaß und Erfolg

LG

Smustyle · 26.02.2014

Habe es nun um einiges weiter geschafft. Stehe jetzt allerdings vor einem weiteren Problem. Die Situation sieht so aus, dass ich mit dem Standard jQuery Framework die Dialogs erstelle. Ich lade den Content via Ajax in den Dialog. Das funktioniert auch einwandfrei. Allerdings erhalte ich dann bei den Button-Controls folgende Fehlermeldung:

Zeitstempel: 26.02.2014 13:21:25
Fehler: Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'

Hier der JS-Code:

HTML:

<script type="text/javascript">
$jq1102(function() {   

    $jq1102( "#editEventModal" ).dialog({
        autoOpen: false,
        height: 425,
        width: 254,
        context: this,
        modal: true,
        buttons: {
            "ÄNDERN": function() {
                document.forms["editEvent_form"].submit();
            },
            "ABBRECHEN": function() {
                $jq1102( "#editEventModal" ).dialog( "close" );
            }
        },
        success: function() {
                    $jq1102('.ui-widget-overlay').bind('click', function() {
                        $jq1102('#editEventModal').dialog('close');
                    });
                   
                   

        },
    });   
   
    $jq1102( ".editEventbig").click(function() {

        var objID = $jq1102( this ).attr( "objID" );

        $jq1102( "#editEventModal" ).load( "editModal.php",{objID:objID} ).dialog( "open" );

    });
   
});

</script>

Kann man anhand dieses Codes einen Fehler erkennen?

In der per Ajax geladenen PHP-Datei ist lediglich die Darstellung einer HTML-Form aufgrund von SQL-Inhalten.
Die Funktionen bei "open" und auch bei "buttons" funktionieren in anderen Dialogen (Ohne Ajax) ohne Probleme.

Mfg

Talirion · 27.02.2014

du solltest vermutlich auf das Objekt verweise über This lt. JQUERYUI Beispiele so:

HTML:

buttons: {
        "Delete all items": function() {
          $( this ).dialog( "close" );
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }

Smustyle · 27.02.2014

Daran lag es nicht. Habe es nur durch Zufall herausgefunden. Das Problem war ein mehrfach Include von "jQuery.js". Ich habe im durch Ajax geladenen PHP-File ebenfalls einen Include der jQuery libraries gemacht. Dadruch kam es zu konflikten.