I'm getting an error using the searchBox widget from Algolia instantsearch.js The error message reads:
indexName is not valid
This error is weird, because not only does it exist, but it's displaying results! The problem repeats each time I type something into the searchBox widget, and the results are not filtered by whatever I type. I've created a plunker to see if anyone can tell me what I'm doing wrong.
http://plnkr.co/edit/ihz5VMZ6HUDaYKTqwo9V?p=preview
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//cdn.jsdelivr.net/instantsearch.js/1/instantsearch.min.css">
<script src="//cdn.jsdelivr.net/instantsearch.js/1/instantsearch.min.js"></script>
</head>
<body>
<input type="text" id="search-box" class="form-control">
<table class="table table-striped">
<thead>
<tr>
<th>Number</th>
<th>Name</th>
<th>Starts</th>
<th>Duration</th>
<th>Room</th>
<th><span class="glyphicon glyphicon-info-sign"></span></th>
</tr>
</thead>
<tbody id="hits-container">
</tbody>
</table>
<div id="pagination-container"></div>
<script>
var search = instantsearch({
appId: '5V0BUFDX8J',
apiKey: 'a25692c12853aea7a77c5a7125498512',
indexName: 'C86FE050-6C48-11E5-84AA-BA5F164D0BA4_events',
urlSync: true
});
search.addWidget(
instantsearch.widgets.searchBox({
container: '#search-box',
autofocus: true,
placeholder: 'Search for events by keyword, description, or event number.'
})
);
search.addWidget(
instantsearch.widgets.hits({
container: '#hits-container',
templates: {
empty: 'No events found',
item: '<tr><td>{{event_number}}</td><td>{{name}}</td><td>{{startdaypart_name}}</td><td>{{duration_name}}</td><td>{{room_name}}</td><td><span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" title="{{description}}"></span></td></tr>'
},
})
);
search.addWidget(
instantsearch.widgets.pagination({
container: '#pagination-container'
})
);
search.start();
</script>
</body>
</html>
Ok, so it turns out that this is a bug between Safari and instantsearch.js. By changing this:
var search = instantsearch({
//...
urlSync: true
});
To this:
var search = instantsearch({
//...
urlSync: { useHash: true }
});
The error goes away.
Related
I am trying to show audio and google map in a simple HTML5 page. When I run it in other outside browsers like Chrome, Mozilla everything works perfectly.
But same is not working in my eclipse internal web browser and I want the output in that only.
Here is my project link on GitHub:
https://github.com/Venkatesh-Devale/cmpe273/tree/master/StaticRefresher
Please help me know why this is so?
#CHARSET "UTF-8";
#divVideo, #divAudio {
width:40%;
}
#divMyHeader {
background-color:orange;
}
#map {
height: 400px;
overflow: auto !important;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="UTF-8">
<title>About Me</title>
<link rel="stylesheet" href="hello.css">
</head>
<body>
<div id="divMainPage">
<div id="divMyHeader">
<h1>Venkatesh Devale</h1>
<h6>SJSU ID: 012420148</h6>
</div>
<div id="content">
<p>
I am creating this page to introduce me as we all are pretty new,
through this refresher assignment.
Below is my short video which will tell you about myself.
</p>
<div id="divVideo">
<video controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
</video>
</div>
<p>
Below is my favorite songs audio. Please guess it.
</p>
<div id="divAudio">
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>
</div>
</div>
<div id="divFeedbackShowingInputTypes" style="border-style:groove;">
<form>
<table>
<tr>
<td>First Name:</td>
<td><input type="text" name="txtFirstName" autofocus></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input type="text" name="txtLastName"></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="email" name="email" title="<any characters>#<your mail account>.com" pattern="[a-zA-Z]+[#][a-zA-Z]+[.com]" required></td>
</tr>
<tr>
<td>Telephone:</td>
<td><input type="tel" name="phone" title="XXX-XXX-XXXX" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required></td>
</tr>
<tr><td></td>
<td><input type="submit" name="btnSubmit" value="Submit"></td>
</tr>
</table>
</form>
</div>
<div id="myGeoLocatioWithMap">
<div id="map">
</div>
</div>
</div>
<script>
var myMap, myLocationPanel;
function getFirstMap() {
myMap = new google.maps.Map(document.getElementById('map'), {
center: {lat: -58.397, lng: 197.644},
zoom: 7
});
myLocationPanel = new google.maps.InfoWindow;
if (navigator.geolocation) {
console.log("Geolocation is available");
navigator.geolocation.getCurrentPosition(showMyPosition, findLocationNotFoundError);
} else {
handleLocationError(false, myLocationPanel, myMap.getCenter());
}
}
function showMyPosition(position) {
console.log("Geolocation is available");
var myPosition = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
myLocationPanel.setPosition(myPosition);
myLocationPanel.setContent("Your location is here");
myLocationPanel.open(myMap);
myMap.setCenter(myPosition);
var marker = new google.maps.Marker({
position: myPosition,
map: myMap
});
}
function findLocationNotFoundError() {
showLocationError(true, myLocationPanel, myMap.getCenter());
}
function showLocationError(checkDoesBrowserHasLocation, myLocationPanel, mapCenter) {
myLocationPanel.setPosition(mapCenter);
if(checkDoesBrowserHasLocation) {
myLocationPanel.setContent('Somehow geolocation service is not working, we are fixing it');
} else {
myLocationPanel.setContent('Seems that the browser does not support the geolocation');
}
myLocationPanel.open(myMap);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBd-SiW0EEjuidG6nhM6iSeDt9epJPvYno&callback=getFirstMap">
</script>
</body>
</html>
I want to use the JavaScript Alfresco.ObjectPicker component in order to have category picker into the file: dnd-upload.get.html.ftl
<div class="form-field inlineable">
<label >Catégories:</label>
<div class="object-finder inlineable" id="a_default_prop_cm_categories-cntrl">
<div class="current-values inlineable object-finder-items" id="b_default_prop_cm_categories-cntrl-currentValueDisplay"></div>
<input type="hidden" value="" name="prop_cm_categories" id="c_default_prop_cm_categories"/>
<div class="show-picker inlineable" id="d_default_prop_cm_categories-cntrl-itemGroupActions"><span class="yui-button yui-push-button" id="yui-gen7"><span class="first-child"><button type="button" tabindex="0" id="yui-gen7-button" >Sélectionner</button></span></span></div>
<script type="text/javascript"> //<![CDATA[
(function(){
var picker = new Alfresco.ObjectFinder("a_default_prop_cm_categories-cntrl", "c_default_prop_cm_categories").setOptions(
{
field: "prop_cm_categories",
compactMode: true,
mandatory: false,
currentValue: "",
selectActionLabel: "Sélectionner",
minSearchTermLength: 1,
maxSearchResults: 1000
}).setMessages(
{""}
);
picker.setOptions(
{
itemType: "cm:category",
multipleSelectMode: true,
parentNodeRef: "alfresco://category/root",
itemFamily: "category",
maintainAddedRemovedItems: false,
params: "",
createNewItemUri: "",
createNewItemIcon: ""
});
})();
//]]>
</script>
</div>
</div>
And I have declared a JS dependency in the same file: dnd-upload.get.html.ftl
<#script type="text/javascript" src="${url.context}/res/components/object-finder/object-finder.js" group="objectfinder"/>
When I click on the button : "Sélectionner" , nothing happens and I have no console error neither.
Do you , Please, have any idea about how to make this Picker Working ?
Regards,
Sofia.
I am using mizzao/meteor-autocomplete and am having problems in trying to get it to work.
When viewing the page in my browser, I am getting no results at all when typing any text. I've created the appropriate collection:
Institutions = new Mongo.Collection("institutions");
and know that there is data in the actual db, however still no success.
I've included my files below.
publications.js (located in the server folder)
Meteor.publish('institutions', function(args) {
return Institutions.find({}, args);
});
registrationStart.js
I've two helpers; one that actually powers the search and the other that should be returning the institutions. I have also tried this with the token: '#' argument with no success.
if (Meteor.isClient) {
Template.registrationStart.helpers({
settings: function() {
return {
position: "top",
limit: 7,
rules: [{
collection: Institutions,
field: "name",
options: '',
matchAll: true,
template: Template.institutionSelectDisplay
}]
};
},
institutions: function() {
return Instititions.find();
}
});
Template.registrationStart.events({
"autocompleteselect input": function(event, template, doc) {
// Session.set(event.target.name, event.target.value);
console.log("selected: ", doc);
console.log("event.target.name: ", event.target.name);
console.log("event.target.value: ", event.target.value);
}
});
}
registrationStart.html template
<template name="registrationStart">
<div class="panel-body" id="loginForm">
<h2 class="pageTitle">veClient Registration</h2>
<form>
<div> </div>
<fieldset>
{{> inputAutocomplete settings=settings id="institution" class="input-xlarge" placeholder="type institution here"}}
</fieldset>
<div> </div>
<button type="submit" class="btn btn-primary btn-sm">Continue Registration</button>
</form>
</div>
</template>
And the template to be rendered
<template name="institutionSelectDisplay">
<p class="inst-state">{{city}}, {{state}}</p>
<p class="inst-name">{{name}}</p>
<p class="inst-description">{{email}}</p>
</template>
Problem resulted because there was no subscription to the "institutions" publication. So need to add a subscribe statement to the registrationStart.js file:
Meteor.subscribe('institutions');
I am using kendo's mvvm and sortable widget to allow a user to sort multiple tables with data binded to it. I have implemented the following code. It works, but the data seems to be logging correctly to the console. However, the data in the UI jumps around.
$(".sortable-handlers").kendoSortable({
handler: ".move",
hint:function(element) {
return element.clone().addClass("sortable-hint");
},
change: function(e) {
var services = viewModel.get("services");
console.log(e.oldIndex);
var oldIndex = e.oldIndex;
var newIndex = e.newIndex;
services.splice(newIndex, 0, services.splice(oldIndex, 1)[0]);
//Set it back to the original list
viewModel.set("services", services);
console.log(JSON.stringify(viewModel.get("services")));
}
});
It's been a long time but adding .trigger("change") works for me (I'm using jquery ui sortable instead of kendo ui sortable).
// Define model with dependent method
var MyModel = kendo.data.Model.define({
fields: {
left: "number",
right: "number"
},
total: function() {
return this.get("left") + this.get("right");
}
});
// Create view model
var viewModel = kendo.observable({
items: []
});
// bindings
kendo.bind($("#myView"), viewModel);
// using $.ui.sortable when list changes
var timeout = null;
viewModel.items.bind("change", function(e) {
clearTimeout(timeout);
timeout = setTimeout(function() {
$("#sortable").sortable({
update: function(e, ui) {
// get UID of sorting target
var targetUid = ui.item.attr("uid");
// list before
var beforeIndexes = _.map(viewModel.items, _.iteratee("uid"));
// target's original index
var fromIdx = _.indexOf(beforeIndexes, targetUid);
// list after
var afterIndexes = $("#sortable").sortable("toArray", {
attribute: "uid"
});
// target's new index
var toIdx = _.indexOf(afterIndexes, targetUid);
var changeItem = viewModel.items[fromIdx];
viewModel.items.splice(fromIdx, 1);
if (toIdx >= viewModel.items.length) {
viewModel.items.push(changeItem);
} else {
viewModel.items.splice(toIdx, 0, changeItem);
}
// refresh
viewModel.items.trigger("change");
}
});
}, 500);
});
// add some items to list
viewModel.items.push(new MyModel({
left: 1,
right: 2
}));
viewModel.items.push(new MyModel({
left: 6,
right: 3
}));
viewModel.items.push(new MyModel({
left: 5,
right: 7
}));
<link href="https://code.jquery.com/ui/1.12.0-beta.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2016.1.112/styles/kendo.default.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0-beta.1/jquery-ui.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<div id="myView">
<div class="k-grid k-widget">
<div class="k-grid-header">
<div class="k-grid-header-wrap">
<table>
<thead>
<tr>
<th class="k-header">SORTABLE</th>
</tr>
</thead>
</table>
</div>
</div>
<div class="k-grid-content">
<table>
<tbody id="sortable" data-bind="source: items" data-template="template-item">
</tbody>
</table>
</div>
</div>
<div class="k-grid k-widget">
<div class="k-grid-header">
<div class="k-grid-header-wrap">
<table>
<thead>
<tr>
<th class="k-header">NOT-SORTABLE</th>
</tr>
</thead>
</table>
</div>
</div>
<div class="k-grid-content">
<table>
<tbody id="sortable" data-bind="source: items" data-template="template-item">
</tbody>
</table>
</div>
</div>
</div>
<script type="text/x-kendo-template" id="template-item">
<tr data-bind="attr: {uid: uid}">
<td>
<span data-bind="text: left" />+
<span data-bind="text: right" />=
<span data-bind="text: total" />
</td>
</tr>
</script>
I am using datatables and jquery dialog. Overall I have 3 forms and 3 datatables.
My script is working great but the thing I am struggling with is updating the correct datatable on success of ajax save (It doesn't even have to be the correct corresponding table, it could update all 3 tables on any of the 3 form saves.)
Any guidance would be greatly appreciated.
Page with buttons for showing datatable/forms in dialog
<div style="float:left;">
<button class="menubutton" id="view_academic">Academic</button>
<button class="menubutton" id="view_business">Business/Suppport</button>
<button class="menubutton" id="line_managers">Managers/Divisions</button>
<br/>
<br/>
</div>
<div style="float:right;">
Add Managers/Divisions
Add Academic
Add Business/Suppport
<br/>
<br/>
</div>
<div style="clear:both"></div>
<div id="academic_list">
<h2>Academic Entitlements</h2>
<table class="dataTable" id="academic_table" cellpadding="2" cellspacing="2" width="100%">
<thead>
<tr>
<th>Year</th>
<th>Employee</th>
<th>Division</th>
<th>Contract</th>
<th>Entitlement</th>
<th>Line Manager</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="4" class="dataTables_empty">Loading data from server</td>
</tr>
</tbody>
</table>
</div>
<div id="business_list" class="the_options" style="display:none;">
<h2>Business & Manual Entitlements</h2>
<table class="dataTable" id="business_table" cellpadding="2" cellspacing="2" width="100%">
<thead>
<tr>
<th>Year</th>
<th>Employee</th>
<th>FT/PT</th>
<th>Weekly Hours</th>
<th>Division</th>
<th>Commencement</th>
<th>Entitlement</th>
<th>Line Manager</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="4" class="dataTables_empty">Loading data from server</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="line_managers_list" class="the_options" style="display:none;">
<h2>Line Managers & Divisions</h2>
<table class="dataTable" id="line_managers_table" cellpadding="2" cellspacing="2" width="100%">
<thead>
<tr>
<th>Division</th>
<th>Name</th>
<th>Line Manager</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="4" class="dataTables_empty">Loading data from server</td>
</tr>
</tbody>
</table>
</div>
initialise Datatables
$(function() {
// Implements the dataTables plugin on the HTML table
var $acTable= $("#academic_table").dataTable( {
"oLanguage": {
"sSearch": "Filter:"
},
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "scripts/academic_serverside.php",
"iDisplayLength": 10,
"bJQueryUI": false,
"sPaginationType": "scrolling",
"sDom": '<"top"iflp<"clear">>rt>',
"sScrollX": "100%",
"sScrollXInner": "100%",
"bScrollCollapse": true
});
});
$(function() {
// Implements the dataTables plugin on the HTML table
var $buTable= $("#business_table").dataTable( {
"oLanguage": {
"sSearch": "Filter:"
},
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "scripts/business_serverside.php",
"iDisplayLength": 10,
"bJQueryUI": false,
"sPaginationType": "scrolling",
"sDom": '<"top"iflp<"clear">>rt>',
"sScrollX": "100%",
"sScrollXInner": "100%",
"bScrollCollapse": true
});
});
$(function() {
// Implements the dataTables plugin on the HTML table
var $lmTable= $("#line_managers_table").dataTable( {
"oLanguage": {
"sSearch": "Filter:"
},
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "scripts/line_managers_serverside.php",
"iDisplayLength": 10,
"bJQueryUI": false,
"sPaginationType": "scrolling",
"sDom": '<"top"iflp<"clear">>rt>'
});
});
$(document).ready(function() {
$(".the_options").hide();
});
Dialogs/datatables show/hide/open/close and AJAX save form:
$(document).ready(dialogForms);
function dialogForms() {
$('a.menubutton').click(function() {
var a = $(this);
$.get(a.attr('href'),function(resp){
var dialog = $('<div>').attr('id','formDialog').html($(resp).find('form:first').parent('div').html());
$('body').append(dialog);
dialog.find(':submit').hide();
dialog.dialog({
title: a.attr('title') ? a.attr('title') : '',
modal: true,
buttons: {
'Save': function() {
submitFormWithAjax($(this).find('form'));
$(this).dialog('close');
$lmTable.fnDraw('');
},
'Cancel': function() {$(this).dialog('close');}
},
close: function() {$(this).remove();},
width: 600,
height: 500
});
}, 'html');
return false;
});
}
function submitFormWithAjax(form) {
form = $(form);
$.ajax({
url: form.attr('action'),
data: form.serialize(),
type: (form.attr('method')),
dataType: 'script',
success: function(data){
$(this).dialog('close');
$lmTable.fnDraw('');
}
});
return false;
}
$(function() {
$("#add_academic")
.button()
.click(function() {
$("#academic-form").dialog( "open" );
});
$("#add_line_managers")
.button()
.click(function() {
$("#line-managers-form").dialog( "open" );
});
$("#add_business")
.button()
.click(function() {
$("#business-form").dialog( "open" );
});
$("#view_academic")
.button()
.click(function() {
$('#academic_list').show();
$('#business_list').hide();
$('#line_managers_list').hide();
});
$("#view_business")
.button()
.click(function() {
$('#academic_list').hide();
$('#business_list').show();
$('#line_managers_list').hide();
});
$("#line_managers")
.button()
.click(function() {
$('#academic_list').hide();
$('#business_list').hide();
$('#line_managers_list').show();
});
});
To update a table simply call fnDraw() on it. Since you are not using global variables, you must retrieve the table first
var $lmTable = $("#line_managers_table").dataTable( { bRetrieve : true } );
$lmTable.fnDraw();
EDIT - to show only the right table you could do something like:
function dialogForms() {
$('a.menubutton').click(function() {
var id = this.id;// Save the id of the clicked button
var a = $(this);
$.get(a.attr('href'),function(resp){
var dialog = $('<div>').attr('id','formDialog').html($(resp).find('form:first').parent('div').html());
$('body').append(dialog);
dialog.find(':submit').hide();
dialog.dialog({
title: a.attr('title') ? a.attr('title') : '',
modal: true,
buttons: {
'Save': function() {
submitFormWithAjax($(this).find('form'), id);// Pass the id to the function
function submitFormWithAjax(form, id) {
form = $(form);
var table_id;
// Choose the table to display depending on the id, i made some guesses but adjust this
switch(id){
case 'view_academic': table_id = '#academic_table';
break;
case 'view_business': table_id = '#business_table';
break;
case 'line_managers': table_id = '#line_managers_list';
break;
}
$.ajax({
url: form.attr('action'),
data: form.serialize(),
type: (form.attr('method')),
dataType: 'script',
success: function(data){
$(this).dialog('close');
// Refresh table
var oTableToUpdate = $(table_id).dataTable( { bRetrieve : true } );
$oTableToUpdate .fnDraw();
// Hide all tables
$('table').hide();
// Show the refreshed
$(table_id).show();
}
});
return false;
}