Would anyone happen to know how to set readonly in a cell/column of gravity forms list field? I need one column for input and the others should not be edited by the user.
Gravity Perks has confirmed the list column is not supported by their plugin.
Add the following to an HTML field on your form:
**
You will need to know the list field id and the column you want to make read-only. If your list field is 32 for instance and you want the second column to be "read-only", you would replace the second line below with .gfield_list_32_cell2
<script>
jQuery(document).ready(function(){
jQuery( '.gfield_list_1_cell1' ).find( 'input, select, textarea' ).each(
function() {
if ( jQuery( this ).val() != '' ) {
jQuery( this ).prop( 'readonly', true );
}
});
});
</script>
Related
I am playing with node.js and jade and currently have this simple template:
extends layout
block content
h1 #{title}
br
form(action="/updateingredient", method="post")
table.table.table-striped.table-bordered
tr
td Name
td Category
td Available
if (typeof ingredients === "undefined")
tr
td
else
each ingredient in ingredients
tr
td #{ingredient.name}
td #{ingredient.category}
td
input(type="checkbox", name="#{ingredient.id}",
value="#{ingredient.available}", checked=ingredient.available)
button.btn(type="submit") Update Ingredients
When submitting this I get hit in upgradeIngredients as expected:
updateIngredient: function (req, res) {
console.log(req.body);
}
My problem lies in. That the Post only includes the checkboxes that are checked, also the value of checked boxes always seem to be false. I presume that is because that was the value before the form Post.
What I preferably would like is to get all checkbox values in the form, checked or not. Is this possible?
The current output from the updateIngredient method gives me the following when a checkbox is checked (currently just testing with one item):
{ 'b56a5f79-b074-4815-e7e0-4b746b2f65d8': 'false' }
and when unchecked:
{}
Edit
Looking at the constructed HTML I see this for an item:
<tr>
<td>Ost</td>
<td>Mælkeprodukt</td>
<td>
<input
type="checkbox"
name="b56a5f79-b074-4815-e7e0-4b746b2f65d8"
value="false"
checked="false">
</td>
</tr>
Verify that the checkbox HTML is correctly constructed
look in console for errors and warnings
ensure that the boxes all have either "true" or "false" for the checked value.
This example contains working syntax:
Node Express Jade - Checkbox boolean value
After searching some more here on SO, I found this answer: Post the checkboxes that are unchecked
It seems like checkboxes, which are not checked are not part of a form when posting HTML. This is exactly what I am seeing.
I did change my checked code to the following before going down another path.
checked=ingredient.available?"checked":undefined
This did not change anything, and did not give me any data in my form post when unchecked.
So I used the JavaScript approach, adding a submit event handler to my form. I added a new checkbox.js file in my javascripts folder, this code is taken from this answer:
// Add an event listener on #form's submit action...
$("#updateform").submit(
function() {
// For each unchecked checkbox on the form...
$(this).find($("input:checkbox:not(:checked)")).each(
// Create a hidden field with the same name as the checkbox and a value of 0
// You could just as easily use "off", "false", or whatever you want to get
// when the checkbox is empty.
function() {
console.log("hello");
var input = $('<input />');
input.attr('type', 'hidden');
input.attr('name', $(this).attr("name")); // Same name as the checkbox
// append it to the form the checkbox is in just as it's being submitted
var form = $(this)[0].form;
$(form).append(input);
} // end function inside each()
); // end each() argument list
return true; // Don't abort the form submit
} // end function inside submit()
); // end submit() argument list
Then I added the script to the end of my layout.jade file:
script(src='/javascripts/checkbox.js')
And I modified my form to include an ID:
form#updateform(action="/updateingredient", method="post")
And removed the value from the checkbox:
input(type="checkbox", name="#{ingredient.id}",
checked=ingredient.available?"checked":undefined)
Now I get the following when value is unchecked:
{ 'b2a4b035-8371-e620-4626-5eb8959a36b0': '' }
And when checked:
{ 'b2a4b035-8371-e620-4626-5eb8959a36b0': 'on' }
Now in my method I can find out whether it was checked or not with:
var available = req.body[ingredient] === "on" ? true : false;
Where ingredient is the key.
I have several attributes set as attributesToRetrieve. In my template though only some of these are displayed. Roughly something like this:
<div id="results">
<div>{{_highlightResult.attr1.value}}</div>
<div>{{_highlightResult.attr2.value}}</div>
<div>{{_highlightResult.attr3.value}}</div>
</div>
This way the attributes will be rendered in any case, and highlighted if they contain a matched word.
Now I'd like to add another section where all other attributes can be displayed but only if they contain a matched word to be highlighted, something like:
<div id="results">
<div>{{_highlightResult.attr_1.value}}</div>
<div>{{_highlightResult.attr_2.value}}</div>
<div>{{_highlightResult.attr_3.value}}</div>
<!--
The following div will be rendered and displayed only
if any of these special attributes contain an highlighted word.
Only an attribute containing a matched word will be displayed
-->
<div class="other-attr">
{{_highlightResult.Long_SpecialAttr_1.value}}
{{_highlightResult.SpecialAttr_2.value}}
{{_highlightResult.SpecialAttr_3.value}}
</div>
</div>
As mentioned in the comment, this section will be rendered and displayed only if any of these special attributes contain an highlighted word, also only an attribute containing a matched word will be displayed.
Plus as you can see there is a Long_SpecialAttr_1, it's a long text attribute, wich I'd like to have it displayed as a snippeted attribute.
To give a better idea (maybe) what I'm trying to achieve for this additional section is something like the one Google display below every search results, a sort of text blob text with ellipsis containing the marked words of these attributes.
Is this possible? I'm using algolia instasearch.js, thank you!
UPDATE
Thanks to #Jerska for his answer, unfortunately a small bit of code wasn't working in my case, specifically:
['highlight', 'snippet'].forEach(function (type) {
data['_' + type + 'Result'].forEach(function (elt) {
elt.display = elt.matchLevel !== 'none';
});
});
giving me an error in the console stating data._snippetResult.forEach() is undefined. So I modified that bit with this:
for(var el in d._snippetResult)
{
// create new property with bool value, true if not "none"
d._snippetResult[el].display = d._snippetResult[el].matchLevel !== 'none';
};
First of all, just to clarify the settings of your index before going forward, Algolia also highlights the attributes in attributesToSnippet.
Also, to have an ellipsis on the attributes you snippet, you can set snippetEllipsisText.
So you might want to use these settings in your index:
attributesToHighlight: ['attr_1', 'attr_2', 'attr_3', 'SpecialAttr_2', 'SpecialAttr_3'],
attributesToSnippet: ['Long_SpecialAttr_1:3'], // Snippet should contain max 3 words
snippetEllipsisText: '…' // This is the utf-8 "Horizontal ellipsis" character
On the front-end side, in instantsearch.js you can use the transformData parameter on almost any widget to be able to access and/or modify the data passed to the template.
In this specific example, we'll want to have a look at transformData.item on the hits widget.
The first step would be to log the data:
search.addWidget(
instantsearch.widgets.hits({
transformData: {
item: function (data) {
console.log(data);
return data;
}
}
})
);
This will allow you to see that kind of response:
_highlightResult: {
attr_1: {
value: 'lorem <em>ipsum</em> dolor <em>sit</em>',
matchLevel: 'full',
matchedWords: ['ipsum', 'sit']
},
attr_2: {
value: 'lorem <em>ipsum</em> dolor',
matchLevel: 'partial',
matchedWords: ['ipsum']
},
attr_3: {
value: 'lorem',
matchLevel: 'none',
matchedWords: []
},
// ...
},
_snippetResult: {
Long_SpecialAttr_1: {
value: 'lorem <em>ipsum</em> dolor …', // Let's assume Long_SpecialAttr_1 was equal to 'lorem ipsum dolor sit'
matchLevel: 'full'
}
}
Unfortunately here, the API is a bit inconsistent since as you can see, snippeted attributes don't have the matchedWords attribute that highlighted attributes have. You can choose to set it both in attributesToSnippet and attributesToHighlight if you really want the info.
However, for your use-case, we just need matchLevel. What we want, is to display elements only if matchLevel !== 'none'. Unfortunately, Hogan.js, the underlying template engine of instantsearch.js doesn't allow for much flexibility, so you can't just put this comparison in your template.
A solution could be to precompute these conditions inside the transformData:
transformData: {
item: function (data) {
['highlight', 'snippet'].forEach(function (type) {
var group = data['_' + type + 'Result'];
for (var attr in group) {
if (!group.hasOwnProperty(attr)) continue;
var elt = group[attr];
elt.display = elt.matchLevel !== 'none';
};
});
data.displaySpecial = false ||
data._snippetResult.Long_SpecialAttr_1.display ||
data._highlightResult.SpecialAttr_2.display ||
data._highlightResult.SpecialAttr_3.display;
return data;
}
}
And then use these new attributes in your template:
<div id="results">
<div>{{{_highlightResult.attr_1.value}}}</div>
<div>{{{_highlightResult.attr_2.value}}}</div>
<div>{{{_highlightResult.attr_3.value}}}</div>
<!--
The following div will be rendered and displayed only
if any of these special attributes contain an highlighted word.
Only an attribute containing a matched word will be displayed
-->
{{#displaySpecial}}
<div class="other-attr">
{{#_snippetResult.Long_SpecialAttr_1.display}}
{{{_highlightResult.Long_SpecialAttr_1.value}}}
{{/_snippetResult.Long_SpecialAttr_1.display}}
{{#_highlightResult.SpecialAttr_2.display}}
{{{_highlightResult.SpecialAttr_2.value}}}
{{/_highlightResult.SpecialAttr_2.display}}
{{#_highlightResult.SpecialAttr_3.display}}
{{{_highlightResult.SpecialAttr_3.value}}}
{{/_highlightResult.SpecialAttr_3.display}}
</div>
{{#displaySpecial}}
</div>
(By the way, to render HTML, you should use {{{ ... }}} instead of {{...}}, I've replaced them here)
The documentation of selectize already explains how to use create: function (input, callback) {....} to add a new item to the database.
In my case, the base model of a selectbox not only contains the option name but also other data.
P.e.: I have a selectbox with countries.
The options are filled from a model "Countries" which contains "country_name", "top_level", "currency". The selectbox only shows "country_name".
If a user wants to add a new country, I want to open a bootstrap modal, let the user add the new country data and after saving I want to refresh the selectbox using refreshOptions ().
I tried to change in selectize.js in line 741 from
'option_create': function(data, escape) {
return '<div class="create">Add <strong>' + escape(data.input) + </strong>…</div>';
to
'option_create': function(data, escape) {
return '<a data-toggle="modal" data-keyboard="false" data-backdrop="static" data-target="#modal" href="... some link ...">New country</a>';
I can see the link after writing a not existing country in the seletbox but when I click on it nothing happens.
How can I fix this? I am already to close to give up :-)
++++++++++++++++++++++++++++++++++
Javascript for removing option:
<script type="text/javascript">
$(".chosen-search-94-departID").selectize({
create: true,
sortField: {field: 'text'},
onOptionAdd: function (value, $item) {
var link='... link ...' + value;
load_modal_content (link, '... csrf ...');
$('#modal').modal('show');
$item.selectize.removeOption(value);
},
});
Might be cleaner / simpler to use onItemAdd (see Usage page) to define a behavior when a new item is added. No need to change selectize.js for that, I think.
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.