Jquery UI Tabs und Inhalt aktualisieren

[A.DA]

Hallo Zusammen,

Ich habe eine Seite in der ich ua. UI-Tabs verwende.
Diese Tabs werden je nach Anforderung dynamische generiert.
Der erste Tab verweist auf die Startseite und ist immer gleich. Die folgenden Tabs (Anzahl) ergeben sich aus der Datenbankabfrage.

In alle Tabs werden Tabellen ausgegeben. Mit dem Klick in eine Tabellenzeile werden deren Daten zur Bearbeitung in einem UI Dialog ausgegeben.

Soweit ist auch alles klar.

Jetzt brüte ich schon einige Zeit über folgendem Problem ( für mich).

Wenn im UI Dialog die Daten geändert und gespeichert werden schliesst der UI Dialog. Es soll aber die Ausgabe im entspechenden Tab (bzw. dessen div) aktualisiert werden.

Jetzt fehlt mir der Ansatz.

Was muss ich machen, damit sich sie Ausgabe aktualisiert. Und nach keiner Bestätigung zum refresh gefragt wird.

[Christian Marquardt]

Das neue gewünschte HTML in das vorhandene einfügen

http://api.jquery.com/category/manip...ertion-inside/

[A.DA]

danke,
bin der Lösung einen Schritt näher. Mein Problem war die Bestimmung des Zielcontainers.....

var $tabs = $('#tabs').tabs();
                                var idPrefix = $tabs.tabs('option', "idPrefix");
                                var selected = $tabs.tabs('option', "selected");
                                alert('Zielcontainer: ' +idPrefix+selected);

Ausgabe: Zielcontainer:  ui-tabs-3 (z.B)

somit habe ich die ID des DIV und kann ihn beliebig manipulieren

[A.DA]

so gehts....

.......
		var $tabs = $('#tabs').tabs();
		var idPrefix = $tabs.tabs('option', "idPrefix");
		var selected = $tabs.tabs('option', "selected");
		var aktiv_tab = "#"+idPrefix+selected;
if(status == 'belegen'){
 $("#fo_zellebelegen").validate({
		submitHandler: function(form) {
		    var options= {	
		                        url:'buchen.php',
					type:'POST',
					target:aktiv_tab,
					success: zeigeErgebnis  
				   }
			$(form).ajaxSubmit(options);
			
                       //Einfügen der Weiterleitung bei komplett ausgefülltem Formular   
                        $( "#dialog-einzelanzeige" ).dialog('close');
			
                    },
		rules: {
			buch: "required",
			grund: "required" ,
                        raumID:"required",
                        abteilungID:"required"
                }
		
	});                                           
     }
function zeigeErgebnis()  { Ausgabe.....}

[A.DA]

wie kann ich das jetzt mit den blöden Umlauten regeln?
Ich habe in dem Form u.a. ein Textfeld. Die Umlaute werden nicht richtig weitergeleitet.

wo muss ich jetzt was einbauen.... ich verstehe das noch nicht ganz... ( am codebeispiel oben)

[Falk Prüfer]

Hallo,
Du musst einfach nur konsequent mit einem einheitlichen Zeichensatz (am besten UTF8) arbeiten, dann hast du auch keine Umlautprobleme. Deine HTML-Seite sollte also einen Zeichensatz festlegen und alle weiterverarbeitenden Scripte (PHP, etc.) sollten ebenfalls diesen Zeichensatz verwenden, genauso wie alle Datenquellen (z.B. Datenbank) Sind die Zeichensätze unterschiedlich, musst du an den jeweiligen Schnittstellen umcodieren.

Gruß Falk

[A.DA]

es funktioniert.

-

1. Mysql Datenbank auf utf8- unicode
2. Php Dateien --> header("Content-Type: text/html; charset=utf-8");
3. Html ---><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
4. Mysql Query ---> "set names 'utf8'"

Problem gelöst,

Danke für die Unterstützung

[A.DA]

Neues Tabs Problem

 <div class="test" id="tabs">
          
    <ul>   <div id="ergebnis" style="width:100%;text-align: center;"></div>
    <li><span id="bereichwechsel">Zellenspiegel Haus <?php echo $datei_haus;?></span> </li>
        <li><a href="#tabs-1">Startseite</a><input type="hidden" name="abteilungID" value=""></li>
        <?php  foreach($abteilungen as $abteilung){
        echo "<li><form><a href=\"zsp_zeigen.php?abteilungID=".$abteilung['abteilungID']."\">".$abteilung['abteilung']."</a><input type=\"hidden\" name=\"abteilungID\" value=\"".$abteilung['abteilungID']."\"></form></li>\n";
        }?>

    </ul>
  
     <div id ="inhalt">
          
    <div id="tabs-1">
        <p class="startseite spk" id="startseite">
        <?php
                    include("Startseite/Schwerpunktkontrolle.php");
                        $tsWeekBeg = date("d.m.Y",mktime(0,0,0,date("m"),date("d")-((date('w') + 6) % 7),date("Y")));
                        $tsWeekEnd = date("d.m.Y",mktime(24,0,0,date("m"),(date("d")-((date('w') + 6) % 7))+5,date("Y")));
                        echo "<strong>Schwerpunktkontrolle vom:</strong> <br>";
                        echo "<strong>". $tsWeekBeg." - ". $tsWeekEnd."</strong> <br>";
                        echo "<strong>". $schwerpunktkontrolle[$kw]."</strong><br>";
                ?>    
        </p>
        </div>
      </div>
   <span id="debug"></span> 
</div>

