jQuery Grid Plugin - jqGridForum

Forum

November 2nd, 2014

A A A

Topic RSS

jqGrid inside Wordpress

24/10/2008
17:40

Luigino

Member

Members

Forum Posts: 47

Member Since:
25/10/2008

Offline

Hello everyone....

I'm trying to use jqGrid while implementing a new personal plugin for wordpress blog so I put the whole folder jgGrid unzipped then in the .php where there's the main plugin's page I put:

but with Firebug it keeps saying an error at line:

if (jQuery.browser.safari || jQuery.browser.msie) { <----- the error is jQuery is not defined - inside jquery.jqGrid.js)

and another error at line:

height:210 <----- the error is: jQuery("#navgrid").jqGrid is not a function

Why? at least the code looks pretty like the ones in the jqGrid demos... do you have any suggest?

Thanks to all!

Ciao, Luigi

25/10/2008
06:51

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

Be a sure that you load all the needed js files including base.grid.js

Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

25/10/2008
15:35

Luigino

Member

Members

Forum Posts: 47

Member Since:
25/10/2008

Offline

In fact I have this jquery.jqGrid.js which as the function jqGridInclude() settled as follow:

function jqGridInclude()
{
    var pathtojsfiles = "../wp-content/plugins/toscanoviaggi/jqGrid/js/"; // need to be ajusted
    // set include to false if you do not want some modules to be included
    var combineIntoOne = false;
    var combinedInclude = new Array();
    var combinedIncludeURL = "../wp-content/plugins/toscanoviaggi/jqGrid/combine.php?type=javascript&files=";
    var minver = false;
    var modules = [
        { include: false, incfile:'grid.locale-en.js',minfile: 'min/grid.locale-en-min.js'}, // jqGrid translation
        { include: true, incfile:'grid.locale-it.js',minfile: 'min/grid.locale-it-min.js'}, // jqGrid translation
        /* { include: true, incfile:'grid.pack.js',minfile: ''}, */ // jqGrid all packecd
        { include: true, incfile:'grid.base.js',minfile: 'min/grid.base-min.js'}, // jqGrid base
        { include: true, incfile:'grid.common.js',minfile: 'min/grid.common-min.js' }, // jqGrid common for editing
        { include: true, incfile:'grid.formedit.js',minfile: 'min/grid.formedit-min.js' }, // jqGrid Form editing
        { include: false, incfile:'grid.inlinedit.js',minfile: 'min/grid.inlinedit-min.js' }, // jqGrid inline editing
        { include: false, incfile:'grid.celledit.js',minfile: 'min/grid.celledit-min.js' }, // jqGrid cell editing
        { include: false, incfile:'grid.subgrid.js',minfile: 'min/grid.subgrid-min.js'}, //jqGrid subgrid
        { include: false, incfile:'grid.treegrid.js',minfile: 'min/grid.treegrid-min.js'}, //jqGrid treegrid
        { include: false, incfile:'grid.custom.js',minfile: 'min/grid.custom-min.js'}, //jqGrid custom
        { include: false, incfile:'grid.postext.js',minfile: 'min/grid.postext-min.js'}, //jqGrid postext
        { include: false, incfile:'grid.tbltogrid.js',minfile: 'min/grid.tbltogrid-min.js'}, //jqGrid table to grid
        { include: false, incfile:'grid.setcolumns.js',minfile: 'min/grid.setcolumns-min.js'} //jqGrid setcolumns
    ];
    var filename;
    for(var i=0;i<modules.length; i++)
    {
        if(modules[i].include === true) {

            if (minver !== true) filename = pathtojsfiles+modules[i].incfile;
            else filename = pathtojsfiles+modules[i].minfile;
            if (combineIntoOne !== true) {
                if(jQuery.browser.safari || jQuery.browser.msie ) {
                    jQuery.ajax({url:filename,dataType:'script', async:false, cache: true});
                } else {
                    IncludeJavaScript(filename);
                }
            } else {
                combinedInclude[combinedInclude.length] = filename;
            }
        }
    }
    if ((combineIntoOne === true) && (combinedInclude.length>0) ) {
        var fileList = implode(",",combinedInclude);
        IncludeJavaScript(combinedIncludeURL+fileList);
    }
    function implode( glue, pieces ) {
    // http://kevin.vanzonneveld.net
    //original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
    //example 1: implode(' ', ['Kevin', 'van', 'Zonneveld']);
    //returns 1: 'Kevin van Zonneveld'
        return ( ( pieces instanceof Array ) ? pieces.join ( glue ) : pieces );
    };

    function IncludeJavaScript(jsFile)
    {
        var oHead = document.getElementsByTagName('head')[0];
        var oScript = document.createElement('script');
        oScript.type = 'text/javascript';
        oScript.src = jsFile;
        oHead.appendChild(oScript);
    };
};
jqGridInclude();

