Div-Container ignorieren

oli513

Hallo zusammen,

ist es möglich, einen Div-Container und somit den ganzen Code, der sich darin befindet, zu ignorieren? Also nicht nur ein bloßes Ausblenden des Div-Containers.
Das Problem ist, dass ich anhand von Div-Containern Tabs erstellt habe. In den verschiedenen Divs sind des Öfteren z.B. die gleichen Variablen vorhanden und wenn ich nun eine Funktion in einem beliebigen Tab ausführe, dann wird diese natürlich immer auf die erste Variable angewandt, die er findet, also im Prinzip meist in dem nicht ausgewählten, ersten Tab. Aber die Funktion soll ja in dem Div ausgeführt werden, in dem sie sich befindet.
Nun ja, ich hoffe ihr könnt mir helfen.

Danke

SinnlosS

Ich nehme an du sprichst von Javascript?
Dann lässt sich das meines Wissens mit gleichen Variablennamen nicht realisieren.
Ich sehe spontan zwei Möglichkeiten:
1. Du numerierst deine Tabs durch, verwendest deine bisherigen gleichen Variablennamen als Array und schreibst die jeweiligen Variableninhalte in den Index mit der entsprechenden Tabnummer. Dann brauchst du bei einem Funktionsaufruf nur prüfen welcher Tab gerade aktiv ist.
2. Du lädst beim Seitenaufruf nur dein Starttab, und bei einem Tabwechsel tauschst du den Inhalt per Ajax aus.

Was da sinnvoller ist hängt ganz vom konkreten Anwendungsfall ab.

oli513

Jap, das hätte ich vielleicht noch erwähnen sollen ;). Hab die Tabs mit Javascript realisiert.

Ich glaub, in dem Fall wäre Variante 2, also den Inhalt per Ajax austauschen, sinnvoller.
Beim Seitenaufruf wird bereits der Starttab geladen.

Kannst du mir vielleicht noch ein paar Ansätze geben, wie ich das umsetzen kann? Weiß nämlich nicht, wie ich da ran soll.

oli513

hmm....
also so sieht mein Code aus:

Die Javascript Funktion:

PHP

<script language="JavaScript" type="text/javascript">
      var panels = new Array('panel1', 'panel2');
      var selectedTab = null;
      function showPanel(tab, name)
      {
        if (selectedTab) 
        {
          selectedTab.style.backgroundColor = '';
          selectedTab.style.paddingTop = '';
          selectedTab.style.marginTop = '4px';
        }
        selectedTab = tab;
        selectedTab.style.backgroundColor = 'white';
        selectedTab.style.paddingTop = '6px';
        selectedTab.style.marginTop = '0px';        
        for(i = 0; i < panels.length; i++)
        {
          document.getElementById(panels[i]).style.display = (name == panels[i]) ? 'block':'none';
        }
        return false;
      }
    </script>

Alles anzeigen

PHP

<body onload="showPanel(document.getElementById('tab1'), 'panel1');">
...
<div id="tabs">
    <a href="" class="tab" onmousedown="return event.returnValue = showPanel(this, 'panel1');" id="tab1" onclick="return false;">Tab1</a>
    <a href="" class="tab" onmousedown="return event.returnValue = showPanel(this, 'panel2');" onclick="return false;">Tab2</a>


<div class="panel" id="panel1" style="display: block">
<form action="irgendwas.php" method="post" name="form" id="form">
<tr>


<td width="150" align="left" valign="middle">Testfeld</td>


<td width="140" align="left" valign="middle"><input type="text" name="name" id="name" /></td>


</tr>


</div>

Alles anzeigen

PHP

<div class="panel" id="panel2" style="display: block">
<form action="irgendwas.php" method="post" name="form" id="form">
<tr>


<td width="150" align="left" valign="middle">Testfeld</td>


<td width="140" align="left" valign="middle"><input type="text" name="name" id="name" /></td>


</tr>


</div>

Alles anzeigen

Sind jetzt nur Ausschnitte, aber sollte ja denk ich ma reichen.

SinnlosS

Ich verwende JQuery und mache kaum etwas über reines JavaScript, für Ajax-Calls nutze ich da $.post() ( http://api.jquery.com/jQuery.post/ )

Für Tabs gibt es da auch ein Extra Widget und in der Demo auch genau deinen Anwendungsfall, nämlich Tab-Inhalte via Ajax laden:
http://jqueryui.com/demos/tabs/#ajax

oli513

Ok, werde mir die Seiten mal genauer anschauen.

Danke!

Tags