Jquery UI autocomplete ajax is not populating dropdown box

Jquery UI autocomplete ajax is not populating dropdown box - json

I need help with this, I can't see where is the problem.
When I set source for autocomplete in html file, it works fine, when I same source or database values print out in ajax.php and return it via ajax it doesn't work. What could be the problem? Help please.
Html :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Auto complete</title>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.18.custom.min.js"></script>
<link rel="stylesheet" media="all" type="text/css" href="jquery-ui-1.8.custom.css" />
<style type="text/css">
.ui-autocomplete-loading {
background: url("images/loader.gif") no-repeat scroll right center white;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function($){
$("#ac").autocomplete({
minLength: 2,
//source: [{"value":"Some Name","id":1},{"value":"Some Othername","id":2}]
source: function( request, response){
$.ajax({
type: 'GET',
url: 'ajax.php',
data: {
'term':request.term
},
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data){
console.log('Success : ' + data);
},
error: function(message){
alert(message);
}
});
},
select: function( event, ui ) {
}
});
});
</script>
</head>
<body>
<input type="text" id="ac" name="ac" size="100" />
</body>
</html>
and my ajax.php file:
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = '';
$dbname = 'test_db';
$server = mysql_connect($dbhost, $dbuser, $dbpass);
$connection = mysql_select_db($dbname, $server);
$term = $_GET['term'];
$qstring = "SELECT user_id,tName FROM `csv_data` WHERE tName LIKE '%" . $term . "%'";
$result = mysql_query($qstring);
$return_arr = array();
$i = 0;
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {//loop through the retrieved values
$row_a = array();
if ($row['tName'] != null) {
$i++;
$row_a['value'] = ($row['tName']);
$row_a['id'] = (int) $i;
array_push($return_arr, $row_a);
}
}
mysql_close($server);
header("Content-type: text/x-json");
/*$my_arr = array(
array("value" => "Some Name", "id" => 1),
array("value" => "Some Othername", "id" => 2)
);*/
//echo json_encode($return_arr);
print json_encode($return_arr);
//print json_encode($my_arr);
This is response from firebug(generated from database).
[{"value":"4 erste Spiele","id":1},{"value":"Meine ersten Spiele \"Blinde Kuh\"","id":2},{"value":"4 erste Spiele","id":3},{"value":"Meine ersten Spiele \"Blinde Kuh\"","id":4},{"value":"4 erste Spiele","id":5},{"value":"Meine ersten Spiele \"Blinde Kuh\"","id":6},{"value":"Maxi Kleine Spielewelt","id":7}]

The parameter response is actually a callback tthat you have to call - passing it your data - to display the result popup menu. Simply call it in the "success" callback:
source: function(request, response) {
$.ajax({
...
success: function(data) {
// pass your data to the response callback
response(data);
},
error: function(message) {
// pass an empty array to close the menu if it was initially opened
response([]);
}
});
},

Related

Populate five dropdowns (not dependent) in single Ajax call in Codeigniter

Framework - Codeigniter
I need to populate multiple drop down lists on view onload function. Currently I use five Ajax requests to populate five dropdowns. I think this is inefficient and will reduce my application performance and increase the bandwidth usage. Is there any efficient alternative way to do this? (like populate them all in single Ajax call)
In my View
$(document).ready(function() {
{
$.ajax({
url:"<?php echo base_url(); ?>index.php/Pharmacy_elements/fetch_main_catagories",
method:'get',
headers: XMLHttpRequest + new Date().getTime(),
success:function(data){
$('#main_catagory').html(data);
}
})
}
{
$.ajax({
url:"<?php echo base_url(); ?>index.php/Pharmacy_elements/fetch_sub_catagories",
method:'get',
headers: XMLHttpRequest + new Date().getTime(),
success:function(data){
$('#sub_catagory').html(data);
}
})
}
{
$.ajax({
url:"<?php echo base_url(); ?>index.php/Pharmacy_elements/fetch_serving_types",
method:'get',
headers: XMLHttpRequest + new Date().getTime(),
success:function(data){
$('#common_serving_type').html(data);
}
})
}
{
$.ajax({
url:"<?php echo base_url(); ?>index.php/Pharmacy_elements/fetch_approved_suppliers",
method:'get',
headers: XMLHttpRequest + new Date().getTime(),
success:function(data){
$('#supplier_name').html(data);
}
})
}
})
My Controller
public function fetch_mother_companies()
{
$output = '';
$this->load->model('Pharmacy_model');
$data = $this->Pharmacy_model->fetch_mother_companies();
// $output .='<option value=0>All</option>';
if($data->num_rows()>0){
foreach($data->result() as $row){
$output .='
<option value='.$row->id.'>'.$row->company_name.'</option>';
}
}
else {
}
echo $output;
}
public function fetch_main_catagories()
{
$output = '';
$this->load->model('Pharmacy_model');
$data = $this->Pharmacy_model->fetch_main_catagories();
// $output .='<option value=0>All</option>';
if($data->num_rows()>0){
foreach($data->result() as $row){
$output .='
<option value='.$row->id.'>'.$row->category_name.'</option>';
}
}
else {
}
echo $output;
}
public function fetch_sub_catagories()
{
$output = '';
$this->load->model('Pharmacy_model');
$data = $this->Pharmacy_model->fetch_sub_catagories();
// $output .='<option value=0>All</option>';
if($data->num_rows()>0){
foreach($data->result() as $row){
$output .='
<option value='.$row->category_id.'>'.$row->category_name.'</option>';
}
}
else {
}
echo $output;
}

Passing data to Horizontal Bar Highchart.js showing only one record in codeigniter

im really confuse how to pass data from controller to horizontal bar bcz this is my first time dealing with charts and i hope someone can help me n tell me the best way to fetch data n pass it to chart .
i tried using foreach in view and then echo inside chart script ..when i use Print_R i can see all data .. but when i put it inside the horizontal-bar Chart it only give me 1 record . here is the screenshot of the result
and this is what i did in controller and view :
Controller
public function index()
{
$data['db1'] = $this->m_mds->isiChart();
$data['content'] = 'tempelates/MDS/content';
$data['chart'] = 'tempelates/MDS/chart';
$this->load->view('tempelate',$data);
}
and here is the foreach in view :
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<?php foreach ($db1->result_array() as $key) {
$nmbrg= $key['NAMA_BRG'];
$oos=$key['OOS'];
$kurang= $key['kurang_4'];
$osa=$key['OSA'];
}?>
<script>
Highcharts.chart('container', {
chart: {
type: 'bar',
options3d: { enabled: true, }
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: [<?php echo json_encode($nmbrg)?> ]
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'OOS',
data: [<?php echo json_encode($oos)?>]
}, {
name: '<4',
data: [<?php echo json_encode($kurang)?>]
}, {
name: 'OSA',
data: [<?php echo json_encode($osa)?>]
}]
});
</script>
what i want to do is.. make the output of foreach like this
[{"namabrg":"YOLITE C+100 STRAWBERRY ","oos":1719,"kurang":4264,"osa":40100},{"namabrg":"YOLITE KIDS 70 ML BND 4 ORI ","oos":2,"kurang":3,"osa":162}]
and pass all data comes from foreach to horizontal bar Chart.

You need to change your PHP code block to this: (Put inidvidual values into array and implode array values to lists)
<?php
$nmbrg_values = array();
$oos_values = array();
$kurang_values = array();
$osa_values = array();
foreach ($db1->result_array() as $key) {
$nmbrg_values[] = $key['NAMA_BRG'];
$oos_values[] = $key['OOS'];
$kurang_values[] = $key['kurang_4'];
$osa_values[] = $key['OSA'];
}
$nmbrg = implode(", ", $nmbrg_values);
$oos = implode(", ", $oos_values);
$kurang = implode(", ", $kurang_values);
$osa = implode(", ", $osa_values);
?>

Following CSV file script are not working properly in Laravel 6

I used following script in my rout file.
Route::get('/tasks', 'appointmentController#exportCsv')
I used the following Js script Html Clickable button in blade template
<script>
function exportTasks(_this) {
let _url = $(_this).data('href');
window.location.href = _url;
}
</script>
<span data-href="./tasks" id="export" class="btn btn-success btn-sm" onclick="exportTasks(event.target);">Export Client Email</span>
I used the following script in my controller. I cant find where is the script problem. CSV file are not download include with the data.
public function exportCsv(Request $request)
{
$fileName = 'tasks.csv';
$tasks = Clientinformation::all();
$headers = array(
"Content-type" => "text/csv",
"Content-Disposition" => "attachment; filename=$fileName",
"Pragma" => "no-cache",
"Cache-Control" => "must-revalidate, post-check=0, pre-check=0",
"Expires" => "0"
);
$columns = array('customerName', 'email', 'cell1', 'cell2', 'landNumber');
$callback = function() use($tasks, $columns) {
$file = fopen('php://output', 'w');
fputcsv($file, $columns);
foreach ($tasks as $task) {
$row['customerName'] = $task->customerName;
$row['email'] = $task->assign->email;
$row['cell1'] = $task->cell1;
$row['cell2'] = $task->cell2;
$row['landNumber'] = $task->landNumber;
fputcsv($file, array($row['customerName'], $row['email'], $row['cell1'], $row['cell2'], $row['cell2'], $row['landNumber'] ));
}
fclose($file);
};
return response()->stream($callback, 200, $headers);
}

Ajax Internal Server Error in Yii2