maybe it doesn't see really this function?..

25/10/2008
16:54

Luigino

Member

Members

Forum Posts: 47

Member Since:
25/10/2008

Offline

Precisely I would say I put jqGrid inside a directory of Wordpress's plugin I'm creating.... in the main .php of the plugin I put this:

<link rel="stylesheet" type="text/css" media="screen" href="/wp-content/plugins/toscanoviaggi/jqGrid/themes/basic/grid.css" />

<script src="<?php bloginfo('wpurl'); ?>/wp-content/plugins/toscanoviaggi/jqGrid/jquery.js" type="text/javascript"></script>

<script src="<?php bloginfo('wpurl'); ?>/wp-content/plugins/toscanoviaggi/jqGrid/jquery.jqGrid.js" type="text/javascript"></script>
<script src="<?php bloginfo('wpurl'); ?>/wp-content/plugins/toscanoviaggi/jqGrid/js/jquery.splitter.js" type="text/javascript"></script>
<script src="<?php bloginfo('wpurl'); ?>/wp-content/plugins/toscanoviaggi/jqGrid/js/jquery.jqTree.js" type="text/javascript"></script>
<script src="<?php bloginfo('wpurl'); ?>/wp-content/plugins/toscanoviaggi/jqGrid/js/jquery.jqDynTabs.js" type="text/javascript"></script>
<script src="<?php bloginfo('wpurl'); ?>/wp-content/plugins/toscanoviaggi/jqGrid/js/ui.datepicker.js" type="text/javascript"></script>
<script src="<?php bloginfo('wpurl'); ?>/wp-content/plugins/toscanoviaggi/jqGrid/js/jquery.jqGrid.js" type="text/javascript"></script>
<script src="<?php bloginfo('wpurl'); ?>/wp-content/plugins/toscanoviaggi/jqGrid/js/styleswitch.js" type="text/javascript"></script>

so it should be ok, right?...

29/10/2008
02:29

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

Open the jquery.jqgrid.js (where the loader is) and ajust the

paths to javascript files. Note that when you include the loader the

paths need to be ajusted relative to the directory from where

the loader is.

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

29/10/2008
04:34

Luigino

Member

Members

Forum Posts: 47

Member Since:
25/10/2008

Offline

tony said:

Hello,

Open the jquery.jqgrid.js (where the loader is) and ajust the

paths to javascript files. Note that when you include the loader the

paths need to be ajusted relative to the directory from where

the loader is.

Hello again tony,

I put the jquery.jqgrid.js in the js directory with all the other .js files, then I adjusted the row you said as:

var pathtojsfiles = ""; <--- since it is in the same directory or shall I have to put the complete URL like http://localhost/toscanoviaggi.....viaggi/js/?

then I made to load first the .js and then to call the init function with an HTML source code like as follow but it keeps returning me an error like "jQuery("#list").jqGrid is not a function", why?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DT.....tional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="it-IT">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Toscano Viaggi &rsaquo; Toscano Viaggi Administration — WordPress</title>
<script type="text/javascript">
//<![CDATA[
addLoadEvent = function(func) {if (typeof jQuery != "undefined") jQuery(document).ready(func); else if (typeof wpOnload!='function'){wpOnload=func;} else {var oldonload=wpOnload; wpOnload=function(){oldonload();func();}}};
//]]>
</script>
<style type="text/css">* html { overflow-x: hidden; }</style>
<link rel='stylesheet' href='http://localhost/toscanoviaggi/wp-admin/css/global.css?ver=2.6.3' type='text/css' media='all' />
<link rel='stylesheet' href='http://localhost/toscanoviaggi/wp-admin/wp-admin.css?ver=2.6.3' type='text/css' media='all' />
<link rel='stylesheet' href='http://localhost/toscanoviaggi/wp-admin/css/colors-fresh.css?ver=2.6.3' type='text/css' media='all' />

<link rel="stylesheet" href="http://localhost/toscanoviaggi/wp-content/plugins/toscanoviaggi/toscanoviaggi.css" type="text/css" />
<script type="text/javascript" src="http://localhost/toscanoviaggi/wp-content/plugins/toscanoviaggi/toscanoviaggi.js"></script>

