swap a div to an embed form when user tweets using the @anywhere function box

Posted by Jeff on Stack Overflow See other posts from Stack Overflow or by Jeff
Published on 2011-01-15T06:48:32Z Indexed on 2011/01/15 6:53 UTC
Read the original article Hit count: 239

Filed under:
|
|

I'm using the @anywhere twitter function on the front page of my site (vocabbomb.com) and right now it works great to allow users to tweet straight away. Problem is, when they click tweet, it just reloads the twitter box, empty. I want it to load something new, like a "thank you, now fill in this email form" and show a mailchimp form.

Ok so this is the @anywhere code currently working fine:

<div id="tbox"></div>
    <script type="text/javascript">
        twttr.anywhere(function (T) {
            T("#tbox").tweetBox({
                height: 100,
                width: 400,
                defaultContent: " #vocabbomb",
                label: "Use the word foo in a tweet:",
            });
        });
    </script>

So this is fine, and when the user writes a tweet, it just re-displays the twitter box.

I understand there is a function that lets you specify stuff after the tweet is made: (example from http://dev.twitter.com/pages/anywhere_tweetbox)

<div id="example-ontweet"></div>
<script type="text/javascript">
  twttr.anywhere(function (T) {
    T("#example-ontweet").tweetBox({
      onTweet : function(plaintext, html) {
        console.log(plaintext);
        alert(html);
      }
    });
  });
</script>

Is this the best way to attempt this? Or do I need a function or something that changes what's in the div to something else?

I want the mailchimp email form to show up after the tweet. It includes a ton of script and tags and starts like this:

<!-- Begin MailChimp Signup Form -->
<!--[if IE]>
<style type="text/css" media="screen">
    #mc_embed_signup fieldset {position: relative;}
    #mc_embed_signup legend {position: absolute; top: -1em; left: .2em;}
</style>
<![endif]--> 
<!--[if IE 7]>
<style type="text/css" media="screen">
    .mc-field-group {overflow:visible;}
</style>
<![endif]-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="http://downloads.mailchimp.com/js/jquery.validate.js"></script>
<script type="text/javascript" src="http://downloads.mailchimp.com/js/jquery.form.js"></script>

<div id="mc_embed_signup">
<form action="http://faresharenyc.us1.list-manage.com/subscribe/post?u=106b58b4751a007d826715754&amp;id=2fe6ba4e6a" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" style="font: normal 100% Arial, sans-serif;font-size: 10px;">
...

So my attempt to just require it inside the function didn't work at all:

<div id="tbox"></div>
    <script type="text/javascript">
        twttr.anywhere(function (T) {
            T("#tbox").tweetBox({
                height: 100,
                width: 400,
                defaultContent: " #vocabbomb",
                label: "Use the word foo in a tweet:",
                onTweet: function(plain, html){ 
                    <?php require_once('mailchimp.html'); ?>
                }   
            });
        });
    </script>

Nettuts had a brief discussion here: http://net.tutsplus.com/tutorials/javascript-ajax/using-twitters-anywhere-service-in-6-steps/

I am seeing now that the 'onTweet' function simply adds some text above the twitter box, but doesn't actually replace the entire twitter box. How do I do that? Is it possible?

Thanks!

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about div