Inhalt einer Seite ändern ohne neu zu laden

In diesem Forum kann man Fragen zur Programmierung stellen, die bei der Entwicklung von Mods für phpBB 3.0.x oder dem Modifizieren des eigenen Forums auftauchen.
Forumsregeln
phpBB 3.0 hat das Ende seiner Lebenszeit überschritten
phpBB 3.0 wird nicht mehr aktiv unterstützt. Insbesondere werden - auch bei Sicherheitslücken - keine Patches mehr bereitgestellt. Der Einsatz von phpBB 3.0 erfolgt daher auf eigene Gefahr. Wir empfehlen einen Umstieg auf die neuste phpBB-Version, welches aktiv weiterentwickelt wird und für welches regelmäßig Updates zur Verfügung gestellt werden.
Antworten
Helmut
Mitglied
Beiträge: 2048
Registriert: 27.12.2002 20:35
Wohnort: Augsburg

Inhalt einer Seite ändern ohne neu zu laden

Beitrag von Helmut »

Hallo,

ich bastle immer noch an meiner neuen Homepage herum, dazu bräuchte ich mal eure Hilfe.

Mein Problem ist jetzt dass ich auf einer in phpBB eingebundenen Seite eine Liste mit Adressen ausgeben möchte und zwar nach Eingabe der PLZ (auch teilweise). Die Ausgabe der Liste (Daten kommen aus einer Datenbank) funktioniert ohne Probleme, nur eben nicht nach PLZ ausgegeben. Ich möchte es so haben dass oben eine PLZ eingegeben werden kann (auch teilweise) und mit einem "suchen" Button z.B. der Wert 86150 an die php Datei übergeben wird, wo dann die Datenbank entsprechend ausgelesen wird und hinterher die Liste wieder an die html zurück gegeben wird. Die Seite selber soll dabei aber nicht neu geladen, sondern nur die Liste mit den Adressen ersetzt werden.

Ich habe schon etwas mit onclick und <div> herum gespielt, mir ist aber noch keine Lösung eingefallen wie ich den Wert (siehe oben) an die php bringe und die neue Liste wieder zurück ohne die ganze Seite neu zu laden. Mit Javascript kenne ich mich nicht so gut aus.


Beispiel html Datei

Code: Alles auswählen

<script type="text/javascript">
// <![CDATA[

    var panels = new Array('aerzte-panel', 'kliniken-panel', 'suchen-plz-panel');
    var show_panel = 'aerzte-panel';


// ]]>
</script>
und

Code: Alles auswählen

            <dl style="clear: left;">
                <dt><label for="city">{L_PLZ}:</label></dt>
                <dd><input type="text" id="plz" name="plz" size="5" maxlength="5" value="{POST_PLZ}" class="inputbox autowidth" /><input type="button" id="listen-suchen-plz-tab" value="{L_LISTEN_SUCHEN_PLZ}" onclick="subPanels('suchen-plz-panel'); return false;"/></dd>
            </dl>    


            <div>
            <ul>    
                <input type="button" id="listen-aerzte-tab" value="{L_LISTEN_AERZTE}" onclick="subPanels('aerzte-panel'); return false;"/>
                <input type="button" id="listen-kliniken-tab" value="{L_LISTEN_KLINIKEN}" onclick="subPanels('kliniken-panel'); return false;"/>
                <input type="text" id="plz" name="plz" size="5" maxlength="5" value="{POST_PLZ}" class="inputbox autowidth" /><input type="button" id="listen-suchen-plz-tab" value="{L_LISTEN_SUCHEN_PLZ}" onclick="subPanels('suchen-plz-panel'); return false;"/>
            </ul>
            </div>

[...]

            <div id="aerzte-panel" name="aerzte-panel" style="display: none;">
            Test Arzt
            </div>
            <div id="kliniken-panel" style="display: none;">
            Test Klinik
            </div>
            <div id="suchen-plz-panel" style="display: none;">
            Test PLZ
            </div>

