Μη αυτόματη ανανέωση σελίδας

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

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

Απάντηση
Pavlos1316
Δημοσιεύσεις: 44
Εγγραφή: 30 Απρ 2011 02:11

Μη αυτόματη ανανέωση σελίδας

Δημοσίευση από Pavlos1316 » 30 Απρ 2011 02:25

Το index.php:

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

<body>
 <div id="header">
 <?php include&#40;'header.php'&#41;; ?>
 </div>
 <div id="content">
 <?php
         $page = $_GET&#91;'page'&#93;;
         if &#40;!empty&#40;$page&#41;&#41; &#123;
                 $page .= '.php';
                 include&#40;$page&#41;;
         &#125;
         else &#123;
                 include&#40;'arxiki.php'&#41;;
         &#125;
 ?>
 </div>
 <div id="footer">
 <?php include&#40;'footer.php'&#41;; ?>
 </div>
Ο σύνδεσμος (που βρίσκεται στην <div id=header>):

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

<a href="index.php?page=body" class="difflink">Body</a>
Χρησιμοποιώ τον πιο πάνω κώδικα για να ανοίγει o σύνδεσμος BODY μέσα στο <div id=content>, ΑΛΛΑ όταν γίνεται αυτό, ταυτόχρονα γίνεται και ανανέωση ολόκληρης της σελίδας. Πώς μπορώ να το σταματήσω αυτό και να γίνεται μόνο ανανέωση της <div id=content>?

Ξέρω ότι η απάντηση θα είναι AJAX, αλλά δυστυχώς δεν έχω ιδέα πως να το κάνω.

Ευχαριστώ για οποιαδήποτε βοήθεια.

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

Μη αυτόματη ανανέωση σελίδας

Δημοσίευση από dimsis » 30 Απρ 2011 11:19

http://api.jquery.com/load/
αλλά δεν είναι και πολύ ασφαλές αυτό που πας να κάνεις.

στα τυφλά (δεν το έχω δοκιμάσει) θέλεις κάτι τέτοιο πάνω πάνω ανάμεσα στο <head></head> βάλε:

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

<script src="http&#58;//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

<script>
$&#40;document&#41;.ready&#40;function&#40;&#41;&#123;
  $&#40;'.difflink'&#41;.click&#40;function&#40;&#41;&#123;
    $&#40;'#content'&#41;.load&#40;<?php $_GET&#91;'page'&#93;?>&#41;;
  &#125;&#41;;
&#125;&#41;;
</script>

Pavlos1316
Δημοσιεύσεις: 44
Εγγραφή: 30 Απρ 2011 02:11

Μη αυτόματη ανανέωση σελίδας

Δημοσίευση από Pavlos1316 » 30 Απρ 2011 11:54

Ευχαριστώ, θα το δοκιμάσω.

Όσο για την ασφάλεια, αν εννοείς το $_GET[page]
έχω προσθέσει array με όλες τις επιτρεπόμενες σελίδες.

Αν εννοείς κάτι άλλο, πες μου το να δω πως να το διορθώσω :)

Pavlos1316
Δημοσιεύσεις: 44
Εγγραφή: 30 Απρ 2011 02:11

Μη αυτόματη ανανέωση σελίδας

Δημοσίευση από Pavlos1316 » 30 Απρ 2011 12:56

Χμ... Συνεχίζει να φορτώνει ολόκληρη τη σελίδα... Πρέπει κάπως να συνδυάσω τον κώδικα που μου δωσες, με τον κώδικα που ήδη έχω...

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6235
Εγγραφή: 30 Νοέμ 2004 03:09

Μη αυτόματη ανανέωση σελίδας

Δημοσίευση από fafos » 30 Απρ 2011 19:04

exoume pei oti den einai toso kalh idea na kaleis href me thn ajax..

1. feiaxe mia nea selida php (p.x. loupa.php) opou ekei tha trexeis thn routina sou:

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

 <?php
         $page = $_GET&#91;'page'&#93;;
         if &#40;!empty&#40;$page&#41;&#41; &#123;
                 $page .= '.php';
                 include&#40;$page&#41;;
         &#125;
         else &#123;
                 include&#40;'arxiki.php'&#41;;
         &#125;
 ?> 

2. katargeis ta href sta links kai tous dineis id iso me to GET pou thes:

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

