Question

I would like to load a twitter popup box in jquery using (ajax?)

Here is my original code, which loads the twitter box in a new window:

function twitter_click() {
    var twtTitle = document.title;
    var twtUrl = location.href;
    var maxLength = 140 - (twtUrl.length + 1);
    if (twtTitle.length > maxLength) {
        twtTitle = twtTitle.substr(0, (maxLength - 3)) + '...';
    }
    var twtLink = 'http://twitter.com/home?status=' + encodeURIComponent(twtTitle + ' ' + twtUrl);
    window.open(twtLink,'','width=565, height=540');
}

Here is the code for the jquery popup box.

    function showUrlInDialog(url, options){
  options = options || {};
  var tag = $("<div></div>"); //This tag will the hold the dialog content.
  $.ajax({
    url: url,
    type: (options.type || 'GET'),
    beforeSend: options.beforeSend,
    error: options.error,
    complete: options.complete,
    success: function(data, textStatus, jqXHR) {
      if(typeof data == "object" && data.html) { //response is assumed to be JSON
        tag.html(data.html).dialog({modal: options.modal, title: data.title}).dialog('open');
      } else { //response is assumed to be HTML
        tag.html(data).dialog({modal: options.modal, title: options.title}).dialog('open');
      }
      $.isFunction(options.success) && (options.success)(data, textStatus, jqXHR);
    }
  });
}


<a href="#" onclick="showUrlInDialog('/feedback-form', {error: function() { alert('Could not load form') }}); return false;"><img src="twitter_button.jpg></a>

I don’t know anything about coding so if someone can please combine these two scripts so that the twitter content of the first script loads into the jquery popup script that would make my day! Thanks. Pia

Answer 1

Start by changing this:

window.open(twtLink,'','width=565, height=540');

to this:

showUrlInDialog(twtLink, {error: function() { alert('Could not load form') }});

Then to run it, use this:

<a href="#" onclick="twitter_click()"><img src="twitter_button.jpg></a>