Welcome, Guest

TOPIC: Integrating jqGrid inside backend item view (help)

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

dieda1821
Offline
Senior Member
Posts: 53
Thank you received: 2
Karma: 4

If I move the declaration to the ready(function()) like this:

jQuery(document).ready(function(){
		jQuery("#adminForm").validationEngine();
		jQuery("#grid").jqGrid();
		jQuery.jgrid.no_legacy_api = true; 
		jQuery.jgrid.useJSON = true;
		
	});

Then I have the second error (was the first one) only:

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

It seems it's lacking some sort of definition of the function.
Did I skip something in process of integrating a javascript tool into the Joomla! component ?

The administrator has disabled public write access.

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

JoomGuy
Offline
Moderator
Joomla Enthusiast, Lover of Cooking
Posts: 1115
Thank you received: 195
Karma: 64

Try simply creating a new ready function like:

jQuery(document).ready(function(){
	jQuery("#grid").jqGrid();
	jQuery.jgrid.no_legacy_api = true; 
	jQuery.jgrid.useJSON = true;
});

It should add it to the existing doc ready if there is one...

One last thing (and if that doesn't work... Are you sure that the following calls are correct?

jQuery.jgrid.no_legacy_api = true; 
jQuery.jgrid.useJSON = true;

I mean, should they be passed as an object inside of your initial grid call, something like:

jQuery(document).ready(function(){
	jQuery("#grid").jqGrid({
             no_legacy_api : true,
             useJSON : true
        });
});

???

I may be wrong but most plugins utilise a configuration object like this...

Gez

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 12:57 by JoomGuy. Reason: Edit

The administrator has disabled public write access.

Re: Integrating jqGrid inside backend item view (help) 27 Feb 2013 13:24 #6865

dieda1821
Offline
Senior Member
Posts: 53
Thank you received: 2
Karma: 4

Well...the jqGrid code on Trirand site is written for a simple web page, so I'm trying to adapt it to a Joomla! component (a MVC version exists, but that's not free).

The original Trirand <head> code (for a simple web page is the following):

<title>jqGrid PHP Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" media="screen" href="../../../themes/redmond/jquery-ui-1.8.2.custom.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="../../../themes/ui.jqgrid.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="../../../themes/ui.multiselect.css" />
    <style type="text">
        html, body {
        margin: 0;            /* Remove body margin/padding */
        padding: 0;
        overflow: hidden;    /* Remove scroll bars on browser window */
        font-size: 75%;
        }
        .ui-elipsis {text-overflow:ellipsis; -moz-binding:url('../../../themes/ellipsis-xbl.xml#ellipsis') }
    </style>
    <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>

So I tried first of all to reproduce the same calls inside my code (using the helper.php file).

Then, I read this post about integrating jquery functions into the Cook component:

http://j-cook.pro/forum/35-jquery/4138-how-to-add-jquery-ui-to-your-component#4138

And I followed the instructions...but I am not 100% sure about anything since I am, so to say, an expert IKEA cabinet mounter but not a real woodworker

The administrator has disabled public write access.

Re: Integrating jqGrid inside backend item view (help) 27 Feb 2013 13:33 #6866

dieda1821 Offline Senior Member Posts: 53 Thank you received: 2 Karma: 4	I checked the spelling of jgrid/jqgrid, since the example refers to the jgrid function (and not jqgrid), so now I turned all the jqgrid that inserted in jgrid (despite the wiki refers to jqgrid). Nothing changes...the complaint became: "jgrid is not a function".
	The administrator has disabled public write access.

Re: Integrating jqGrid inside backend item view (help) 27 Feb 2013 13:40 #6867

JoomGuy
Offline
Moderator
Joomla Enthusiast, Lover of Cooking
Posts: 1115
Thank you received: 195
Karma: 64

Have you tried it in a simple HTML page?

If not I'd recommend doing so before proceeding... This is going to be a very simple thing to fix I'm sure - just like a missing screw from an IKEA package that you don't realise is missing!

I know that's not that helpful at the moment but, try building in plain HTML page as it may reveal an error in their docs... I've had issues like this before where it's been due to a very small syntax update that wasn't documented or an outright error.

Best,

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 14:28 #6868

dieda1821
Offline
Senior Member
Posts: 53
Thank you received: 2
Karma: 4

I hadn't tried but I have just now.

If I load the jqsuite folder in my local xampp, update the config.php file to give access to the mysql db, then the dafault.php file that corresponds to my case works (both read and write).

It's a simple PHP file with the <head> part and an include instruction

<?php include ("grid.php");?>

I have recreated (tried to) the structure by:

1) helper.php -> build the head
2) item.php -> ready(function())
2) item_form.php -> include grid.php
3) grid.php -> created but adapting the database querying

Did I miss a step ?

The administrator has disabled public write access.

Re: Integrating jqGrid inside backend item view (help) 03 Mar 2013 09:48 #6896

JoomGuy Offline Moderator Joomla Enthusiast, Lover of Cooking Posts: 1115 Thank you received: 195 Karma: 64	All looks OK! Is it working? 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) 03 Mar 2013 19:26 #6901

dieda1821
Offline
Senior Member
Posts: 53
Thank you received: 2
Karma: 4

Hi,

Not yet. I have also posted an help request on Trirand forum. They also think the .js are not loaded correctly.
I have set a test site with the component installed (if you want I can pm you the address and the credentials so you can see the page). By looking at Firebug NET panel, js section, all files seems to be loaded but they appear in state "304 not modified", instead of "200 loaded"...I still don't know what this implies...

Elena

The administrator has disabled public write access.

Re: Integrating jqGrid inside backend item view (help) 03 Mar 2013 19:40 #6902

JoomGuy
Offline
Moderator
Joomla Enthusiast, Lover of Cooking
Posts: 1115
Thank you received: 195
Karma: 64

The 304 error is nothing to worry about in itself, it simply means that the page has not been updated since it was last visited. See: www.checkupdown.com/status/E304.html for more details.

Recently, I cloned the HTML output of an erroneous view I was working on (JS issues), pasted it into a new, blank html page on my site, then started to work my way though the scripts, disabling them all then enambling them one by one until I reproduce the error.

I haven't got time to check right now but if you want to skype IM or PM me on Facebook, I'll try to take a quick look ASAP (tomorrow hopefully) and get back to you.

Did you check out OpenJSGrid? If not there are definitely videos on YouTube (user: optikalfx I think).

Catch you soon!

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) 06 Mar 2013 10:03 #6919

dieda1821
Offline
Senior Member
Posts: 53
Thank you received: 2
Karma: 4

Hi,

After some refresh, and cleaning the cache, I can see all the .js files in "200 Ok" status (still not working, though

).

Honestly I have not checked OpenJSGrid yet since everything seemed so easy with jqGrid until now...and now I really would like to understand what is wrong !!!!

There is only a point that I have not reproduced exactly, where maybe you could give me a hint.

The original code (that I'm trying to reproduce) shows these lines in the "head" part:

<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>

I don't think I have problems with the file loading BUT if, inside my helper.php file, I place a

$doc->addScriptDeclaration("whatever");

between the

$doc->addScript($componentUrlAdmin . '/jqsuite/js/i18n/grid.locale-en.js');
		$doc->addScript($componentUrlAdmin . '/jqsuite/js/jquery.jqGrid.min.js');

then the script is not rendered there where I place it: it goes messing the validator.js code.

To avoid confilcts I followed your suggestion and I placed the script inside the element.php jQuery(document).ready(function()

Anyhow, how do I have to proceed if I want exactly those lines to be rendered before the jqGrid.min.js load, that is, to reproduce exactly the head of the example I am following ?

Thanks for any possible suggestion.

The administrator has disabled public write access.

Re: Integrating jqGrid inside backend item view (help) 15 Mar 2013 09:09 #6943

dieda1821
Offline
Senior Member
Posts: 53
Thank you received: 2
Karma: 4

Hi, in the end I decided to give up with jqGrid, and skipped to "dhtmlxGrid".

I gave a look to OpenJS, but dhtmlxGrid has the advantage of having A LOT of documentation available (videos, tutoroials, guides, forum, ecc...), whereas I couldn't find the same amount of info related to OpenJS.

I'm going to write a separate post to describe how I integrated dhtmlx inside my Cook component (so far, loading data only).

Thanks for the assistance!

Elena

The administrator has disabled public write access.