<div id='links'>
<a id="body">Body</a> <a id="test">Test</a>
</div>
(ta vazo mesa se ena div me id=links gia na mhn mperdeutei me alla <a> ths selidas)

3. to div me id=content to afhneis adeio h kaneis include kapoia prokathorismenh selida:

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

<div id="content"></div>
h

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

<div id="content"><? include 'arxiki.php';?></div>
4. vazeis auto to script:

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

<script src="http&#58;//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

<script>
$&#40;document&#41;.ready&#40;function&#40;&#41;&#123;
  $&#40;'#links > a'&#41;.click&#40;function&#40;&#41;&#123;
$&#40;"#content"&#41;.empty&#40;&#41;;//katharizei ta periexomena tou div me id=content

var page = $&#40;this&#41;.attr&#40;"id"&#41;;//pairnei to periexomeno tou id pou klikares
    $&#40;'#content'&#41;.load&#40;"loupa.php?page="+ page&#41;;//stelnei to periexomeno tou id sthn loupa.php kai gyrna to apotelesma sto div me id=content
  &#125;&#41;;
&#125;&#41;;
</script> 
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Pavlos1316
Δημοσιεύσεις: 44
Εγγραφή: 30 Απρ 2011 02:11

Μη αυτόματη ανανέωση σελίδας

Δημοσίευση από Pavlos1316 » 02 Μάιος 2011 23:26

Ευχαριστώ,

Θα δοκιμάσω το πιο πάνω και θα σας πω... το αποτέλεσμα :)

Συγγνώμη για τα αραιά post αλλά έχω τρεχάματα αυτές τις μέρες.

Pavlos1316
Δημοσιεύσεις: 44
Εγγραφή: 30 Απρ 2011 02:11

Μη αυτόματη ανανέωση σελίδας

Δημοσίευση από Pavlos1316 » 03 Μάιος 2011 12:30

Καλημέρα,

Δοκίμασα το πιο πάνω, ΑΛΛΑ

1ο.. τα links έχουν χάσει το class style (formating) τους και γίνονται αόρατα (η μαύρα, και λόγω του ότι έχω κι εγώ μαύρο background δε φαίνονται) - αυτό έχω στο style.css

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

a&#58;link&#123;
  font-family&#58; gabriola, verdana; font-size&#58; 26px; color&#58; #e6e8fa; text-decoration&#58; none; vertical-align&#58; middle;
  &#125;
 a&#58;visited&#123;
  font-family&#58; gabriola, verdana; font-size&#58; 26px; color&#58; #e6e8fa; text-decoration&#58; none; vertical-align&#58; middle;
 &#125;
 a&#58;hover&#123;
  color&#58; #cfb52b; text-decoration&#58; none; vertical-align&#58; middle;
 &#125;
 a&#58;active&#123;
  font-family&#58; gabriola, verdana; font-size&#58; 26px; color&#58; #e6e8fa; text-decoration&#58; none; vertical-align&#58; middle; border&#58; none; outline&#58; none;
 &#125;
 a&#58;focus&#123;
  border&#58; none; outline&#58; none;
 &#125;
 a.difflink&#58;link&#123;
  font-family&#58; gabriola, verdana; font-size&#58; 26px; color&#58; #cfb52b; text-decoration&#58; none; vertical-align&#58; middle;
 &#125;
 a.difflink&#58;visited&#123;
  font-family&#58; gabriola, verdana; font-size&#58; 26px; color&#58; #cfb52b; text-decoration&#58; none; vertical-align&#58; middle;
 &#125;
 a.difflink&#58;hover&#123;
  color&#58; #e6e8fa; text-decoration&#58; none; vertical-align&#58; middle;
 &#125;
 a.difflink&#58;active&#123;
  font-family&#58; gabriola, verdana; font-size&#58; 26px; color&#58; #cfb52b; text-decoration&#58; none; vertical-align&#58; middle; border&#58; none; outline&#58; none;
 &#125;
και ΚΥΡΙΟΤΕΡΟ, πλέον δεν "είναι" links, δηλ, ενώ είναι clickable, δεν σε στέλνουν πουθενά.

Ευχαριστώ.

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6235
Εγγραφή: 30 Νοέμ 2004 03:09

Μη αυτόματη ανανέωση σελίδας

Δημοσίευση από fafos » 03 Μάιος 2011 13:38

den einai pleon a:link... einai sketa a... prepei na prostheseis style kai gia sketo a:

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

a &#123;
  font-family&#58; gabriola, verdana; font-size&#58; 26px; color&#58; #e6e8fa; text-decoration&#58; none; vertical-align&#58; middle;
  &#125;

 .difflink a&#123;
  font-family&#58; gabriola, verdana; font-size&#58; 26px; color&#58; #cfb52b; text-decoration&#58; none; vertical-align&#58; middle;
 &#125;

pou prepei na pane? h ajax tha exeis h apla links pou tha se phgainoun se nea selida..
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Pavlos1316
Δημοσιεύσεις: 44
Εγγραφή: 30 Απρ 2011 02:11

Μη αυτόματη ανανέωση σελίδας

Δημοσίευση από Pavlos1316 » 03 Μάιος 2011 14:05

pou prepei na pane? h ajax tha exeis h apla links pou tha se phgainoun se nea selida..
Εννοώ δεν ανανεώνουν την div#content με το περιεχόμενο του <a id="body">Body</a>

Και επιπλέον, αν τώρα το a:link θα μείνει σκέτο a{} στο style.css, πώς γράφω ας πούμε το a:visited{} ή το a.difflink:active{} ????

Ευχαριστώ

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6235
Εγγραφή: 30 Νοέμ 2004 03:09

Μη αυτόματη ανανέωση σελίδας

Δημοσίευση από fafos » 03 Μάιος 2011 14:29

an den sto ananeonei shmainei oti to php script pou kanei include den douleuei sosta h to ajax den douleuei sosta..

to active a mporeis na to doseis me style meso tou ajax:


<script>
$(document).ready(function(){
$('#links > a').click(function(){

$('#links > a').css("color","#e6e8fa");//epanafereis to arxiko xroma

$("#content").empty();//katharizei ta periexomena tou div me id=content

var page = $(this).attr("id");//pairnei to periexomeno tou id pou klikares

$(this).css("color","#ff0000");//dineis ena xroma sto a pou pathses (active)

$('#content').load("loupa.php?page="+ page);//stelnei to periexomeno tou id sthn loupa.php kai gyrna to apotelesma sto div me id=content
});
});
</script>
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Pavlos1316
Δημοσιεύσεις: 44
Εγγραφή: 30 Απρ 2011 02:11

Μη αυτόματη ανανέωση σελίδας

Δημοσίευση από Pavlos1316 » 03 Μάιος 2011 15:02

Μια στιγμή, να βάλω τα πράγματα σε μια σειρά, γιατί είμαι εντελώς άπειρος στην ajax και επειδή παράλληλα κάνω και search στο google και βλέπω διάφορες εκδοχές θα ρωτήσω τα βασικά για να τα βάλω σε μια σειρά και να μαι σίγουρος ότι δεν κάνω καμιά μ@....

1..

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

<script src="http&#58;//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
και

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

<script> 
$&#40;document&#41;.ready&#40;function&#40;&#41;&#123; 
$&#40;'#links > a'&#41;.click&#40;function&#40;&#41;&#123; 

$&#40;'#links > a'&#41;.css&#40;"color","#e6e8fa"&#41;;//epanafereis to arxiko xroma 

$&#40;"#content"&#41;.empty&#40;&#41;;//katharizei ta periexomena tou div me id=content 

var page = $&#40;this&#41;.attr&#40;"id"&#41;;//pairnei to periexomeno tou id pou klikares 

$&#40;this&#41;.css&#40;"color","#ff0000"&#41;;//dineis ena xroma sto a pou pathses &#40;active&#41; 

$&#40;'#content'&#41;.load&#40;"loupa.php?page="+ page&#41;;//stelnei to periexomeno tou id sthn loupa.php kai gyrna to apotelesma sto div me id=content
 &#125;&#41;; 
&#125;&#41;; 
</script>
α) Αυτά πάνε στο <head> ή στο <body>?
β) Επίσης ο δεύτερος κώδικας, πάει στο index.php ή στο header.php όπου περιέχονται και τα links μου?

2..

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

$&#40;'#links > a'&#41;.css&#40;"color","#e6e8fa"&#41;;//epanafereis to arxiko xroma
Αντί αυτού υπάρχει τρόπος να προσθέσω τα styles των links στην .css και να τις παίρνει απ' εκεί η ajax ή μόνο με αυτό τον τρόπο γίνεται?

Ευχαριστώ...

Υπάρχει κάποιο site το ποίο να τα εξηγά σωστά αυτά?

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6235
Εγγραφή: 30 Νοέμ 2004 03:09

Μη αυτόματη ανανέωση σελίδας

Δημοσίευση από fafos » 03 Μάιος 2011 15:31

Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Pavlos1316
Δημοσιεύσεις: 44
Εγγραφή: 30 Απρ 2011 02:11

Μη αυτόματη ανανέωση σελίδας

Δημοσίευση από Pavlos1316 » 04 Μάιος 2011 10:30

Λοιπόν... Άρχισα να τα ξεμπερδεύω
Αυτό το βαλα στο <body> του index.php (καθώς και το src=www.googleapis.... στο <head>):

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

<script>
$&#40;document&#41;.ready&#40;function&#40;&#41;&#123;
  $&#40;'#links > a'&#41;.addClass&#40;"headlink"&#41;;//epanafereis to arxiko xroma 
  
  $&#40;'#links > a'&#41;.click&#40;function&#40;&#41;&#123;
  
  $&#40;"#content"&#41;.empty&#40;&#41;;//katharizei ta periexomena tou div me id=content

  var page = $&#40;this&#41;.attr&#40;"id"&#41;;//pairnei to periexomeno tou id pou klikares
  
  $&#40;'#content'&#41;.load&#40;"loopa.php?page="+ page&#41;;//stelnei to periexomeno tou id sthn loupa.php kai gyrna to apotelesma sto div me id=content
   &#125;&#41;;   
&#125;&#41;;
</script>
Αυτό είναι το loop.php:

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

<?php
	$page = $_GET&#91;'page'&#93;;
	$pages = array&#40;'arxiki', 'body', 'face'&#41;;
	if &#40;!empty&#40;$page&#41;&#41; &#123;
	 if&#40;in_array&#40;$page,$pages&#41;&#41; &#123;
		$page .= '.php';
		include&#40;$page&#41;;
	&#125;
	&#125;
	else &#123;
		include&#40;'arxiki.php'&#41;;
	&#125;
?>
Τώρα, το ότι δε φορτώνει τη σελίδα οφείλεται μήπως στο ότι και στα 2 script γίνεται λόγος για το ίδιο "object" (εικασίες κάνω, δεν ξέρω αν έχει σχέση)? πχ var page & $_GET['page']

και 2ο (επειδή πρώτη φορά δε χρησιμοποιώ το href για links), όταν γράφουμε <a hef="..." ></a> όταν πάμε να πατήσουμε στο link βγάζει το κλασσικό χέρι για να πατήσεις.

Με το <a id=""></a> αντί για το χερι, βγάζει μόνο τον κέρσορα που βλέπουμε π.χ. στη word.
Αυτό είναι φυσιολογικό ή έπρεπε να συμπεριφέρεται όπως ένα κανονικό link?

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6235
Εγγραφή: 30 Νοέμ 2004 03:09

Μη αυτόματη ανανέωση σελίδας

Δημοσίευση από fafos » 04 Μάιος 2011 17:43

kammia sxesh to var me to get.. mallon ftaiei h routina pou trexeis sto php arxeio..

to xeraki (pointer) to vgazei sta href.. prepei na doseis style sta a pou einai mesa ekei: cursor:pointer;
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Pavlos1316
Δημοσιεύσεις: 44
Εγγραφή: 30 Απρ 2011 02:11

Μη αυτόματη ανανέωση σελίδας

Δημοσίευση από Pavlos1316 » 04 Μάιος 2011 18:15

Εντάξει... Για τον cursor θα το βρώ... (ελπίζω :)) Τώρα όσο για το σψριπτ μου, ξέρω ότι δουλεύει ή τουλάχιστον δούλευε όσο βρισκόταν στο index.php...

αααα.... να δοκιμάσω να το κάνω recuire_once sto index mou?

(θα το κάνω μέχρι να μου απαντήσεις, απλά αν έχεις κάποια άλλη ιδέα αν δεν δουλέψει....)

Ευχαριστώ

Απάντηση

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

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

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