Welcome, Guest
Username: Password: Remember me
  • Page:
  • 1
  • 2

TOPIC: Integrating jqGrid inside backend item view (help)

Integrating jqGrid inside backend item view (help) 27 Feb 2013 09:27 #6847

  • dieda1821
  • dieda1821's Avatar
  • Offline
  • Senior Member
  • Posts: 53
  • Thank you received: 2
  • Karma: 4
Hi,

I'm trying to integrate jqGrid inside a backend item form. The idea is to handle m-n relations using the grid.

When the user open the item view (input-output from table A) some of the fields are rendered as a grid (jqGrid) connected to table C. The grid should already contain:
- id of the item, from table A
- a drop-down cell (e.g. id of a second element), from table B
- some fields to be filled by the user -> the complete row is then written to the m-n C table.

An example could be a reference book.

Label of the field: bibliography
- id of the item
- id of the book (from a drop-down cell)
- Field "page number" to be filled by the user.

So far I am just trying to use a simple grid (no drop-down cells) to show/edit data from/to an external table, i.e. I am trying to reproduce the "inline navigator" (add-delete rows section) demo here: [url]=http://www.trirand.net/demophp.aspx[/url] .

Here is what I did.

1) Copy the jqSuite folder inside admin (change accordingly the mycomponent.xml root file)
2) Inside admin/helpers/helper.php I have added, inside headerDeclarations:
// CUSTOM JqGrid
		//$doc->addScript($componentUrlAdmin . 'jqsuite/js/jquery.js');
		$doc->addScript($componentUrlAdmin . 'jqsuite/js/i18n/grid.locale-en.js');
		
		$doc->addScript($componentUrlAdmin . 'jqsuite/js/jquery.jqGrid.min.js');
		$doc->addScript($componentUrlAdmin . 'jqsuite/js/jquery-ui-custom.min.js');
		// END CUSTOM JqGrid

I have commented the first line as jquery.js is the non minified 1.8.2 version, that should be the same as 1.8.2.min.js already loaded by Cook.
In the [CSS] part of the function
//CUSTOM JQGRID
			$doc->addStyleSheet($componentUrlAdmin . '/css/jqsuite/themes/redmond/jquery-ui-custom.css');
			$doc->addStyleSheet($componentUrlAdmin . '/css/jqsuite/themes/ui.jqgrid.css');
			$doc->addStyleSheet($componentUrlAdmin . '/css/jqsuite/themes/ui.multiselect.css');
			//END CUSTOM

3) Inside views/item/tmpl/item.php I have modified the ready(function()) as follows:
jQuery(document).ready(function(){
		jQuery("#adminForm").validationEngine();
		jQuery("#grid").jqGrid();

4) Inside views/item/tmpl/item_form.php, after </fieldset> I have added:
<div class="elena">
          <?php include ("grid.php");?>
      </div>

5) I have created the grid.php file and I have saved it inside views/item/tmpl/. The file is copied from Trirand demo site, except for the fact that I have disabled the tab view under the grid and that I have replaced this code:
// Connection to the server
$conn = new PDO(DB_DSN,DB_USER,DB_PASSWORD);
// Tell the db that we use utf-8
$conn->query("SET NAMES utf8");

with this one:
$db = JFactory::getDBO();
$conn = $db -> getQuery(true);

Then the grid is rendered normally with:
$grid = new jqGridRender($conn);

Now, when I load my item view, I don't see any grid (I also tried loading some data directly inside the database, but nothing appears).

