gmail και επισύναψη αρχείου

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

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

Απάντηση
Άβαταρ μέλους
iffor
Δημοσιεύσεις: 778
Εγγραφή: 14 Μάιος 2005 01:19
Τοποθεσία: Παράδεισος
Επικοινωνία:

gmail και επισύναψη αρχείου

Δημοσίευση από iffor » 13 Οκτ 2005 17:39

hello...!!!
Θα μπορούσε κάποιος να με καθοδηγήση στο πώς μπορούμε να πετύχουμε την εμφάνιση ενός tag input στην φόρμα μας, μετά από κλικ ενός link?

Παράδειγμα είναι το πώς εμφανίζει το input file το gmail, αφού πατήσεις το link που γράφει 'επισύναψη'.

Γίνεται επίσης με το πάτημα ενός link να εμφανίσεις στην θέση κάποιου element της φόρμας ένα άλλο element?

Χίλια ευχαριστώ...!!!

Άβαταρ μέλους
iffor
Δημοσιεύσεις: 778
Εγγραφή: 14 Μάιος 2005 01:19
Τοποθεσία: Παράδεισος
Επικοινωνία:

gmail και επισύναψη αρχείου

Δημοσίευση από iffor » 13 Οκτ 2005 21:16

χμμμ....
όσο αναφορά το πρώτο σκέλος ( μίμιση του 'επισυναψη αρχειου' του gmail )
βρήκα το πολύ χρήσιμο link.
Αξίζει τον κόπο να του ρίξετε μια ματιά...!!!!

Ωστόσο για το δεύτερο σκέλος χρειάζομαι ακόμη την βοήθειά σας :wink:
Είμαι πολύ καινούριος ακόμη στην js...

Άβαταρ μέλους
iffor
Δημοσιεύσεις: 778
Εγγραφή: 14 Μάιος 2005 01:19
Τοποθεσία: Παράδεισος
Επικοινωνία:

gmail και επισύναψη αρχείου

Δημοσίευση από iffor » 14 Οκτ 2005 10:45

...και προσπαθόντας μάτεα για να δοκιμάσω πώς θα γίνει αυτή η αλλαγή
(αναφέρομαι στο δεύτερο σκέλος) έφτιαξα (μάλλον κατέστρεψα) τον παρακάτω κώδικα.

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

<html>
<head>
<title>test me</title>
<script language="JavaScript" type="text/javascript">
function change&#40;&#41; &#123;

if&#40;document.getElementById&#40;"ch_text"&#41;&#41;
    var oldInput=document.getElementById&#40;"ch_text"&#41;
if&#40;document.getElementById&#40;"ch_file"&#41;&#41;
    var oldInput=document.getElementById&#40;"ch_file"&#41;
	
var check=oldInput.id;
    document.getElementById&#40;'perioxi'&#41;.removeChild&#40;oldInput&#41;;

if&#40;check=="ch_text"&#41; &#123;

var divObj = document.createElement&#40;'DIV'&#41;;
    divObj.id = 'ch_file';
       
var newInput = document.createElement&#40;'<input type="file" name="myfile">'&#41;;
    divObj.appendChild&#40;newInput&#41;;
	
	document.getElementById&#40;'perioxi'&#41;.appendChild&#40;divObj&#41;;

&#125;
	
if&#40;check=="ch_file"&#41; &#123;

var divObj = document.createElement&#40;'DIV'&#41;;
    divObj.id = 'ch_text';
       
var newInput = document.createElement&#40;'<input type="text" name="mytext">'&#41;;
    divObj.appendChild&#40;newInput&#41;;
	
	document.getElementById&#40;'perioxi'&#41;.appendChild&#40;divObj&#41;;

&#125;
	
	
&#125;

</script>
</head>
<body>
<form>

<div id="perioxi">
<div id="ch_text"><input type="text" name="mytext"></DIV>
</div><a href="javascript&#58;change&#40;&#41;">change</a>
</form>
</body>
</html>
Το παραπάνω μου τρέχει κανονικά σε ΙΕ και σε FF αλλά όχι σε όλους και δεν ξέρω το γιατί... Τον Opera δεν τον έχω δοκιμάσει ούτε σε Mac browsers...
Κάποια ιδέα για βελτιοποίηση του παραπάνου?!
Thanx :D

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

gmail και επισύναψη αρχείου

Δημοσίευση από skeftomilos » 15 Οκτ 2005 04:02

Δίνω ένα πιο απλό παράδειγμα:

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

<html>
  <head>
    <title>Text-To-File</title>
    <script type="text/javascript">
      window.onload = function&#40;&#41; &#123;
        document.getElementById&#40;'button1'&#41;.onclick = function&#40;&#41; &#123;
          var text1 = document.getElementById&#40;'text1'&#41;
          var file1 = document.createElement&#40;'input'&#41;
          file1.type = 'file'
          file1.id = 'file1'
          text1.parentNode.replaceChild&#40;file1, text1&#41;
          document.getElementById&#40;'button1'&#41;.style.display = 'none'
        &#125;
      &#125;
    </script>
  </head>
  <body>
    <h2>Text-To-File</h2>
    <form>
      <input type="text" id="text1"><br>
      <input type="button" id="button1" value="Replace">
    </form>
  </body>
</html>
Το στοιχείο text1 αντικαθίσταται με ένα καινούργιο με id="file1". Μετά κρύβω το κουμπί γιατί αν ξαναπατηθεί δε θα βρεθεί το text1 και θα συμβεί σφάλμα. Τώρα που το σκέφτομαι θα μπορούσε να γίνει και διαφορετικά. Να υπάρχουν εξ αρχής και τα δύο elements και το ένα από τα δύο να είναι κρυμμένο με display:none. Πιο απλό να αλλαχτεί η visibility ενός στοιχείου παρά η δημιουργία νέου, έτσι δεν είναι; :)
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
iffor
Δημοσιεύσεις: 778
Εγγραφή: 14 Μάιος 2005 01:19
Τοποθεσία: Παράδεισος
Επικοινωνία:

gmail και επισύναψη αρχείου

Δημοσίευση από iffor » 15 Οκτ 2005 22:01

Συμφωνώ με την ιδέα να υπάρχουν ήδη τα elements και να αλλάζουμε μόνο
το style της visibility...!!!!
Απλός είχα ένα μικρό πρόβλημα με την εξής τεχνική...
Παρόλου που δεν φαίνεται το element, οστόσο υπάρχει και ο χώρος που καταλαμβάνει φαίνεται στον browser...!!!
Δεν ξέρω αν το λέω σωστά... :-?
Για αυτό και προτίμησα να διαγράφω το element και να δημιουργώ ένα άλλο στην θέση του!!!
Πάντος αν θέλω να δημιουργήσω ένα άλλο elemetn πχ ένα select θα χρειαστεί κάτι περισσότερο απ τους κώδικες που δώσαμε μιας και έχουμε να κάνουμε δημιουργία σύνθετου element...

Ευχαριστώ για την απάντηση...!!!! :D :D :D

Άβαταρ μέλους
shadow
Script Master
Δημοσιεύσεις: 606
Εγγραφή: 14 Απρ 2005 18:30

gmail και επισύναψη αρχείου

Δημοσίευση από shadow » 15 Οκτ 2005 22:47

iffor έγραψε:Συμφωνώ με την ιδέα να υπάρχουν ήδη τα elements και να αλλάζουμε μόνο
το style της visibility...!!!!
Απλός είχα ένα μικρό πρόβλημα με την εξής τεχνική...
Παρόλου που δεν φαίνεται το element, οστόσο υπάρχει και ο χώρος που καταλαμβάνει φαίνεται στον browser...!!!
Αναφέρεσαι στην visibility ιδιότητα , και με αυτή την ιδιότητα όντως συμβαίνει αυτό που λες, εφόσον με το visibility:hidden , ναι μεν δεν φαίνεται το περιεχόμενο στην σελίδα αλλά το περιεχόμενο συνεχίζει να υπάρχει και να καταλαμβανει χώρο στη σελίδα σου. Αντιθέτως η display (display:none) ιδιότητα επιτρέπει στο περιεχόμενο σου να απομακρύνεται από την σελίδα και συνεπως αποδεσμεύεται και ο "χώρος" που καταλαμβάνει αυτός ο χώρος στην σελίδα σου.
Close your eyes
For your eyes will only tell the truth and the truth isnt what you want to see
In the dark, is it easy to pretend that the truth is it ought to be.
Programmers are programmers because they like to code

Άβαταρ μέλους
iffor
Δημοσιεύσεις: 778
Εγγραφή: 14 Μάιος 2005 01:19
Τοποθεσία: Παράδεισος
Επικοινωνία:

gmail και επισύναψη αρχείου

Δημοσίευση από iffor » 15 Οκτ 2005 23:04

Yep, δίκιο έχεις!!!
δεν πρόσεξα ότι αναφερόταν στην display (την οποία και ούτε την είχα σκεφτεί από την αρχή :wink: ) ... η οποία όντος συμπεριφέρεται όπως ανέφερες!
OK, πάω πάλι από την αρχή! Thanx!

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

gmail και επισύναψη αρχείου

Δημοσίευση από skeftomilos » 16 Οκτ 2005 02:19

Αν πρόκειται να προστεθούν πολλά elements με σύνθετη ιεραρχία, ο κώδικας που απαιτείται θα είναι αρκετά μακροσκελής και περιπεπλεγμένος. Σε μια τέτοια περίπτωση μπορεί να είναι προτιμότερη η χρήση της innerHTML:

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

document.getElementById&#40;'container'&#41;.innerHTML = '<p><span><b>Hello</b></span>&nbsp;<i>World</i></p>'
Μπορεί να είναι κάπως μπακάλικος τρόπος αλλά είναι ταχύτερος στην εκτέλεση, και επιπλέον για να γίνει το ίδιο με μεθόδους του DOM θα χρειάζονταν μια ντουζίνα εντολές! :)
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
iffor
Δημοσιεύσεις: 778
Εγγραφή: 14 Μάιος 2005 01:19
Τοποθεσία: Παράδεισος
Επικοινωνία:

gmail και επισύναψη αρχείου

Δημοσίευση από iffor » 16 Οκτ 2005 20:44

και έχεις απόλυτο δίκιο!!!
είδα κάποια παραδείγματα δημιουργίας περισσότερων του ενός element και είναι πράγματι της υπομονής και ποιο επιρρεπείς σε λάθη σύνταξης...
και κάπου διάβασα ότι η innerHTML δεν έχει και τα καλύτερα πάρε δώσε με τον ΙΕ, αληθεύει?

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

gmail και επισύναψη αρχείου

Δημοσίευση από skeftomilos » 17 Οκτ 2005 03:21

Μέχρι τώρα ποτέ δε μου έτυχε πρόβλημα με την innerHTML, με τον IE ή άλλο browser. Εξάλλου αν δεν με απατάει η μνήμη μου ο IE ήταν που εγκαινίασε αυτή την ιδιότητα και ακολούθησε ο Navigator. Μόνο έχε υπόψη ότι δεν επιτρέπεται σε XHTML σελίδες.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Απάντηση

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

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

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