Javascript ερώτηση

philos · 23 Ιανουαρίου 2015

Λοιπόν, έχουμε τον εξής κώδικα που αφορά το Copy κειμένου στο clipboard μέσω HTML (χρησιμοποιείται το Zeroclipboard). Η ερώτησή μου είναι κάτι απλό και γενικό και δεν αφορά το Zeroclipboard σαν λειτουργία που θέλω να τροποποιήσω:

<html>
  <body>
    <button id="copy-button" data-clipboard-text="Copy Me!" title="Click to copy me.">Copy to Clipboard</button>
    <script src="ZeroClipboard.js"></script>
    <script>
        var client = new ZeroClipboard( document.getElementById("copy-button") );
    </script>
  </body>
</html>

- Για να λειτουργήσει το button πρέπει να έχει τρέξει από κάτω του ο ορισμός μιας μεταβλητής σαν την client με getelementbyid το id του button.

- Ωστόσο εγώ φορτώνω τα buttons δυναμικά με javascript όταν τρέχει επαναλαμβανόμενα κάποιο function (δλδ δεν προυπάρχουν μέσα στη φρεσκο-φορτωμένη σελίδα). Κάνω αυτό μέσα σε μια javascript function που επιστρέφει αποτελέσματα σε ένα div:

var output = document.getElementById("output");
output.innerHTML = output.innerHTML + "<input type=\"button\" id=" + dlink + " data-clipboard-text=\"[img=" + dlink + "]\" title=\"Click to copy me.\" value=\"Copy to Clipboard\" /><script>var client = new ZeroClipboard( document.getElementById('" + dlink + "') );<\/script>";

... όμως δεν δουλεύει.

Το output.innerHTML μπορεί να γεμίζει συνεχώς νέα περιεχόμενα-κουμπιά και κάθε κουμπί θα πρέπει να κάνει copy to clipboard, το δικό του κείμενο. Το dlink είναι το url μιας εικόνας και το χρησιμοποίησα και ως id καθώς δεν μπορώ να σκεφτώ τι άλλο να βάλω ως id.

Πως μπορώ να πετύχω αυτό που θέλω;

lion2486 · 23 Ιανουαρίου 2015

μια χαρά κάνεις append το κουμπί, αλλά γιατί μέσα πό την js κάνεις append την js? γιατί δεν καλείς κάτω από την πρόσθεση του κουμπιού απλά την js Που θες να τρέξεις;;;

ΘΕς να προσθέτεις πολλά τέτοια κουμπιά; Δεν πορούν να έχουν ίδιο ID, αν θες ρίξε μια ματιά σε jQuery Selectors.

nucleus · 23 Ιανουαρίου 2015

Γιατί κάνεις το append με innerHTML και όχι με την jquery append?

https://api.jquery.com/append/

https://api.jquery.com/appendto/

Ξέρεις πόσα buttons πρέπει να βάλεις ή όχι? Επίσης είναι στατική σελίδα HTML ή κάτι δυναμικό πχ php?MVC?

philos · 23 Ιανουαρίου 2015

Η σελίδα είναι στατική HTML. Πρόκειται για έναν image uploader (που χρησιμοποιεί το imgur) και είναι όλο σε javascript.

Με τον παραπάνω κώδικα, απλά θέλω ένα button για κάθε εικόνα που ανεβαίνει και επιστρέφεται στον browser ως preview το οποίο θα κάνει copy των bbcode της .

Η μόνη λύση που βρήκα και δουλεύει είναι το ZeroClipboard.

Στο θέμα μας: δοκίμασα να βάλω τη γραμμή:

var client = new ZeroClipboard( document.getElementById(dlink) );

... σε διάφορα μέρη της συνάρτησης upload(file) αλλά δεν λειτουργεί.

Σας παραθέτω το τμήμα του κώδικου που μας αφορά μήπως βρεθεί λύση:

            /* main upload function that sends images to imgur.com */
            function upload(file) {

                document.body.className = "uploading";

                /* Lets build a FormData object*/
                var fd = new FormData();
                
                fd.append("image", file);
                fd.append("client_id", "4479ab5fe79e021"); 
                var xhr = new XMLHttpRequest();
                var output = document.getElementById("output");
                
                xhr.open("POST", "https://api.imgur.com/3/upload.json");
                xhr.onload = function() {
                
                    if(this.status==400){
                       document.getElementById("error").innerHTML = JSON.parse(xhr.responseText).data.error;
                    } else {

                        //document.getElementById("error").innerHTML = document.getElementById("error").innerHTML + xhr.responseText;
                        var link = JSON.parse(xhr.responseText).data.link;
                        var dimage = link;
                        var dlink = link;

                        var a = document.createElement("a");
                        a.href = dlink;

                        var img = document.createElement("img");
                        img.src = dimage;

                        a.appendChild(img);
                        output.appendChild(a);

                        output.innerHTML = output.innerHTML + "<input type=\"button\" id=" + dlink + " data-clipboard-text=\"[img=" + dlink + "]\" title=\"Click to copy me.\" value=\"Copy to Clipboard\" /><script>var client = new ZeroClipboard( document.getElementById('" + dlink + "') );<\/script>"; 

                        document.body.className = "uploaded";
                    }

                }        
                xhr.setRequestHeader('Authorization', 'Client-ID 4479ab5fe79e021');
                xhr.send(fd); 
    
            }