$( "#tabs" ).tabs({
    select: function(event, ui) { 
		 
	      },
      show: function(event, ui) { 
      
	     },

			  
    ajaxOptions: {    
                        cache: false,
			contentType: "application/x-www-form-urlencoded;charset=utf-8",
           		success: zeigeErgebnis,
			error: function( xhr, status, index, anchor ) {
					$( anchor.hash ).html("Es konnten keine Daten unter der angegebenen Adresse gefunden werden.");
				}
			}

     });

Und die Ausgabe:

function zeigeErgebnis(responseText, statusText, xhr, $form)  { 
                         $(".einzel_anzeige").empty();
                                $("th").addClass("tabellenkopf");
				$("tbody").find("tr:even").addClass("even");      
				$("tbody").find("tr:odd").addClass("odd"); 
				
				  $('#table_ab ').on('dblclick', 'tr', function() {
                              $("#debug").empty(); // debugcontainer leeren.......
                              
				var ID = $(this).attr('id')	; // ID der Tabellenreihe ermitteln
				var formID = "#bearbeiten_"+ID; // Selector zusammenbauen zur Zeilenbestimmung
				 var form_arr = $('#table_ab ').find(formID).serialize(); // Serialize der Formulardaten aus Tabellenreihe
				  
                                  $("#dialog-einzelanzeige").dialog('open'); // öffnen des Dialog zur Einzelbearbeitung
				 
                                       $(".einzel_anzeige").empty(); 
					get_einzelangaben(form_arr); // Daten für neue Anzeige abrufen
					$("#debug").html(form_arr);
				});
				get_einzelangaben($("#debug").text());
				}

Innerhalb dieser Tabs werden ua. Tabellen ausgegeben.... buttons erscheinen dort auch!

aktiviere ich jetzt den letzten Tab und klicke einen Button an, löst dieser mit die gewünschte Funktion aus ( zum Test einen alert()). Nehme ich den vorletzten Tab wird dieses event auch ausgelöst.
Verwende ich jetzt wiederum den letzten Tab bleibt das Event aus.

kurz gesagt alle button, die nach dem letzten aktivierten Tab liegen funktionieren nicht mehr.
ist mir auch bisher nur bei den button aufgefallen.... alle anderen Ausgaben funktionieren.

Rätsel mit, so hoffe ich, einer Lösung!(bzw. einen Anstoss in die richtige Richtung )

Gruß
arno

[Christian Marquardt]

Ich kann keinen Zusammenhang von deinen Codefragmenten (wo ist da ein Button?) mit deiner Frage herstellen. Diese ist auch widersprüchlich:

aktiviere ich jetzt den letzten Tab und klicke einen Button an, löst dieser mit die gewünschte Funktion aus ( zum Test einen alert()). Nehme ich den vorletzten Tab wird dieses event auch ausgelöst.

vs.

kurz gesagt alle button, die nach dem letzten aktivierten Tab liegen funktionieren nicht mehr.

Bei dem ersten Beispiel wurde ein funktionierender Button nach dem letzten Tab ausgelöst

[A.DA]

ich hatte mit deiner Schimpfe gerechnet.

es gibt verschiedene Anzahlen von tabs, je nach ausgewähltem Bereich. mal gibt es Vier, mal gibt es Sieben oder mehr.
In den Div´s der jeweiligen werden zwei div´s und eine table ausgegeben. die Div stehen über der Tabelle und sind jeweils 50% breit.
Im Linken Statistik im Rechten die genannten Button.

<button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all" id="bu_zellenspiegel_drucken">
            <span class="ui-button-text">Abteilungsliste</span>
            </button> 

mit dem Button Klick wird der Wert eines Formulars an eine ander Seite weitergegeben

<form id="fo_aktiv_abt">
 <input type="text" name="abteilungID" id="abteilungID" value="<?php echo $_REQUEST['abteilungID'];?>">
 </form>

die generiert dann ein entsprechendes fpdf Dokument.
so fange ich den Button Klick ab.

 $("#bu_zellenspiegel_drucken").click(function(){
	   var aktiv_abtID = $("#fo_aktiv_abt").serialize();
	   alert(aktiv_abtID);
               window.open('Druck/zellenspiegel_pdf_ausdruck.php?'+aktiv_abtID); 
	       });

Auszug aus dem Bildschirm:
demo.jpg
Tab 2.0 ist aktiv, und ich kann die Abteilungsliste drucken.....
< 2.0 ebenfalls. > 2.0 reagieren die Button nicht.
in der darunter liegenden Tabelle arbeiten doppelclick events einwandfrei..... nur die Button machen zicken...
Ich hoffe ich konnte mein Problem so etwas deutlich machen!?

[Christian Marquardt]

Hmmm, die ID muss auf einer Seite eindeutig sein und darf nicht mehrfach vergeben werden. Ist das gegeben (id="bu_zellenspiegel_drucken")?

[A.DA]

ja, für bu_... (button) fo_.... (form) sind die ID nur einmal vorhanden.....

[Christian Marquardt]

Was ist das für ein Button. Soll dieser ein Submit auslösen? Wenn nein ergänze mal

<button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all" id="bu_zellenspiegel_drucken" type="button">

[A.DA]

 $("#bu_zellenspiegel_drucken").click(function(){
	   var aktiv_abtID = $("#fo_aktiv_abt").serialize();
	   alert(aktiv_abtID);
               window.open('Druck/zellenspiegel_pdf_ausdruck.php?'+aktiv_abtID); 
	       });

mit Jquery

[Christian Marquardt]

damit überschreibst du das Click Ereignis. Da habe ich gesehen, aber ohne type.... ist das ein Submit Button ..IMHO.