AjaxSearch, jQueryUI on IE8 and &jsJquery Problem

42 Posts

parthian Reply #1, 16 years, 9 months ago

Hi,

AjaxSearch Conflict with jQuery Accordions etc. My Accordions/Tabs work fine on IE8 and FF. Great.

However, when I add AjaxSearch the JQueryUI stuff breaks in IE8 (okay in FF). I suspect conflicts with libraries. Looking at the source there are hordes of libraries being loaded.

Using [!AjaxSearch? &jscript=`jquery` &jsJquery=`assets/ jquery-ui-1.7.2.custom/js/jquery-1.3.2.min.js` &debug=`1` !]

So, turning from MooTools for Ajax and presumably Animation using &jscript=`jquery` but the resulting jQuery.js is the one within the AjaxSearch Snippet itself. It seems inpropriate (and slow) to load essentially two versions of the same library (I manually load the jQuery and jQueryUI Custome code as per normal process). So I use the &jsJquery command to hopefully change this file.

I suspect that &jsJquery doesn’t work. The ucfg and Debug output don’t show this parameter being changed. Perhaps an incomplete feature and red herring?

So two questions. Any IE specific AjaxSearch and jQueryUI conflicts and does jsJquery work?

Cheers

PS Something has happened to my browser (IE8) that makes Edit windows dance around when typing. As I type this the window automatically scrolls itself up to the middle of the post except for the brief instant that I’m typing. In the Manager it jumps to the bottom. Note - same happens in my Web Host Ticket system. So an Off Topic Not MODx specific issue.

1,717 Posts

coroico Reply #2, 16 years, 9 months ago

If you would like used your own ajax library, the correct snippet call is:

[!AjaxSearch? &jscript=`jquery` &addJscript=`0`!]

If you keep the default &addJscript parameter value, then the js library located by the jsJquery value will be taken (AS_SPATH . ’js/jQuery/jquery.js’)

42 Posts

parthian Reply #3, 16 years, 9 months ago

coroico

With
[!AjaxSearch? &jscript=`jquery` &addJscript=`0` &debug=`1` !]
The jQuery script isn’t added and this stops the Search from working. Completely. No results and the page refreshes each time Go is clicked (kills Ajax).

[!AjaxSearch? &debug=`1` !]
This creates a Mootools search. Search works (IE and FF) but still in IE8 the Animation failed.

I’ve noticed that the Ajaxsearch jQuery is "jQuery 1.2.6" against the current "v1.3.2". I swap these over so same path/name is used. No difference. FF still works IE8 doesn’t. (Maybe a case for the Ajaxsearch Jquery being updated as part of the installation).

So both old and latest jQuery being included for Ajaxsearch breaks the Accordion (IE8) plus the MooTools also breaks the Accordion in IE8. Removing the script as suggested stops the Ajaxsearch dead in its tracks.
So I tried Logging Off and Bingo. Search, Accordion works in Ajax style in IE8 and FF.

In the header I do
<script type="text/javascript">
var $j = jQuery.noConflict();
</script>

The qmEditor also creates $j and this created a conflict of some kind (I would have thought it would simply have re-assigned it...). So changed the manual entered var $j to $jq and in the Accordion code used $jq instead. I had tried that yesterday but no improvement so perhaps I had some other combination of parameters which broke something else..

But still &jsJquery appears not to do anything. And should the advice be to use NOT $j for NoConflict reasons as this simply conflicts with the automatically generated No Conflicts. (the irony)

1,717 Posts

coroico Reply #4, 16 years, 9 months ago

[!AjaxSearch? &jscript=`jquery` &addJscript=`0` &debug=`1` !]
The jQuery script isn’t added and this stops the Search from working. Completely. No results and the page refreshes each time Go is clicked (kills Ajax).

With &addJscript=`0` , you need to add by yourself in your template the link to your js library.

---- &addJscript [1 | 0]     (optional)
        Set this to 1 if you would like to include the mootool/jquery library
        in the header of your pages automatically.

42 Posts

parthian Reply #5, 16 years, 9 months ago

coroico,

This should be enough.

<link type="text/css" href="assets/jquery-ui-1.7.2.custom/css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<script type="text/javascript" src="assets/jquery-ui-1.7.2.custom/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="assets/jquery-ui-1.7.2.custom/js/jquery-ui-1.7.2.custom.min.js"></script>

But somehow Ajaxsearch doesn’t find it.

