Hi,

I have a general question related to extensions which include jQuery.

I'm getting troubles when using different webpages that holds extensions that uses the jQuery library. The main reason for my problem is that i load many pages dynamically into one main page.

For example: I have one main page which includes your CSS Navigation Menu extension. This extensions writes <script code> to reference the jQuery library file.
Now i have another page with AJAX grid which get's loaded into the main page. The AJAX grid also references a jQuery library. When loading this page into the main page the AJAX Grid does not work because at that moment i have two <script references to the jQuery library.
Solution: i removed the jQuery reference on the AJAX grid page and then when it loads into the main page it works. However if you load the page seperately then it does not work because the jQuery reference is missing on this page. This means it works one way or the other.
For this example i found this solution for me to work but is there another way to solve this issue?

I currently also tried to load a page which uses another 3th party extension (with jQuery) however when doing the same trick with that extension does not solve my problem. The 3th party extension does not work the way it should but if i leave it normal then the CSS navigation menu does not work/look the way it should, conflicts again.

The 3th party supplier of that extension could not yet give me the final solution so i hope maybe you can give some more info as this affects all jQuery extensions which i load dynamically into another.

Thanks for any feedback.

Dave

Hello Dave can you please link us to the problem page ?

Regards:Vulcho.

I currently don't have my testing server online but i will try to setup something again tonight for you to see it in action. However you can easily test what i mean.

Create one page with CSS Navigation Menu
Create another page with AJAX Grid

Then dynamically load the Grid page into the main page (with CSS menu)
I use Webassist framebuilder to do that, it loads different pages depending on the menu tab i choose like:
mainpage.php?module=gridpage will load the grid page.
mainpage.php?module=about will load about page and so on.

if i remember right then the refrence which i had to delete from the Grid page was something like:
<script src="new-jQuery.js" /> I'm not sure about the exact name but it is the line that references the jQuery library file. If this call is executed two time, because the second page is included into the first page, it generates a conflict causing the second page (Grid) not to work.

I will inform you when i have setup a working example on my testing server for you.

Thanks for the support, i really appreciate it.
Dave

Hello,

The jquery library itself DOES NOT ALLOW to be included more than once on one page.

Hi,

I have noticed that.
I just wonder if there is a workaround to avoid these libraries from loaded twice or more when combining extensions that make use of them?

As mentioned before, in above example it was easy to trace the reference on the Grid page and delete it but from another 3th party extension it seems not to be so easy.
I'm still hoping the developer can give me a solution so i can use it together with your CSS Navigation Menu, because removing the code from his extension causes that extension not to work properly anymore or the CSS Menu does not work properly anymore.
I'm sure i'm not the first having troubles combining extensions on the same page that make use of jQuery libraries. If there is no workaround besides deleting original coding then it will become very tricky to combine them. Please correct me if i'm wrong, i'm not an expert but i'm facing difficulties already this way.

Thanks.

Using several extensions on a same is absolutely not a problem of course. Most probably there is some problem with the way you include them.
Please provide a link and we will check the issue.

Hi Teodor,

I put my testserver online at: dvanzelst.homeip.net
On the page you will see the CSS Navigation Menu extension and if you go to the tab 'test form' it will load the other 3th party Grid extension. However this causes the menu to break apart.

If i however delete below code from below file then the menu stays normal but the grid looses functionality.

The file: /dwzGrid/AjaxDataGrid.php
Code line 4222: $retval .= "<script type='text/javascript' src='" .$root ."dwzGrid/js/jquery-min.js' ></script>" .$aCapo;

The supplier of the grid extension could not give me a solution yet and i can't get it to work together with the menu.

The ftp server is on: ftp://dvanzelst.homeip.net:20 (port 20) if you would like to test something then go ahead.

Thanks for trying and support.

Dave

Okay, can you please also upload a page with

<script type='text/javascript' src='dwzGrid/js/jquery-min.js' ></script>

line removed?

This reply was removed on 4/25/2012 1:53:13 PM.
See the changelog

Just uploaded one without this code.
You can find it under the test form 2 tab, but then the show/hide column in the grid does not work anymore.

Test form = with the code (default)
test form 2 = without the code (modified)

Dave

Hello,

I see the problem - the Grid is using some old version of jquery: jQuery JavaScript Library v1.5.2 - using a newer version seems to be causing the issue.

The Current jQuery Release is: v1.7.2 - we are currently migrating all of our extensions to 1.7.2

Hi Teodor,

That's great you find the root cause.
So basically the grid has to be updated to the new jQuery and then it should work with the CSS navigation Menu?
Anything else i need to do to make it work together?

Thanks for having a look at my test server.

Dave

You can try moving the <script type='text/javascript' src='dwzGrid/js/jquery-min.js' ></script> code in the place of jquery latest pack line. I think the menu should be able to work with this older version.

I will give it a try to see what happens and post the outcome.

So basically the main reason is that two different versions of the jQuery library are being used on the same page.

Changing one of them to the same version could be the solution? Either the Navigation to the old version or the grid to the new version. Did i understand it correctly?

Thanks.

Hi Teodor,

I just want to confirm to you that your suggestion really does work. Changing the jQuery version of the CSS menu to the same version the grid is using and deleting that code from the grid as well makes and the menu and the grid work together.

Thanks a lot for your support in this case.

Dave

Thanks for the feedback1
It seems the grid you are using is having issues with the latest jquery versions - seems like it needs an update

Yes seems like but i'm still very thankfull that you were able to track down this issue for me.

keep up the good work and the great support!