Bottlepy + jquery seite Dynamisch Laden

[DanJJo]

Hallo Ihr!

Ich habe folgendes vor und hab eigentlich so gar keine Ahnung wie ich das einbinden kann....

folgendes...ich habe eine Seite und möchte über eine jquery einen gewissen inhalt klick neu Laden ohne die Seite neu Laden zu müssen...

der jquery code:

Code: Alles auswählen

$(document).ready(function()
{
    // allen links im div 'navigation' & 'content' eine click()-funktion zuweisen.
    // es wird auch auf alle links von der dynamisch nachgeladenen
    // seiten reagiert (solange die seiten in das content-div geladen werden)!   
    $("#loginwrapper a, #contenti a").live("click",function()
    {
        // das link-ziel jeweils auslesen & zwischenspeichern
        var pageToLoad = $(this).attr("href");
        
        // dem div 'content' den inhalt der aufgerufenen seite zuweisen
        $("#contenti").load(pageToLoad);
        
        // wichtig! sonst wird der a-link im browser aufgerufen!
        return false;
    });
});

also die Seite soll das Ziel,hier das login.tpl in einen bestehenden div laden.

Beispiel hier:
<div id="loginwrapper"> <a href="../login"></div> soll in <div id="contenti"></div> geladen werden...

in meiner main.py hab ich für login

Code: Alles auswählen

@route("/login")
@route("/login/")
def login ():
	return template("login")

nun wie erwartet läd er die Seite Login komplett neu und nicht wie erhofft den inhalt des templates Login in die bestehende Seite in das angegebene div mit der id contenti.

ich hoffe ihr versteht was ich meine

wie kann ich bottle nun verklickern, dass er meine jquery ausführt und den inhalt von login.tpl in das angegeben div läd?

Danke

[Sirius3]

@DanJJo: bottle reagiert, wie jeder Server, nur auf Anfragen und sendet das Resultat an den Client zurück. Was der Client damit macht, z.B. ob er eine neue Seite damit füllt, oder den Inhalt in die bestehende Seite einbaut, liegt allein am Client.
Deshalb meine Frage: Wird der Javascript-Code überhaupt fehlerfrei ausgeführt?

[DanJJo]

also wenn ich das script in eine beispiel *.html einsetze läuft alles wie gewünscht. sprich ich habe

index.html, 1.html

in der index.html steht

Code: Alles auswählen

<div id="loginwrapper">
   <a href="1.html>hier wird 1 geladen</a>
</div>  
<div id="contenti"></div>

hier läuft alles super ... wenn ich auf "hier wird 1 geladen" klicke erscheint in dem contenti div der inhalt von 1.html

[Sirius3]

und was machst Du oben anders?

[DanJJo]

naja da dass alles mit bottlepy läuft siehts etwas anders aus
...zunächst die Route zu /1 festgelegt in der main.py
in der index.tpl steht

Code: Alles auswählen

<div id="loginwrapper">
   <a href="../1>hier wird 1 geladen</a>
</div> 
<div id="contenti"></div>

nun hat er aber keine lust den inhalt in das div zu laden sondern läd die seite neu, was klar ist da in der main.py der pfad hierzu angegeben ist aber wieso übergeht er die jquery?

[BlackJack]

@DanJJo: Was heisst übergehen? Da ist doch gar kein JavaScript zu sehen sondern nur ein ganz normaler <a>-Tag mit einer URL. Die lädt der Browser dann natürlich und ersetzt damit die aktuelle Seite. Was sollte er sonst auch machen, denn *genau das* sagst Du ihm da ja.

[DanJJo]

ohje naja natürlich wird weiter oben ... hier nicht zu sehen .... das script mittels <script type="text/javascript" src="../static/js/test.js"></script> in die index.tpl eingebunden...ich bin jetzt davon ausgegangen, dass das klar ist.

[Sirius3]

@DanJJo: und natürlich schickt bottle unter der Adresse "../static/js/test.js" die Javascript-Datei und unter einer anderen Adresse auch jquery.js, usw. ??

[DanJJo]

@DanJJo: und natürlich schickt bottle unter der Adresse "../static/js/test.js" die Javascript-Datei und unter einer anderen Adresse auch jquery.js, usw. ??

hmmm nein. Bislang hat ein anderes script (autoscroll) auch ohne eine angabe der Route in der main.py funktioniert und jquery.js dementsprechend auch.

wie binde ich den ein script in die main.py ein ? so

Code: Alles auswählen

@route("../static/js/test.js/")
def test(): return '''
$(document).ready(function()
{
    // allen links im div 'navigation' & 'content' eine click()-funktion zuweisen.
    // es wird auch auf alle links von der dynamisch nachgeladenen
    // seiten reagiert (solange die seiten in das content-div geladen werden)!   
    $("#loginwrapper a, #contenti a").live("click",function()
    {
        // das link-ziel jeweils auslesen & zwischenspeichern
        var pageToLoad = $(this).attr("href");
        
        // dem div 'content' den inhalt der aufgerufenen seite zuweisen
        $("#contenti").load(pageToLoad);
        
        // wichtig! sonst wird der a-link im browser aufgerufen!
        return false;
    });
});'''

bringt aber auch nicht den gewünschten erfolg

[Sirius3]

Routen müssen absolut sein. Ich weiß nicht, wie Du das laden statischer Dateien organisiert hast, das mußt Du selbst am besten wissen. Aber Du mußt doch in Deinem Browser nachschauen können, ob alle URLs gefunden und geladen werden und ob irgendwo Javascript-Fehler auftauchen.
Mit raten was passiert, kommen wir hier alle nicht weiter, und der einzige, der Raten durch Untersuchen ersetzen kann, bist Du.

[DanJJo]

also ... laden statischer Datein läuft so

Code: Alles auswählen

@route("/static/<filepath:path>")
def server_static(filepath):
  return static_file(filepath, root="static/")

damit ist der Pfad gegeben...weiteres laden statischer files müsste damit ok sein.

beim aufrufen der Homepage läuft alles super scripte werden geladen und mit 200 oder 304 bestätigt. keine Fehlermeldung.

[DanJJo]

ok ich bin der Esel....hab die Jquery nochmals umgeschrieben und nun läufts...danke euch

Code sieht so aus

Code: Alles auswählen

$(document).ready(function()
{
    // allen links im div 'navigation' & 'content' eine click()-funktion zuweisen.
    // es wird auch auf alle links von der dynamisch nachgeladenen
    // seiten reagiert (solange die seiten in das content-div geladen werden)!   
    $('#loginwrapper a').bind("click",function(event)
    {
      event.preventDefault();
        // das link-ziel jeweils auslesen & zwischenspeichern
        var pageToLoad = $(this).attr("href");
        
        // dem div 'content' den inhalt der aufgerufenen seite zuweisen
        $('#contenti').load(pageToLoad);
        
        // wichtig! sonst wird der a-link im browser aufgerufen!
        return false;
    });
});