I have an issue with using JQgrid wiith rails. In the following code i get 3 errors. I am not even able to hit the url.
The errors are
Uncaught ReferenceError: jQuery is not defined -> grid.locale-en.js
Uncaught ReferenceError: jQuery is not defined -> jquery.jqgrid.min.js
Uncaught ReferenceError: $ is not defined -> at '$(function () {'
from the following code.
Any help would be appreciated. I think i have missed something small here.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>My First Grid</title>
<link rel="stylesheet" type="text/css" media="screen" href="/assets/jquery-ui-1.9.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/assets/ui.jqgrid.css" />
<script type="/assets/javascript" src="js/jquery-1.8.3.js"></script>
<script type="/assets/javascript" src="js/jquery-ui-1.9.2.custom.js"></script>
<script src="/assets/grid.locale-en.js" type="text/javascript"></script>
<script src="/assets/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#list").jqGrid({
url:'/users/jq',
datatype: "json",
colNames:['ID','NAME','DISPLAY NAME'],
colModel:[{name:'id', index:'id',resizable:false,width:35},
{name:'USERNAME' , index:'USERNAME',edittype:'text',editable:true},
{name:'FIRST_NAME', index:'FIRST_NAME',edittype:'text',editable:true},
{name:'LAST_NAME' , index:'LAST_NAME',edittype:'text',editable:true}
],
mtype: "GET",
pager: "#pager",
rowNum: 5,
rownumbers: true,
rowList: [5, 10, 15],
height: 'auto',
width: '500',
loadonce: true,
caption: "My first grid"
});
});
</script>
</head>
<body>
<table id="list"><tr><td></td></tr></table>
<div id="pager"></div>
</body>
</html>
Are you sure that jQuery is really included on the page? You use
<script type="/assets/javascript" src="js/jquery-1.8.3.js"></script>
<script type="/assets/javascript" src="js/jquery-ui-1.9.2.custom.js"></script>
instead of
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.2.custom.js"></script>
(the value of type attribute is definitively wrong for jQuery and jQuery UI).
Related
Current scheduler working with google calendar. But not mobile friendly.
<!DOCTYPE html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title></title>
</head>
<script src="./codebase/dhtmlxscheduler.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="./codebase/dhtmlxscheduler.css" type="text/css" media="screen" title="no title" charset="utf-8">
<style type="text/css" media="screen">
html, body{
margin:0px;
padding:0px;
height:100%;
overflow:hidden;
}
</style>
<script type="text/javascript" charset="utf-8">
function init() {
scheduler.config.xml_date="%Y-%m-%d %H:%i";
scheduler.init('scheduler_here',new Date(2013, 7, 5),"week");
scheduler.load("./data.php", "json");
var dp = new dataProcessor("./data.php");
dp.init(scheduler);
dp.setTransactionMode("POST", false);
}
</script>
<body onload="init();">
<div id="scheduler_here"></div>
</div>
</body>
Current Scheduler that is mobile friendly but won't get events from google calendar.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no">
<script src="cal/webix.js" type="text/javascript"></script>
<script src="cal/scheduler/scheduler.js" type="text/javascript"> </script>
<link rel="stylesheet" type="text/css" href="cal/skins/touch.css">
<link rel="stylesheet" type="text/css" href="cal/scheduler/scheduler.css">
<title></title>
<script type="text/javascript" charset="utf-8">
webix.ready(function() {
scheduler.config.hour_date = "%g:%i%a";
scheduler.config.readonly = true;
webix.ui.fullScreen();
webix.ui({
view: "scheduler",
id: "scheduler"
});
$$("scheduler").load("data.json", "json");
});
</script>
</head>
<body>
<div id="scheduler"></div>
</body>
</html>
Can't seem to figure out how to merge them or create a new code that has the css to be mobile friendly but still get data from a google calendar.
In case of json data source, both desktop and mobile scheduler must be able to share the same data source, so code like next must work
$$("scheduler").load("data.php", "json");
I am failing to see why I cannot get waypoints to work. Code is below, what am I missing (it must be something small and simple)
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="http://imakewebthings.com/jquery-waypoints/waypoints.min.js"> </script>
<script>
$('#waypoint').waypoint(function () {
alert('You have scrolled to an entry.');
}, {
offset: '100%'
});
</script>
</head>
<body>
<div style="height: 1500px">Scroll down</div>
<div id="waypoint">Waypoint</div>
</body>
</html>
It doesn't look like you're including the jquery library, which is required.
<head>
<meta charset="utf-8" />
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://imakewebthings.com/jquery-waypoints/waypoints.min.js"> </script>
This is my exibitview.html page
<!DOCTYPE html>
<html lang="en" manifest="health.cache">
<head>
<meta http-equiv="cache-control" content="no-cache" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>Video Campaign View</title>
<link rel="stylesheet" href="Styles/jquery-mobile.css" />
<link rel="stylesheet" href="Styles/base.css" />
<link rel="stylesheet" media="all and (orientation:portrait)" href="Styles/portrait.css" />
<link rel="stylesheet" media="all and (orientation:landscape)" href="Styles/landscape.css" />
<script src="Scripts/jquery-1.7.2.min.js"></script>
<script src="Scripts/jquery-mobile-old.js"></script>
<script type="text/javascript" src="Scripts/jquery.js"></script>
<script type="text/javascript" src="Scripts/ajaxExhibitXmlParser.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="Scripts/easypaginate.js"></script>
</head>
<body>
<header>
<h2>My Campaign Home Page</h2>
</header>
<div id="section_main">
<article class="main-content">
<ul class="exihibit">
</ul>
</article>
</div>
</body>
</html>
This is my ajaxExhibitXmlParser.js
$(document).ready(function(){
$.ajax({
type: "GET",
//url: "5_section_nature-1.xml",
url: "xmls/exhibit.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('exhibits').each(function(){
$(this).find('exihibit').each(function(){
var vmediaurl = $(this).find('redirecturl').text();
var mediaurl = vmediaurl ;
var medianame = $(this).find('name').text();
var mediadesc = $(this).find('description').text();
var vmediathumbnail = $(this).find('icon').text();
var mediathumbnail ="'" + vmediathumbnail + "'";
localStorage.setItem(vmediathumbnail, vmediathumbnail);
localStorage.setItem(mediathumbnail, mediathumbnail);
localStorage.setItem(mediaurl, mediaurl);
localStorage.setItem(medianame, medianame);
localStorage.setItem(mediadesc, mediadesc);
$('<li></li>').html('<img width="300" height="250" src='+localStorage.getItem(mediathumbnail)+' alt="poster image"><span class="exihibit"><p>'+localStorage.getItem(medianame)+'</p><p>'+localStorage.getItem(mediadesc)+'</p></span>').appendTo('ul.exihibit');
});
});
jQuery(function($){
$('ul').easyPaginate({
step:2
});
});
}
});
When i click on the image of exihibitview.html page i am getting error as undefined if I refresh page by using F5 i am able to get the image. Can any one plaese help me solving the issue.
This line doesn't look right to me:
$('<li></li>').html('<img width="300" height="250" src='+localStorage.getItem(mediathumbnail)+' alt="poster image"><span class="exihibit"><p>'+localStorage.getItem(medianame)+'</p><p>'+localStorage.getItem(mediadesc)+'</p></span>').appendTo('ul.exihibit');
In jQuery, I'm fairly certain you can't select list item with $('<li></li>'). You have to use something like $('li').
Furthermore, it's not such a great idea semantically to have a paragraph inside a span.
It looks as though you're trying to do something like this:
$('ul.exhibit').append('<li><img src="..." alt="..." /></li>');
use rel="external" in tag
$('ul.exhibit').append('<li><a rel="external" href="..."><img src="..." alt="..." /></a></li>');
Good day.
I try to use jqGrid in my web project.
everything is good but one moment.
I want to enable filterToolbar but I can't.
I used lot of documentation and examples without good result.
data in grid is good
sorting is good
PROBLEM: filterPanel is invisible
Version: jqGrid 4.3.1 - jQuery Grid
Browser: Chrome and Internet Explorer
Please have a look on my code.
Thanks a lot.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" media="screen" href="css/redmond/jquery-ui-1.8.18.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
</head>
<body>
<table id="listU05"></table>
<div id="pager"></div>
<script type="text/javascript">
$(document).ready(function(){
$("#listU05").jqGrid({
url:'u05json.json',
datatype: 'json',
mtype: 'POST',
colNames:[
'thema'
],
colModel :[
{name:'Thema', index:'Thema', width:55}
],
pager: '#pager',
rowNum:10,
rowList:[10,20,30],
sortname: 'Thema',
sortorder: 'asc',
viewrecords: true,
gridview: true,
caption: 'My first grid11',
width:200
});
});
jQuery("#listU05").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false, defaultSearch : "cn"});
</script>
</body>
I think the problem is that you placed call of filterToolbar outside of the $(document).ready event handler $(document).ready(function(){...});. As the result the filterToolbar will be called before the grid created. Moving the call of filterToolbar at the end of $(document).ready event handler should solve the problem.
Moreover you should include !DOCTYPE declaration before <html>. For example it can be <!DOCTYPE html> or <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">.
I managed to use the noconflict solutions. Everything is working great, except in IE8... I discovered that 90% change it is the javascript on the php itself. I changed the $( to jQuery(. This change made everything work in all other browsers... anyone have a solutions for this? Also tried changing place of the scripts, but doesn't do anything. Using Lightview and Rotator.
url => http://www.tdesigns.be/projects/maes-boons/designmeubelen.php
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="robots" content="all" />
<meta name="revisit-after" content="1 week" />
<meta name="language" content="nl" />
<meta name="keywords" content=""/>
<meta name="description" content="maes-boons nv - meesters in maatwerk"/>
<title>maes-boons</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/960.css" />
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/wt-rotator.css"/>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.min.js"></script>
<script type="text/javascript" src="js/jquery.wt-rotator.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(
function() {
jQuery(".container").wtRotator({
width:960,
height:400,
button_width:24,
button_height:24,
button_margin:5,
auto_start:true,
delay:5000,
play_once:false,
transition:"fade",
transition_speed:800,
auto_center:true,
easing:"",
cpanel_position:"inside",
cpanel_align:"BR",
timer_align:"top",
display_thumbs:true,
display_dbuttons:true,
display_playbutton:true,
display_numbers:true,
display_timer:true,
mouseover_pause:false,
cpanel_mouseover:false,
text_mouseover:false,
text_effect:"fade",
text_sync:true,
tooltip_type:"image",
lock_tooltip:true,
shuffle:false,
block_size:75,
vert_size:55,
horz_size:50,
block_delay:25,
vstripe_delay:75,
hstripe_delay:180
});
}
);
</script>
<script>
jQuery.noConflict();
jQuery(document).ready(function() {
});
</script>
<script type="text/javascript" src="js/prototype.js"></script>
<link rel="stylesheet" type="text/css" href="css/lightview.css" />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.2/scriptaculous.js'></script>
<script type="text/javascript" src="js/lightview.js"></script>
</head>
I think you need to put all jQuery in a .ready() function if you use .noConflict(). I don't get an error in IE8 or Chrome12 with the following:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset=utf-8 />
<title>maes-boons</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://www.tdesigns.be/projects/maes-boons/js/jquery.easing.1.3.min.js"></script>
<script type="text/javascript" src="http://www.tdesigns.be/projects/maes-boons/js/jquery.wt-rotator.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($) {
$(".container").wtRotator({
width:960,
height:400,
button_width:24,
button_height:24,
button_margin:5,
auto_start:true,
delay:5000,
play_once:false,
transition:"fade",
transition_speed:800,
auto_center:true,
easing:"",
cpanel_position:"inside",
cpanel_align:"BR",
timer_align:"top",
display_thumbs:true,
display_dbuttons:true,
display_playbutton:true,
display_numbers:true,
display_timer:true,
mouseover_pause:false,
cpanel_mouseover:false,
text_mouseover:false,
text_effect:"fade",
text_sync:true,
tooltip_type:"image",
lock_tooltip:true,
shuffle:false,
block_size:75,
vert_size:55,
horz_size:50,
block_delay:25,
vstripe_delay:75,
hstripe_delay:180
});
});
</script>
<script type="text/javascript" src="http://www.tdesigns.be/projects/maes-boons/js/prototype.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.2/scriptaculous.js"></script>
<script type="text/javascript" src="http://www.tdesigns.be/projects/maes-boons/js/lightview.js"></script>
</head>
<body>
</body>
</html>