Adding return values to SubModal

A while back I blogged about SubModal, a little tool for creating nice modal dialogs on websites.

One of the things I wanted to do was have the modal dialog return a value, like the showModalDialog does in IE.

To achieve this, follow these instructions.

In your “main” html page, declare a callback function and a button that will launch the modal dialog:

    function myFunction(val){
        alert("Return value is...");
        alert(val);
    }

Then create an input button to launch the modal dialog.

<input type="button" onclick="showPopWin('modalcontent.html', 400, 200, myFunction);" />

Then, in the submodalsource file, or where ever you have your JS stored, change this function to include a return value, and have it use it.

/**
 * @argument callReturnFunc - bool - determines if we call the return function specified
 * @argument returnVal - anything - return value
 */
function hidePopWin(callReturnFunc, returnVal) {
    //alert(callReturnFunc);
    gPopupIsShown = false;
    restoreTabIndexes();
    if (gPopupMask == null) {
        return;
    }
    gPopupMask.style.display = "none";
    gPopupContainer.style.display = "none";
    if (callReturnFunc == true && gReturnFunc != null) {
        // edited by CDM -- gReturnFunc(window.frames["popupFrame"].returnVal);
        gReturnFunc( returnVal );
    }
    gPopFrame.src = gLoading;
    // display all select boxes
    if (gHideSelects == true) {
        displaySelectBoxes();
    }
}

Then finally on your modal page, just some code to close the window, and pass back the return value.

<button onclick="window.parent.hidePopWin(true, 'I am the return value')">close</button>

DasBlog Patch Submitted

Yesterday I wrote about the changes I made to dasBlog to solve an outstanding bug in the Insert Code option in the textbox editor.

I added some extra features, like the ability to insert JavaScript (this change was simply the merger of some XML data that the original author has released) and some code that will remove extra white space from the left side of the code block.

I used this article from Scott Hanselman to submit the patch.

Social Networking Links

Yesterday I added the links you see at the bottom of this article that allow users to quickly submit these articles to your favorite social networking site.

This wasn’t as easy as you would think.  I didn’t fully understand dasBlog‘s template system, thinking I could use server side script inside the <% %> brackets.  This is of course not the case.

I ended up finding a partial solution here by Mads Kristensen.

However, I found that this solution failed in a few ways.  First, the URLs being submitted in the querystring were not fully encoded.  The result was that some sites (I verified Digg.com) did not accept these.  It would give you an error that your URL was not correct.  The other problem, was that most of these links include a title, which is good, but they cause JS errors if you have a single quote in your article title.

After some screwing around, I realized that the only way around this problem would be a custom dasblog macro on the server that could encode the titles.

So, I just removed the titles for now.

As an added bonus, this will be an opportunity for me to test out the new JavaScript syntax highlighting I now have on my blog.

<script type="text/javascript">

  var tn = document.createTextNode('<%ItemTitle%>');
  var div = document.createElement('div');
  div.appendChild(tn);
  var html = div.innerHTML;
  var index = html.indexOf('&gt;') +4;
  var title = html.substring(index, html.length - 10);
  var social = '<div style="float:left">';
  social += '<a href="mailto:?body=Thought you might like this: <%permalinkUrl%>&amp;subject=' + title + '" target="_blank" title = "Email This Article">Email it</a>&nbsp;|&nbsp;';
  social += '<a href="http://digg.com/submit?phase=2&url=' + encodeURIComponent('<%permalinkUrl%>') + '" target="_blank"  title = "Post To Digg">Digg it</a>&nbsp;|&nbsp;';
  social += '<a href = "http://del.icio.us/post?url=' + encodeURIComponent('<%permalinkUrl%>') + '&amp;title=' + title + '" target="_blank" title = "Post this article to del.icio.us">Del.icio.us it</a>&nbsp;|&nbsp;';
  social += '<a href = "http://reddit.com/submit?url=' + encodeURIComponent('<%permalinkUrl%>') + '" target="_blank" title = "Post to Reddit">Reddit</a>&nbsp;|&nbsp;';
  social += '<a href = "https://favorites.live.com/quickadd.aspx?marklet=1&amp;mkt=en-us&amp;url=' + encodeURIComponent('<%permalinkUrl%>') + '&amp;top=1" target="_blank" title = "Post to Live">Live it</a>&nbsp;|&nbsp;';
  social += '<a href="http://www.dzone.com/links/add.html?url=' + encodeURIComponent('<%permalinkUrl%>') + '" target="_blank" title="Post to DZone">DZone it</a>&nbsp;|&nbsp;';
  social += '<a href="http://www.dotnetkicks.com/submit?url=' + encodeURIComponent('<%permalinkUrl%>') + '" target="_blank" title="Post to DotNetKicks">Kick it</a>';
  social += '</div>';
  document.writeln(social);

</script>

Not bad (looks like it got a little confused by the nested strings, but that IS confusing).

Just put this code in your template of choice and you should see good results.