Search code examples
phpjavascriptjquerymootools

PhpGrid(jQuery) and Mootools together


I have a problem with using phpGrid with Mootools library. I have tried the following example with no success. The problem is, that phpGrid prints out from somewhere the following syntax:

<link rel="stylesheet" type="text/css" media="screen" href="/phpGrid/css/start/jquery-ui-1.7.3.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/phpGrid/css/ui.jqgrid.css" />
<script src="/phpGrid/js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="/phpGrid/js/jquery-ui-1.7.3.custom.min.js" type="text/javascript"></script>
<script src="/phpGrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="/phpGrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="/phpGrid/js/grid.import.fix.js" type="text/javascript"></script>

<script type="text/javascript">
var lastSel;jQuery(document).ready(function(){ 
var grid_ws3600 = jQuery("#ws3600").jqGrid({......

That is why I am unable to include:

jQuery.noConflict();

before var lastSel. I have tried scanning files *.js files with Grep to see If I could found that javascript code that is generated there, but with no luck.

For displaying phpGrid table I use what is defined in the docs:

$dg -> display();

My Mootools code:

<script id="source" language="javascript" type="text/javascript">
window.addEvent('domready', function() { myCal1 = new  Calendar({ Date1: 'Y-m-d' },{days: ['Nedelja', 'Ponedeljek', 'Torek', 'Sreda', 'Četrtek', 'Petek', 'Sobota'], 
months: ['Januar', 'Februar', 'Marec', 'April', 'Maj', 'Junij', 'Julij', 'Avgust', 'September', 'Oktober', 'November', 'December'], direction: -1}); });
window.addEvent('domready', function() { myCal2 = new Calendar2({ Date2: 'Y-m-d' },{classes: ['calendar'], days: ['Nedelja', 'Ponedeljek', 'Torek', 'Sreda', 'Četrtek', 'Petek', 'Sobota'], 
months: ['Januar', 'Februar', 'Marec', 'April', 'Maj', 'Junij', 'Julij', 'Avgust', 'September', 'Oktober', 'November', 'December'], direction: -1}); });
</script>

Solution

  • It's never a great idea to use two (relatively) large frameworks that do very similar things simultaneously. You're adding overhead like crazy, which will ultimately slow your application down.

    I have a (garbage legacy) app that has to run both Jquery and Prototype and it's working fine if I just replace all the $ with jQuery (it is case specific, at least in my application) I've seen the noConflict listed all over the web, but it's working just fine without it for me. Again, as soon as it's feasible to un-do the Prototype mess and convert it over to Jquery, I'll be doing that....but our shop has been overwhelmed with work for some time now, so I haven't had the chance.

    As an aside, I'm a huge fan of DataTables and would recommend you take a look at it--I've used it hundreds of times in apps and clients LOVE it. I'm also a big fan of Jquery UI, which includes a wonderful calendar app and is already available to you via your UI include. Jquery UI will have it's own grid released in the next 6-12 months, which will mean even less overhead for script downloads.