Depending on a specific value of a records' status ("ACTIVE" vs. "INACTIVE") I want to give each record of the dropdown result a certain background-color. How to do so? I tried the below:
json:
[{"id":"1234","label":"Player","status":"ACTIVE"},{"id":"1235","label":"Player","status":"ACTIVE"}, ...]
js:
...
autocomplete: ({
source: function( request, response ) {
...
},
create: function() {
$(this).data('ui-autocomplete')._renderItem = function (ul, item) {
return $( "<li>" )
if ( item.status == 'ACTIVE' ) {
.append( "<a style='background-color: #eaffd6' href='/"+ item.id +"' >" + item.label + "</a>" )
}
if ( item.status == 'INACTIVE' ) {
.append( "<a style='background-color: #ffe5e5' href='/"+ item.id +"' >" + item.label + "</a>" )
}
//.append( "<a style='background-color: #ffe5e5' href='/"+ item.id +"' >" + item.label + "</a>" )
.appendTo( ul );
};
$(this).data('ui-autocomplete')._renderMenu = function( ul, items ) {
var that = this;
$.each( items, function( index, item ) {
that._renderItemData( ul, item );
});
};
}
})
...
Your function returns before it even reaches your if( item.status...) so this code is never evaluated. Consider building the markup as a string and then returning the string of html when you've finished.
I would add a class of active or inactive to the <li> element and then css rules .active { background-color: #eaffd6; } .inactive { background-color: #ffe5e5 }
Edit you could try something like
$(this).data('ui-autocomplete')._renderItem = function (ul, item) {
var str_html = '<li class="' + item.status.toLowerCase() + '">'
+ '<a href="/"' + item.id + '" >' + item.label + '</a>'
+ '</li>'
return str_html''
};
Related
I have fallowing code parse json files from .json file and works well. when i give it name and trying to post from form data gives me empty post data.
HTML:
<div id="jewels" ></div>
JS:
<script type="text/javascript">
$.getJSON( "include/settings/guild_bank_jevels.json", function( data ) {
var items = [];
$.each( data, function( key, val ) {
items.push( "<option name='jewel_name' value='" + key + "'>" + val + "</option>" );
});
$( "<select/>", {
html: items.join( "" )
}).appendTo( "#jewels" );
});
</script>
Thanks in advance for help.
UPDATE Fixed
Script:
<script type="text/javascript">
$.getJSON( "include/settings/guild_bank_jevels.json", function( data ) {
var items = [];
$.each( data, function( key, val ) {
items.push( "<option value='" + key + "'>" + val + "</option>" );
});
$("#jewels").html(items);
});
</script>
HTML Part:
<select id="jewels" name="jewel_name">
</select>
Your select doesn't have a name or id. Inputs need to have one of these for forms to post their value.
$( "<select/>", {
id='some_id',
html: items.join( "" )
}).appendTo( "#jewels" );
You have some extra double quotes " in the following line :
items.push( "<option name="'jewel_name'" value='" + key + "'>" + val + "</option>" );
___________________________^____________^
Please try to replace it by :
items.push( "<option name='jewel_name' value='" + key + "'>" + val + key + "</option>" );
Snippet
var items = [];
var data={'first_key': 'first_val', 'second_key': 'second_val'};
$.each( data, function( key, val ) {
items.push( "<option name='jewel_name' value='" + key + "'>" + val + "</option>" );
});
$( "<select/>", {
html: items.join( "" )
}).appendTo( "#jewels" );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="jewels" ></div>
Hope this helps.
Hi Im populating select > options using my json using below code. Here my doubt is I want to add custom attribute only if value is "IN". Anyone can help to achieve this
$.each( data, function( i, val ) {
items.push( "<option value='" + val.countryCode + "'>" + val.countryName + "</option>" );
});
Try something like this
$.each( data, function( i, val ) {
items.push( "<option value='" + val.countryCode +( val.countryCode == "IN" ? "data-attr = 'value'" : "" ;) "'>" + val.countryName + "</option>" );
});
Currently it's only possible with a if condition. You can increase speed by breaking on the first found result, but you need to use a for-loop:
for(var i=0;i<countryArr.length;i++) {
if(countryArr[i].countryCode === "IN") {
items.push( "<option value='" + countryArr[i].countryCode + "'>" + countryArr[i].countryName + "</option>" );
break;
}
});
If you want to use forEach see this post.. But a some expression might be easier:
countryArr.some(function(data) {
var check=countryArr[i].countryCode ==="IN";
if(check) {
items.push("<option value='" + data.countryCode + "'>" + data.countryName + "</option>");
}
return check; //some stops, if it returns true
});
ECMA6 will introduce a find method so you can shortcut this:
items.push(countryArr.find(function(data) {
return data.countryCode === "IN";
});
$.each( data, function( i, val ) {
if(val.countryCode !='IN') {
items.push( "<option value='" + val.countryCode + "'>" + val.countryName + "</option>" );
}
else {
items.push( "<option data-id=1 value='" + val.countryCode + "'>" + val.countryName + "</option>" );
}
});
If I understand your question correctly:
$.each( data, function( i, val ) {
items.push( "<option "+ (val.countryCode === "IN" && "data-id=1" || "") + " value='" + val.countryCode + "'>" + val.countryName + "</option>" );
});`
I have an autocomplete widget that displays text w/ images. Currently my results look like this.
I would like to set up my results so that the words 'test' and the name 'Federico' or 'Casey' appear on different lines, right above each other.
This is the relevant part of my javascript code for the widget:
)
.data( "autocomplete" )
._renderItem = function( ul, item ) {
return jQuery( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + "<img src='" + window.module.Globals.prototype.karma_assets + "images/_pricing_tables/best_deal.png' style='vertical-align:text-top;'/>" + item.id + " - " + item.label + "</a>" )
.appendTo( ul );
};
Anyone know how to format my output to achieve this? Thanks!
Wrap the text portion of the a tag in a div element that should create the push you are looking for and allows the <br /> to work the way you want it to. CSS3 compliant but works backwards compatible.
.append( "<a>" + "<img src='" + window.module.Globals.prototype.karma_assets + "images/_pricing_tables/best_deal.png' style='vertical-align:text-top; float: left;'/><div>" + item.id + " <br /> " + item.label + "</div></a>" )
.append( "<a>" + "<img src='" + window.module.Globals.prototype.karma_assets + "images/_pricing_tables/best_deal.png' style='vertical-align:text-top; float: left;'/>" + item.id + " <br /> " + item.label + "</a>" )
try this..
Below is the JS (jQuery) code of autocomplete's result function. You can see there's some lines where I print out <li>s containing some data properties (that come in as a result of automcomplete's AJAX call).
How could I rewrite this so that <li> would be conditionally rendered based on whether the property contains any value being either int or string (not empty string or whitespace) or something else that can be represented as string?
$(".clients-dropdown").result(function (event, data, formatted) {
if (data) {
// set the hidden input that we need for Client entity rematerialize
$(".client-id").val(data.client_id);
if (data.ClientName && data.Address1 && data.postalcode && data.postname) {
$(".client-address").html(
"<li>" + data.ClientName + "</li>" +
"<li>" + data.Address1 + "</li>" +
"<li>" + data.postalcode + " " + data.postname + "</li>"
);
$(".client-details").html(
"<li>" + data.PrettyId + "</li>" +
"<li>" + data.VatNo + "</li>" +
"<li>" + data.Phone + "</li>" +
"<li>" + data.Mobile + "</li>" +
"<li>" + data.Email1 + "</li>" +
"<li>" + data.Contact + "</li>"
);
}
}
Also, for the AJAX call, should my server side action return null when there's a null for a property in the database or empty string?
Note sure if that's what you want.
$(".clients-dropdown").result(function (event, data, formatted) {
var new_li = function(data) {
$.trim(data) != "" ? "<li>" + data + "</li>" : ''
}
if (data) {
$(".client-id").val(data.client_id);
if (data.ClientName && data.Address1 && data.postalcode && data.postname) {
$(".client-address").html(
new_li(data.clientName) +
new_li(Address1) + ... // you get the idea
);
}
}
Make a function that will test the property for whitespace.
var getListItem = function(prop){
if(!!$.trim(prop))
return '<li>' + prop + '</li>';
return '';
};
$(".clients-dropdown").result(function (event, data, formatted) {
if (data) {
// set the hidden input that we need for Client entity rematerialize
$(".client-id").val(data.client_id);
if (data.ClientName && data.Address1 && data.postalcode && data.postname) {
$(".client-address").html(
getListItem(data.ClientName) +
getListItem(data.Address1) +
getListItem(data.postalcode + ' ' data.postname)
);
$(".client-details").html(
getListItem(data.PrettyId) +
getListItem(data.VatNo) +
getListItem(data.Phone) +
getListItem(data.Mobile) +
getListItem(data.Email1) +
getListItem(data.Contact)
);
}
}
Using:
.data( "autocomplete" )._renderItem = function( ul, item ) {
var temp = item.url.substring(16, item.url.length)
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.value + "<br>" + item.url + "<br>" + item.description + "<br>" + "Support URL: " + item.support_url + "<br>" + "Contact: " + "Test" + "<br />" + "</a>" )
.appendTo( ul )
jQuery is parsing the item.url and automatically making that a href in the html. I'd like to manually control what becomes an href so that I can do something like "" + item.title ""
The way jQuery handles that now is making item.url an href and adding my html href and not using the title properly.
In an older version of autocomplete I was able to do a .result(function(event, item) {
location.href = item.url;
}); but that doesn't seam to be supported here.
You can supply a callback that will be executed when an item is being selected.
$("#input").autocomplete({
source: mySource,
select: function(event, ui){
window.location = ui.item.url;
}
});
Ref: http://docs.jquery.com/UI/Autocomplete#event-select