Post φόρμας χωρίς να γίνεται ανανέωση σελίδας

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

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

Απάντηση
Άβαταρ μέλους
dimos_mitel
Δημοσιεύσεις: 279
Εγγραφή: 07 Αύγ 2009 21:06
Επικοινωνία:

Post φόρμας χωρίς να γίνεται ανανέωση σελίδας

Δημοσίευση από dimos_mitel » 11 Ιουν 2012 21:11

Μοιάζει, απλά αντί για πίνακα που καταχώρησες από ένα όνομα θα εμφανίζονται από κάτω οι εγγραφές όπως είναι στο αρχείο που έχω στην πρώτη σελίδα. Αν δηλαδή γράψω στο search field ένα όνομα παίκτη να μου εμφανίσει ολόκληρη την εγγραφή και με το όνομα του και με τα υπόλοιπα στοιχεία όπως φαίνεται στην φόρμα. Η κάθε εγγραφή έχει το δικό της id και θέλω να εμφανίζεται η μια κάτω από την άλλη όπως και στην φόρμα.
miteletsis

Άβαταρ μέλους
dimos_mitel
Δημοσιεύσεις: 279
Εγγραφή: 07 Αύγ 2009 21:06
Επικοινωνία:

Post φόρμας χωρίς να γίνεται ανανέωση σελίδας

Δημοσίευση από dimos_mitel » 11 Ιουν 2012 21:13

στο var players = new Array ('karnezis', 'tzorvas', 'vintra', 'darlas', 'kante', 'stergos'); πώς θα βάλω μέσα ολόκληρη συνθήκη για να μπαίνει η κάθε εγγραφή μεσα?
miteletsis

Άβαταρ μέλους
Christianago
Δημοσιεύσεις: 332
Εγγραφή: 12 Νοέμ 2009 13:36

Post φόρμας χωρίς να γίνεται ανανέωση σελίδας

Δημοσίευση από Christianago » 11 Ιουν 2012 21:30

Ναι εφτιαξα το array χαριν της ασκησης γιατι δεν εχω τη ΒΔ σου. Εσυ μπορεις να φορτωσεις τις εγγραφες της ΒΔ στη σελιδα οπως νομιζεις.
Τωρα για να ειναι η μια εγγραφη κατω απο την αλλη μπορεις να φτιαξεις ενα html table και σε καθε γραμμη να αλλαζει κ η εγγραφη.
Για τα υπολοιπα στοιχεια καθε εγγραφης μπορεις να δημιουργησεις ενα κελι διπλα σε καθε εγγραφη. Εννοειται κι αυτα θα εχουν αναλογο id με τις εγγραφες.
Τωρα το μονο tricky ειναι να "ανεβαινουν πανω" οι εγγραφες που βρισκει το searchbox εφοσον μιλαμε για πολλες εγγραφες για να μη σκρολαρει
ο χρηστης ποιες εγγραφες εμφανιζονται καθε φορα.
στο var players = new Array ('karnezis', 'tzorvas', 'vintra', 'darlas', 'kante', 'stergos'); πώς θα βάλω μέσα ολόκληρη συνθήκη για να μπαίνει η κάθε εγγραφή μεσα?
Το array ξεχασε το, το εβαλα για να σου δειξω τα αποτελεσματα απλα.

Άβαταρ μέλους
dimos_mitel
Δημοσιεύσεις: 279
Εγγραφή: 07 Αύγ 2009 21:06
Επικοινωνία:

Post φόρμας χωρίς να γίνεται ανανέωση σελίδας

Δημοσίευση από dimos_mitel » 11 Ιουν 2012 21:37

Απλά με μπερδεύει το πώς θα ενσωματώσω την php μέσα στην javascript. αντί του πίνακα την while και τις εγγραφές όπως τις έχω στην σελίδα μου.
miteletsis

Άβαταρ μέλους
dimos_mitel
Δημοσιεύσεις: 279
Εγγραφή: 07 Αύγ 2009 21:06
Επικοινωνία:

Post φόρμας χωρίς να γίνεται ανανέωση σελίδας

Δημοσίευση από dimos_mitel » 11 Ιουν 2012 21:45

Πάντως είναι σίγουρα στην λογική. Το κάθε πεδίο του πίνακα στην ουσία θα είναι μια ολόκληρη εγγραφή, απλά το επόμενο πεδίο δηλαδή η επόμενη εγγραφή θα πηγαίνει ακριβώς από κάτω.
miteletsis

Άβαταρ μέλους
Christianago
Δημοσιεύσεις: 332
Εγγραφή: 12 Νοέμ 2009 13:36

Post φόρμας χωρίς να γίνεται ανανέωση σελίδας

Δημοσίευση από Christianago » 11 Ιουν 2012 21:56

Δε θα κανεις καμια ενσωματωση. Θα τρεξεις ενα απλο βαρετο scriptaki που θα φορτωνει τις εγγραφες απο τη ΒΔ σου
σε html table μεσα σε μια λουπα, δινοντας σε καθε κελι ενα id (το οποιο μαλλον θα ειναι μοναδικο και θα περιλαμβανει και το μετρητη της λουπας).
Απο εκει κι υστερα τρεχεις τη συναρτηση στη jquery και προσαρμοζεις το script ωστε να ειναι ακριβως οπως το θες.

Άβαταρ μέλους
dimos_mitel
Δημοσιεύσεις: 279
Εγγραφή: 07 Αύγ 2009 21:06
Επικοινωνία:

Post φόρμας χωρίς να γίνεται ανανέωση σελίδας

Δημοσίευση από dimos_mitel » 11 Ιουν 2012 22:03

Άμα δεις την σελίδα μου τις εγγραφές που παίρνω από την βάση μου, κάθε έγγραφή έχει το δικό της id το οποία μάλιστα αποθηκεύετε και σε ένα hidden button που χρησιμοποιώ την τιμή του πάνω στα ερωτήματα. Τα πεδία μου έχουν όλα id, το καθένα το δικό του. Οπότε αυτό που μένει είναι λογικά μια συνάρτηση jquery την οποία πρέπει να την προσαρμόσω μέσα στο κώδικά της javascript αντί του array που θα παίρνει τις εγγραφές. Καλά κατάλαβα;
miteletsis

Άβαταρ μέλους
Christianago
Δημοσιεύσεις: 332
Εγγραφή: 12 Νοέμ 2009 13:36

Post φόρμας χωρίς να γίνεται ανανέωση σελίδας

Δημοσίευση από Christianago » 11 Ιουν 2012 22:12

Οχι δεν εννοουσα αυτο. Τον κωδικα της 1ης σελιδας δεν τον κοιταξα καθολου γιατι οπως ειδαμε μας δημιουργησε προβληματα προχθες.
Θα σου ελεγα να φτιαξεις ενα καινουριο php αρχειο που θα ειναι μαλιστα και πιο minimal σε σχεση με το προηγουμενο
στο οποιο θα εχεις απλα μερικα select queries.
Για update, delete queries θα δουμε αλλα αρχικα κανε αυτο.
Ο κωδικας στη javascript ειναι ετοιμος, ουσιαστικα θα αλλαξεις τις γραμμες που χειριζεσαι τα id των εγγραφων.

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

($('#playbox'+i).val()

Άβαταρ μέλους
dimos_mitel
Δημοσιεύσεις: 279
Εγγραφή: 07 Αύγ 2009 21:06
Επικοινωνία:

Post φόρμας χωρίς να γίνεται ανανέωση σελίδας

Δημοσίευση από dimos_mitel » 11 Ιουν 2012 22:14

Ο κώδικας της πρώτης σελίδας δουλεύει μια χαρά. Κάνει αυτό που θέλω. Είναι μια σελίδα διαχείρισης όπου μπορώ να πραγματοποιήσω update, delete και add στην ίδια σελίδα. Το ίδιο ακριβώς θέλω να κάνω και τώρα με την διαφορά του πεδίου αναζήτησης.
miteletsis

Άβαταρ μέλους
Christianago
Δημοσιεύσεις: 332
Εγγραφή: 12 Νοέμ 2009 13:36

Post φόρμας χωρίς να γίνεται ανανέωση σελίδας

Δημοσίευση από Christianago » 11 Ιουν 2012 22:19

Στον κωδικα σου δεν εχεις θεσει μοναδικο αναγνωριστικο. Οταν το κανεις, θα πρεπει να προσαρμοσεις τον κωδικα javascript ετσι ωστε να συμφωνει με το php κωδικα.
Επισης θυμησου να βαλεις το javascript κωδικα σε διαφορετικη σελιδα!
Τελευταία επεξεργασία από το μέλος Christianago την 11 Ιουν 2012 22:20, έχει επεξεργασθεί 1 φορά συνολικά.

Άβαταρ μέλους
dimos_mitel
Δημοσιεύσεις: 279
Εγγραφή: 07 Αύγ 2009 21:06
Επικοινωνία:

Post φόρμας χωρίς να γίνεται ανανέωση σελίδας

Δημοσίευση από dimos_mitel » 11 Ιουν 2012 22:19

Επειδή πρέπει να φύγω. Θα φτιάξω αργότερα τον κώδικα μόνο με select των εγγραφών και θα τον ανεβάσω να το δούμε. Ευχαριστώ πολύ. Μιλάμε!
miteletsis

Άβαταρ μέλους
dimos_mitel
Δημοσιεύσεις: 279
Εγγραφή: 07 Αύγ 2009 21:06
Επικοινωνία:

Post φόρμας χωρίς να γίνεται ανανέωση σελίδας

Δημοσίευση από dimos_mitel » 12 Ιουν 2012 09:45

Καλημέρα. Λοιπόν. Έφτιαξα ένα αρχείο για τον php κώδικα που απλά εμφανίζει τις εγγραφές μέσα στα πεδία. Έβαλα και ένα hidden button που χρησιμεύει στο να χρησιμοποιώ το id της κάθε εγγραφής. Επίσης έβαλα καλού κακού και τα button διαγραφής και ενημέρωσης έτσι ώστε να έχουμε μια άποψη πως θα είναι η εγγραφές. Τα πεδία της προσθήκης δεν τα έβαλα στον συγκεκριμένο κώδικα:

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

<html xmlns="http&#58;//www.w3.org/1999/xhtml">
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<TITLE>Λίστα Παικτών</TITLE>
</HEAD>
<body bgcolor="#1F7797">

<?php

mysql_query&#40;"SET NAMES 'utf8'"&#41;;
$con = mysql_connect&#40;"localhost","root",""&#41;;
if &#40;!$con&#41;&#123;
die&#40;"Can not connect&#58; " . mysql_error&#40;&#41;&#41;;
&#125;
mysql_select_db&#40;"fillo_agwna",$con&#41;;
mysql_query&#40;"SET NAMES 'utf8'"&#41;;


$sql = "SELECT * FROM stoixeia_paiktwn order by ar_deltiou";
$myData = mysql_query&#40;$sql,$con&#41;;
echo "<table border=1>
<tr>
<th>Αριθμός Δελτίου</th>
<th>Όνομα</th>
<th>Επώνυμο</th>
<th>Αριθμός Φανέλας</th>
<th>Ημερομηνία Γέννησης</th>
</tr>";
while&#40;$row = mysql_fetch_array&#40;$myData&#41;&#41;&#123;
echo '<form action=superuser_panel.php method=POST>';
echo "<tr>";
echo '<td>' . '<input type="text" name="ar_deltiou" readonly=readonly value="' . $row&#91;'ar_deltiou'&#93; . '" </td>';
echo '<td>' . '<input type="text" name="onoma" value="' . $row&#91;'onoma'&#93; . '" </td>';
echo '<td>' . '<input type="text" name="epwnimo" value="' . $row&#91;'epwnimo'&#93; . '" </td>';
echo '<td>' . '<input type="text" name="ar_fanelas" value="' . $row&#91;'ar_fanelas'&#93; . '" </td>';
echo '<td>' . '<input type="text" name="imer_gennisis" value="' . $row&#91;'imer_gennisis'&#93; . '" </td>';
echo '<td>' . '<input type="hidden" name="hidden" value="' . $row&#91;'ar_deltiou'&#93; . '" </td>';
echo "<td>" . "<input type=submit name='x' value='update'" . " </td>";
echo "<td>" . "<input type=submit name='x' value='delete'" . " </td>";
echo "</tr>";
echo "</form>";
&#125;

echo "</table>";
mysql_close&#40;$con&#41;;

?>

</body>
</html> 
Τον κώδικα javascript τον έβαλα σε ξεχωριστό αρχείο τύπου javascript:

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

<html><head>
<script type="text/javascript" src="http&#58;//code.jquery.com/jquery-latest.js"></script>
<script language="javascript" type="text/javascript">

var players = new Array &#40;'karnezis', 'tzorvas', 'vintra', 'darlas', 'kante', 'stergos'&#41;;

var sValue = "";

$&#40;document&#41;.ready&#40;function&#40;&#41;&#123;

$&#40;'#searchbox'&#41;.bind&#40;'keypress', function&#40;e&#41; &#123; searchme&#40;e.which&#41;; &#125;&#41;;
$&#40;"#Reset"&#41;.click&#40; function&#40;&#41; &#123; $&#40;'#showme'&#41;.val&#40;""&#41;; $&#40;'#searchbox'&#41;.val&#40;""&#41;; for &#40;var i = 0 ; i < 8; i++&#41;&#123; $&#40;'#playbox'+i&#41;.show&#40;&#41;; &#125; &#125;&#41;;

$&#40;'body'&#41;.append&#40;"<div align=center id=play></div>"&#41;;

for &#40;var i = 0; i < players.length; i++&#41;&#123;
    $&#40;'#play'&#41;.append&#40;"<input type=text id='playbox"+i+"' value='"+players&#91;i&#93;+"' />"&#41;;
&#125;

&#125;&#41;;

function searchme&#40;whichKey&#41;&#123;
   
var letter = String.fromCharCode&#40;whichKey&#41;;

sValue = $&#40;'#searchbox'&#41;.val&#40;&#41; + letter;

$&#40;'#showme'&#41;.val&#40;sValue&#41;;

for &#40;var i = 0; i < players.length; i++&#41;&#123;
    $&#40;'#playbox'+i&#41;.hide&#40;&#41;;
&#125;

for &#40;var i = 0; i < players.length; i++&#41;&#123;
    if &#40;$&#40;'#playbox'+i&#41;.val&#40;&#41;.indexOf&#40;sValue&#41; >=0 &#41;
    $&#40;'#playbox'+i&#41;.show&#40;&#41;;
    &#125;
   
&#125;

</script>

</head>
<body>
<div id="searchDIV" align="center"> <input id="searchbox" style='border-top&#58;none;border-bottom&#58;groove green;' type="text" />
<input type="button" id="Reset" />
<br /> <br /></div>

<input type="text" id="showme" />
</body>
</html>
miteletsis

Απάντηση

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

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

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