paparovic · 23 Ιανουαρίου 2015

Η σελίδα είναι στατική HTML. Πρόκειται για έναν image uploader (που χρησιμοποιεί το imgur) και είναι όλο σε javascript.

Με τον παραπάνω κώδικα, απλά θέλω ένα button για κάθε εικόνα που ανεβαίνει και επιστρέφεται στον browser ως preview το οποίο θα κάνει copy των bbcode της .

Αυτός ο uploader κάνει previews: https://blueimp.github.io/jQuery-File-Upload/

Υποστηρίζει διάφορα events (π.χ. onUploaded) οπότε σε κάποιο από αυτά που επιστρέφει το url, θα γράψεις κώδικα να σου δίνει το bbcode.

nucleus · 23 Ιανουαρίου 2015

Γιατί κάνεις το post με xhr?

$ajax δεν σου αρκεί?

https://github.com/eirikb/gifie Δες το παράδειγμα που έχει το ίδιο το imgur για HTML5/javascript.

Στο παραπάνω αν δεις το https://github.com/eirikb/gifie/blob/gh-pages/app.jsκαι την imgurUpload

function imgurUpload(token) {
    $imgurUpload.show();
    $group.hide();

    var auth;
    if (token) auth = 'Bearer ' + token;
    else auth = 'Client-ID ' + clientId;

    $.ajax({
      url: 'https://api.imgur.com/3/image',
      type: 'POST',
      headers: {
        Authorization: auth,
        Accept: 'application/json'
      },
      data: {
        image: localStorage.dataBase64,
        type: 'base64'
      },
      success: function(result) {
        var id = result.data.id;
        window.location = 'https://imgur.com/gallery/' + id;
      }
    });
  }

Περισσότερα για το ajax στο παρακάτω

https://api.jquery.com/jquery.ajax/

Με το παραπάνω δεν θα χρειαστεί κάτι άλλο. Τα κουμπιά για τα copy to clipboard θα είναι στατικά μέσα στην σελίδα σου όπως και τα textfields σου. Όταν ολοκληρωθεί το ajax call για το upload και πάρεις πίσω το ID της εικόνας το μόνο που έχεις να κάνεις είναι να βάλει τα url ή bbcodes στα textfield.

philos · 24 Ιανουαρίου 2015

Έχω στήσει τον IMGUR uploader από ένα script που έχω βρει και συγκεκριμένα αυτό (κάνοντας τις απαιραίτητες αλλαγές για να δουλεύει σε API 3 καθώς είναι σε API 2). Γενικά ικανοποιεί τις ανάγκες μου, απλά χρειάζομαι και τη λειτουργία Copy.

Λοιπόν, έκανα τα παρακάτω:

function sc_build_button(scid)
{
  return new ZeroClipboard( document.getElementById(scid) );
}

function getRandomInt(min, max)
{
  return Math.floor(Math.random() * (max - min)) + min;
}

και:

function upload(file)
{
//[...]
                        var randomnum = getRandomInt(1,10000);
                        output.innerHTML = output.innerHTML + "<input type=\"button\" id=" + randomnum + " data-clipboard-text=\"[img=" + link + "]\" title=\"Click to copy me.\" value=\"Copy to Clipboard\" />";

                        sc_build_button(randomnum); 
//[...]
}

Η upload() τρέχει κάθε φορά που ανεβαίνει ένα αρχείο.

Τα κουμπιά λειτουργούν ως εξής με το παραπάνω:

α) Όταν ανεβάζω την πρώτη εικόνα, λειτουργεί κανονικά

β) Όταν ανεβάζω τη 2η εικόνα και γεμίζει κι άλλο το output.innerHTML, λειτουργεί το κουμπί της 2ης αυτής εικόνας, αλλά παύει να λειτουργεί το κουμπί της πρώτης εικόνας.

Τι μπορώ να κάνω για να λειτουργούν όλα τα κουμπιά;

nucleus · 24 Ιανουαρίου 2015

Δες την κονσόλα του browser που χρησιμοποιείς όταν πατας το πρώτο κουμπί που δεν δουλεύει. Έχει κάποιο error?

Για τον firefox right click και inspect element

Για chrome είναι στα developer tools.

Για ΙΕ press F12.

Βεβαιώσου ότι τα id των buttons είναι διαφορετικά.

Σύνδεση

Javascript ερώτηση

Προτεινόμενες αναρτήσεις

philos

lion2486

nucleus

philos

paparovic

nucleus

philos

nucleus

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Δημιουργία λογαριασμού

Σύνδεση

Σύνδεση