Firefox shows that this code is generated:
<div class="elena">
<table id="grid"></table>
<script type="text/javascript">
jQuery(document).ready(function($) {jQuery('#grid').jqGrid({"width":"650","hoverrows":true,"viewrecords":true,"jsonReader":{"repeatitems":false,"subgrid":{"repeatitems":false}},"xmlReader":{"repeatitems":false,"subgrid":{"repeatitems":false}},"gridview":true,"url":"C:\\xampp_old\\htdocs\\seblod\/administrator\\components\\com_manta\\views\\element\\tmpl\\grid.php","editurl":"C:\\xampp_old\\htdocs\\seblod\/administrator\\components\\com_manta\\views\\element\\tmpl\\grid.php","cellurl":"C:\\xampp_old\\htdocs\\seblod\/administrator\\components\\com_manta\\views\\element\\tmpl\\grid.php","caption":"This is custom Caption","rowNum":10,"sortname":"id_el","rowList":[10,20,50],"postData":{"grid_recs":776,"oper":"grid"},"datatype":"json","colModel":[],"prmNames":{"page":"page","rows":"rows","sort":"sidx","order":"sord","search":"_search","nd":"nd","id":"id_el","filter":"filters","searchField":"searchField","searchOper":"searchOper","searchString":"searchString","oper":"oper","query":"grid","addoper":"add","editoper":"edit","deloper":"del","excel":"excel","subgrid":"subgrid","totalrows":"totalrows","autocomplete":"autocmpl"},"loadError":function(xhr,status, err){ try {jQuery.jgrid.info_dialog(jQuery.jgrid.errors.errcap,'<div class="ui-state-error">'+ xhr.responseText +'</div>', jQuery.jgrid.edit.bClose,{buttonalign:'right'});} catch(e) { alert(xhr.responseText);} },"pager":"#pager"});jQuery('#grid').jqGrid('navGrid','#pager',{"edit":false,"add":false,"del":true,"search":true,"refresh":true,"view":false,"excel":false,"pdf":false,"csv":false,"columns":false},{"drag":true,"resize":true,"closeOnEscape":true,"dataheight":150,"errorTextFormat":function(r){ return r.responseText;}},{"drag":true,"resize":true,"closeOnEscape":true,"dataheight":150,"errorTextFormat":function(r){ return r.responseText;}},{"errorTextFormat":function(r){ return r.responseText;}},{"drag":true,"closeAfterSearch":true,"multipleSearch":true},{"drag":true,"resize":true,"closeOnEscape":true,"dataheight":150});jQuery('#grid').jqGrid('inlineNav','#pager',{"addParams":{"addRowParams":{"oneditfunc":function()
{
alert("oneditfunc");
}},"aftersavefunc":function (id, res)
{
res = res.responseText.split("#");
try {
$(this).jqGrid('setCell', id, res[0], res[1]);
$("#"+id, "#"+this.p.id).removeClass("jqgrid-new-row").attr("id",res[1] );
$(this)[0].p.selrow = res[1];
} catch (asr) {}
}},"editParams":{"aftersavefunc":function (id, res)
{
res = res.responseText.split("#");
try {
$(this).jqGrid('setCell', id, res[0], res[1]);
$("#"+id, "#"+this.p.id).removeClass("jqgrid-new-row").attr("id",res[1] );
$(this)[0].p.selrow = res[1];
} catch (asr) {}
}}});
});
</script>
</div>

So, something seems to happen, but then Firefox also gives this error:

TypeError: jQuery(...).jqGrid is not a function
jQuery("#grid").jqGrid();

That is the code I put in my item.php file (following what stated here: [url]=http://www.trirand.com/jqgridwiki/doku.php?id=wiki:conventions[/url]

Can anyone help me getting this working ?

Thanks for any possible suggestion !

Elena
Last Edit: 27 Feb 2013 09:29 by dieda1821. Reason: typos inserting external url
The administrator has disabled public write access.

Re: Integrating jqGrid inside backend item view (help) 27 Feb 2013 09:42 #6848

  • JoomGuy
  • JoomGuy's Avatar
  • Offline
  • Moderator
  • Joomla Enthusiast, Lover of Cooking
  • Posts: 1115
  • Thank you received: 195
  • Karma: 68
Hi Elena,

Try throwing an alert('Step X in function') or console.log(myVar) after each step in the function or using the script panel to set breakpoints in the script.

I have a feeling that this may well be related to the fact that jQuery isn't already available, i.e. it's not been loaded before your call on the grid. What order do they appear in the head of your HTML?

Also, just as a small matter of interest, you might like to check out this alternative to jqGrid: square-bracket.com/openjs - it's free and opensource and pretty awesome! I have to admit, I don't have experience with jqGrid as I'd always prefer to use something free and open + the license is pretty expensive.

Anyway, hope it helps!

Gez
Need help with your Cook/Joomla Project? . PM me to find out what I can help with. NO time wasters please!!!
The administrator has disabled public write access.

Re: Integrating jqGrid inside backend item view (help) 27 Feb 2013 10:04 #6849

  • dieda1821
  • dieda1821's Avatar
  • Offline
  • Senior Member
  • Posts: 53
  • Thank you received: 2
  • Karma: 4
Hi Gez,

I also think it's something related to the loading order.

This how the <head> content appears in Firebug:
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<meta content="Joomla! - Open Source Content Management" name="generator">
<title>MantaJ! - Elemento</title>
<link type="image/vnd.microsoft.icon" rel="shortcut icon" href="/seblod/administrator/templates/bluestork/favicon.ico">
<link type="text/css" href="/seblod/administrator/components/com_manta/css/validationEngine.jquery.css" rel="stylesheet">
<link type="text/css" href="/seblod/administrator/components/com_manta/css/manta.css" rel="stylesheet">
<link type="text/css" href="/seblod/administrator/components/com_manta/css/toolbar.css" rel="stylesheet">
<link type="text/css" href="/seblod/administrator/components/com_manta/css/jquery-ui-1.9.1.min.css" rel="stylesheet">
<link type="text/css" href="/seblod/administrator/components/com_manta/css/jqsuite/themes/redmond/jquery-ui-custom.css" rel="stylesheet">
<link type="text/css" href="/seblod/administrator/components/com_manta/css/jqsuite/themes/ui.jqgrid.css" rel="stylesheet">
<link type="text/css" href="/seblod/administrator/components/com_manta/css/jqsuite/themes/ui.multiselect.css" rel="stylesheet">
<link type="text/css" href="/seblod/media/system/css/modal.css" rel="stylesheet">
<link media="all" title="Verde" type="text/css" href="/seblod/media/system/css/calendar-jos.css" rel="stylesheet">
<link type="text/css" href="/seblod/administrator/components/com_manta/dom/assets/cook/css/cook.css" rel="stylesheet">
<link type="text/css" href="templates/system/css/system.css" rel="stylesheet">
<link type="text/css" href="templates/bluestork/css/template.css" rel="stylesheet">
<style type="text/css">
<script type="text/javascript" src="/seblod/media/system/js/mootools-core.js">
<script type="text/javascript" src="/seblod/media/system/js/core.js">
<script type="text/javascript" src="/seblod/administrator/components/com_manta/js/jquery-1.8.2.min.js">
<script type="text/javascript" src="/seblod/administrator/components/com_manta/js/jquery-ui-1.9.1.min.js">
<script type="text/javascript" src="/seblod/administrator/components/com_manta/js/jquery.validationEngine.js">
<script type="text/javascript" src="/seblod/administrator/components/com_mantajqsuite/js/i18n/grid.locale-en.js">
<script type="text/javascript" src="/seblod/administrator/components/com_mantajqsuite/js/jquery.jqGrid.min.js">
<script type="text/javascript" src="/seblod/administrator/components/com_mantajqsuite/js/jquery-ui-custom.min.js">
<script type="text/javascript" src="/seblod/media/system/js/modal.js">
<script type="text/javascript" src="/seblod/media/system/js/calendar.js">
<script type="text/javascript" src="/seblod/media/system/js/calendar-setup.js">
<script type="text/javascript" src="/seblod/media/system/js/mootools-more.js">
<script type="text/javascript">
<script src="http://localhost/seblod/media/editors/tinymce/jscripts/tiny_mce/tiny_mce.js" type="text/javascript">
<script type="text/javascript">
<link rel="stylesheet" href="http://localhost/seblod/media/editors/tinymce/jscripts/tiny_mce/themes/advanced/skins/default/ui.css">
<link rel="stylesheet" href="http://localhost/seblod/media/editors/tinymce/jscripts/tiny_mce/plugins/inlinepopups/skins/clearlooks2/window.css">

In the meantime I'll modify the code as you suggest.
The administrator has disabled public write access.

Re: Integrating jqGrid inside backend item view (help) 27 Feb 2013 10:16 #6850

  • JoomGuy
  • JoomGuy's Avatar
  • Offline
  • Moderator
  • Joomla Enthusiast, Lover of Cooking
  • Posts: 1115
  • Thank you received: 195
  • Karma: 68
Hi Elena,

**********EDIT**********

Could this be the problem:
<script type="text/javascript" src="/seblod/administrator/components/com_mantajqsuite/js/jquery-ui-custom.min.js">
? Seems to be called twice?

Hope it's that simple!!!

G
Need help with your Cook/Joomla Project? . PM me to find out what I can help with. NO time wasters please!!!
Last Edit: 27 Feb 2013 10:21 by JoomGuy. Reason: EDIT wrong script
The administrator has disabled public write access.

Re: Integrating jqGrid inside backend item view (help) 27 Feb 2013 10:21 #6851

  • JoomGuy
  • JoomGuy's Avatar
  • Offline
  • Moderator
  • Joomla Enthusiast, Lover of Cooking
  • Posts: 1115
  • Thank you received: 195
  • Karma: 68
Edit
Need help with your Cook/Joomla Project? . PM me to find out what I can help with. NO time wasters please!!!
The administrator has disabled public write access.

Re: Integrating jqGrid inside backend item view (help) 27 Feb 2013 10:38 #6853

  • dieda1821
  • dieda1821's Avatar
  • Offline
  • Senior Member
  • Posts: 53
  • Thank you received: 2
  • Karma: 4
Hi Gez,

First of all thanks for the grid suggestion. I had the impression that jqGrid was free for non-commercial components...anyhow if the oher is simpler and more free, I will certainly give a look at it!

I have followed your suggestion and echoed some console.log messages.

All the messages inserted in grid.php appear a part the very last one.

In other words, the code seems to be executed until it comes at the final line:
$grid->renderGrid('#grid','#pager',true, null, null, true,false);

Ups, I have just seen your message. I'll comment the line that loads jquery-ui-custom.min.js and let you know !
Last Edit: 27 Feb 2013 10:39 by dieda1821.
The administrator has disabled public write access.

Re: Integrating jqGrid inside backend item view (help) 27 Feb 2013 10:42 #6854

  • JoomGuy
  • JoomGuy's Avatar
  • Offline
  • Moderator
  • Joomla Enthusiast, Lover of Cooking
  • Posts: 1115
  • Thank you received: 195
  • Karma: 68
In all honest, it's a bit of a long shot that loading UI twice could cause this but, it's worth a try...

The only other thing to check is the order of the 2 jqGrid js scripts: the main and locale... Are they definitely in the correct order?

Gez
Need help with your Cook/Joomla Project? . PM me to find out what I can help with. NO time wasters please!!!
The administrator has disabled public write access.

Re: Integrating jqGrid inside backend item view (help) 27 Feb 2013 10:47 #6855

  • dieda1821
  • dieda1821's Avatar
  • Offline
  • Senior Member
  • Posts: 53
  • Thank you received: 2
  • Karma: 4
Hi,

I don't have the impression that
<script type="text/javascript" src="/seblod/administrator/components/com_mantajqsuite/js/jquery-ui-custom.min.js">

is called twice. Anyhow, if I comment the line that loads the file, nothing changes.

Shall I give it up and try with Open JS Grid (if you tried the integration, and were successful, it would already be a positive starting point :-)) ?

