Ajax & Jquery - load content

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
zekia
Δημοσιεύσεις: 146
Εγγραφή: 04 Μάιος 2004 16:38
Τοποθεσία: thessaloniki

Ajax & Jquery - load content

Δημοσίευση από zekia » 29 Ιούλ 2009 15:13

Γειά σας,
χρησιμοποιώ το script που δίνεται στο παρακάτω tutorial:
http://yensdesign.com/2008/12/how-to-lo ... in-jquery/
και έχω επισυνάψει τον κώδικά του.
Επίσης το online demo βρίσκεται εδώ:
http://yensdesign.com/tutorials/contentajax/

Στο script αυτό φορτώνεται περιεχόμενο μέσα σε ένα div, μέσω ajax. Προσπαθώ να προσθέσω κάτι σε αυτό και χρειάζομαι βοήθεια γιατί δε βγάζω άκρη.

Αν ρίξετε μια ματιά στον κώδικα θα δείτε οτι το περιεχόμενο που φορτώνεται για το "Home" link του menu, βρίσκεται στην ίδια την parent σελίδα, ενώ το υπόλοιπο περιεχόμενο που φορτώνεται κάνοντας κλικ στα υπόλοιπα items του menu (News, Interviews, External), φορτώνονται απο εξωτερικά αρχεία html.

Αυτό που θέλω να κάνω είναι να προσθέσω ένα link στα external αρχεία που φορτώνονται. Ένα link πχ "Return to Home" το οποίο να φορτώνει το αντίστοιχο home περιεχόμενο.
Δυστυχώς δεν έχω καταλάβει πως ακριβώς θα επικοινωνήσει το περιεχόμενο που φορτώνεται απο εξωτερικά αρχεία με το περιεχόμενο του parent αρχείου (index.html).

Μπορείτε να με βοηθήσετε λίγο;;;
Συνημμένα
contentajax.zip
(15.83 KiB) Μεταφορτώθηκε 275 φορές

Άβαταρ μέλους
zekia
Δημοσιεύσεις: 146
Εγγραφή: 04 Μάιος 2004 16:38
Τοποθεσία: thessaloniki

Ajax & Jquery - load content

Δημοσίευση από zekia » 29 Ιούλ 2009 17:31

To καλύτερο πράγμα που σκέφτηκα να κάνω αλλά δυστυχώς χωρις επιτυχία ήταν να προσθέσω στον κώδικα τα παρακάτω:
sections.html
<div id="section_home">
<h2>Home</h2>
<p>
Lorem Ipsum is simply <a href="">dummy</a> text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<a href="#" id="back1">back</a>
</p>
</div>

<div id="section_news">
<h2>News</h2>
<p>
We have released our forums, <a href="#" id="back1">back</a>
</p>
</div>

<div id="section_interviews">
<h2>Interviews section</h2>
<p>
We have interviewed Victor Espigares, creator of <a href="http://www.visualizeus.com">visualizeus</a>! <a href="#" id="back1">back</a>
</p>
</div>

menu.js

$(document).ready(function(){
//References
var sections = $("#menu li");
var loading = $("#loading");
var content = $("#content");

//Manage click events
sections.click(function(){
//show the loading bar
showLoading();
//load selected section
switch(this.id){
case "home":
content.slideUp();
content.load("sections.html #section_home", hideLoading);
content.slideDown();
break;
case "news":
content.slideUp();
content.load("sections.html #section_news", hideLoading);
content.slideDown();
break;
case "interviews":
content.slideUp();
content.load("sections.html #section_interviews", hideLoading);
content.slideDown();
break;
case "external":
content.slideUp();
content.load("external.html", hideLoading);
content.slideDown();
break;
default:
//hide loading bar if there is no selected section
hideLoading();
break;
}
});

var back1 = $("#back1");
back1.click(function(){
showLoading();
content.slideUp();
content.load("sections.html #section_home", hideLoading);
content.slideDown();
});



//show loading bar
function showLoading(){
loading
.css({visibility:"visible"})
.css({opacity:"1"})
.css({display:"block"})
;
}
//hide loading bar
function hideLoading(){
loading.fadeTo(1000, 0);
};
});

Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8575
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

Ajax & Jquery - load content

Δημοσίευση από Basilakis » 30 Ιούλ 2009 10:50

Να πω την αλήθεια, δεν έχω καταλάβει τι θέλεις να κανεις, γιατί στο demo, δείχνει να κοινούνται όλα κανονικά...

Άβαταρ μέλους
greekbytes
WebDev Moderator
Δημοσιεύσεις: 2438
Εγγραφή: 15 Νοέμ 2002 15:42
Τοποθεσία: Αθήνα
Επικοινωνία:

Ajax & Jquery - load content

Δημοσίευση από greekbytes » 30 Ιούλ 2009 11:33

Στο υπάρχον παράδειγμά σου δοκίμασε να προσθέσεις το livequery plugin του jquery ( http://plugins.jquery.com/project/livequery ) και άλλαξε το

Κώδικας: Επιλογή όλων

back1.click&#40;function&#40;&#41;&#123; 
σε

Κώδικας: Επιλογή όλων

back1.livequery&#40;'click', function&#40;event&#41; &#123; 
Σχετικά με το livequery:
Live Query (formerly Behavior) utilizes the power of jQuery selectors by binding events or firing callbacks for matched elements auto-magically, even after the page has been loaded and the DOM updated.

Άβαταρ μέλους
zekia
Δημοσιεύσεις: 146
Εγγραφή: 04 Μάιος 2004 16:38
Τοποθεσία: thessaloniki

Ajax & Jquery - load content

Δημοσίευση από zekia » 06 Αύγ 2009 13:38

σας ευχαριστώ για τις απαντήσεις σας,
greekbytes θα το δοκιμάσω

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες