When feeding options into a tabulator table, options dislpay as [object Object].
The relevant documentation is screenshotted below and linked here under the "Select" heading.
Just do this:
{ <other_config>
editorParams:{
showListOnEmpty: true,
allowEmpty: true,
values:{
"123":"Wild Bunch",
"345":"Gulf",
"678":"Duch Film Works",
}
}}
<other_config> is just a placeholder for text from your image that I was not going to retype for you; do not enter <other_config> literally.
Related
I'm working on nodejs application. And want to display Mongoose result in web page. Template engine is express handlebars.
data= [
{name: 'some name', image: '/some_name.jpg', location: 'some location'},
{name: 'some name2', image: '/some_name2.jpg', location: 'some location2'},
{name: 'some name3', image: '/some_name3.jpg', location: 'some location3'}
]
I want to render data in handlebars partial. At first I'm iterating each object using #each and passing that object into the partial. Below is code how I'm doing.
{{#each data}}
{{> somePartial this}}
{{/each}}
In somePartial I want to access properties of the object.
<h5>Name: {{this.name}}</h5>
<h5>Image: {{this.image}}</h5>
<h5>Location: {{this.location}}</h5>
I can't see any value rendering in browser. In server console I get some warning or something like this Handlebars: Access has been denied to resolve the property 'xxxx' because it is not 'own property' of its parent..
Just use without this
{{> somePartial}}
...
<h5>Name: {{name}}</h5>
More info here: https://handlebarsjs.com/guide/partials.html#partial-parameters
To solve Handlebars: Access has been denied to resolve the property 'xxxx' because it is not 'own property' of its parent.
Map the result array in new array.
let result2 = result.map(val=>{
return {field1: val.field1,field2: val.field2, field3: val.field3 and so on}
})
For security reason handlebar does not allow to pass fetched result directly. You need to map with required field so that no sensitive data got passed.
i am following the REST convention making a blog site , during edit and update route i used method overriding for put request , but when i submit the updated blog, it shows this error:
{ CastError: Cast to ObjectId failed for value " 5eb4e6190ce97a09f7484ed5" at path "_id" for model "Blog"
message:
'Cast to ObjectId failed for value " 5eb4e6190ce97a09f7484ed5" at path "_id" for model "Blog"',
name: 'CastError',
messageFormat: undefined,
stringValue: '" 5eb4e6190ce97a09f7484ed5"',
kind: undefined,
value: ' 5eb4e6190ce97a09f7484ed5',
path: '_id',
reason:
Error: Argument passed in must be a single String of 12 bytes or a string of 24 hex characters
code for update route:-
app.put("/blogs/:id", function(req,res){
var ID = {_id: req.params.id};
Blog.updateOne(ID, req.body.blog, function(err , updatedBlog){
if(err){
console.log(err);
res.redirect("/blogs");
} else{
res.redirect("/blogs/"+req.params.id);
}
});
});
and this is where the form submits(used method-overriding for put request):-
<form class="ui form" action="/blogs/ <%= blog._id %>?_method=PUT " method="POST">
kindly help me fix this issue.
From the comments, the fix was to remove the errant space in the action attribute of the <form>, i.e. to replace
<form class="ui form" action="/blogs/ <%= blog._id %>?_method=PUT " method="POST">
with
<form class="ui form" action="/blogs/<%= blog._id %>?_method=PUT " method="POST">
How to figure this out? Take a closer look at the error message. It's complaining about the value
' 5eb4e6190ce97a09f7484ed5'
not being
a single String of 12 bytes or a string of 24 hex characters.
And indeed it is neither of these things: it's a space followed by 24 hex characters. If we can get rid of the space, we will then have a string of 24 hex characters so we should avoid this error. The error message also mentions that the problem is with a property named _id, the value of which comes from the :id part of the URL pattern /blogs/:id. Taking a look at the action in your form element, there is indeed a space after /blogs/, which is in the right place to add the extra space to your id. Therefore, it looks likely that this is the problem, so remove this space and try again.
Are you supposed to know that spaces like this matter? Possibly not, but in this case the error message provides you the hint that it in this case it does.
Calling .qtip twice on the same element erases the previous qtip. Is it possible to have 2 styles of qtip on the same element (one is right click, one is mouse over)
You cant have 2 on the same element but you can wrap the element in a span and call qtip on that with a different trigger.
I just upvoted Bruian's answer as I have tried the other technique that I found through Googling which says to create a qtip and to add removeData('qtip') before adding another one :
$('.selector')
.qtip() // tooltip 1
.removeData('qtip') // remove it's data
.qtip(); // tooltip 2
This technique will work for simple cases, but you are setting yourself up for a lot of problems down the line with duplicate ids and other issues.
For those still interested using one description for multiple item. You can use this method:
1) Make one div with all the description item you want.for example:
<div id='description' class='describe_content' style='display:none;'>
<div id='test'>this is description</div>
<div id='test2'>teeest</div>
</div>
2) Use the following code for the qtip. You can see the comment on what each item do.
$(document).on('mouseover','input ,select ,dl , .dropdown2 .mutliSelect li',function(event)
{
string = $("#test2");
$(this).qtip({
overwrite: true, //to allow it the same item be paste to other part.
position: {
my: pos[pos_c+3], // Position my top left...
at: pos[pos_c], // at the bottom right of...
target: $(this) // my target
},
content: {
text: string, // the text
},
show:{
event: event.type, //use the same show event as the one that triggered
ready: true //show the tooltip as soon as it's bound.
},
'font-size': 16
},event);// have to pass event as second parameter, because qtips positioning
}
Note that the position is just a extra option, you could remove it if you want.
I have a jquery autocomplete and it works just fine. Now i want to add a default text in the dropdown like
Input box if the user types.. ja
It should display below
Select below category [should be there all the time]
java
javascript
Any suggestion on how to do it..
// Ajax Auto suggestion box
var options, a;
jQuery(function()
{
a = $('#txtOccupation').autocomplete({
serviceUrl: '/App_Handlers/GetAjaxSuggestions.ashx?datasets=occ',
minChars: 1,
delimiter: /(,|;)\s*/,
deferRequestBy: 0, //miliseconds
noCache: false,
width: 420,
onSelect: function(value, data){ alert('You selected: ' + value + ', ' + data); },
});
browser = jQuery.browser;
$('.autocomplete').css('padding-left','10px');
});
HTML
** <input type="text" class="placeholder-text" maxlength="100" value="Job title, Keyword or O*NET code" onfocus="if(this.value=='Job title, Keyword or O*NET code')this.value=''" onblur="if(this.value=='')this.value='Job title, Keyword or O*NET code'" id="txtOccupation" name="txtOccupations" autocomplete="off"></input>**
I am providing answer to:
But its adding at the end, i want it to be on top. in your comment.
Based on the below your fiddle jsfiddle.net/J5rVP/158, I forked new fiddle http://jsfiddle.net/a3Tun/ to add element at top.
I have changed ui.content.push to ui.content.unshift.
unshift is like push, but it insert value at top of array. For more info, refer http://www.w3schools.com/jsref/jsref_unshift.asp
I am using jqgrid.
I really need help with this, and have no clue how to do it, but i am sure its possible... can any one give me even a partial answer? were to start from?
I now have a requirement saying that for searching and filtering the grid I dont want the regular model form pop op thing opening, instead the filter should be open when entering the page but not as a pop up form , but should be on the top of the page but still have all the functions to it.
Needs to look like this:
And again having the select tag filled with the correct information (like they do in the popup form) and when clicking on "Save" it should send the request to the server, like regular.
Is this possible?
*******EDIT*******
The only thing i basically need is to have the filter with out the dialog part of it.
The solution of the problem for the old searching dialog you can find here. I modified the demo to the current implementation of the searching dialog in the jqGrid.
You can see the results on the demo:
The corresponding code is below:
var $grid = $('#list');
// create the grid
$grid.jqGrid({
// jqGrid opetions
});
// set searching deafauls
$.extend($.jgrid.search, {multipleSearch: true, multipleGroup: true, overlay: 0});
// during creating nevigator bar (optional) one don't need include searching button
$grid.jqGrid('navGrid', '#pager', {add: false, edit: false, del: false, search: false});
// create the searching dialog
$grid.jqGrid('searchGrid');
var gridSelector = $.jgrid.jqID($grid[0].id), // 'list'
$searchDialog = $("#searchmodfbox_" + gridSelector),
$gbox = $("#gbox_" + gridSelector);
// hide 'close' button of the searchring dialog
$searchDialog.find("a.ui-jqdialog-titlebar-close").hide();
// place the searching dialog above the grid
$searchDialog.insertBefore($gbox);
$searchDialog.css({position: "relative", zIndex: "auto", float: "left"})
$gbox.css({clear:"left"});
Here's the way I implemented it, using Oleg's excellent help.
I wanted my users to be able to immediately type in a search criteria (in this case, a user's name) and for the jqGrid to show the results. No messing around with the popup Search dialog.
Here's my end result:
To do this, I needed this HTML:
Employee name:
<input type="text" name="employeeName" id="employeeName" style="width:250px" />
<!-- This will be my jqGrid control and pager -->
<table id="tblEmployees"></table>
<div id="pager"></div>
and this JavaScript:
$("#employeeName").on('change keyup paste', function () {
SearchByEmployeeName();
});
function SearchByEmployeeName()
{
// Fetch the text from our <input> control
var searchString = $("#employeeName").val();
// Prepare to pass a new search filter to our jqGrid
var f = { groupOp: "AND", rules: [] };
// Remember to change the following line to reflect the jqGrid column you want to search for your string in
// In this example, I'm searching through the UserName column.
f.rules.push({ field: "UserName", op: "cn", data: searchString });
var grid = $('#tblEmployees');
grid[0].p.search = f.rules.length > 0;
$.extend(grid[0].p.postData, { filters: JSON.stringify(f) });
grid.trigger("reloadGrid", [{ page: 1 }]);
}
Again, my thanks to Oleg for showing how to use these search filters.
It really makes jqGrid much more user-friendly.