Elena
The administrator has disabled public write access.

Re: Integrating jqGrid inside backend item view (help) 27 Feb 2013 11:04 #6856

  • JoomGuy
  • JoomGuy's Avatar
  • Offline
  • Moderator
  • Joomla Enthusiast, Lover of Cooking
  • Posts: 1115
  • Thank you received: 195
  • Karma: 68
Sorry! I must have mis-read the code! :oops:

I haven't actually integrated it into an MVC component however, I did start to take a look at it.

I did integrate it into a site about a year ago - it's pretty straightforward on it's own however, it gets a bit more complex with MVC as really speaking, one would need to abstract the class (create a bridge between it & your component) - for example, using JDom - as you wouldn't want to utilise the PHP globals POST and so on from the grid.php file + you already have all of your save, update, delete methods in your models.

Obviously, the advantage of going this route is that you'd be able to call a grid anywhere in your component + re-use it in any other cook projects too!

The only disappointing thing about openJSGrid is it's lack of filtering - again, this is where integrating it will make it even more powerful! Naturally, you'll be able to use your filters and the state vars from cook to pass into the query too.

The docs are not complete for openJSGrid but they're pretty good and include API info etc. There are also video tuts on the devs YouTube Channel: www.youtube.com/user/optikalefxx

Sorry I can't be more help!

Gez
Need help with your Cook/Joomla Project? . PM me to find out what I can help with. NO time wasters please!!!
The administrator has disabled public write access.

Re: Integrating jqGrid inside backend item view (help) 27 Feb 2013 11:16 #6857

  • dieda1821
  • dieda1821's Avatar
  • Offline
  • Senior Member
  • Posts: 53
  • Thank you received: 2
  • Karma: 4
I have re-checked the order of the calls and maybe I found the trouble (I forgot that since during the trials I accidentally deleted the lines). This how the files are loaded in the demo example, note the script declaration:
<script src="../../../js/jquery.js" type="text/javascript"></script>
    <script src="../../../js/i18n/grid.locale-en.js" type="text/javascript"></script>
    <script type="text/javascript">
    $.jgrid.no_legacy_api = true;
    $.jgrid.useJSON = true;
    </script>
    <script src="../../../js/jquery.jqGrid.min.js" type="text/javascript"></script>
    <script src="../../../js/jquery-ui-custom.min.js" type="text/javascript"></script>