<link rel="stylesheet" type="text/css" media="screen" href="http://localhost/toscanoviaggi/wp-content/plugins/toscanoviaggi/themes/basic/grid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="http://localhost/toscanoviaggi/wp-content/plugins/toscanoviaggi/themes/jqModal.css" />
<script type='text/javascript' src='http://localhost/toscanoviaggi/wp-includes/js/jquery/jquery.js?ver=1.2.6'></script>
<script type='text/javascript' src='http://localhost/toscanoviaggi/wp-admin/js/common.js?ver=20080318'></script>
<script type='text/javascript' src='http://localhost/toscanoviaggi/wp-includes/js/jquery/jquery.color.js?ver=2.0-4561'></script>
<script type='text/javascript'>
/* <![CDATA[ */
    wpGearsL10n = {
        updateCompleted: "Aggiornamento completato.",
        error: "Errore:"
    }
/* ]]> */
</script>
<script type='text/javascript' src='http://localhost/toscanoviaggi/wp-admin/js/wp-gears.js?ver=20080721'></script>
<script type='text/javascript' src='http://localhost/toscanoviaggi/wp-content/plugins/toscanoviaggi/js/jquery.jqGrid.js?ver=2.6.3'></script>
<script type='text/javascript' src='http://localhost/toscanoviaggi/wp-content/plugins/toscanoviaggi/js/jqModal.js?ver=2.6.3'></script>
<script type='text/javascript' src='http://localhost/toscanoviaggi/wp-content/plugins/toscanoviaggi/js/jqDnR.js?ver=2.6.3'></script>
</head>
<body class="wp-admin ">
<div id="wpwrap">
<div id="wpcontent">
<div id="wphead">
<h1>Toscano Viaggi<span id="viewsite"><a href="http://localhost/toscanoviaggi/">Visualizza sito</a></span></h1>
</div>

    <div id="gears-info-box" class="info-box" style="display:none;">
    <img src="images/gear.png" title="Gear" alt="" class="gears-img" />
    <div id="gears-msg1">
    <h3 class="info-box-title">Velocizza WordPress</h3>
    <p>WordPress ora supporta Gears che aggiunge nuove funzionalità al proprio browser web.<br />
    <a href="http://gears.google.com/" target="_blank" style="font-weight:normal;">Altre informazioni...</a></p>
    <p>Dopo aver installato ed abilitato Gears la maggior parte delle immagini, script e file CSS di WordPress verranno memorizzati localmente su questo computer, Ciò velocizzerà il tempo di caricamento della pagina.</p>
    <p><strong>Non installare su un computer pubblico o condiviso.</strong></p>    <div class="submit"><button onclick="window.location = 'http://gears.google.com/?action=install&return=http%3A%2F%2Flocalhost%2Ftoscanoviaggi%2Fwp-admin%2F';" class="button">Installa ora</button>
    <button class="button" style="margin-left:10px;" onclick="document.getElementById('gears-info-box').style.display='none';">Annulla</button></div>
    </div>

    <div id="gears-msg2" style="display:none;">
    <h3 class="info-box-title">Stato Gears</h3>
    <p>Gears è installato su questo computer ma non è abilitato per l’utilizzo con WordPress.</p>
    <p>Per abilitarlo, assicurarsi che questo sito web non sia presente nella lista di siti vietati in Impostazioni Gears nel menu Strumenti del proprio browser, quindi fare clic sul pulsante sottostante.</p>
    <p><strong>Tuttavia se questo è un computer pubblico o condiviso, Gears non dovrebbe venire abilitato.</strong></p>
    <div class="submit"><button class="button" onclick="wpGears.getPermission();">Abilita Gears</button>
    <button class="button" style="margin-left:10px;" onclick="document.getElementById('gears-info-box').style.display='none';">Annulla</button></div>
    </div>

    <div id="gears-msg3" style="display:none;">
    <h3 class="info-box-title">Stato Gears</h3>
    <p>Gears è installato e funzionante su questo computer. È possibile disabilitarlo tramite il menu Strumenti del proprio browser.</p>
    <p>Nel caso si verifichi un errore, provare a disabilitare Gears, quindi ricaricare la pagina e attivarlo nuovamente.</p>
    <p>Stato memorizzazione locale: <span id="gears-wait"><span style="color:#f00;">Attendere prego! Aggiornamento dei file:</span> <span id="gears-upd-number"></span></span></p>
    <div class="submit"><button class="button" onclick="document.getElementById('gears-info-box').style.display='none';">Chiudi</button></div>
    </div>
    </div>

