Currently setting up a dropdown which gathers results from an API. I have set it up as follows:
$("#my-dropdown").dropdown({
minCharacters: 2,
apiSettings: {
cache: false,
url: getCorrectUrl(),
method: 'POST',
onResponse: function(users) {
var response = {
success: true,
results: []
};
$.each(users, function(index, item) {
response.results.push({
name: item.name,
value: item.id
});
});
return response;
}
}
});
And it is returning the correct data, just not in the form that I want. I would like to format the menu items how I want.
Specifically, what I'm currently getting is:
...but what I want is:
I have seen the answer to this question, which uses the onShow function to change the items into a custom form, but is manual manipulation of the DOM the only way to do it? Or is there a built in method to specify custom format menu items for use in a API-powered dropdown menu?
I have done this before, it involves defining a custom type of a template for generating the HTML for the results from the response.
I would go to dropdown.js in your Semantic/components directory and find:
$.fn.dropdown.settings.templates = { //line 3715 in version 2.2
you will find some predefined templates there for how the JSON is used to generate the results.
I didn't edit the code there, instead I copied the usual results template (templates.dropdown), tweaked the copied contained js to fit my results and created my own function from it in my own js file:
function addDropdownTemplate(name){
$.fn.dropdown.settings.templates[name] = function (response) {//use response
//use the edited version of the default template here
}
}
When you call the above function, you will add your own template for converting the response to the HTML results, to use it just specify the type of template you will use in the api settings:
apiSettings: {
//your other settings as in the question above
type: 'imageResult' //imageResult is an example, you can call it whatever
//you like as long as it's the same as what you passed
//to your function as the name parameter
}
I am looking at my code and I didn't even attach an onResponse event in the apiSettings, wasn't necessary.
Having the same problem, I came accross that post and tried to apply the best answer solution, but failed to make it work.
However, it led me to discover another way to achieve what you want to do, using the "onSuccess" callback under "apiSettings":
$('.player-dropdown.remote').dropdown({
on: 'click',
direction: 'downward',
allowAdditions: false,
allowReselection: true,
fireOnInit: false,
apiSettings: {
url: 'search?q={query}',
onSuccess: function(response) {
var html = '' ;
$('.player-member-menu').empty();
$.each(response.results, function(index, item) {
html += '<span class="select-player nowrap item " data-value="' + item.value + '">'
+ '<small class="description right-floated">' + item.description + '</small>'
+ '<span class="text">' + item.name + '</span>'
+ '</span>';
});
$(this).find('.player-member-menu').html(html) ;
},
},
minCharacters : 3,
searchDelay: 500,
duration: 500,
saveRemoteData: false,
filterRemoteData: false,
showOnFocus: true,
fullTextSearch: true,
});
In my example, the results array is formatted as asked in the docs, excepted that each item has 3 parameters instead of 2: name, value and description.
Understand already done process for single object and single data, which is working pretty cool.
1) output from the PHP Server encoded into JSON format.
JSON OUTPUT:
{"product_id":"1","sku":"FGDGE43","set":"4","type":"simple","categories":["2"],"websites":["1"],"type_id":"simple","name":"Honey","description":"Where sweetness belong.","short_description":"Sweetness.","weight":"100.0000","old_id":null,"news_from_date":null,"news_to_date":null,"status":"1","url_key":"hgjjhgjh","url_path":"hgjjhgjh.html","visibility":"4","category_ids":["2"],"required_options":"0","has_options":"0","image_label":"Honey","small_image_label":"Honey","thumbnail_label":"Honey","created_at":"2014-02-10 14:36:54","updated_at":"2014-02-19 11:37:07","country_of_manufacture":null,"price":"43.0000","group_price":[],"special_price":null,"special_from_date":null,"special_to_date":null,"tier_price":[],"minimal_price":null,"msrp_enabled":"2","msrp_display_actual_price_type":"4","msrp":null,"enable_googlecheckout":"1","tax_class_id":"0","meta_title":null,"meta_keyword":null,"meta_description":null,"is_recurring":"0","recurring_profile":null,"custom_design":null,"custom_design_from":null,"custom_design_to":null,"custom_layout_update":null,"page_layout":null,"options_container":"container2","gift_message_available":null,"0":{"file":"\/h\/o\/honey.jpg","label":"Honey","position":"1","exclude":"0","url":"http:\/\/127.0.0.1\/magento\/media\/catalog\/product\/h\/o\/honey.jpg","types":["image","small_image","thumbnail"]}}
2) Now
I can fetch above mentioned SINGLE JSON object through jQuery and dynamically change the content of the page.
$(document).ready( function() {
alert('bhoom : oh yea its coming');
$.ajax({
type: 'POST',
url: 'http://127.0.0.1/midserver.php',
data: 'id=testdata',
dataType: 'text',
cache: false,
success: function(data) {
var json = $.parseJSON(data);
$('#pname').html(json.name);
$('#pdesc').html(json.description);
$('#pprice').html(json.price);
$('#pweight').html(json.weight);
},
});
});
This is working fine.
Here come my Question
How can i fetch two or more object through JS or JQ and create dynamic elements though JS/JQ or any other mechanism and then put this data in dynamically generated elements.
i.e : for below mentioned JSON object ?
[{"product_id":"1","sku":"FGDGE43","set":"4","type":"simple","categories":["2"],"websites":["1"],"type_id":"simple","name":"Honey","description":"Where sweetness belong.","short_description":"Sweetness.","weight":"100.0000","old_id":null,"news_from_date":null,"news_to_date":null,"status":"1","url_key":"hgjjhgjh","url_path":"hgjjhgjh.html","visibility":"4","category_ids":["2"],"required_options":"0","has_options":"0","image_label":"Honey","small_image_label":"Honey","thumbnail_label":"Honey","created_at":"2014-02-10 14:36:54","updated_at":"2014-02-19 11:37:07","country_of_manufacture":null,"price":"43.0000","group_price":[],"special_price":null,"special_from_date":null,"special_to_date":null,"tier_price":[],"minimal_price":null,"msrp_enabled":"2","msrp_display_actual_price_type":"4","msrp":null,"enable_googlecheckout":"1","tax_class_id":"0","meta_title":null,"meta_keyword":null,"meta_description":null,"is_recurring":"0","recurring_profile":null,"custom_design":null,"custom_design_from":null,"custom_design_to":null,"custom_layout_update":null,"page_layout":null,"options_container":"container2","gift_message_available":null},[{"file":"\/h\/o\/honey.jpg","label":"Honey","position":"1","exclude":"0","url":"http:\/\/127.0.0.1\/magento\/media\/catalog\/product\/h\/o\/honey.jpg","types":["image","small_image","thumbnail"]}],{"product_id":"2","sku":"asdf654a6sd5f4","set":"4","type":"simple","categories":[],"websites":["1"],"type_id":"simple","name":"Butter","description":"Buttery Buttery Buttery","short_description":"Buttery Buttery ","weight":"100.0000","old_id":null,"news_from_date":null,"news_to_date":null,"status":"1","url_key":"butter","url_path":"butter.html","visibility":"4","category_ids":[],"required_options":"0","has_options":"0","image_label":"butter","small_image_label":"butter","thumbnail_label":"butter","created_at":"2014-02-25 11:35:49","updated_at":"2014-02-25 11:53:10","country_of_manufacture":null,"price":"100.0000","group_price":[],"special_price":null,"special_from_date":null,"special_to_date":null,"tier_price":[],"minimal_price":null,"msrp_enabled":"2","msrp_display_actual_price_type":"4","msrp":null,"enable_googlecheckout":"1","tax_class_id":"0","meta_title":null,"meta_keyword":null,"meta_description":null,"is_recurring":"0","recurring_profile":null,"custom_design":null,"custom_design_from":null,"custom_design_to":null,"custom_layout_update":null,"page_layout":null,"options_container":"container2","gift_message_available":null},[{"file":"\/b\/u\/butter.jpg","label":"butter","position":"1","exclude":"0","url":"http:\/\/127.0.0.1\/magento\/media\/catalog\/product\/b\/u\/butter.jpg","types":["image","small_image","thumbnail"]}]]
So,
what i've tried to create 'dynamic content and putting data in that' is here.
$(document).ready( function() {
alert('bhoom : oh yea its coming');
$.ajax({
type: 'POST',
url: 'http://127.0.0.1/test2.php',
data: 'id=testdata',
dataType: 'text',
cache: false,
success: function(data) {
// asumming that server returns more than one products
// in JSON Object.
// So iterate over this JSON Object through .each JQuery
// function.
var divHtml;
var productDiv = $("#productDetailsDiv");
//its reference
$(data).each(function(index, value) {
// Take Html of productTemplate Div in divHtml variable.
divHtml = $('#productsTemplate').html();
// Fill divHtml with values
divHtml.find('#pname').html(value['name']);
divHtml.find('#pdesc').html(value['description']);
divHtml.find('#pimage').html(value['url']);
divHtml.find('#pprice').html(value['price']);
divHtml.find('#pweight').html(value['weight']);
// Add divHtml to productDiv
$("#productDetailsDiv").children().add(divHtml);
// Loop for next value in data
});
},
});
});
So, Am I making mistake to fetching complicated JSON object or there is a code went wrong with jQuery?
Any help or suggestion will be appreciated.
Regards.
try the block with query $.each
$.each(data, function(index, item) {
$('#pname').html(item.name);
$('#pdesc').html(item.description);
$('#pprice').html(item.price);
$('#pweight').html(item.weight);
});
here pname, pdesc... etc,. you need to update with dynamic elements
You can user jquery each function to achieve this:
$(document).ready( function() {
alert('bhoom : oh yea its coming');
$.ajax({
type: 'POST',
url: 'http://127.0.0.1/midserver.php',
data: 'id=testdata',
dataType: 'text',
cache: false,
success: function(data) {
var json = $.parseJSON(data);
$.each(json, function(index, element){
$('#pname').html(element.name);
$('#pdesc').html(element.description);
$('#pprice').html(element.price);
$('#pweight').html(element.weight);
});
},
});
});
Thanks for your suggestion.
I find out that the JSON object i'm getting through PHP server as an output, is in multi-dimensional array. So for the shake of the simplicity, at server side, we have to generate one-dimensional array of JSON object as an output to be fetched and manipulated at client-side.
Now We can do stuff like generating dynamic content on through JS/JQ on HTML page and render(fill-in) the data with the same.
Regards.
I have this code below:
<?php
$stmt = $pdo_conn->prepare("SELECT * from controldata where field = :field ");
$stmt->execute(array(':field' => 'notice_board'));
$result = $stmt->fetch();
?>
<textarea id="notice_board_textarea" data-id="notice_board" rows="8"><?php echo stripslashes(strip_tags($result["value"])); ?></textarea>
<script type="text/javascript">
$('#notice_board_textarea').on('blur', function () { // don't forget # to select by id
var id = $(this).data('id'); // Get the id-data-attribute
var val = $(this).val();
$.ajax({
type: "POST",
url: "dashboard.php?update_notice_board=yes",
data: {
notes: val, // value of the textarea we are hooking the blur-event to
itemId: id // Id of the item stored on the data-id
},
});
});
</script>
which selects data from a MySQL database and shows it in a textarea
then then JS code updates it by POSTing the data to another page but without refreshing the page or clicking a save/submit button
on dashboard.php i have this code:
if($_GET["update_notice_board"] == 'yes')
{
$stmt = $pdo_conn->prepare("UPDATE controldata SET value = :value WHERE field = :field ");
$stmt->execute(array(':value' => $_POST["notes"], ':field' => 'notice_board'));
}
but its not updating the data
am i doing anything wrong?
Wrong:
if ($_POST["update_notice_board"] == 'yes') {
Right:
if ($_GET['update_notice_board'] == 'yes') {
When you append something straight to the URL, it is ALWAYS GET:
url: "dashboard.php?update_notice_board=yes",
Updated answer:
Based on what's written in the comments below, my guess is, it is a server side issue, beyond what is shared here. Perhaps dashboard.php is part of a framework that empty the super globals or perhaps the request is not going directly to dashboard.php
Old suggestions:
When you use type: "POST" you wont find the parameters in the $_GET variable. (U: Actually you probably would find it in $_GET, but in my opinion it's cleaner to put all vars in either $_GET or $_POST, although there may be semantic arguments to prefer the splitting).
Add your parameter to the data object of your ajax call and read it from the $_POST variable instead:
$.ajax({
type: "POST",
url: "dashboard.php",
data: {
notes: val, // value of the textarea we are hooking the blur-event to
itemId: id, // Id of the item stored on the data-id
update_notice_board:"yes"
},
success: function(reply) {
alert(reply);
},
error:function(jqXHR, textStatus, errorThrown ) {
alert(textStatus);
}
});
and
if($_POST["update_notice_board"] == 'yes')
(You may also look in $_REQUEST if you don't care whether the request is get or post.)
Compare the documentation entries:
http://www.php.net/manual/en/reserved.variables.get.php
http://www.php.net/manual/en/reserved.variables.post.php
http://www.php.net/manual/en/reserved.variables.request.php
Working client-side example:
http://jsfiddle.net/kLUyx/
I am working on wijgrid and I have given a radio button to html form.
I have used jquery to get the value of radio button and it is displying on the form but its not showing at grid.
I want to get the value of paramcode on selection of radio button and this value should display at wijgrid.My code is working fine and its showing the value but when I am saving the the data of form its not accepting radio button values inside the grid.
Please help ...Thanks Tina!!
This is my JSON (reformatted for legibility, but actually minified):
{
"jsonWrapperforGrid": {
"page": "1",
"total": "2",
"rows": [
{
"tenantId": 0,
"paramType": "UserGender",
"paramCode":"F",
"langCode":"en",
"paramValue":"Female"
},
{
"tenantId": 0,
"paramType": "UserGender",
"paramCode": "M",
"langCode": "en",
"paramValue": "Male",
"paramBlob": ""
}
]
}
}
This is my jQuery script:
<script type="text/javascript">
$.ajax({
url: "UserGender",
type: "GET",
dataType: "json",
contentType : "application/json",
success: function (responce) {
if (responce.jsonWrapperforGrid.rows.length > 0) {
$.each(responce.jsonWrapperforGrid.rows, function (i, entity) {
$('#gencom01').append(
$('<label />', { 'for': 'gender' + entity.paramValue,
'text': entity.paramValue }),
$('<input />', { 'id': 'gender' + entity.paramCode,
'type': 'radio',
'name': 'gender',
'value': entity.paramValue })
.click(function() {
var inputValue = $('input:radio:[name=+"gendernew"]:checked').val(entity.paramCode);
$("#gencom").val(entity.paramCode );
})
);
});
}
}
});
</script>
This is my HTML:
<body>
<div id="gencom01">
<td><input id="gencom" style="width:205px ;" name="gendernew">
</div>
</body>
Is it really all your code?
If you start making ajax calls at load, maybe it's something you could have handled on the server side? But you probably have your reasons.
First you need to use the $(document).ready(); event, you cannot start appending stuff to a tag that is probably not in your DOM yet.
Your if statement is useless if (responce.jsonWrapperforGrid.rows.length > 0) , your .each() loop will just not do anything if the length is 0, no need to test for that before.
Then even worse, you started declaring a .click() inside a .append(), while it might work, that looks a bit weird and can be source of many errors. It is usually easier to debug to keep your DOM manipulation and your events separate. And use .on(), more up to date.
I don't know your technology behind your AJAX call, but parsing your JSON into a real JS object can help : var jsonData = $.parseJSON(responce);
Thus, it's good practice to make as little .append() as possible, using it in a loop can take time. I'd advise saving your data in a variable and only at the end of your loop you can append everything.
And I don't know what this <td> is doing in your <div>.
Here is how your code could look like, I couldn't test anything since I don't know how your JSON looks like :
$(document).ready(function()
{
$.ajax({
url: "/mgw/pankanis/admin/SysParameter?Paramtype=UserGender",
type:"GET",
dataType: "json",
contentType : "application/json",
success: function (responce)
{
var jsonData = $.parseJSON(responce);
var toAppend = "";
$.each(jsonData.jsonWrapperforGrid.rows,function(i,entity)
{
toAppend += '<label for="gender'+entity.paramValue+'">'+entity.paramValue+'</label>';
toAppend += '<input id="gender'+entity.paramCode+'" type="radio" name="gender" value="'+entity.paramValue+'">';
});
$('#gencom01').append(toAppend);
$("#gencom01 input:not(#gencom)").on("click",function()
{
$("#gencom").val($(this).attr("id").substr(6)); // entity.paramCode
})
}
});
});
The data that is coming as part of ajax call from my business class is as follows:
[{
"user_action": "<button class='detail-icon' title='Vehicle Pass History'onclick='javascript:openPopUpWagonList('DIM 008065');'> <img src='/WIMS/images/icon_detail.png'></button>",
"VEHICLE_ID": "DIM 008065",
"setFlag": "<img src='/WIMS/images/wims-tick.gif'>",
"clrFlag": "<img src='/WIMS/images/wims-tick.gif'>",
"setDate": "31 Jul 2010 11:11",
"lastClearDate": "24 Aug 2010 07:26",
"noOfdays": "24",
"ownerCode": "",
"operatorCode": "",
"maintainerCode": "",
"severity10Pass": "~",
"plot": "<button class='detail-icon' title='Plot' alt='Detail'onclick='javascript:popUpStepChangeListGraph('DIM 008065');'> <img src='/WIMS/images/icon_detail.png'></button>",
"activeFlag": "1"
}, {
"user_action": "<button class='detail-icon' title='Vehicle Pass History'onclick='javascript:openPopUpWagonList('N 005276');'> <img src='/WIMS/images/icon_detail.png'></button>",
"VEHICLE_ID": "N 005276",
"setFlag": "<img src='/WIMS/images/wims-tick.gif'>",
"clrFlag": "",
"setDate": "31 Aug 2011 10:05",
"lastClearDate": "24 Mar 2011 10:45",
"noOfdays": "0",
"ownerCode": "",
"operatorCode": "",
"maintainerCode": "",
"severity10Pass": "~~~",
"plot": "<button class='detail-icon' title='Plot' alt='Detail'onclick='javascript:popUpStepChangeListGraph('N 005276');'> <img src='/WIMS/images/icon_detail.png'></button>",
"activeFlag": "1"
}]
Here I have taken only 2 records for convenient readability, but I am displaying more than 150 records of this kind.
Now my ajax call format from my jsp page is as follows:
$.ajax({
type: "POST",
url: f_reqAction, // url is set already
data : {maintainer:maintainerValue,show:showValue},
dataType:'json',
async: true, /* If set to non-async, browser shows page as "Loading.."*/
cache: false,
timeout:80000, /* Timeout in ms */
success: handleApplyEventResponse,
error: handleResponseError
});
function handleApplyEventResponse(response) {
// response is coming from my business class
$("#stepChangeData").jqGrid('clearGridData');
if(response.length > 0){
for(var i=0;i<response.length;i++){
jQuery("#stepChangeData").jqGrid('addRowData',i+1,response[i]);
}
$('#stepChangeData').setGridParam({rowNum:response.length});
}
}
When I want to remove the data by calling jQuery("#gridtabID").jqGrid('clearGridData'); a javascript error is coming prompting to stop running the script. but if the data size is small like 20 or 30 the problem does not come.
I understand populating response data by calling jqGrid('addRowData' inside for loop is not efficient when the data is this much large. but i could not find a jqgrid api which can add this response data directly in the grid without any looping.
And i could not create the buttons contained in my json data through formatter option of colModel as I found it extremely difficult to create that type of button by formatter.So I created it in my business ligic and sending it to jsp page with json data as part of the ajax respose.
So in the above context, I would have loved to have an api which could have set this json data into the grid at a shot (i.e without any looping). And I think this way this script problem could have been averted as well.
The best way to fill jqGrid with the JSON data from the server to use datatype: 'json' and load the data from the server. jqGrid is very flexible and one can load practically any data. One need just to use corresponding jsonReader or jsonmap property of colModel. Sometimes one need additionally use ajaxGridOptions option, serializeGridData or beforeProcessing callbacks. One should additionally use gridview: true option of jqGrid.
The difference to the usage of addRowData is huge. The main disadvantage of the usage of addRowData is that the data will be placed in the grid row per row. The problem is that if you modify an element on the page or insert a new one the position of all existing elements on the page have to be recalculated by the web browser. Because you use addRowData in the loop, then positing of the row which will be inserted first have to be recalculated also after any insertion of the next rows. So The more rows need be inserted the more slowly will be the code. Because of the problem jQuery 1.4 introduced the method jQuery.detach which allows to remove temporary an element from the page, modify it and then place it back with any standard jQuery methods like jQuery.after, jQuery.append and many other.
If you use datatype: 'json' and gridview: true the full body of grid will be constructed as string and then placed in the grid as one insert operation. So you will get much more better performance as with addRowData in case of many inserted rows.
UPDATED: On the demo I show how the loading of the data directly in jqGrid can be implemented. I recommend you to use predefined or custom jqGrid formatters. For example to be able correctly sort the data one have to include date in ISO 8601 format and use formatter: 'date' with the corresponding options to display the date.
Additionally I don't recommend you to use spaces inside of ID. I supposed that VEHICLE_ID is unique id of your data. I used it, but removed all spaces from the value.
About the usage function inside of postData I recommend you to read my old answer.
The most important part of the code of the demo you find below
var maintainerValue = 1, showValue = 200, $grid = $("#list");
$grid.jqGrid({
url: 'DebaprasadJana.json',
datatype: 'json',
mtype: "POST",
postData: {
maintainer: function () {
// if maintainerValue will be get from a field on the page
// one can get the data here directly like
// return $("#maintainer").val();
return maintainerValue;
},
show: function () {
return showValue;
}
},
loadonce: true,
gridview: true,
jsonReader: {
repeatitems: false,
id: function (obj) {
// we can use VEHICLE_ID as the rowid, but cut spaces
return obj.VEHICLE_ID.replace(/\s/g, '');
},
root: function (obj) { return obj; },
page: function (obj) { return 1; },
total: function (obj) { return 1; },
records: function (obj) { return obj.length; }
}
});
$("#reload").click(function () {
// next two lines simulate reading of the
// current values of maintainerValue and showValue
maintainerValue++;
showValue--;
// we need reset datatype only if we use loadonce:true
$grid.jqGrid('setGridParam', {datatype: 'json'})
.trigger('reloadGrid');
});