[...]

        <div class="svi_postbody">
            <div class="ad_svi_column4">
                <br />
                <br />
                <div style="text-align: center;">{liste.BANNER_PREVIEW}
                <br />
                <br />
                
            </div>
                
            </div>
            <div class="ad_svi_column2">
                {L_FIRMA}:<br />
                <!-- IF POST_NAME_1 -->{L_LISTEN_NAME1}<br /><!-- ENDIF -->
                <!-- IF POST_NAME_2 -->{L_LISTEN_NAME2}<br /><!-- ENDIF -->
                <!-- IF POST_NAME_3 -->{L_LISTEN_NAME3}<br /><!-- ENDIF -->
                {L_ADRESS}:<br />
                {L_CITY}:<br />
                {L_LISTEN_LAND}:<br />
                <!-- IF liste.POST_TEL -->{L_TEL}:<br /><!-- ENDIF -->
                <!-- IF liste.POST_FAX -->{L_FAX}:<br /><!-- ENDIF -->
                <!-- IF liste.POST_MAIL -->{L_MAIL}:<br /><!-- ENDIF -->
                <!-- IF liste.POST_LISTEN_URL -->{L_AD_URL}:<br /><!-- ENDIF -->
            </div>                    
            <div class="ad_svi_column3">
                <strong>{liste.TITEL_LISTEN}</strong><br />
                <!-- IF liste.POST_NAME_1 -->{liste.POST_NAME_1}<br /><!-- ENDIF -->
                <!-- IF liste.POST_NAME_2 -->{liste.POST_NAME_2}<br /><!-- ENDIF -->
                <!-- IF liste.POST_NAME_3 -->{liste.POST_NAME_3}<br /><!-- ENDIF -->
                {liste.POST_ADRESS}<br />
                <!-- IF liste.POST_CITY -->
                {liste.POST_LAND_KURZ}-{liste.POST_PLZ} {liste.POST_CITY}<br />
                {liste.POST_LAND}<br />
                <!-- ENDIF -->
                <!-- IF liste.POST_TEL -->{liste.POST_TEL}<br /><!-- ENDIF -->
                <!-- IF liste.POST_FAX -->{liste.POST_FAX}<br /><!-- ENDIF -->
                <!-- IF liste.POST_MAIL --><a href="mailto:{liste.POST_MAIL}">{liste.POST_MAIL}</a><br /><!-- ENDIF -->                        
                <!-- IF liste.POST_LISTEN_URL --><a href="http://{liste.POST_LISTEN_URL}">{liste.POST_LISTEN_URL}</a><br /><!-- ENDIF -->                        
            </div>
            <div class="ad_svi_column3">
                {liste.ARTICLE_LISTEN}<br />            
            </div>
        </div>        
 
Ich würde mich über etwas Hilfe und Lösungsansätze freuen.

Gruß Helmut
Ich bin nicht ganz dicht.... na und.
Benutzeravatar
BNa
Valued Contributor
Beiträge: 3169
Registriert: 12.04.2010 23:51
Kontaktdaten:

Re: Inhalt einer Seite ändern ohne neu zu laden

Beitrag von BNa »

jquery/ajax ist die Lösung. Zum Beispiel das hier lediglich mit SID und Parametern übergeben :wink:
In die *.php dann die SQL-Abfrage mit anschliessender Template Ausgabe packen.
Also die Abfragende HTML ist gleich die Ausgebende. Dargestellt via <div id="ajaxcontent" etc.

Code: Alles auswählen

$("#ajaxloadlink").click(function(){
$("#ajaxcontent").load("ajax.php");
});
Quelle mit gutem Tutorial
http://matthiasschuetz.com/jquery-tutor ... ajax-laden

Im Netz findet man zu Hauf leicht verständliche Anleitungen.
Suchbegriffe:
jquery php howto
oä.
Helmut
Mitglied
Beiträge: 2048
Registriert: 27.12.2002 20:35
Wohnort: Augsburg

Re: Inhalt einer Seite ändern ohne neu zu laden

Beitrag von Helmut »

Hallo BNa,

danke dir für den Tipp, werde ich mir mal anschauen. Ich habe mir mal jquery-1.7.1.min.js runter geladen und werde mal damit ein paar Versuche machen. Mit <div d=" ..... habe ich ja schon was probiert und geht auch, siehe oben mit dem Text im <div>.

Ohne jquery also mit ein paar Codezeilen Javascript oder gar ohne Javascript lässt sich das nicht machen?

Gruß Helmut
Ich bin nicht ganz dicht.... na und.
posaunen
Mitglied
Beiträge: 410
Registriert: 21.04.2004 20:05

Re: Inhalt einer Seite ändern ohne neu zu laden

Beitrag von posaunen »

Helmut hat geschrieben: ... oder gar ohne Javascript lässt sich das nicht machen?
Nein.
Helmut hat geschrieben: Ohne jquery also mit ein paar Codezeilen Javascript ... ... ... lässt sich das nicht machen?
jquery sind diese paar Codezeilen als fertiges allgemein einsetzbares Skript.
Antworten

Zurück zu „[3.0.x] Mod Bastelstube“