It is currently Sat Nov 01, 2014 5:16 am Advanced search

Possible conflict, Jquery not defined in ajax form

Technical support, bug reports, feature requests and more.

Possible conflict, Jquery not defined in ajax form

Postby Bonkydonk » Wed May 18, 2011 2:52 am

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?
Bonkydonk
 
Posts: 5
Joined: Thu Jun 17, 2010 5:28 am

Re: Possible conflict, Jquery not defined in ajax form

Postby RoadRash » Wed May 18, 2011 8:37 am

Hi,

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

Overview of my Highslide sample pages: RoadRash.no
User avatar
RoadRash
 
Posts: 8225
Joined: Tue Jul 15, 2008 8:43 pm
Location: Fredrikstad, Norway

Re: Possible conflict, Jquery not defined in ajax form

Postby numinix » Mon Jul 11, 2011 12:48 am

RoadRash wrote: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.
numinix
 
Posts: 20
Joined: Fri Jan 28, 2011 3:42 am

Re: Possible conflict, Jquery not defined in ajax form

Postby RoadRash » Mon Jul 11, 2011 2:29 am

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) {
           [hilight] jQuery.get("<?php echo zen_href_link('quick_checkout/login_check.php', '', ($_SERVER['HTTPS'] == 'on' ? 'SSL' : 'NONSSL'), true, true, true); ?>", function(loginCheck) {[/hilight]
              if (loginCheck == "1") {
                sender.close();
                // perform some actions to change any login links to logout
                [hilight]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>'; ?>');[/hilight]
                <?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"});
          };
        });
      });
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
RoadRash
 
Posts: 8225
Joined: Tue Jul 15, 2008 8:43 pm
Location: Fredrikstad, Norway

Re: Possible conflict, Jquery not defined in ajax form

Postby numinix » Mon Jul 11, 2011 5:35 am

RoadRash wrote: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.
numinix
 
Posts: 20
Joined: Fri Jan 28, 2011 3:42 am

Re: Possible conflict, Jquery not defined in ajax form

Postby RoadRash » Mon Jul 11, 2011 5:49 am

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").
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
RoadRash
 
Posts: 8225
Joined: Tue Jul 15, 2008 8:43 pm
Location: Fredrikstad, Norway

Re: Possible conflict, Jquery not defined in ajax form

Postby numinix » Mon Jul 11, 2011 8:34 am

RoadRash wrote: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.
numinix
 
Posts: 20
Joined: Fri Jan 28, 2011 3:42 am

Re: Possible conflict, Jquery not defined in ajax form

Postby ccash1107 » Thu Feb 09, 2012 8:56 am

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.
ccash1107
 
Posts: 1
Joined: Fri Feb 03, 2012 5:16 am

Re: Possible conflict, Jquery not defined in ajax form

Postby RoadRash » Sat Feb 18, 2012 12:47 pm

Hi,

We need a link to your page to be able to help you.
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
RoadRash
 
Posts: 8225
Joined: Tue Jul 15, 2008 8:43 pm
Location: Fredrikstad, Norway


Return to Highslide JS Usage

Who is online

Users browsing this forum: Bing [Bot], Yahoo [Bot] and 6 guests