Javascript error [closed]

Question

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.

This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.

Closed 4 months ago.

Improve this question

I get an error "popup undefined" anyone know why?

here is my code edit: http://jsfiddle.net/aDFSR/13/

edit:

<html>
<head>
</head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.js"></script>


 <script type="text/javascript">

 var popupInstance = null;

 function createCrossBrowserPopup(){
     alert("creating");
     return new _popup();
 }

 function _popup() {
     this.wnd = null;
     this.hiddenFrame = null; //workaround for IE 6 - with divs and select (divs are appearing behind select elements)
     this.showHiddenFrame = showHiddenFrame;
     this.displayPopupContainer = displayPopupContainer;
     this.html = "";
     this.setHTML = _setHTML;
     this.show = _show;
     this.hide = _hide;
     this.triggerElementId = null;
     this.blur = null;
 }

 function _setHTML(html, event) {
     this.html = html;
     if (this.wnd != null) {
         this.wnd.html(this.html);
     }

     if (event != null)
         stopEventPropagation(event, null);
 }

 /// leftOffset: the left offset of the popup
 /// topOffset: the top offset of the popup
 /// width: the width of the popup
 /// height: the height of the popup
 /// element: the element which causes the popup to be opened
 /// event: the event which cased the popup to be opened
 function _show(leftOffset, topOffset, width, height, element, event) {

          // Hide previous popup if existed
     if (popupInstance != null && element.id != popupInstance.triggerElementId) {
         popupInstance.hide();
         return;
     }

     // if popupInstance != null this means that the same popup was called, makes no sense to create it again
     if (popupInstance == null){
         leftOffset = leftOffset != null ? leftOffset : 0;
         topOffset = topOffset != null ? topOffset : 0;

         this.displayPopupContainer(element, width, height, leftOffset, topOffset);

         //workaround for IE 6 - with divs and select (divs are appearing behind select elements)
         this.showHiddenFrame(element, width, height, leftOffset, topOffset);
         // end of workaround

         setElementsPosition(element, leftOffset, topOffset);

         // save the id, onblur event of the element that fires the popup
         // and also save the instance of this object - for $(document).click and $(window).resize
         this.triggerElementId = element.id;
         this.blur = element.onblur;
         element.onblur = null;
         popupInstance = this;
     }

     stopEventPropagation(event);
 }

 function _hide() {
     $(".modal_popup_container").hide();
     if (this.triggerElementId != null) {
         // Assign  back the blur event (using simple Javascript, not jQuery as it is  causing onblur to be fired 2 times) and reset some variables
         $('#' + this.triggerElementId)[0].onblur = this.blur;
         if ($.isFunction(this.blur)) {
             $('#' + this.triggerElementId)[0].onblur();
         }
         else
         if(typeof(this.blur) == 'string')
         {
             var regex = new RegExp('(?=[\w.])this(?!\w)/g');
             eval(this.blur.replace(regex, '$(\'#' + this.triggerElementId + '\')[0]'));
         }

         // reset variables
         this.triggerElementId = null;
         this.blur = null;
         popupInstance = null;
     }
 }

 function displayPopupContainer(element, width, height, leftOffset, topOffset) {
     if (this.wnd == null) {
         this.wnd = $('<div />');
         this.wnd.addClass('modal_popup_container');
         this.wnd.css({
                 'position' : 'absolute',
                 'z-index' : '999',
                 'margin' : '0'});
     }

     this.wnd.css({ 'width': width, 'height': height });
     this.wnd.html(this.html);
     this.wnd.show();

     var parentElement = $(element).parent();
     $(parentElement).append(this.wnd);
 }

 function showHiddenFrame(element, width, height, leftOffset, topOffset) {
     if (this.hiddenFrame == null) {
         this.hiddenFrame = $('<iframe />');
         this.hiddenFrame.addClass('modal_popup_container');

         this.hiddenFrame.attr({
             "src": "javascript:'&lt;html&gt;&lt;/html&gt;';",
             "scrolling": "no",
             "frameborder": 0
         });
         this.hiddenFrame.css({
             "position": "absolute",
             "border": "none",
             "display": "block",
             "z-index": "998",
             "margin": "0"
         });
     }

     this.hiddenFrame.css({ "width": width, "height": height });
     this.hiddenFrame.show();

     var parentElement = $(element).parent();
     $(parentElement).append(this.hiddenFrame);
 }

 function setElementsPosition(element, leftOffset, topOffset) {
     $(".modal_popup_container").position({
         my: "left top",
         at: "left bottom",
         of: $(element),
         offset: leftOffset + " " + topOffset,
         collision: "fit"
     });
 }

 function stopEventPropagation(event)
 {
     // manage FireFox and IE events, check if event was passed, else try and get window.event
     var e = (!event) ? window.event : event;
     // avoid that the current click event propagates up
     if (typeof (e) != "undefined") {
         if (e.stopPropagation)
             e.stopPropagation();
         else e.cancelBubble = true;
     }
 }

 // hide the popup when user clicks outside it
 $(document).click(
     function(event) {
         if ($(event.target).closest('.modal_popup_container').get(0) == null
         && popupInstance != null) {
             popupInstance.hide();
         }
     });

 $(window).resize(
     function(event) {
         if (popupInstance != null) {
             popupInstance.hide();
         }
     });

 </script>

 <script language="javascript" type="text/javascript">

  var popup = createCrossBrowserPopup();
  popup.setHTML("<div style='width:100%; height:100%;
 background-color:#AAFFEE;border-width: 2px; border-color: silver; border-style:
 solid;' onclick='changePopupHTML();'> test </div>", null);

 function changePopupHTML() {
     popup.setHTML("<div style='width:100%; height:100%; background-color:#AA11EE;border-width: 2px; border-color: silver; border-style: solid;'> test222 </div>", null);
 }

 </script
<body>

<input type="text" id="txtExample" onclick="popup.show(25, 0, 100, 50, this, event);" />

</body>
</html>

Your jsfiddle is all jacked up. Might want to look at it again and get it all setup properly. Also you have quite a few typo's... misplaced unclosed tags etc. — Loktar
– Loktar, Commented Mar 13, 2011 at 21:39
I did c/p to your code an it's working. what's the problem ? — Fatih Acet
– Fatih Acet, Commented Mar 13, 2011 at 21:43
In JSFiddle you are using mootools, and trying to include jquery, using script tags in the js portion of it. You have a script tag missing the closing >, you also have the body inside of the head tag, and multiple redundant script tags. — Loktar
– Loktar, Commented Mar 13, 2011 at 21:44

AdamH · Accepted Answer · 2011-03-13 22:04:29Z

1

Second edit: In your latest version, the problem is that the javascript you enter in the javascript frame appears in the head tag. You're then referencing the variable from the body tag. This works:

http://jsfiddle.net/E9DrH/

edited Mar 13, 2011 at 22:04

answered Mar 13, 2011 at 21:41

AdamH

2,20116 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

124697 Over a year ago

i dont understand. popup is declared at towards the end of the page var popup = createCrossBrowserPopup(); so why is it saying its not defined

Collectives™ on Stack Overflow

Javascript error [closed]

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related