Jquery Dialog mit iframe

brudsch · 15.07.2011, 11:17

Hallo zusammen,

ich versuche seit Tagen einen JQuery Dialog mit dynamischen Daten zu füllen.
Sprich: Ich lese Daten aus einer Datenbank aus, dort werden die Daten in eine Tabelle gefasst.

Nun möchte ich per Link ein Dialog-Fenster öffnen und die Daten in diesem Dialog öffnen und bearbeiten können. Also Link in der entsprechenden Tabellenzeile anklicken, die Daten sollen dann in diesem Dialog öffnen, damit ich sie bearbeiten kann. Nach Absenden soll sich der Dialog wieder schließen und die Seite automatisch aktualisieren.

Bisher bin ich nur auf iframe mit einer "Hintergrundseite" im Dialog gestoßen. Ist das der richtige Weg oder kann ich die Daten anders ins Feld laden?

Mein Code dazu:

PHP-Code:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Arbeitsdatei</title>
<script src="jquery-ui-1.7.2/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.7.2/js/jquery-ui-1.7.2.min.js" type="text/javascript"></script>
<link href="jquery-ui-1.7.2/css/base/ui.core.css" rel="stylesheet" type="text/css" />
<link href="jquery-ui-1.7.2/css/base/ui.dialog.css" rel="stylesheet" type="text/css" />
<link href="jquery-ui-1.7.2/css/base/ui.theme.css" rel="stylesheet" type="text/css" />
<link href="jquery-ui-1.7.2/css/base/ui.images.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/* BeginOAWidget_Instance_2142022: #dialog */

        #dialog .ui-widget {
            font-family: inherit;
        }
        
        .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {
            color: #ffffff;
        }
        
        .ui-widget-header {
            font-size:1em;
            font-weight: bold;
            font-family: Arial, Helvetica, sans-serif;
            background: #5c9ccc;
            border-color: #4297d7;
            border-width: 1px;
        }
            
        .ui-dialog-title {
            line-height: 1em;
            color: #ffffff;
            font-weight: bold;
        }
        
        .ui-widget-content {
            font-size:1em;
            font-weight: bold;
            font-family: Arial, Helvetica, sans-serif;
            background: #fcfdfd;
            border-color: #a6c9e2;
            border-width: 1px;
        }
        
        /* tab panel bounding box */ 
        .ui-dialog-content {
            font-family: Arial, Helvetica, sans-serif;
            color: #222222;
            font-size:.8em;
            padding: 10px;
        } 
        
        .ui-dialog-buttonpane {
            font-size:.8em;
        }
        
        
/* EndOAWidget_Instance_2142022 */
</style>
<script type="text/xml">
<!--
<oa:widgets>
  <oa:widget wid="2142022" binding="#dialog" />
</oa:widgets>
-->
</script>
</head>

<body>
<script type="text/javascript">
// BeginOAWidget_Instance_2142022: #dialog

                $(document).ready(function() {
                    /*$("#dialog").dialog({     draggable: 'true',
                                            resizable: 'false',
                                            title: 'Dialog Title',
                                            buttons: { "OK": function() { $(this).dialog("close"); }} } );*/
                                            $('.link').click(function(){
var siteurl = $(this).attr('name');
/*var siteurl = $('.link').attr('name');*/
$('<iframe src = "'+siteurl+'">').dialog({
modal: true,
height: 400,
width: 550,
title: 'Daten bearbeiten',
autoOpen: true,
resizable: true,

});
});
                  });
        
// EndOAWidget_Instance_2142022
</script>
<a href="#" class="link" name="details_arbeitsdatei.php?ID=<?php echo $row_data['id']; ?>">Bearbeiten</a>
</body>
</html>

Dazu kommt noch mein Problem: Wenn ich die Daten so wie oben per iframe einlese, so ist linksbündig im Dialog der iframe geladen und daneben jede Menge Platz. im iframe erscheint ein Scrollbalken, ich bekomm die Daten nicht auf die komplette Breite. Deshalb eben die Frage, ob man die Daten nicht anders ins Dialogfeld einlesen kann, per iframe erscheint mir so... naja "veraltet"

Vielen Dank im Voraus.

rudygotya · 15.07.2011, 17:40

Alternativ zum iframe:
- Erstell dein Dialog-Contentelement mitsamt einem Ladebalken/ Ajaxspinner
- Erstell ein Template und binde das ein (mit der template engine deiner wahl)
Dialog öffnen
- on open ajax request, dataType json
=> template rendern, in den Dialog einfügen, dabei Ladebalken ersetzen.
=> wenn button abschicken => per ajax verschicken => on success dialog schließen

Alternativ zum Dialog:

http://www.trirand.com/jqgridwiki/do...inline_editing

Btw: wirklich jQuery 1.3.2 und ui 1.7? Wieso benutzt du keine aktuellen Versionen?