The Top of the code -

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Test Site</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<link rel="stylesheet" href="/modx-vm/assets/templates/default/site.css" type="text/css" media="screen" />                   
	<link rel="stylesheet" href="/modx-vm/assets/css/style.css" type="text/css" media="screen" />
        <base href="http://localhost/modx-vm/" />

  <!-- Parthian - everything gets jQuery - perhaps a jQuery template?.. -->
  <link type="text/css" href="assets/jquery-ui-1.7.2.custom/css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
  <script type="text/javascript" src="assets/jquery-ui-1.7.2.custom/js/jquery-1.3.2.min.js"></script>
  <script type="text/javascript" src="assets/jquery-ui-1.7.2.custom/js/jquery-ui-1.7.2.custom.min.js"></script>
<!-- No Conflict has to be done here or FF Accordion Fails -->
<script type="text/javascript">
var $jq = jQuery.noConflict();
</script>
	<script type="text/javascript" src="assets/snippets/ajaxSearch/js/jQuery/jquery.js"></script>
	<script type="text/javascript" src="assets/snippets/ajaxSearch/js/ajaxSearch-jquery.js"></script>
<!-- start AjaxSearch header -->
<script type="text/javascript">
//<![CDATA[
as_version = '1.8.4';
advSearch = 'oneword';
subSearch = 5;
ucfg = ' &debug=`1` &extractLength=`80` &jscript=`jquery`';
//]]>
</script>
<!-- end AjaxSearch header -->

Note how ufcg doesn’t include the jsJquery parameter.
And obviously this version has the jQuery included by AS

[!AjaxSearch? &debug=`1` &jscript=`jquery` &addJscript=`1` &jsJquery=`assets/jquery-ui-1.7.2.custom/js/jquery-1.3.2.min.js` &extractLength=`80` !]

This is the working code. addJscript to 0 and the jQuery code goes but the ’previous’ load of the same code doesn’t plug the gap as I think it should.

1,717 Posts

coroico Reply #6, 16 years, 9 months ago

Note how ufcg doesn’t include the jsJquery parameter.

This is normal as the ucfg is the list of parameters used by the popup window and the php pgm called.
In this case, It’s not necessary to transmit the jsJquery parameter. You need only this parameter in the document.

And obviously this version has the jQuery included by AS

If you get "<script type="text/javascript" src="assets/snippets/ajaxSearch/js/jQuery/jquery.js"></script>", this is because you use &addJscript=`1`

May be an issue could exist but the correct snippet call should be: [!AjaxSearch? &jscript=`jquery` &addJscript=`0`!] and you need :
- to add <script type="text/javascript" src="assets/jquery-ui-1.7.2.custom/js/jquery-1.3.2.min.js"></script> in your template.

Some issues could exist as I haven’t tested this jquery release, but in this case you will get a js error.

I will set up a demo with the 1.3.2 release as additionnal js library. I send you a message as soon it will be finished.

42 Posts

parthian Reply #7, 16 years, 9 months ago

coroico,

Forgot to check Firebug for errors. Here it is when &addJscript=`0` and
<script type="text/javascript" src="assets/jquery-ui-1.7.2.custom/js/jquery-1.3.2.min.js"></script>
is in the code as it has been throughout.

$ is not a function
ajaxSearch-jquery.js()ajaxSear...jquery.js (line 146)
[Break on this error] $(activateSearch);\r\n

So when the jquery code is removed due to &addJscript=`0` the previously loaded javascript from jquery-1.3.2.min.js does not plug the gap as it is supposed to. Unless I’ve got something else going on it seems to me that &addJscript=`0` dooms Ajaxsearch to failure.

Yes. Confirmed. Removal of noConflict is the solution.
Getting rid of this does the trick

<script type="text/javascript">
var $jq = jQuery.noConflict();
</script>

Without the noConflict allows the Ajaxsearch to work again. But my accordion code expects $jq so change that and I have &jscript=`jquery` $addJscript=`0` working as an option. Search Works. jQuery Animation Works. All Works whether logged in with QM or not. (Which was the real difference between my IE8 test environment and FF (I was never logged in when using FF so it always worked. When I was logged in I effectively had two var $j = jQuery.noConflict(); lines )).

So $j(plus something else so it doesn’t conflict with the $j added by QM) helps avoid conflict BUT the system only really works without var $jq = jQuery.noConflict(); - can this ever be used with snippets like Ajaxsearch?
I only put it in, in response to articles suggesting it was advisable/necessary to avoid MooTools issues. If I remove &jscript=`jquery` then MooTools is brought in as default and I reckon I’d be back to needing noConflict code again...

Anyone any views on the current best advice for noConflict? Looks like MooTools must always be switched off if a default for a snippet and then you will be okay. But can that always be guaranteed?

Also I think that as the ucfg and Ajaxsearch_log.txt both fail to indicate the actual setting of &jsJquery that this is missleading. I think it is a bug rather than a feature. (particularly in the debug file)