View urlCreate code
$ajaxSaveTestGrid = Yii::$app->urlManager->createUrl('testgrid/ajaxsave');
This Is My View Ajax Code
function saveRow(id, index) {
if(id == 'tbl_testGrid') {
save(id, index);
}
}
function save(id, index) {
var testGrid_name = $('#testGrid_name' + index).val();
var testGrid_qty = $('#testGrid_qty' + index).val();
var testGrid_price = $('#testGrid_price' + index).val();
var url = '$ajaxSaveTestGrid';
// alert(testGrid_name+testGrid_qty+testGrid_price);
$.ajax({
type: 'GET',
url: url,
data: {
testGrid_name:testGrid_name,
testGrid_qty:testGrid_qty,
testGrid_price:testGrid_price
},
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (response) {
if(response == 'error') {
alert('Fail to save! Please try again');
} else {
$('#testGrid_name' + index).attr(\"disabled\",true);
$('#testGrid_qty' + index).attr(\"disabled\",true);
$('#testGrid_price' + index).attr(\"disabled\", true);
$('#testGrid_save_button' + index).attr(\"class\", \"hidden\");
$('#testGrid_delete_button' + index).attr(\"class\", \"hidden\");
$('#testGrid_edit_button' + index).attr(\"class\", \"show\");
$('#hid_testGrid_id' + index).val(response[0].testgrid.id);
$('html,body').animate({scrollTop: $('#btn_testGrid').offset().top});
}
}
});
}
This is my Controller
public function actionAjaxsave() {
$result = array();
$testGrid_name = $_GET['testGrid_name'];
$testGrid_qty = $_GET['testGrid_qty'];
$testGrid_price = $_GET['testGrid_price'];
$model = new Testgrid();
$model->name = $testGrid_name;
$model->price = $testGrid_price;
$model->qty = $testGrid_qty;
if ($model->save()) {
array_push($result, ['testgrid' => $model]);
$result = Json::encode($result);
echo $result;
} else {
echo 'error';
}
}
It occurring Internal Server Error
I want to save json Data to model.

Internal Server Error means that your code has fatal errors and error displaying is turned off. If you want to see the error itself, you must enable error displaying.
Check out the following question with its answers: How do I get PHP errors to display?
After you see the error, you can fix it.
PS:
$testGrid_name = $_GET['testGrid_name'];
This is not a recommended way to access GET variables. Use Yii::$app->request->get('testGrid_name') instead

Sencha Touch Variable Missing error

In an effort to learn more about Sencha Touch I am building a calendar webapp for our university. I have some scripts that work but the problem is when I try to update the listPanel with the JSON data from Events.php. I am getting the data from the page but the update command is not updating the listPanel and instead for some reason that I can't put my finger on is asking for the events variable which is commented out. Now if I uncomment that variable it will parse the JSON in that variable but for the life of me i have no idea why.
Here is the the index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Student Calendar</title>
<link rel="stylesheet" href="css/ext-touch.css" type="text/css"/>
<script type="text/javascript" src="js/ext-touch.js"></script>
<script type="text/javascript" src="js/calendar.js"></script>
<link rel="stylesheet" href="css/calendar.css" type="text/css"/>
</head>
<body>
<textarea id="eventList" class="x-hidden-display">
<ul id="eventsItems">
<tpl for=".">
<li class="date">
{date}
<li>
<tpl for="events">
<li>{title} - {location}</li>
</tpl>
</tpl>
</ul>
</textarea>
<textarea id="eventList" class="x-hidden-display">
<ul id="eventsDescriptionList">
<tpl for=".">
<li class="date">
{date}
<li>
<tpl for="events">
<li>{title} - {location}</li>
</tpl>
</ul>
</textarea>
<textarea id="eventDescription" class="x-hidden-display">
<tpl for=".">
<p>{title}</p>
<p>{description}</p>
<p>{location}</p>
<p>{startTime}</p>
</tpl>
</textarea>
</body>
</html>
Here is the calendar.js
Ext.setup({
onReady:function(){
eventListTemplate = Ext.XTemplate.from("eventList");
descriptionTemplate = Ext.XTemplate.from("eventDescription");
eventTapHandler = function(eventer,tapped){
tapID = tapped.id;
/*Pass Into The Ajax Portion for getting a events description*/
Ext.Ajax.request({
params:{
/*params are available inside of the Ajax request*/
needs:eventDescription,
panel:"descript",
id:tapID,
fails:rootPanel
},
url: 'Events.php',
method:'POST',
success: function(response, opts) {
/*Ext.uitl.JSON.decode() is used to change the response text to a JSON object*/
opts.params.needs.update(Ext.util.JSON.decode(response.responseText));
},
failure: function(response, opts) {
alert("Sorry There Was An Error");
opts.params.fails.setCard(0);
}
});
rootPanel.setCard(1);
}
eventBackHandler = function(){
rootPanel.setCard(0);
}
backButton = {
text:'Back',
ui:'back',
cls:'.backable',
handler:eventBackHandler
}
toolBarBack = new Ext.Toolbar({
dock:'top',
title:'Event Desciption',
cls:'toolBar',
items:[backButton],
});
listPanel = new Ext.Panel({
tpl:eventListTemplate,
scroll:'vertical',
tester:function()
{
alert('MAGIC');
},
getEvent:function(){
var currentPanel = this;
Ext.Ajax.request({
params:{
/*params are available inside of the Ajax request*/
panel:"list",
needs:currentPanel,
fails:rootPanel
},
url: 'Events.php',
method:'POST',
success: function(response, opts) {
var data = Ext.util.JSON.decode(response.responseText);
//opts.params.needs.tester();
/*Ext.uitl.JSON.decode() is used to change the response text to a JSON object*/
opts.params.needs.update(data);
},
failure: function(response, opts) {
alert("Sorry There Was An Error");
}
});
},
listeners: {el: {tap: eventTapHandler,delegate: '.touchable'}}
});
eventDescription = new Ext.Panel({
tpl:descriptionTemplate,
scroll:'vertical',
dockedItems:[toolBarBack]
});
rootPanel = new Ext.Panel({
fullscreen:true,
layout:"card",
animation: 'fade',
items:[listPanel,eventDescription]
});
//Offending Variable
//var events = [{id:1,title:'this is a title',location:'here and now',startTime:'Right behind you'},{id:2,title:'this is a title2',location:'here and now2',startTime:'Right behind you2'}]
//alert("done");
listPanel.getEvent();
}
});
Here is the events.php Sql and database names have been changed to protect the innocent
<?
$dbname = "magicalDatabase";
require_once("../../../db_setup.inc");
If($_POST['panel'] == "list" )
{
$currentMonth = date("m");
$currentYear = date("Y");
mysql_real_escape_string($currentMonth);
mysql_real_escape_string($currentYear);
$sql = "SELECT * FROM magicalcalendar WHERE calendar_start_year = '$currentYear' AND calendar_start_month = '$currentMonth' AND calendar_channel_guid = 'CurrentStudentsMain' ORDER BY calendar_start_month, calendar_start_day ASC";
$results = mysql_query($sql)or die(mysql_error()."------".__LINE__."-----$sql");
$dayCounts[01] = 31;
$dayCounts[02] = 29;
$dayCounts[03] = 31;
$dayCounts[04] = 30;
$dayCounts[05] = 31;
$dayCounts[06] = 30;
$dayCounts[07] = 31;
$dayCounts[08] = 31;
$dayCounts[09] = 30;
$dayCounts[10] = 31;
$dayCounts[11] = 30;
$dayCounts[12] = 31;
for($j=1;$j<$dayCounts[$currentMonth];$j++)
{
if($j<10)
{
$responce['0'.$j]['date'] = date(M)." - $j";
}
else{
$responce[$j]['date'] = date(M)." - $j";
}
}
while($event = mysql_fetch_array($results))
{
$responce[$event['calendar_start_day']]['events'][$event['calendar_id']]['id'] = $event['calendar_id'];
$responce[$event['calendar_start_day']]['events'][$event['calendar_id']]['title'] = $event['calendar_subject'];
$responce[$event['calendar_start_day']]['events'][$event['calendar_id']]['location'] = $event['calendar_location'];
$responce[$event['calendar_start_day']]['events'][$event['calendar_id']]['startTime'] = $event['calendar_start_month']."-".$event['calendar_start_day']."-".$event['calendar_start_year'];
}
echo json_encode($responce);
}
If($_POST['panel'] == "descript")
{
$id = $_POST['id'];
mysql_real_escape_string($id);
$sql = "SELECT * FROM magicalcalendar WHERE calendar_id = $id";
$results = mysql_query($sql)or die(mysql_error()."------".__LINE__."-----$sql");
$i=0;
while($event = mysql_fetch_array($results))
{
$responce['id'] = $event['calendar_id'];
$responce['description'] = $event['calendar_text'];
$responce['title'] = $event['calendar_subject'];
$responce['location'] = $event['calendar_location'];
$responce['startTime'] = $event['calendar_start_day']."-". $event['calendar_start_month']."-".$event['calendar_start_year'];
$i++;
}
echojson_encode($responce);
}
?>
Here is an example of the JSON data being sent
{
"05":{"events":{
"2856":{"id":"2856","title":"BSM Leadership Retreat","location":"Lake O' The Pines","startTime":"01-05-2011"}}},
"06":{"events":{
"2957":{"id":"2957","title":"Women's Basketball","location":"Brownwood, TX","startTime":"01-06-2011"},
"2958":{"id":"2958","title":"Men's Basketball","location":"Brownwood, TX","startTime":"01-06-2011"}}},
"08":{"events":{
"2959":{"id":"2959","title":"Women's Basketball","location":"Alpine, Tx","startTime":"01-08-2011"},
"2960":{"id":"2960","title":"Men's Basketball","location":"Alpine, TX","startTime":"01-08-2011"}}},
"11":{"events":{
"3052":{"id":"3052","title":"Theatre Auditions!","location":"Black Box Theatre","startTime":"01-11-2011"}}},
"12":{"events":{
"3054":{"id":"3054","title":"Welcome Back Party","location":"New Student Lounge","startTime":"01-12-2011"}}},
"13":{"events":{
"2961":{"id":"2961","title":"Women's Basketball","location":"Pineville, LA","startTime":"01-13-2011"},
"2962":{"id":"2962","title":"Men's Basketball","location":"Pineville, LA","startTime":"01-13-2011"}}},
"14":{"events":{
"3055":{"id":"3055","title":"Organizations Meeting","location":"Cornish Great room","startTime":"01-14-2011"}}},
"15":{"events":{
"2963":{"id":"2963","title":"Women's Basketball","location":"Clinton, MS","startTime":"01-15-2011"},
"2964":{"id":"2964","title":"Men's Basketball","location":"Clinton, MS","startTime":"01-15-2011"}}},
"20":{"events":{
"2965":{"id":"2965","title":"Women's Basketball","location":"ETBU\/Ornelas Gymnasium","startTime":"01-20-2011"},
"2966":{"id":"2966","title":"Men's Basketball","location":"Ornelas Gym\/ETBU","startTime":"01-20-2011"}}},
"21":{"events":{
"3056":{"id":"3056","title":"Karen Peck and New River","location":"Marshall Convention Center Auditorium","startTime":"01-21-2011"},
"3057":{"id":"3057","title":"Chamber Ensemble Recital","location":"Woods Great Room in OSC","startTime":"01-21-2011"}}},
"22":{"events":{
"2967":{"id":"2967","title":"Women's Basketball","location":"ETBU\/Ornelas Gymnasium","startTime":"01-22-2011"},
"2968":{"id":"2968","title":"Men's Basketball","location":"Ornelas Gym\/ETBU","startTime":"01-22-2011"}}},
"27":{"events":{
"2969":{"id":"2969","title":"Women's Basketball","location":"Clarksville, AR","startTime":"01-27-2011"},
"2970":{"id":"2970","title":"Men's Basketball","location":"Clarksville, AR","startTime":"01-27-2011"},
"3058":{"id":"3058","title":"CASL Conference","location":"Ornelas Student Center","startTime":"01-27-2011"}}},
"28":{"events":{
"2857":{"id":"2857","title":"ABIDE - A Reflective Prayer Conference","location":"TBD","startTime":"01-28-2011"},
"3059":{"id":"3059","title":"CASL Conference","location":"Ornelas Student Center","startTime":"01-28-2011"},
"3060":{"id":"3060","title":"ABIDE","location":"TBD","startTime":"01-28-2011"}}},
"29":{"events":{"2971":{"id":"2971","title":"Women's Basketball","location":"Richardson, TX","startTime":"01-29-2011"},
"2972":{"id":"2972","title":"Men's Basketball","location":"Richardson, TX","startTime":"01-29-2011"},
"3061":{"id":"3061","title":"CASL Conference","location":"Ornelas Student Center","startTime":"01-29-2011"},
"3062":{"id":"3062","title":"SAI Province Day","location":"JGMB and EDW","startTime":"01-29-2011"}}}
}
Also you can view the app here
It's best viewed in safari either mobile or desktop.

A much more effective way to bind, say, a list to a JSON data source is to use a Ext.data.Proxy which will take care of all the AJAX and asynchronous updating of the list.
I've taken the liberty of rewriting your app to demonstrate:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Scratch</title>
<script src="lib/touch/sencha-touch-debug.js" type="text/javascript"></script>
<link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />
<script>
Ext.setup({
onReady:function(){
//DATA
Ext.regModel('Event', {
fields: [
{name:'id'},
{name:'title'},
{name:'location'},
{name:'startTime'}
],
});
Ext.regStore('events', {
model: 'Event',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'events.json',
reader: {
type: 'json',
root: 'events'
}
},
getGroupString: function(record) {
return record.get('startTime');
}
});
//UI
eventListToolbar = new Ext.Toolbar({
title: 'Events'
});
eventList = new Ext.List({
store: 'events',
itemTpl: Ext.XTemplate.from("eventList"),
listeners: {
selectionchange: function (selectionModel, records) {
if (records[0]) {
eventDescription.update(records[0].data);
eventDescriptionToolbar.setTitle(records[0].get('title'))
rootPanel.setActiveItem(eventDescriptionPanel, {type:'slide'});
}
}
},
grouped:true
});
eventListPanel = new Ext.Panel({
dockedItems: [eventListToolbar],
items: [eventList]
});
eventDescriptionToolbar = new Ext.Toolbar({
items: {
text:'Back',
ui: 'back',
listeners: {
tap: function () {
rootPanel.setActiveItem(eventListPanel, {type:'slide', direction:'right'});
}
}
}
});
eventDescription = new Ext.Panel({
tpl: Ext.XTemplate.from("eventDescription"),
padding:20,
});
eventDescriptionPanel = new Ext.Panel({
dockedItems: [eventDescriptionToolbar],
items: [eventDescription],
});
rootPanel = new Ext.Panel({
fullscreen:true,
layout:"card",
items:[
eventListPanel,
eventDescriptionPanel
]
});
}
});
</script>
</head>
<body>
<textarea id="eventList" class="x-hidden-display">
{title} - {location}
</textarea>
<textarea id="eventDescription" class="x-hidden-display">
<p>{title}</p>
<p>{description}</p>
<p>{location}</p>
<p>{startTime}</p>
</textarea>
</body>
</html>
This consumes JSON that looks like this:
{"events":[
{"id":"2856","title":"BSM Leadership Retreat","location":"Lake O' The Pines","startTime":"01-05-2011"},
{"id":"2957","title":"Women's Basketball","location":"Brownwood, TX","startTime":"01-06-2011"},
{"id":"2958","title":"Men's Basketball","location":"Brownwood, TX","startTime":"01-06-2011"},
{"id":"2959","title":"Women's Basketball","location":"Alpine, Tx","startTime":"01-08-2011"},
{"id":"2960","title":"Men's Basketball","location":"Alpine, TX","startTime":"01-08-2011"},
{"id":"3052","title":"Theatre Auditions!","location":"Black Box Theatre","startTime":"01-11-2011"},
{"id":"3054","title":"Welcome Back Party","location":"New Student Lounge","startTime":"01-12-2011"},
{"id":"2961","title":"Women's Basketball","location":"Pineville, LA","startTime":"01-13-2011"},
{"id":"2962","title":"Men's Basketball","location":"Pineville, LA","startTime":"01-13-2011"},
{"id":"3055","title":"Organizations Meeting","location":"Cornish Great room","startTime":"01-14-2011"},
{"id":"2963","title":"Women's Basketball","location":"Clinton, MS","startTime":"01-15-2011"},
{"id":"2964","title":"Men's Basketball","location":"Clinton, MS","startTime":"01-15-2011"},
{"id":"2965","title":"Women's Basketball","location":"ETBU\/Ornelas Gymnasium","startTime":"01-20-2011"},
{"id":"2966","title":"Men's Basketball","location":"Ornelas Gym\/ETBU","startTime":"01-20-2011"},
{"id":"3056","title":"Karen Peck and New River","location":"Marshall Convention Center Auditorium","startTime":"01-21-2011"},
{"id":"3057","title":"Chamber Ensemble Recital","location":"Woods Great Room in OSC","startTime":"01-21-2011"},
{"id":"2967","title":"Women's Basketball","location":"ETBU\/Ornelas Gymnasium","startTime":"01-22-2011"},
{"id":"2968","title":"Men's Basketball","location":"Ornelas Gym\/ETBU","startTime":"01-22-2011"},
{"id":"2969","title":"Women's Basketball","location":"Clarksville, AR","startTime":"01-27-2011"},
{"id":"2970","title":"Men's Basketball","location":"Clarksville, AR","startTime":"01-27-2011"},
{"id":"3058","title":"CASL Conference","location":"Ornelas Student Center","startTime":"01-27-2011"},
{"id":"2857","title":"ABIDE - A Reflective Prayer Conference","location":"TBD","startTime":"01-28-2011"},
{"id":"3059","title":"CASL Conference","location":"Ornelas Student Center","startTime":"01-28-2011"},
{"id":"3060","title":"ABIDE","location":"TBD","startTime":"01-28-2011"},
{"id":"2971","title":"Women's Basketball","location":"Richardson, TX","startTime":"01-29-2011"},
{"id":"2972","title":"Men's Basketball","location":"Richardson, TX","startTime":"01-29-2011"},
{"id":"3061","title":"CASL Conference","location":"Ornelas Student Center","startTime":"01-29-2011"},
{"id":"3062","title":"SAI Province Day","location":"JGMB and EDW","startTime":"01-29-2011"}
]}
Slightly rough and ready. But it looks like: http://cl.ly/46dH & http://cl.ly/46Rl
Not technically an answer to your question. But does that work?

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

Jquery UI autocomplete ajax is not populating dropdown box - json

Related

Populate five dropdowns (not dependent) in single Ajax call in Codeigniter

Passing data to Horizontal Bar Highchart.js showing only one record in codeigniter

Following CSV file script are not working properly in Laravel 6

Ajax Internal Server Error in Yii2

Sencha Touch Variable Missing error

Categories

Resources