Grüße

Basti

brudsch · 15.07.2011, 21:09

Sorry, daß ich mich jetzt etwas anstelle

Leider kann ich nicht wirklich viel mit Ajax und Javasript. Deshalb habe ich auch nicht so viel von deinem Beitrag verstanden.

Könntest du vielleicht etwas deutlicher werden, bzw. einen Anhaltspunkt geben? Vielleicht auch mit Beispielen?

Danke für die Hilfe

rudygotya · 16.07.2011, 06:53

Zitat:

Btw: wirklich jQuery 1.3.2 und ui 1.7? Wieso benutzt du keine aktuellen Versionen?

jQ 1.3 hat noch ordentlich mem leaks für den IE bereit, ist gemessen an der aktuellen Version arschlahm und glaube ich 3,5 ? Jahre alt. Ist das ne vorgegebene Abhängigkeit?

Wenn du die Komplexität niedrig halten willst und nicht tiefer in JS einsteigen möchtest, bleib beim Iframe. Den würde ich an deiner Stelle jedoch in ein div wrappen und on dialog open die iframe src setzen:

Code:

<div id="mydialog" title="fancy editing a table">
  <iframe/>
</div>

Js Template engines:
http://beebole.com/pure/demos/
https://github.com/janl/mustache.js/
https://github.com/jquery/jquery-tmpl

Dialog Events (z.b. open) : http://jqueryui.com/demos/dialog/#method-open

Ich verstehe nicht, was genau du nicht verstanden hast?

Du musst die Events des Dialogs bedienen, mit jQuery Ajax arbeiten und die Template Engine füttern. Du kannst auch auf die Template Engine verzichten und stattdessen hardcodiert mit dem DOM-Tree arbeiten. Schau dir doch mal das Beispiel in der Doku "modal form" an.

Eigentlich bin ich gegen den übermäßigen Einsatz von Dialogen, da du es wohl ohne Dialog für den Benutzer viel intuitiver lösen könntest, siehe table grid aus meiner ersten Antwort. Wenn du allerdings nicht viel Arbeit reininvestieren möchtest / es schnell gehen muss, kann man das schon mal machen.

Viel Spaß

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Einsatz von Milestones (jQuery)	dreamcatcher	JavaScript, Ajax und mehr	4	28.06.2011 12:07
PHP und jquery	mehlwurm	PHP Einsteiger	13	30.05.2011 23:09
jQuery Post in iFrame	Atikos	JavaScript, Ajax und mehr	9	13.04.2011 16:45
[Erledigt] jQuery UI .dialog() \|\| Resizeable:false schränkt ein ?	dreamcatcher	JavaScript, Ajax und mehr	0	24.03.2011 18:16
[Erledigt] jquery dialog button beschriftung	BlackScorp	JavaScript, Ajax und mehr	3	10.02.2011 22:52
Variable aus Formular an iframe	drzwockel	PHP Tipps 2010	52	25.03.2010 13:23
In iFrame einen Wert definieren und an Seite (in der das iFrame ist) übergeben	moercel	JavaScript, Ajax und mehr	15	15.04.2009 10:31
jQuery Plugin - so richtig?	stayInside	JavaScript, Ajax und mehr	5	23.02.2009 12:34
JavaScript: IFrame: Wert aendern: Problem	SvenLittkowski	HTML, Usability und Barrierefreiheit	2	26.09.2007 00:49
Kommunikation zwischen IFRAME und Hauptseite	R4v3r	HTML, Usability und Barrierefreiheit	1	02.04.2007 13:57
Gesamte Seite aus iFrame neu laden		HTML, Usability und Barrierefreiheit	5	22.11.2005 17:09
PHP statt iframe		PHP Tipps 2007	1	20.11.2005 11:28
[Erledigt] IFrame Höhe dynamisch an Seiteninhalt anpassen?		HTML, Usability und Barrierefreiheit	2	23.04.2005 18:44
[Erledigt] Iframe JavaScript ?		HTML, Usability und Barrierefreiheit	5	19.10.2004 21:21
[Erledigt] iframe nach Formulareingaben an neue Grösse anpassen		HTML, Usability und Barrierefreiheit	2	17.06.2004 16:25

