How do I create a dialog in javascript?

Question

Hello,

The goal is to create a similar to the flag dialog at stackoverflow that shows on clicking the 'flag' button located under a question,but since I'm new to web development I don't understand certain things.

This is what I have:

1. This is the markup for the button:

   <a id="flag-post-2239985" title="flag this post for serious problems">flag</a>
   

   -I don't understand how this executes an event, usually there is an onclick tag.How does it go to the script?

2. This is the external js containing functions for accepting answers,voting AND flagging posts: http://sstatic.net/so/js/question.js?v=6274

   You can unminify it for better view at http://jsbeautifier.org/

3. Needed functions:

   flag: function (F) {
       var D = F.attr("id").substring("flag-post-".length);
       var K = "form-flag-" + D;
       var N = $("#" + D + "-is-owned-by-current-user").length > 0;
       var L = [
           [l.offensive, "Offensive, Abusive, or Hate Speech", !N],
           [l.spam, "Spam", !N],
           [l.informModerator, "Requires Moderator attention", true]
       ];
       var I = '<div class="popup flag-menu"><h2>Please flag with care:</h2>';
       I += '<div class="flag-reasons"><form id="' + K + '">';
       for (var G = 0; G < L.length; G++) {
           if (L[G][2]) {
               var M = "flag-radio" + D + "-" + L[G][0];
               I += '<input type="radio" id="' + M + '" name="flag-' + D + '" value="' + L[G][0] + '">';
               I += '<label for="' + M + '">' + L[G][1] + "</label><br>"
           }
       }
       I += '<div class="flag-comment">Why are you flagging this post?<textarea name="flag-reason" cols="33" rows="4"></textarea>';
       I += '<br><span class="text-counter"></span></div>';
       I += "</form></div>";
       I += '<input type="button" class="flag-cancel" value="Cancel"><input type="button" class="flag-submit" value="Flag Post">';
       I += "</div>";
       var H = $(I);
       var E = H.find("#" + K);
       var J = E.find("textarea");
       E.find("input").click(function () {
           var O = E.find("div.flag-comment");
           var P = vote.flagIsInform(E);
           O.toggle(P);
           if (P) {
               J.focus()
           }
           vote.flagAllowSubmit(H, J, P)
       });
       J.charCounter({
           min: 10,
           max: 150,
           setIsValid: function () {
               vote.flagAllowSubmit(H, J, vote.flagIsInform(E))
           }
       });
       H.find(".flag-submit").click(function () {
           if (vote.flagIsInform(E) && !vote.flagTextValid(J)) {
               return
           }
           vote.flagSubmit(F, D, E, J)
       });
       H.find(".flag-cancel").click(function () {
           vote.flagClosePopup(F)
       });
       F.parent().append(H);
       H.fadeIn("fast")
   },
   flagIsInform: function (D) {
       var E = D.find("input:radio:checked");
       if (E.length == 0) {
           return false
       }
       return E.val() == l.informModerator
   },
   flagAllowSubmit: function (E, F, G) {
       var D = G ? vote.flagTextValid(F) : true;
       E.find(".flag-submit").toggle(D)
   },
   flagTextValid: function (E) {
       var D = E.val().length;
       return (D >= 10 && D <= 150)
   },
   flagClosePopup: function (D) {
       D.parent().find(".popup").fadeOut("fast", function () {
           $(this).remove()
       })
   },
   flagSubmit: function (G, E, D, H) {
       vote.flagClosePopup(G);
       var F = D.find("input:radio:checked").val();
       var E = G.attr("id").substring("flag-post-".length);
       if (F == l.informModerator) {
           $.ajax({
               type: "POST",
               url: "/messages/inform-moderator-about-post/" + E,
               dataType: "json",
               data: {
                   fkey: fkey,
                   msg: H.val()
               },
               success: function (I) {
                   showAjaxError(G.parent(), I.Message)
               },
               error: function (I, K, J) {
                   showAjaxError(G.parent(), (I.responseText && I.responseText.length < 100 ? I.responseText : "An error occurred during submission"))
               }
           })
       } else {
           q(G, E, F, vote.flagSubmitCallback, {
               comment: H.val()
           })
       }
   },
   flagSubmitCallback: function (E, D, G) {
       if (G && G.Success) {
           if (G.Message) {}
       } else {
           var F = E.parent();
           if (G && G.Message) {
               showAjaxError(F, G.Message)
           } else {
               showAjaxError(F, "A problem occurred during flagging")
           }
       }
   }
   

Problem: When I include the external functions in a new html file,add the tag for the button ,clicking the button does nothing

Questions:

1. Where am I doing it wrong?
2. What relationship has the button markup with the javascript(I don't understand how it triggers an event if there is no onclick tag)?
3. How would you debug this at stackoverflow? I use Firebug,but I cannot set any breakpoints.Please reveal better debuggers and(eventually) editors for javascript.

Please describe in details if possible,I'm new to web development.

Thank you in advance!

Answer 1

You should also notice from the source code that SO uses jQuery, which is a javascript framework ..

You can use jquery to bind handlers to specific events in the DOM like

$('#flag-post-2239985').click(
           function() { 
                        /*executes when someone clicks on the flag button.*/ 
                      } 
           );

Answer 2

From what I can tell, SO is using some jQuery to add the handler later.

var A=function(){return $("div.post-menu a[id^='flag-post-']")};

This function returns the link which has an id beginning with "flag-post-", i.e. the flag button.

Later it will use that to add a handler I am pretty sure. With SO's code being fairly obfuscated, you are better off coding something from scratch than trying to figure out exactly what SO is doing.

It should not be too difficult to do. Either add the handler manually, or use a little jQuery like above to add a .click "handler". Or, heaven forbid, use some plain old javascript, or even add an onclick attribute to your link. :)

In answer to #3, it would be difficult to track this code using any debugger, as you will be stepping through lot's of jQuery code. You will quickly lose track of what is actually going on. Again, you are better off emulating the behavior than replicating the exact functionality.