In order to add the $, lines I have tried two solutions:

1) Adding the following line:
$doc->addScriptDeclaration("$.jgrid.no_legacy_api = true; $.jgrid.useJSON = true;");

But then the declaration goes inside the validor js engine and messes everything in the form.

2) Using the Cook generated area "How to write a plugin in non-conflict mode" :

Cook area
/*
		 * How to write a plugins in non-conflict modes :
		 *
		 (function($){
		// Write your code here, using $.
		// The local var $ represents jQuery framework
		})(jQuery);

My code
(function($){
		$.jgrid.no_legacy_api = true;
		$.jgrid.useJSON = true;
		// The local var $ represents jQuery framework
		}(jQuery);)

But in this case the editor is complaining wrong syntax...
The administrator has disabled public write access.

Re: Integrating jqGrid inside backend item view (help) 27 Feb 2013 11:29 #6858

  • JoomGuy
  • JoomGuy's Avatar
  • Offline
  • Moderator
  • Joomla Enthusiast, Lover of Cooking
  • Posts: 1115
  • Thank you received: 195
  • Karma: 68
To avoid those sorts of issues, I have recently resorted to writing, 'jQuery(...)' instead of '$(...)'.

This way, you can always be sure that you're not going to get any collisions.

G
Need help with your Cook/Joomla Project? . PM me to find out what I can help with. NO time wasters please!!!
The administrator has disabled public write access.

Re: Integrating jqGrid inside backend item view (help) 27 Feb 2013 11:30 #6859

  • JoomGuy
  • JoomGuy's Avatar
  • Offline
  • Moderator
  • Joomla Enthusiast, Lover of Cooking
  • Posts: 1115
  • Thank you received: 195
  • Karma: 68
BTW, you seem to have an extra ')' after your semicolon...

G
Need help with your Cook/Joomla Project? . PM me to find out what I can help with. NO time wasters please!!!
The administrator has disabled public write access.

Re: Integrating jqGrid inside backend item view (help) 27 Feb 2013 12:01 #6860

  • dieda1821
  • dieda1821's Avatar
  • Offline
  • Senior Member
  • Posts: 53
  • Thank you received: 2
  • Karma: 4
You're right!
Unfortunately it's not the ) that is causing the issue, it start complaining on
(function($){

Aptana underlines $ as a syntax error...(here I am surely missing something very easy...).
The administrator has disabled public write access.

Re: Integrating jqGrid inside backend item view (help) 27 Feb 2013 12:26 #6861

  • dieda1821
  • dieda1821's Avatar
  • Offline
  • Senior Member
  • Posts: 53
  • Thank you received: 2
  • Karma: 4
I have managed to insert those lines without conflicts with validationEngine (I used jQuery. instead of $. and that did the trick), but still the grid does not work.

Errrors now became two:
TypeError: jQuery.jgrid is undefined
jQuery.jgrid.no_legacy_api = true; jQuery.jgrid.useJSON = true;

TypeError: jQuery(...).jqGrid is not a function
jQuery("#grid").jqGrid();

It complains always for the same cause, but now it starts complaining from helper.php

Inside helper.php my lines are now:
$doc->addScript($componentUrlAdmin . 'jqsuite/js/i18n/grid.locale-en.js');
		$doc->addScriptDeclaration("jQuery.jgrid.no_legacy_api = true; jQuery.jgrid.useJSON = true;");		
		$doc->addScript($componentUrlAdmin . 'jqsuite/js/jquery.jqGrid.min.js');
		$doc->addScript($componentUrlAdmin . 'jqsuite/js/jquery-ui-custom.min.js');
The administrator has disabled public write access.

Re: Integrating jqGrid inside backend item view (help) 27 Feb 2013 12:35 #6862

  • JoomGuy
  • JoomGuy's Avatar
  • Offline
  • Moderator
  • Joomla Enthusiast, Lover of Cooking
  • Posts: 1115
  • Thank you received: 195
  • Karma: 68
I think that the problem at the moment is that the line:
$doc->addScriptDeclaration("jQuery.jgrid.no_legacy_api = true; jQuery.jgrid.useJSON = true;");
should be called when the document is ready.

Hope it helps!

Gez
Need help with your Cook/Joomla Project? . PM me to find out what I can help with. NO time wasters please!!!
The administrator has disabled public write access.
  • Page:
  • 1
  • 2
Time to create page: 0.108 seconds

Get Started