I am unable to implement treegrid with search filter on each columns. In easy UI forum they have told that 'datagrid-Filter.js' also works for treegrid. I have used same code they have used in client pagination http://www.jeasyui.com/demo/main/index.php?plugin=TreeGrid&theme=default&dir=ltr&pitem=
filter input elements are coming but they are not filtering any data. I am adding code that i have developed. Please help me to resolve this, thanx
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Client Side Pagination in TreeGrid - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="css/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="css/themes/icon.css">
<link rel="stylesheet" type="text/css" href="css/demo.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="datagrid-filter.js"></script>
</head>
<body>
<h2>Client Side Pagination in TreeGrid</h2>
<p>This sample shows how to implement client side pagination in TreeGrid.</p>
<div style="margin:20px 0;"></div>
<table id="tg" title="Client Side Pagination" style="width:700px;height:250px"
data-options="
iconCls: 'icon-ok',
rownumbers: true,
animate: true,
collapsible: true,
fitColumns: true,
url: 'treegrid_data2.json',
method: 'get',
idField: 'id',
treeField: 'name',
pagination: true,
remoteFilter: false,
pageSize: 2,
pageList: [2,5,10]
">
<thead>
<tr>
<th data-options="field:'name',width:180">Task Name</th>
<th data-options="field:'persons',width:60,align:'right'">Persons</th>
<th data-options="field:'begin',width:80">Begin Date</th>
<th data-options="field:'end',width:80">End Date</th>
</tr>
</thead>
</table>
<script type="text/javascript">
//** client pagination by EASY UI**//
(function($){
function pagerFilter(data){
if ($.isArray(data)){ // is array
data = {
total: data.length,
rows: data
}
}
var target = this;
var tg = $(target);
var state = tg.data('treegrid');
var opts = tg.treegrid('options');
if (!state.allRows){
state.allRows = data.rows;
}
if (!opts.remoteSort && opts.sortName){
var names = opts.sortName.split(',');
var orders = opts.sortOrder.split(',');
state.allRows.sort(function(r1,r2){
var r = 0;
for(var i=0; i<names.length; i++){
var sn = names;
var so = orders;
var col = $(target).treegrid('getColumnOption', sn);
var sortFunc = col.sorter || function(a,b){
return a==b ? 0 : (a>b?1:-1);
};
r = sortFunc(r1[sn], r2[sn]) * (so=='asc'?1:-1);
if (r != 0){
return r;
}
}
return r;
});
}
var topRows = [];
var childRows = [];
$.map(state.allRows, function(row){
row._parentId ? childRows.push(row) : topRows.push(row);
row.children = null;
});
data.total = topRows.length;
var pager = tg.treegrid('getPager');
pager.pagination('refresh', {
total: data.total,
pageNumber: opts.pageNumber
});
opts.pageNumber = pager.pagination('options').pageNumber || 1;
var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
var end = start + parseInt(opts.pageSize);
data.rows = topRows.slice(start, end).concat(childRows);
return data;
}
var appendMethod = $.fn.treegrid.methods.append;
var removeMethod = $.fn.treegrid.methods.remove;
var loadDataMethod = $.fn.treegrid.methods.loadData;
$.extend($.fn.treegrid.methods, {
clientPaging: function(jq){
return jq.each(function(){
var tg = $(this);
var state = tg.data('treegrid');
var opts = state.options;
opts.loadFilter = pagerFilter;
var onBeforeLoad = opts.onBeforeLoad;
opts.onBeforeLoad = function(row,param){
state.allRows = null;
return onBeforeLoad.call(this, row, param);
}
var pager = tg.treegrid('getPager');
pager.pagination({
onSelectPage:function(pageNum, pageSize){
opts.pageNumber = pageNum;
opts.pageSize = pageSize;
pager.pagination('refresh',{
pageNumber:pageNum,
pageSize:pageSize
});
tg.treegrid('loadData',state.allRows);
}
});
tg.treegrid('loadData', state.data);
if (opts.url){
tg.treegrid('reload');
}
});
},
loadData: function(jq, data){
jq.each(function(){
$(this).data('treegrid').allRows = null;
});
return loadDataMethod.call($.fn.treegrid.methods, jq, data);
},
append: function(jq, param){
return jq.each(function(){
var state = $(this).data('treegrid');
if (state.options.loadFilter == pagerFilter){
$.map(param.data, function(row){
row._parentId = row._parentId || param.parent;
state.allRows.push(row);
});
$(this).treegrid('loadData', state.allRows);
} else {
appendMethod.call($.fn.treegrid.methods, $(this), param);
}
})
},
remove: function(jq, id){
return jq.each(function(){
if ($(this).treegrid('find', id)){
removeMethod.call($.fn.treegrid.methods, $(this), id);
}
var state = $(this).data('treegrid');
if (state.options.loadFilter == pagerFilter){
for(var i=0; i<state.allRows.length; i++){
if (state.allRows[state.options.idField] == id){
state.allRows.splice(i,1);
break;
}
}
$(this).treegrid('loadData', state.allRows);
}
})
},
getAllRows: function(jq){
return jq.data('treegrid').allRows;
}
});
})(jQuery);
function formatProgress(value){
if (value){
var s = '<div style="width:100%;border:1px solid #ccc">' +
'<div style="width:' + value + '%;background:#cc0000;color:#fff">' + value + '%' + '</div>'
'</div>';
return s;
} else {
return '';
}
}
// ** end of cleint pagination **//
$(function(){
///////////////////////////////////////////////////////////////////////
$('#tg').treegrid().treegrid('clientPaging');
/////////////////////////////////////////////////////////////////////////
$('#tg').treegrid('enableFilter', [{
field:'name',
type:'validatebox',
op:['contains']
}]);
////////////////////////////////////////////////////////////////////////
})
</script>
</body>
</html>
in advance.
Hello I figure it out what problem is.
This solution worked for me.
<%#page import="org.apache.log4j.Logger"%>
<%#page import="com.development.util.CustomLogger"%>
<%#page import="com.development.util.CommonUtility"%>
<%#page import="com.agile.api.IAgileSession"%>
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<link rel="stylesheet" type="text/css" href="css/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="css/themes/icon.css">
<link rel="stylesheet" type="text/css" href="css/themes/color.css">
<link rel="stylesheet" type="text/css" href="css/overlay.css">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/datagrid-filter.js"></script>
</head>
<body>
<div id="tablediv">
<table id="tg" title="Client Side Pagination" style="height:600px;width:100%;">
<thead>
<tr>
<th data-options="field:'name',width:'30%'">Task Name</th>
<th data-options="field:'persons',width:80,sortable:true,align:'right'">Persons</th>
<th data-options="field:'begin',width:80">Begin Date</th>
<th data-options="field:'end',width:'10%'">End Date</th>
<th data-options="field:'progress',width:'10%'">Progress</th>
</tr>
</thead>
</table>
</div>
</body>
<script>
var data = {"total":7,"rows":[
{"id":1,"name":"All Tasks","begin":"3/4/2010","end":"3/20/2010","progress":60,"iconCls":"icon-ok"},
{"id":2,"name":"Designing","begin":"3/4/2010","end":"3/10/2010",
"progress":100,"_parentId":1,"state":"closed"},
{"id":21,"name":"Database","persons":2,"begin":"3/4/2010","end":"3/6/2010","progress":100,"_parentId":2},
{"id":22,"name":"UML","persons":1,"begin":"3/7/2010","end":"3/8/2010","progress":100,"_parentId":2},
{"id":23,"name":"Export Document","persons":1,"begin":"3/9/2010","end":"3/10/2010","progress":100,"_parentId":2},
{"id":3,"name":"Coding","persons":2,"begin":"3/11/2010","end":"3/18/2010","progress":80},
{"id":4,"name":"Testing","persons":1,"begin":"3/19/2010","end":"3/20/2010","progress":20}
],"footer":[
{"name":"Total Persons:","persons":7,"iconCls":"icon-sum"}
]};
$(function(){
var tg = $('#tg').treegrid({
idField: 'id',
treeField: 'name',
remoteFilter: false,
pagination: true,
pageSize: 2,
pageList: [2,5,10],
data: data
});
tg.treegrid('enableFilter').treegrid('doFilter');
});
</script>
</html>
Related
I have a navigation iFrame on the left side and I want to fire the $("#accordion").accordion("refresh"); event on asp:TreeNode (ClientExpand), so that the height of the nested asp:TreeView will determine the height of the surrounded DIV of the Accordion Tab of the JQuery UI Accordion.
Is there a way to react on the expanded asp:TreeView with a client-sided javascript $("#accordion").accordion("refresh");?
<%# Page Language="C#" AutoEventWireup="true" CodeFile="NavigationTree.aspx.cs" Inherits="NavigationTree" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="js/displayToc.js"></script>
<style type="text/css">
.treeNode
{
color:#666;
font-family:Arial,Helvetica,sans-serif;
font-size: 13px;
}
.rootNode
{
color:#666;
font-family:Arial,Helvetica,sans-serif;
font-size: 13px;
}
.leafNode
{
color:#666;
font-family:Arial,Helvetica,sans-serif;
font-size: 13px;
}
</style>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script type="text/javascript" src="../Scripts/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../Scripts/jquery-ui.js"></script>
<script type="text/javascript">
var zuletztSelektiert = '';
$(function () {
var treeView1 = $('#<%= TreeView1.ClientID %>');
var treeNodes = treeView1.find('div[id$=Nodes]');
var treeImages = treeView1.find('img').not('img[alt=\'\']');
$("#searchField").keydown(function (e) {
if (e.keyCode == 13) {
$("#btnSearch").click();
e.preventDefault();
}
});
$("#btnSearch").click(function (event) {
var meineLinkTexte = '';
var parentEls = '';
treeNodes.css({ 'display': 'none' });
treeImages.attr('src', 'images/plus.gif')
$("a").each(function () {
//Do your work
var selectedElement = $(this).attr('id');
$("#" + selectedElement).css({ 'background-color': '#FFFFFF' });
if ($(this).text().toLowerCase().indexOf($("#searchField").val().toLowerCase()) > -1) {
$("#" + selectedElement).parents("[id$='Nodes']").css({ 'display': 'block' });
$("#" + selectedElement).css({ 'background-color': '#DEDEDE' });
meineLinkTexte += $(this).attr('id') + '';
}
})
event.preventDefault();
});
$("[id*=TreeView1] input[type=checkbox]").bind("click", function () {
var selectedStereoType = $.trim($(this).next().prop("href").substring($(this).next().prop("href").indexOf("=") + 1));
//return;
var isChecked = $(this).is(":checked");
if (isChecked) {
//zuletztSelektiert = zuletztSelektiert + $(this).next().text();
zuletztSelektiert = zuletztSelektiert + selectedStereoType;
}
else {
//zuletztSelektiert = zuletztSelektiert.replace($(this).next().text(), '');
zuletztSelektiert = zuletztSelektiert.replace(selectedStereoType, '');
}
if (zuletztSelektiert != '') {
// Welcher Stereotyp ist selektiert?
//var stereotype = zuletztSelektiert.substring(zuletztSelektiert.indexOf('«') + 1, zuletztSelektiert.indexOf('»'));
var stereotype = selectedStereoType;
var letzteMeldung = '';
$("[id*=TreeView1] input[type=checkbox]").each(function () {
//var currentStereotype = $(this).next().text().substring($(this).next().text().indexOf('«') + 1, $(this).next().text().indexOf('»'));
var currentStereotype = $.trim( $(this).next().prop("href").substring($(this).next().prop("href").indexOf("=") + 1) );
if (currentStereotype != stereotype) {
var isChecked2 = $(this).is(":checked");
if (isChecked2) {
$(this).removeAttr("checked");
zuletztSelektiert = zuletztSelektiert.replace($.trim( $(this).next().prop("href").substring($(this).next().prop("href").indexOf("=") + 1) ), '');
letzteMeldung='It is not possible to select elements of different stereotypes. \n\n Selected Items: ' + zuletztSelektiert;
}
}
});
if (letzteMeldung != '') alert(letzteMeldung);
}
});
$("#accordion").accordion({
collapsible: true,
heightStyle: "fill"
});
})
function deselectAll() {
$("[id*=TreeView1] input[type=checkbox]").removeAttr("checked");
}
</script>
</head>
<body onload="tocInit();">
<form id="form1" runat="server">
<div>
<div id="accordion">
<h3>Navigation Tree</h3>
<div>
<asp:TextBox ID="searchField" runat="server" />
<asp:Button ID="btnSearch" runat="server" Text="Search" />
<asp:TreeView ID="TreeView1"
NodeStyle-CssClass="treeNode"
RootNodeStyle-CssClass="rootNode"
LeafNodeStyle-CssClass="leafNode"
runat="server">
</asp:TreeView>
</div>
<h3>Views</h3>
<div>
<p>
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Width="210px" /> <br />
<asp:Label ID="Label1" runat="server"></asp:Label><br/>
</p>
</div>
</div>
</div>
</form>
</body>
</html>
It looks like i got the behaviour i was looking for with
$("#accordion").accordion({
collapsible: true,
heightStyle: "content"
});
Okay i am very new to learning how to use Laravel, however i am quite alright using core php. So i am just curious how would one correctly use Javascript in a Laravel Website?
Example: I wish to have some effects to Navigation Menu items which will hide or show on click.
Thanks
place your javascript code into blade template /resources/views/view_name.blade.php
for example my old script for test sorting:
routes.php
Route::post('sort', '\Rutorika\Sortable\SortableController#sort');
Route::get('sort/test', 'SortController#sort');
SortController
<?php
namespace App\Http\Controllers;
use App\Http\Requests;
use App\Cat;
class ManagerController extends Controller
{
public function sort()
{
return view('sort',['cats'=>Cat::orderBy('position')->get()]);
}
}
sort.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Laravel</title>
<meta name="csrf-token" content="{{ csrf_token() }}" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://sortable5.boxfrommars.ru/vendor/flat-ui/js/jquery-1.8.3.min.js"></script>
<script src="http://sortable5.boxfrommars.ru/vendor/flat-ui/js/jquery.ui.touch-punch.min.js"></script>
<script src="http://sortable5.boxfrommars.ru/vendor/jquery-ui-1.10.4/js/jquery-ui-1.10.4.custom.min.js"></script>
<style>
.grid-actions {
text-align: right;
}
.grid-actions .btn {
margin-left: 16px;
}
.sortable-handle {
cursor: move;
width: 40px;
color: #ddd;
}
.id-column {
width: 40px;
}
/** notifications style */
.alert {
font-size: 14px;
}
.bootstrap-growl .close {
margin-left: 10px;
}
/** forms */
</style>
</head>
<body>
<table class="table table-striped table-hover">
<tbody class="sortable" data-entityname="cats">
#foreach ($cats as $cats)
<tr data-itemId="{{{ $cats->id }}}">
<td class="sortable-handle"><span class="glyphicon glyphicon-sort"></span></td>
<td class="id-column">{{{ $cats->id }}}</td>
<td>{{{ $cats->title }}}</td>
</tr>
#endforeach
</tbody>
</table>
</body>
<script>
/**
*
* #param type string 'insertAfter' or 'insertBefore'
* #param entityName
* #param id
* #param positionId
*/
var changePosition = function(requestData){
$.ajax({
'url': '/sort',
'type': 'POST',
'data': requestData,
'success': function(data) {
if (data.success) {
console.log('Saved!');
} else {
console.error(data.errors);
}
},
'error': function(){
console.error('Something wrong!');
}
});
};
$(document).ready(function(){
var $sortableTable = $('.sortable');
if ($sortableTable.length > 0) {
$sortableTable.sortable({
handle: '.sortable-handle',
axis: 'y',
update: function(a, b){
var entityName = $(this).data('entityname');
var $sorted = b.item;
var $previous = $sorted.prev();
var $next = $sorted.next();
if ($previous.length > 0) {
changePosition({
parentId: $sorted.data('parentid'),
type: 'moveAfter',
entityName: entityName,
id: $sorted.data('itemid'),
positionEntityId: $previous.data('itemid')
});
} else if ($next.length > 0) {
changePosition({
parentId: $sorted.data('parentid'),
type: 'moveBefore',
entityName: entityName,
id: $sorted.data('itemid'),
positionEntityId: $next.data('itemid')
});
} else {
console.error('Something wrong!');
}
},
cursor: "move"
});
}
$('.sortable td').each(function(){ // fix jquery ui sortable table row width issue
$(this).css('width', $(this).width() +'px');
});
});
</script>
</html>
How can we implement select all option in Kendo Multiselect For?
#(Html.Kendo().MultiSelectFor(model => model.TestData)
.DataTextField("DataText")
.DataValueField("DataValue")
.Placeholder("Select..")
.Events(e => e.DataBound("CheckIfEmpty"))
.AutoBind(false)
.Enable(false)
.DataSource(source =>
{
source.Read(read =>
{
read.Action("Action", "Controller").Data("filterData");
})
.ServerFiltering(false);
})
)
Please check below code snippet.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
</head>
<body>
<div class="demo-section k-header">
<select id="TestData" data-placeholder="Select movie..."></select>
</div>
<div>
<button type="button" onclick="SelectAllClick();">Select All</button>
</div>
<script>
$(document).ready(function () {
var data = [
{ text: "12 Angry Men", value: "1" },
{ text: "Il buono, il brutto, il cattivo.", value: "2" },
{ text: "Inception", value: "3" },
{ text: "One Flew Over the Cuckoo's Nest", value: "4" },
{ text: "Pulp Fiction", value: "5" },
{ text: "Schindler's List", value: "6" },
{ text: "The Dark Knight", value: "7" },
{ text: "The Godfather", value: "8" },
{ text: "The Godfather: Part II", value: "9" },
{ text: "The Shawshank Redemption", value: "10" },
{ text: "The Shawshank Redemption 2", value: "11" }
];
$("#TestData").kendoMultiSelect({
dataTextField: "text",
dataValueField: "value",
dataSource: data
});
});
function SelectAllClick() {
var multiSelect = $("#TestData").data("kendoMultiSelect");
var selectedValues = "";
var strComma = "";
for (var i = 0; i < multiSelect.dataSource.data().length; i++) {
var item = multiSelect.dataSource.data()[i];
selectedValues += strComma + item.value;
strComma = ",";
}
multiSelect.value(selectedValues.split(","));
}
</script>
</body>
</html>
Let me know if any concern.
Something like this should work:
<script>
$('#selectAll').click(function(){
var ctl = $('#TestData').data('kendoMultiSelect');
var opts = ctl.dataSource.data();
var selected = [];
for (var idx = 0; idx < opts.length; idx++) {
selected.push(opts[idx].value);
}
ctl.value(selected);
});
</script>
If you're using something like underscore, I can make it even easier for you by doing something like this:
<script>
$('#selectAll').click(function(){
var ctl = $('#TestData').data('kendoMultiSelect');
var opts = ctl.dataSource.data();
var selected = _.pluck(opts, 'value');
ctl.value(selected);
});
</script>
I've been attempting to put together a fusion map that is filterable by a checkbox.
I've used Google's sample code but have clearly gone wrong somewhere.
I'm new to this so I know it's probably a simple mistake but I can't find it.
The checkbox is only working for 1 filter. The others don't work nor does the data linked to them load.
I'd appreciate any help to identify where I've gone wrong.
my data table is at https://www.google.com/fusiontables/DataSource?docid=1VnR1phtvbSUZXPiiVbxiwzOF06sdW_GiZoqd8Ks
and my code is below
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<title>Fusion Tables Layer Example: IN query</title>
<link href="https://developers.google.com/fusiontables/docs/samples/style/default.css"
rel="stylesheet" type="text/css">
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var tableId = '1VnR1phtvbSUZXPiiVbxiwzOF06sdW_GiZoqd8Ks';
var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(53.30647442766776, -2.0839745570312917),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var layer = new google.maps.FusionTablesLayer();
filterMap(layer, tableId, map);
google.maps.event.addDomListener(document.getElementById('anna-mathers'),
'click', function() {
filterMap(layer, tableId, map);
});
google.maps.event.addDomListener(document.getElementById('sonia-osborne'),
'click', function() {
filterMap(layer, tableId, map);
});
google.maps.event.addDomListener(document.getElementById('neil-larner'),
'click', function() {
filterMap(layer, tableId, map);
});
google.maps.event.addDomListener(document.getElementById('bridget-tully'),
'click', function() {
filterMap(layer, tableId, map);
});
}
// Filter the map based on checkbox selection.
function filterMap(layer, tableId, map) {
var where = generateWhere();
if (where) {
if (!layer.getMap()) {
layer.setMap(map);
}
layer.setOptions({
query: {
select: 'Location',
from: tableId,
where: where
}
});
} else {
layer.setMap(null);
}
}
// Generate a where clause from the checkboxes. If no boxes
// are checked, return an empty string.
function generateWhere() {
var filter = [];
var ops = document.getElementsByName('ops');
for (var i = 0, ops; ops = ops[i]; i++) {
if (ops.checked) {
var opsName = ops.value.replace(/'/g, '\\\'');
filter.push("'" + opsName + "'");
}
}
var where = '';
if (filter.length) {
where = "'Ops' IN (" + filter.join(',') + ')';
}
return where;
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<div>
<input type="checkbox" checked="checked" name="ops"
id="sonia-osborne" value="Sonia Osborne">
<label>Sonia Osborne</label>
<input type="checkbox" checked="checked" name="ops"
id="anna-mathers" value="Anna Mathers">
<label>Anna Mathers</label>
<input type="checkbox" checked="checked" name="ops"
id="neil-larner" value="Neil Larner">
<label>Neil Larner</label>
<input type="checkbox" checked="checked" name="ops"
id="bridget-tully" value="Bridget Tully">
<label>Bridget Tully</label>
</div>
</body>
</html>
You are overwriting ops in the for-condition:
ops = ops[i]
after the first loop the condition will fail, because ops[i] is undefined
Fixed version:
for (var i = 0; i<ops.length,op=ops[i]; ++i) {
if (op.checked) {
var opName = op.value.replace(/'/g, '\\\'');
filter.push("'" + opName + "'");
}
}
I've been working on this for a couple so getting to this point should make me very happy. However, I cannot figure out my infowindow output is adding "\n" to every new line. No idea how it's getting there. The geolocation is also being appended to the search result infowindow. I'd like to remove that as well.
Here is a link to the map: http://58design.com/gmaps/
Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Sheriff | Zone Leader Look Up</title>
<meta name="author" content="Santa Clarita Valley Sheriff" />
<meta name="copyright" content="Copyright 2013 SCV Sheriff" />
<meta name="keywords" content="Santa Clarita Valley Sheriff, SCV Sheriff, Canyon Country, Valencia, Saugus, Newhall, Castaic, Gorman, Stevenson Ranch, " />
<meta name="description" content="Santa Clarita Valley Sheriff Zone Leader Contact Inforamtion Look Up." />
<meta name="robots" content="index,follow" />
<meta name="Googlebot" content="follow" />
<meta name="googlebot" content="archive" />
<meta name="distribution" content="global" />
<!--Load the AJAX API-->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
//<![CDATA[
google.load('visualization', '1', {'packages':['corechart', 'table', 'geomap']});
//var FusionTableID = 1931355;
var FusionTableID = '1uSGM1yPMJBlu74Znm4fPqdCsJjteB_kQ_nGz3tk';
var map = null;
var geocoder = null;
var infowindow = null;
var marker = null;
function initialize() {
geocoder = new google.maps.Geocoder();
infowindow = new google.maps.InfoWindow({size: new google.maps.Size(150,50) });
// create the map
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(34.452789398370045, -118.51948001245114),
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
//layer = new google.maps.FusionTablesLayer(FusionTableID,{suppressInfoWindows:true});
layer = new google.maps.FusionTablesLayer({
map: map,
suppressInfoWindows: true,
heatmap: { enabled: false },
query: {
select: "col2",
from: "1uSGM1yPMJBlu74Znm4fPqdCsJjteB_kQ_nGz3tk",
where: "",
},
options: {
styleId: 2,
templateId: 2
}
});
layer.setMap(map);
google.maps.event.addListener(layer, "click", function(e) {
var content = e.row['description'].value+"<br><br>";
infowindow.setContent(content);
infowindow.setPosition(e.latLng);
infowindow.open(map);
});
}
function showAddress(address) {
var contentString = address+"<br>Outside Area";
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var point = results[0].geometry.location;
contentString += "<br>"+point;
map.setCenter(point);
if (marker && marker.setMap) marker.setMap(null);
marker = new google.maps.Marker({
map: map,
position: point
});
// query FT for data
var queryText ="SELECT 'description', 'Zone Area' FROM "+FusionTableID+" WHERE ST_INTERSECTS(\'Zone Area\', CIRCLE(LATLNG(" + point.toUrlValue(6) + "),0.5));";
// document.getElementById('FTQuery').innerHTML = queryText;
queryText = encodeURIComponent(queryText);
var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + queryText);
//set the callback function
query.send(openInfoWindowOnMarker);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
function openInfoWindowOnMarker(response) {
if (!response) {
alert('no response');
return;
}
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
FTresponse = response;
//for more information on the response object, see the documentation
//http://code.google.com/apis/visualization/documentation/reference.html#QueryResponse
numRows = response.getDataTable().getNumberOfRows();
numCols = response.getDataTable().getNumberOfColumns();
var content = "<b>Outside area</b><br><br>";
var unionBounds = null;
// alert(numRows);
for (var i=0; i < numRows; i++) {
var name = FTresponse.getDataTable().getValue(i,0);
var kml = FTresponse.getDataTable().getValue(i,1);
content = response.getDataTable().getValue(i,0)+"<br><br>";
}
infowindow.setContent(content+marker.getPosition().toUrlValue(6));
// zoom to the bounds
// map.fitBounds(unionBounds);
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
google.maps.event.trigger(marker, 'click');
}
</script>
</head>
<body onload="initialize()">
<div id="content">
<h1>SCV Sheriff Reporting Zones</h1>
<p>Use the map below to determine your area's Zone Leader. Enter your street address, city and zip code in the search field below to view the Zone Leader's contact info.</p>
<form action="#" onsubmit="showAddress(this.address.value); return false" style="padding:10px 0px 30px 0px; background:none;">
<label>Address Search</label>
<input type="text" size="60" name="address" value="23920 Valencia Blvd. Santa Clarita, CA 91355" class="address" />
<input type="submit" value="Search" />
</p>
<div id="map_canvas" style="width: 516px; height: 387px; margin-bottom:30px; border:1px solid #999;"></div>
</form>
</div>
<div id="sidebar">
</div>
<div class="clear"><!--clear--></div>
</div>
</body>
</html>
The problem is in the data in your FusionTable (the line feeds are getting translated into "\n"). I fixed the entry for "Gorman" in my example (by removing the extraneous line feeds).
This line of my code is appending the geolocation to the search result infowindow:
infowindow.setContent(content+marker.getPosition().toUrlValue(6));