[jsJquery] => assets/snippets/ajaxSearch/js/jQuery/jquery.js -- THIS NEVER CHANGES.

I suppose this is character building.

1,717 Posts

coroico Reply #8, 16 years, 9 months ago

You are right! with

[!AjaxSearch? &jscript=`jquery` &addJscript=`0`!]

ucfg contains &addJscript=`0`
But it useless for setup the popup window and get the results wink

Otherwise find here a demo with [!AjaxSearch? &jscript=`jquery` &addJscript=`0`!] with
<script type="text/javascript" src="assets/snippets/ajaxSearch184/js/jQuery/jquery-1.3.2.min.js"></script> inside the template (follow the link on the demo page)
I haven’t any issue with jquery-1.3.2.min.js

1,717 Posts

coroico Reply #9, 16 years, 9 months ago

Also I think that as the ucfg and Ajaxsearch_log.txt both fail to indicate the actual setting of &jsJquery that this is missleading. I think it is a bug rather than a feature. (particularly in the debug file)

[jsJquery] => assets/snippets/ajaxSearch/js/jQuery/jquery.js -- THIS NEVER CHANGES.

YES, the jsJquery never changes because it’s not a parameter but a value to set where is located the js file provided.
So, I confirm that in the demo the debug file is :

    [addJscript] => 0
    [jsMooTools] => manager/media/script/mootools/mootools.js
    [jsMooTools1.2] => assets/snippets/ajaxSearch184/js/mootools1.2/mootools.js
    [jsJquery] => assets/snippets/ajaxSearch184/js/jQuery/jquery.js

But it’s not a bug. it’s a feature!

With &addJscript=`0` you need to define IN YOUR TEMPLATE where is your own js library. So the jsJquery parameter is not used.

So are you sure that your jquery-1.3.2.min.js is correctly loaded with <script type="text/javascript" src="assets/jquery-ui-1.7.2.custom/js/jquery-1.3.2.min.js"></script> ?

[EDIT] In the next release of AjaxSearc (1.9.0), i will initialize the jsJquery variable to jquery-1.3.2.min.js and takes into account of the last version of the jQuery release.

42 Posts

parthian Reply #10, 16 years, 9 months ago

coroico,

I think we have a communication confusion.

I got everything working yesterday.
The problem was always the use of var $jq = jQuery.noConflict();
I’m not exactly sure why but I presume that all references to $(somefunction) no longer work as the jQuery has been remapped to require $jq(somefunction). So the ajaxSearch-jquery.js breaks - as would any snippet included javascript using the $ shortcut.

My ongoing questions are what impact this has on using any Snippet/Module etc which uses jQuery. I’m guessing that jQuery.noConflict() can’t really be used with MODx in circumstances where Snippets like AjaxSearch are used (which basically means noConflict can be filed in the ’Never Use’ category). So this is an open question not an Ajaxsearch question specifically.

Regarding &jsjQuery we appear to have an even bigger comms failure.
I understand the Debug=`1` creates Log file which shows all the ’variables/constants/parameters’ that happen to be in use at the time the code is run in order to Debug problems.

When I use the following as a test I can see in the Log file that extractLength has changed from the default 200 to 99.

[!AjaxSearch? &debug=`1` &jscript=`jquery` &addJscript=`1` &jsJquery=`assets/jquery-ui-1.7.2.custom/js/jquery-1.3.2.min.js` &extractLength=`99` !]

But in my Source of the resulting web page I get the same jQuery added.

<script type="text/javascript" src="assets/snippets/ajaxSearch/js/jQuery/jquery.js"></script>
<script type="text/javascript" src="assets/snippets/ajaxSearch/js/ajaxSearch-jquery.js"></script>

This suggests that jsJquery is a Constant not a Variable or Parameter.
And therefore cannot be altered programmatically by changing the &jsJquery. Whether the Debug Log file is correct is hard to tell, I think it should reflect whatever settings are in place at the time. I think what you are saying is that some of the parameters are shown in the Log file with their actual current values only if they have a material impact on the actual search. Those that don’t directly impact the search are shown as having their Default values only.

I’ve been using the following Wiki entry for these settings. In it, &jsJquery is defined as a Parameter which has a default of AS_SPATH . ’js/jQuery/jquery.js’ This suggests it can be changed by the developer but I think you are saying it cannot be changed. I wonder if the Wiki is incorrect?
http://wiki.modxcms.com/index.php/AjaxSearch

I wonder if there is some confusion over Search Parameters and the Snippet Parameters.

Anyone else have an opinion?

Cheers