Antworten auf deine Fragen:
Neues Thema erstellen

jQuery Modalbox (Datepicker & Fileupload)

S

Smustyle

Noch nicht viel geschrieben

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

Talirion

People Fotograf

PSD Beta Team
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
 
Zuletzt bearbeitet:
S

Smustyle

Noch nicht viel geschrieben

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

Talirion

People Fotograf

PSD Beta Team
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>
 
S

Smustyle

Noch nicht viel geschrieben

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:
 
S

Smustyle

Noch nicht viel geschrieben

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

Talirion

People Fotograf

PSD Beta Team
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
 
S

Smustyle

Noch nicht viel geschrieben

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

Talirion

People Fotograf

PSD Beta Team
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" );
        }
      }
 
S

Smustyle

Noch nicht viel geschrieben

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.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Gesamt: 64 (Mitglieder: 3, Gäste: 61)
Robots: 144

Statistik des Forums

Themen
118.565
Beiträge
1.538.067
Mitglieder
67.488
Neuestes Mitglied
Andrew56524
Oben