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.
Related
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''
};
I am trying to figure it out how to get id, from json file when an item is clicked.
What i have so far, this is just a basic json, to return name and picture from a movie.
$( document ).ready( function () {
$.getJSON( "js/appjson.json", function ( data ) {
for ( var i = 0; i < data.length; i++ ) {
$( '#jsonLoad' ).append( "<a href='' id='itemsHolder'>" +
"<div class='titleHolder'>" +
"<h2 >" + data[i].name +"</h2>"+
"</div>"+
"<div class='posterHolder'>"+ data[i].posterPath +"</div>" +
"</a>")
}
} )
} );
This is my json file from my folder.
[{
"id":1,
"name": "Godzilla",
"year": 1998,
"releaseDate": "20 May 1988",
"runtime": "2h 19mm",
"director": "Roland Emmerich",
"screenplay": "Dean Devlin and Roland Emmerich",
"imdb": 5.3,
"boxOffice": "$130,000,000 ",
"openingWeekend": "$55,726,951",
"posterPath": " <img src='imgsMovie/Godzilla1998/GodzillaPoster.jpg'/>"
}]
First of all, your are duplicating the DOM ID in below line -
$( '#jsonLoad' ).append( "<a href='' id='itemsHolder'>" +
This you can fix with something like -
$( '#jsonLoad' ).append( "<a href='' id='itemsHolder'" + data[i].name + ">" +
This way each DOM element will have unique ID on the page. Now you need to bind the click event to dynamically created "" tag, so your script will be like this -
$.getJSON( "js/appjson.json", function ( data ) {
for ( var i = 0; i < data.length; i++ ) {
$( '#jsonLoad' ).append( "<a href='' class='className' id='itemsHolder'" + data[i].id + " data-id='" + data[i].id + "'>" +
"<div class='titleHolder'>" +
"<h2 >" + data[i].name +"</h2>"+
"</div>"+
"<div class='posterHolder'>"+ data[i].posterPath +"</div>" +
"</a>")
}
});
$(document).on("click", "a.className", function(){
//This will show element ID
alert($(this).attr('id'));
//This will show the ID you received from your JSON
alert($(this).data('id'));
});
In above script I have used custom data attribute to store ID received from your JSON, also to create the unique element ID, I have concatinated the ID received from JSON with "itemsHolder" string.
Hope this will solve your issue.
I am trying to add an if statement to check if a particular property exist in JSON file, to write the value, if not, do nothing.
I want that property if exist to be written in HTML between <div class='titleHolder'> and "<div class='posterHolder'>"
Between these two divs i want to have property X, only if exist in JSON file
$( document ).ready( function () {
$.getJSON( "js/appjson.json", function ( data ) {
for ( var i = 0; i < data.length; i++ ) {
$( '#jsonLoad' ).append( '<a href="movies.html?id=' + data[ i ].id + '" + <div class="itemsHolder">' +
"<div class='titleHolder'>" +
"<h2 >" + data[ i ].name + "</h2>" +
"</div>"+
"<div class='posterHolder'>" + data[ i ].posterPath + "</div>" +
"<div class='summaryShort'>" + data[ i ].summary + "</div>" +
"<div class='raiting'><p>" + data[ i ].imdb + "</p></div><div class='genderMovie'> " + data[ i ].gender + "</div> " +
"<div class='directorNdScreen'>" + 'Director by ' + " <p class='director'>" + data[ i ].director + '</p>' + ' ' + ' Screenplay by ' + "<p class='screenplay'>" + data[ i ].screenplay + "</p>" + "</div>"
+ "</a>")
}
} )
} );
Break your append part in variables and then concate it. may be that can help ?
$(document).ready(function() {
$.getJSON( "js/appjson.json", function(data) {
for (var i = 0; i < data.length; i++) {
var content_append = "normal content";
if(data[i])
{
content_append = "content here with data[i]"
}
$('#jsonLoad').append(content_append);
}
});
});
'<div>' +
(something === something_else)? 'some data1' : 'some data2' +
'</div>'
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>" );
});`
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