0

I can't seem to get this to work in JavaScript. I've tried using plain old JavaScript and also JQuery but nothing seems to work.

Here's my situation: I have this PopUp "Panel" and in it I have a Button. The button has an event listener for click and I want that handler to fire off a custom event that the Panel will listen for. This is because I need to handle all the logic of the button click in the Panel.

Here's what I'm doing: Before I launch the Panel I call a constructor for my "Class":

function PopUpStageAsssignmentTaker(content) {
            PopUpStage.call(this);
            this.allPagesAdded = false;
            this.questionsCreated = [];// will be an array of pages that will be submitted
            this.listLabel = null;
            addAssignmentTakerParts.call(this);
            this.popUpDiv.addEventListener("assignmentTakingSubmitEvent", handleAssignmentSubmit, true);

            function handleAssignmentSubmit(event) {
                alert("YESSS!");
            }
        }

This does quite a bit but just know that in the call to PopUpStage it creates the div that represents the Panel and saves that in this.popUpDiv. So I add a event listener to this.popUpDiv listening for some custom event that I'm making up.

Later on I have code that creates the content in the Panel and we have something like this:

SubmitQuestionTakingPage.prototype.makeContent = function(question) {
                var questionWrapper = getQuestionWrapper();

                var submitDiv = document.createElement("section");
                submitDiv.innerHTML = "Pressing Submit will cause this Assignment to be submitted and you will be unable to make any changes after that. If this " +
                        "Assignment is automatically graded you will receive a Grade upon clicking submit. If this Assignment is not automatically submitted you must wait" +
                        " for the creator of this Assignment to assign you a Grade. To continue, please press Submit.";
                submitDiv.setAttribute("class", "separatedSmaller");
                questionWrapper.appendChild(submitDiv);

                var submitButton = document.createElement("input");
                submitButton.setAttribute("type", "submit");
                submitButton.setAttribute("class", "fancyButton");
                submitButton.addEventListener("click", handleSubmitButtonClick);
                questionWrapper.appendChild(submitButton);


                return questionWrapper;
            };

            function handleSubmitButtonClick(event) {
                 var event = document.createEvent("Event");
                  event.initEvent("assignmentTakingSubmitEvent", true, true);
                  window.dispatchEvent(event);

// $(this).trigger("assignmentTakingSubmitEvent"); }

So we create some content and in it we create a button that has a listener for click. In the click handler you can see how I fire off the event.

Problem: I'm reading that this does not work in IE under version 9+. What can I do in to make it work in all browsers? Is there a way?

user1513171
  • 1,912
  • 6
  • 32
  • 54
  • Why doesn't it work under IE9? Where are you reading that? What problems and error messages do you get? – Ben Lee May 01 '13 at 23:45
  • I was just reading it here on StackOverFlow not 10 minutes ago but for some reason now I cannot seem to find it. I have IE9 on my comp though so I cannot test it. – user1513171 May 01 '13 at 23:51
  • Ah, here it is: http://stackoverflow.com/questions/2059456/how-do-i-create-a-custom-event-class-in-javascript – user1513171 May 01 '13 at 23:51
  • What you read is that it will not work on browsers less then IE9, you wrote it backwards. – Ben Lee May 01 '13 at 23:54
  • 1
    With jQuery you can get it to work. See here: http://stackoverflow.com/questions/399867/custom-events-in-jquery – Ben Lee May 01 '13 at 23:54

0 Answers0