Possible conflict, Jquery not defined in ajax form

[Bonkydonk]

Hi, I'm trying to open a form in Highslide with some inline code like this:

Code: Select all

<a href="comment/reply/810/846#highslide" onclick="return hs.htmlExpand(this, { contentId: '846',
        objectType: 'ajax'} )">
    Open Me!
</a>


<div class="highslide-html-content" id="my-content" style="width: 700px">
    <div>
     <a href="#" onclick="return hs.close(this)">
         Close
     </a>
    </div>
    <div class="highslide-body">

   
    </div>
</div>



And everything opens and loads fine except for the Javascript the form uses. The error console says:

Code: Select all

Uncaught ReferenceError: jQuery is not defined
(anonymous function)
hs.Ajax.loadHTML:1
hs.Ajax.getElementContent:1
xhr.onreadystatechange:1


Any ideas on how I can stop this conflict or whatever is happening?

[RoadRash]

Hi,

You need to either use objectType: 'iframe' or run the jQuery function for the form trough the onAfterExpand event from the main page.

[numinix]

Hi,

You need to either use objectType: 'iframe' or run the jQuery function for the form trough the onAfterExpand event from the main page.

I have something like this:

Code: Select all

  hs.Expander.prototype.onAfterExpand = function (sender) {   
    // bind to submit events
    var createForm = jQuery(sender.content).find('form[name="create"]');
    jQuery(createForm).submit(function() {
      var action = jQuery(this).attr('action');
      window.location.href = action;
      return false;
    });
    var loginForm = jQuery(sender.content).find('form[name="login"]');
    jQuery(loginForm).submit(function() {
      jQuery('#ajaxCartLoginMessage').html('Logging in, please wait.');
      var action = jQuery(this).attr('action');
      // post the form
      jQuery.post(action, jQuery('[name="login"]').serialize(), function(data) {
        jQuery.get('<?php echo zen_href_link('quick_checkout/login_check.php', '', ($_SERVER['HTTPS'] == 'on' ? 'SSL' : 'NONSSL'), true, true, true); ?>', function(loginCheck) {
          if (loginCheck == "1") {
            sender.close();
            // perform some actions to change any login links to logout
            jQuery("a:contains('<?php echo addslashes(HEADER_TITLE_LOGIN); ?>')").replaceWith('<?php echo '<a href="' . zen_href_link(FILENAME_LOGOFF, '', 'SSL') . '">' . addslashes(HEADER_TITLE_LOGOFF) . '</a>'; ?>');
            <?php
              if (is_array($refresh_selectors)) {
                foreach ($refresh_selectors as $selector) {
                  echo 'jQuery("' . $selector . '").html(jQuery(data).find("' . $selector . '").html());';
                }
              }
            ?>
          } else {
            // get the error message     
            if (jQuery(data).find('.messageStackError').length > 0) {
              jQuery('#ajaxCartLoginMessage').html(jQuery(data).find('.messageStackError').html());
              //jQuery(messageBox).fadeIn();
              //jQuery(boxInner).height(boxInnerHeight);
            }
          }
        });
      });
      return false;
    });
  }

  jQuery(document).ready(function() {
    jQuery(".ajaxCartLogin").each(function() {
      this.onclick = function() {
        return hs.htmlExpand(this, {objectType: "ajax", width: 500, dimmingOpacity: 0.8, wrapperClassName: "ajaxCartLogin", allowSizeReduction: false, src: "<?php echo zen_href_link(FILENAME_AJAX_LOGIN, '', ($_SERVER['HTTPS'] == 'on' ? 'SSL' : 'NONSSL')); ?>#ajax_login"});
      };
    });
  });

If I change to objectType: "iframe" the errors go away (hs is not defined, jQuery is not defined), but then the full page loads up in the pop-up rather than just the container #ajax_login.

[RoadRash]

Hi,

You have javascript syntax error in the highlighted lines; single quotes inside single quotes. Correct the errors and see if it helps.
(scroll down to see the highlighted lines)

Code: Select all

      hs.Expander.prototype.onAfterExpand = function (sender) {   
        // bind to submit events
        var createForm = jQuery(sender.content).find('form[name="create"]');
        jQuery(createForm).submit(function() {
          var action = jQuery(this).attr('action');
          window.location.href = action;
          return false;
        });
        var loginForm = jQuery(sender.content).find('form[name="login"]');
        jQuery(loginForm).submit(function() {
          jQuery('#ajaxCartLoginMessage').html('Logging in, please wait.');
          var action = jQuery(this).attr('action');
          // post the form
          jQuery.post(action, jQuery('[name="login"]').serialize(), function(data) {
            jQuery.get("<?php echo zen_href_link('quick_checkout/login_check.php', '', ($_SERVER['HTTPS'] == 'on' ? 'SSL' : 'NONSSL'), true, true, true); ?>", function(loginCheck) {
              if (loginCheck == "1") {
                sender.close();
                // perform some actions to change any login links to logout
                jQuery("a:contains('<?php echo addslashes(HEADER_TITLE_LOGIN); ?>')").replaceWith('<?php echo '<a href="' . zen_href_link(FILENAME_LOGOFF, '', 'SSL') . '">' . addslashes(HEADER_TITLE_LOGOFF) . '</a>'; ?>');
                <?php
                  if (is_array($refresh_selectors)) {
                    foreach ($refresh_selectors as $selector) {
                      echo 'jQuery("' . $selector . '").html(jQuery(data).find("' . $selector . '").html());';
                    }
                  }
                ?>
              } else {
                // get the error message     
                if (jQuery(data).find('.messageStackError').length > 0) {
                  jQuery('#ajaxCartLoginMessage').html(jQuery(data).find('.messageStackError').html());
                  //jQuery(messageBox).fadeIn();
                  //jQuery(boxInner).height(boxInnerHeight);
                }
              }
            });
          });
          return false;
        });
      }

      jQuery(document).ready(function() {
        jQuery(".ajaxCartLogin").each(function() {
          this.onclick = function() {
            return hs.htmlExpand(this, {objectType: "ajax", width: 500, dimmingOpacity: 0.8, wrapperClassName: "ajaxCartLogin", allowSizeReduction: false, src: "<?php echo zen_href_link(FILENAME_AJAX_LOGIN, '', ($_SERVER['HTTPS'] == 'on' ? 'SSL' : 'NONSSL')); ?>#ajax_login"});
          };
        });
      });

[numinix]

Hi,

You have javascript syntax error in the highlighted lines; single quotes inside single quotes. Correct the errors and see if it helps.

Those shouldn't be a problem because the single quotes are used in the PHP block, not by the JavaScript.

I should add that the above works. But when the page initially loads, it has the errors "hs is not defined" and "jQuery is not defined".

Changing "ajax" to "iframe" for the objectType gets rid of these errors but then the pop-up contains the full page rather than the specified container.

[RoadRash]

objectType: 'iframe' can't load a specific div (container).
I need to see your live page to debug the two errors ("hs is not defined" & "jQuery is not defined").

[numinix]

objectType: 'iframe' can't load a specific div (container).
I need to see your live page to debug the two errors ("hs is not defined" & "jQuery is not defined").

I think I know the problem. The errors are coming from the page loaded by the AJAX get request.

[ccash1107]

could you elaborate more about how you managed to solve the error? I got that kind of error too in IE. But not in FF and Chrome.

[RoadRash]

Hi,

We need a link to your page to be able to help you.