set Tweet-button 'data-text" - Inhalt dynamisch mit javascript, oder..?

Hier ist der funktionierende code in einem Formular, das zeigt ein Tweet-Schaltfläche, der die Schaltfläche auf einem Formular, das zeigt mehrere Bilder-klickt der Benutzer auf eines der Bilder, wird es der 'selected' - Bild und den Tweet-button soll tweet das ausgewählte Bild den Namen und die url:

      <a id="tweetBtnId" href="https://twitter.com/share" class="twitter-share-button" 
         data-text="Check me out on OurWebSite!"
         data-url=http://$ourSiteURL
         data-via=http://$ourSiteURL data-size="medium" data-count="none">Tweet</a>
     <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0]; 
            if(!d.getElementById(id)){js=d.createElement(s); js.id=id; 
              js.src="//platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js,fjs);}}
                (document,"script", "twitter-wjs");</script>

Ich habe ein 'onclick()' Prozedur für das div, das zeigt das Bild. Wenn der Benutzer klickt auf eines der Bilder, seine div onclick () - handler aufgerufen wird und setzt das Bild der 'currentlySelectedImage' auf der Seite-und die onclick () - handler muss dann aktualisieren Sie den Tweet-button 'data-text" - Attribut mit dem Namen der gerade ausgewählten Bild:

          //This is part of the code of the 'onclick()' handler for
          //the image being selected. 
         <script> 
         function handleImageOnClick()
         {
           var myDynamicTweetText = "name of currently-selected image goes here";
           var elem = document.getElementById("tweetBtnId");
           alert("The elem is: " + elem);  //elem IS NULL !!  Dagnabbit.

           //this fails because 'elem' is null
           elem.setAttribute("data-text", myDynamicTweetText);

           //other onclick() code not shown for brevity......
         }
         </script>

Muss ich dynamisch ändern Sie die "Daten-text' - Attribut den Wert in die Tweet-Taste, um den Namen des ausgewählten Bildes. Ich habe den javascript-code oben was nicht,-- das 'elem' aus den erhaltenen code hier ein:

    var elem = document.getElementById("tweetBtnId");

null ist (denke ich), weil diese Linie in den Twitter-tweet button-code oben:

   if(!d.getElementById(id)){js=d.createElement(s); js.id=id;

Ich bin mir nicht sicher, aber es sieht aus wie der Twitter-Tweet-button Standard-Skript überschreibt den Versuch
fügen Sie ein 'id' - Attribut, um den Tweet-button.

Werden Sie sehen, dass ich die id="tweetBtnId" auf den Tweet-button oben, also konnte ich den Zugriff auf den Tweet-button in meinem Bild-Auswahl onclick () - handler oben, dann setzen Sie die 'Daten-text' auf den Namen der gerade ausgewählten Bild.

Ich nur Zweifel, dass Twitter die design-Ziel für den Tweet-button war "we' re gonna dumm dieser Sauger WEG nach unten, wir werden nur lassen diese Tiere wählen Sie EINE Daten-text Wert - jeder Tweet button hat einen hart-codierten, "Einmal-auf-der-Seite" Daten-text-Attribut - Witz ist auf Sie, wenn Sie versuchen, dynamisch zu ändern, den Tweet-button-Daten-text-Attribut."

Ich brauche, um diese arbeiten-irgendwelche Ideen?

Nur bestätigte mit Firebug -- die id des Tweet-button 'b', nicht einmal eine Nummer. Das twitter script ist nicht lassen Sie die getElementById () - sehr leicht dann.
Wow ich kann hören, wie die Schnecke vor meinem Fenster an zu Schnarchen. Ruhig hier heute. Ein SUPER-notdürftigem Abhilfe wäre zu schaffen, ein Formular mit einem versteckten Feld und eine form.submit() auf, die es in meinem onclick () - handler, die aufgerufen wird, wenn der Benutzer klickt auf ein Bild. Dann könnte ich eine PHP-variable mit dem Namen "ausgewähltes Bild' und leiten Sie zurück auf die ursprüngliche Seite, und verwenden Sie die PHP-variable für die 'Daten-text' - Teil des Tweet-button, so dass, wenn der Benutzer tweets die PHP-variable hat, die der ausgewählten Bild-name zugewiesen 'Daten-text in den tweet-button. Ein server-round-trip-für einen tweet! DAGNABBIT.
Der Grund ist niemand, diese Frage zu beantworten ist, da es so lang und voll von code, das ist wahrscheinlich ohne Bezug zu dem eigentlichen Kern des Problems.
Ich habe das gleiche problem
Welche Probleme erleben Sie? Es scheint für mich arbeiten? jsbin.com/ivevif/2 (geprüft mit firebug...)
Sorry, daß Sie nicht mehr Antwort zuvor. Lange Fragen und code sind nicht das problem (dies ist eine Entwickler-Website, nachdem alle!) es ist einfach eine Frage, wer ist bereit zu spielen mit dem problem zu der Zeit.

InformationsquelleAutor wantTheBest | 2012-03-13

3

Setzen Sie ihn einfach in ein Gefäß mit einer bekannten ID und durchqueren Sie das Dokument mit:
```
<div id="someIDiKnow">
    <a id="tweetBtnId"...>...</a>
</div>

$("#someIDiKnow a").attr("data-text", "Replacement Text!");
```
- Dies funktioniert nicht für mich, ich bin mir ziemlich sicher, dass Sie haben, um neu zu laden der twitter-Skript irgendwie hinterher.
InformationsquelleAutor PhonicUK
0

Sieht aus wie es geht um die notdürftigem hidden-Formular/php-variable-Ansatz für jetzt-ich ' ll post wieder, wenn ich eine bessere work-around.

EDIT: die hidden-Formular/PHP-variable Lösung hat geschlagen der Straßensperre durch den Twitter Tweet-button -- jetzt kann ich erfolgreich, dynamisch ändern Sie den Tweet-button text wird, jederzeit basierend auf der Benutzer-client-Eingang. Pro Domenic scharfsinnige Beobachtung, dass die Frage oben ist zu lang und hat den code in es, ich springe Veröffentlichung der Antwort hier, und ich entschuldige mich für die Länge oben.

InformationsquelleAutor wantTheBest
0

Könnten Sie nutzen JQuery zum aktualisieren der Attribut Daten-text durch das hinzufügen einer onclick-Aktion auf dem Bild. Wenn Sie wollten, den text innerhalb der eigentlichen image-tag, indem Sie Ihre eigenen attribute an den tag, das könnte eine einfache arbeiten rund um die Montage, den tweet-text.

Beispiel:
```
function updateTweetBtn(obj) {
   $('#someIDiKnow a').attr('data-text', $(this).attr('tweet'));
}

<img src="/images/myimage.jpg" tweet="This is what I want to tweet" onclick="updateTweetBtn(this);" />
<img src="/images/myimage2.jpg" tweet="This is some other text I want to tweet" onclick="updateTweetBtn(this);" />
```
- Das problem was er hat ist, dass #tweetBtnId ist nicht zu finden, die Schaltfläche!
- Meine aktualisierten code zu verwenden PhonicUK Vorschlag. Das ist eine gute Idee!
InformationsquelleAutor TheRocketSurgeon

Verwendung in html -

<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<a href="http://twitter.com/share" class="twitter-share-button" data-text="old text">Tweet</a>

Ich es geschafft, ändern Sie die " Daten-text mit javascript -

var a = "new text";
document.getElementsByClassName('twitter-share-button')[0].setAttribute("data-text", a);

arbeitete auch mit dem Dokument.getElementById('twitter'), wenn Sie hinzufügen id='twitter' zu <a>

InformationsquelleAutor warkentien2

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.