15.07.2011, 11:17
brudsch Benutzer Registriert seit: 12.10.2010 Beiträge: 33 PHP-Kenntnisse: Anfänger	Jquery Dialog mit iframe Hallo zusammen, ich versuche seit Tagen einen JQuery Dialog mit dynamischen Daten zu füllen. Sprich: Ich lese Daten aus einer Datenbank aus, dort werden die Daten in eine Tabelle gefasst. Nun möchte ich per Link ein Dialog-Fenster öffnen und die Daten in diesem Dialog öffnen und bearbeiten können. Also Link in der entsprechenden Tabellenzeile anklicken, die Daten sollen dann in diesem Dialog öffnen, damit ich sie bearbeiten kann. Nach Absenden soll sich der Dialog wieder schließen und die Seite automatisch aktualisieren. Bisher bin ich nur auf iframe mit einer "Hintergrundseite" im Dialog gestoßen. Ist das der richtige Weg oder kann ich die Daten anders ins Feld laden? Mein Code dazu: PHP-Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Arbeitsdatei</title> <script src="jquery-ui-1.7.2/js/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="jquery-ui-1.7.2/js/jquery-ui-1.7.2.min.js" type="text/javascript"></script> <link href="jquery-ui-1.7.2/css/base/ui.core.css" rel="stylesheet" type="text/css" /> <link href="jquery-ui-1.7.2/css/base/ui.dialog.css" rel="stylesheet" type="text/css" /> <link href="jquery-ui-1.7.2/css/base/ui.theme.css" rel="stylesheet" type="text/css" /> <link href="jquery-ui-1.7.2/css/base/ui.images.css" rel="stylesheet" type="text/css" /> <style type="text/css"> /* BeginOAWidget_Instance_2142022: #dialog / #dialog .ui-widget { font-family: inherit; } .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #ffffff; } .ui-widget-header { font-size:1em; font-weight: bold; font-family: Arial, Helvetica, sans-serif; background: #5c9ccc; border-color: #4297d7; border-width: 1px; } .ui-dialog-title { line-height: 1em; color: #ffffff; font-weight: bold; } .ui-widget-content { font-size:1em; font-weight: bold; font-family: Arial, Helvetica, sans-serif; background: #fcfdfd; border-color: #a6c9e2; border-width: 1px; } / tab panel bounding box / .ui-dialog-content { font-family: Arial, Helvetica, sans-serif; color: #222222; font-size:.8em; padding: 10px; } .ui-dialog-buttonpane { font-size:.8em; } / EndOAWidget_Instance_2142022 / </style> <script type="text/xml"> <!-- <oa:widgets> <oa:widget wid="2142022" binding="#dialog" /> </oa:widgets> --> </script> </head> <body> <script type="text/javascript"> // BeginOAWidget_Instance_2142022: #dialog $(document).ready(function() { /$("#dialog").dialog({ draggable: 'true', resizable: 'false', title: 'Dialog Title', buttons: { "OK": function() { $(this).dialog("close"); }} } );/ $('.link').click(function(){ var siteurl = $(this).attr('name'); /var siteurl = $('.link').attr('name');/ $('<iframe src = "'+siteurl+'">').dialog({ modal: true, height: 400, width: 550, title: 'Daten bearbeiten', autoOpen: true, resizable: true, }); }); }); // EndOAWidget_Instance_2142022 </script> <a href="#" class="link" name="details_arbeitsdatei.php?ID=<?php echo $row_data['id']; ?>">Bearbeiten</a> </body> </html> Dazu kommt noch mein Problem: Wenn ich die Daten so wie oben per iframe einlese, so ist linksbündig im Dialog der iframe geladen und daneben jede Menge Platz. im iframe erscheint ein Scrollbalken, ich bekomm die Daten nicht auf die komplette Breite. Deshalb eben die Frage, ob man die Daten nicht anders ins Dialogfeld einlesen kann, per iframe erscheint mir so... naja "veraltet" Vielen Dank im Voraus. Geändert von brudsch (15.07.2011 um 11:24 Uhr).*


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

15.07.2011, 17:40
rudygotya Erfahrener Benutzer Registriert seit: 28.05.2008 Beiträge: 2.094 PHP-Kenntnisse: Fortgeschritten	Alternativ zum iframe: - Erstell dein Dialog-Contentelement mitsamt einem Ladebalken/ Ajaxspinner - Erstell ein Template und binde das ein (mit der template engine deiner wahl) Dialog öffnen - on open ajax request, dataType json => template rendern, in den Dialog einfügen, dabei Ladebalken ersetzen. => wenn button abschicken => per ajax verschicken => on success dialog schließen Alternativ zum Dialog: http://www.trirand.com/jqgridwiki/do...inline_editing Btw: wirklich jQuery 1.3.2 und ui 1.7? Wieso benutzt du keine aktuellen Versionen? Grüße Basti __________________ ++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++ Blog

15.07.2011, 21:09
brudsch Benutzer Registriert seit: 12.10.2010 Beiträge: 33 PHP-Kenntnisse: Anfänger	Sorry, daß ich mich jetzt etwas anstelle Leider kann ich nicht wirklich viel mit Ajax und Javasript. Deshalb habe ich auch nicht so viel von deinem Beitrag verstanden. Könntest du vielleicht etwas deutlicher werden, bzw. einen Anhaltspunkt geben? Vielleicht auch mit Beispielen? Danke für die Hilfe