jqGrid formatting issue within wordpress

  • Hi I’m trying to add jqGrid to my wordpress page but it doesn’t align properly when I do so. The ID column is never populated for some reason and the data starts populating in the next column over. If I create the jqGrid outside of wordpress the formatting is fine and the ID column is populated correctly.

    Following examples I’ve used wp_enqueue_ and wp_register_ for styles and javascript in my functions.php file which sounds like the way to do things (best practices) as far as I’ve read?

    Then I create a page within wordpress to run the script.

    My source code is below as well as screenshots.

    <script type="text/javascript"><!--//--><![CDATA[//><!--
//wordpress page
jQuery(document).ready(function(){
jQuery("#list2").jqGrid({
   	url:'src/view_reservations.php',
	datatype: "json",
   	colNames:['id','Equipment Name', 'Equipment Type', 'Equipment ID','Equipment Description'],
   	colModel:[
               	{name:'eq_id',index:'eq_id', width:20,sorttype:'int',key:true},
   		{name:'equipment_name',index:'equipment_name', width:90},
   		{name:'equipment_type',index:'equipment_type', width:100},
                {name:'equipment_id',index:'equipment_id', width:75},
                {name:'equipment_description',index:'equipment_description', width:100}
   	],
   	rowNum:10,
   	rowList:[10,20,30],
   	pager: '#pager2',
   	sortname: 'eq_id',
    height: 255,
	width: 800,
	idPrefix: 'abc',
    viewrecords: true,
    sortorder: "desc",
    caption:"Player List"
});
jQuery("#list2").jqGrid('navGrid','#pager2',{edit:false,add:false,del:false});
});
//--><!]]></script>
<table id="list2"></table>
<div id="pager2"></div>
    <?php
//functions.php
function register_plugin_styles() {
	wp_register_style( 'my-plugin', '/jquery-ui-1.11.0.custom/jquery-ui.theme.css'  );
	wp_enqueue_style( 'my-plugin' );
	wp_register_style( 'my-plugin2',  '/jquery.jqGrid-4.6.0/css/ui.jqgrid.css'  );
	wp_enqueue_style( 'my-plugin2' );
}
// Register style sheet.
add_action( 'wp_enqueue_scripts', 'register_plugin_styles' );

function theme_javascript() {
  wp_register_script("jquery");
  wp_enqueue_script( 'jquery' );
  wp_register_script("jqgridm","/jquery.jqGrid-4.6.0/js/i18n/grid.locale-en.js", array( "jquery" ),"1.0");
  wp_enqueue_script( 'jqgridm' );
  wp_register_script("jqgrids","/jquery.jqGrid-4.6.0/js/jquery.jqGrid.min.js", array( "jquery" ),"1.0");
  wp_enqueue_script( 'jqgrids' );

}
// Add action to enqueue scripts
add_action('wp_enqueue_scripts','theme_javascript');

    Images here.
    https://tinyurl.com/pw6qf6s

Viewing 9 replies - 1 through 9 (of 9 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Edit: Oh you have a CSS issue? Which theme are you using?

    Thread Starter alohaaaron

    (@alohaaaron)

    That’s just registering the jQuery library. Redundant since wordpress contains jQuery. Sorry I should have removed it but regardless the error still exists.

    Thread Starter alohaaaron

    (@alohaaaron)

    I’m using twenty fourteen.
    I tried removing the jQgrid style sheets as well to see how the grid displays without them but it appears to still move the data over one column.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Is it a CSS issue, or is it actually to do with the jqGrid init code?

    Thread Starter alohaaaron

    (@alohaaaron)

    I don’t know? I just posted a new screenshot of how the jqgrid looks without the jqgrid css linked to it here https://tinyurl.com/pw6qf6s
    If you refresh the page you’ll see the third image down is the non-css result. The data that is supposed to go in the first column is still populating the second column instead.

    anibabbar

    (@rockersofarena)

    Hey alohaaaron,

    If any jquery doesn’t work in wordpress, you just forgot one thing, i.e to change $ to jquery !!

    Read this – https://digwp.com/2011/09/using-instead-of-jquery-in-wordpress/

    or use this

    (function($) {

    // $ Works! You can test it with next line if you like
    // console.log($);

    })( jQuery );

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Although we can see that jQuery is working, @anibabbar reinforces the point that we’re just guessing what could be wrong. Unless you provide a Webpage that demonstrates the issue, rather than screenshots, we won’t be of much help.

    Thread Starter alohaaaron

    (@alohaaaron)

    Thanks anibabbar. At this time I used “jQuery” instead of “$” as explained in this article. I mean, I didnt wrap my jQuery script like you explained because I used the keyword “jQuery” instead of “$”. https://digwp.com/2011/09/using-instead-of-jquery-in-wordpress/ It should work correctly with “jQuery” right? My WordPress page below does run properly except for the issue with the ID column.

    Andrew
    Here is my wordpress test page with the error. Please open in firefox or other, it has some other formatting issue in chrome that seem to be created recently when I placed the script in the functions.php file vs a custom template. Regardless of the browser I still have the same issue with the ID column. https://nalutech.com.s43881.gridserver.com/wordpress_test/?page_id=218

    Here is the page that works correctly that runs outside of wordpress.
    https://nalutech.com.s43881.gridserver.com/wordpress_test/testgrid.php
    This page works in chrome and firefox.

    Thread Starter alohaaaron

    (@alohaaaron)

    Coincidentally the creator of the WPF-jqGrid plugin also said he had the same issue with the columns in jqGrid version from trirand.com when he was implementing it.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘jqGrid formatting issue within wordpress’ is closed to new replies.