<div id="user_info"><p>Salve, <a href="profile.php">Toscano Viaggi</a>! | <a href="http://localhost/toscanoviaggi/wp-login.php?action=logout" title="Logout">Logout</a> | <a href="http://www.wordpress-it.it/wiki/" title="Documentazione, faq ed altro...">Aiuto</a> (<a href="http://codex.wordpress.org/" title="Documentazione in inglese">En</a>) | <a href="http://forum.wordpress-it.it/" title="Forum di supporto in italiano">Forum</a> (<a href="http://wordpress.org/support/" title="Forum di supporto inglese">En</a>) | <span id="gears-menu"><a href="#" onclick="wpGears.message(1);return false;">Turbo</a></span></p></div>

<li><a href='index.php'>Bacheca</a></li></ul>

    <li><a href='post-new.php'>Scrivi</a></li>
    <li><a href='edit.php' class="current">Gestione</a></li>
    <li><a href='themes.php'>Design</a></li>
    <li><a href='edit-comments.php'>Commenti <span id='awaiting-mod' class='count-0'><span class='comment-count'>0</span></span></a></li></ul>

    <li><a href='options-general.php'>Impostazioni</a> </li>
    <li><a href='plugins.php'>Plugin <span id='update-plugins' class='count-1'><span class='plugin-count'>1</span></span></a> </li>
    <li><a href='users.php'>Utenti</a></li></ul>

    <li><a href='edit.php'>Articoli</a></li>
    <li><a href='edit-pages.php'>Pagine</a></li>
    <li><a href='link-manager.php'>Link</a></li>
    <li><a href='categories.php'>Categorie</a></li>
    <li><a href='edit-tags.php'>Tag</a></li>
    <li><a href='edit-link-categories.php'>Categorie link</a></li>
    <li><a href='upload.php'>Libreria media</a></li>
    <li><a href='import.php'>Importa</a></li>
    <li><a href='export.php'>Esporta</a></li>
    <li><a href='edit.php?page=toscanoviaggi/toscanoviaggi.php' class="current">Toscano Viaggi Administration</a></li>
</ul>
<div id="wpbody">
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#list").jqGrid({
url:'http://localhost/toscanoviaggi/wp-content/plugins/toscanoviaggi/editing.php',
datatype: 'xml',
mtype: 'GET',
colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'],
colModel :[
{name:'invid', index:'invid', width:55},
{name:'invdate', index:'invdate', width:90},
{name:'amount', index:'amount', width:80, align:'right'},
{name:'tax', index:'tax', width:80, align:'right'},
{name:'total', index:'total', width:80, align:'right'},
{name:'note', index:'note', width:150, sortable:false} ],
pager: jQuery('#pager'),
rowNum:10,
rowList:[10,20,30],
sortname: 'id',
sortorder: "desc",
viewrecords: true,
imgpath: 'http://localhost/toscanoviaggi/wp-content/plugins/toscanoviaggi/themes/basic/images',
caption: 'My first grid'
}).navGrid('#pagernav',
{}, //options
{height:280,reloadAfterSubmit:false}, // edit options
{height:280,reloadAfterSubmit:false}, // add options
{reloadAfterSubmit:false}, // del options
{} // search options
);
});
</script>

<div class="wrap">
        <h2>Toscano Viaggi Administration</h2>
        <table id="list" class="scroll"></table>
        <div id="pager" class="scroll" style="text-align:center;"></div>    </div>
</div></div>
</div>
</div>
<div id="footer">
<p>Grazie per aver creato questo blog utilizzando <a href="http://www.wordpress.org">WordPress</a> | Documentazione in <a href="http://codex.wordpress.org/">inglese</a> e in <a href="http://www.wordpress-it.it/wiki/">italiano</a> | <a href="http://wordpress.org/support/forum/4">Feedback</a> | Versione 2.6.3</p>
</div>
<script type="text/javascript">if(typeof wpOnload=='function')wpOnload();</script>
</body>
</html>

29/10/2008
08:45

Luigino

Member

Members

Forum Posts: 47

Member Since:
25/10/2008

Offline

Figured out!!! YAY! Had to put complete url in the variable pathtojsfiles... I mean a path like http://................./js/ then it worked! 🙂

thanks again! 🙂

Ciao,

Luigi

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
87 Guest(s)