I have a PHP file that returns a JSON array. I need to extract the array name, in this instance, *Regulatory_Guidance_Library* with jQuery as a var to $('#navHeaderTitle').text(arrayName); of my function. I don't know how this is done.
Thnx for your help
My Function in the HTML Doc:
function loadNav(url, container, appendE) {
$.getJSON(url, function(data){
var arrayName = "";
$.each(data.Regulatory_Guidance_Library, function(){
var newItem = $('#' + container).clone();
// Now fill in the fields with the data
newItem.find("h1").text(this.label);
newItem.find("h2").text(this.title);
newItem.find("p").text(this.description);
// And add the new list item to the page
newItem.children().appendTo('#' + appendE)
});
$('#navHeaderTitle').text(arrayName);
//transition(pageName, "show");
});
};
The served PHP:
<?php
//MySQL Database Connect
include 'andaerologin.php';
mysql_select_db("andaero");
$sql=mysql_query("select * from regulatory_list");
$output = new stdClass();
while($row = mysql_fetch_assoc($sql)) {
$output->Regulatory_Guidance_Library[] = $row;
}
header('Cache-Control: no-cache, must-revalidate');
header('Content-type: application/json');
echo (json_encode($output));
mysql_close();
?>
Modify php:
$output = array();
/* used "key" as name...could change to suit your app*/
$output['key']='Regulatory_Guidance_Library';
while($row = mysql_fetch_assoc($sql)) {
$output['items'][]= $row;
}
AJAX:
$.getJSON(url, function(data){
$.each(data.items, function(){
var newItem = $('#' + container).clone();
// Now fill in the fields with the data
newItem.find("h1").text(this.label);
newItem.find("h2").text(this.title);
newItem.find("p").text(this.description);
// And add the new list item to the page
newItem.children().appendTo('#' + appendE)
});
$('#navHeaderTitle').text(data.key);
//transition(pageName, "show");
});
The other answer is probably more helpful, but if you want to get the names of an object's properties with javascript you can do:
for (var name in data) {
alert(name);
}
In your case, since you have only one property you could do:
for (var name in data) {
$('#navHeaderTitle').text(name);
}
Related
I have a HTML table and Edit - Delete - Save images are associated with each row. Now I want to edit any cell and when I'll click on Save-image it will be displayed on the HTML table with updated values, as well as the associated table in the database will also be changed. I want to do this using Jquery Ajax and PHP but in MVC way. I have tried but somehow database changes are not happening, while HTML table is showing the updated values.
Ajax Code:
function Save()
{
var par = $(this).parent().parent();
var tdCid = par.children("td:nth-child(2)");
var tdCname = par.children("td:nth-child(3)");
var tdCtype = par.children("td:nth-child(4)");
var tdRegno = par.children("td:nth-child(5)");
var tdFare = par.children("td:nth-child(6)");
var tdNightfare = par.children("td:nth-child(7)");
var tdButtons = par.children("td:nth-child(8)");
var Cid = $("#tdCid").val();
var Cname = $("#tdCname").val();
var Ctype = $("#tdCtype").val();
var Regno = $("#tdRegno").val();
var Fare = $("#tdFare").val();
var Nightfare = $("#tdNightfare").val();
$.ajax({
url:"cardetails.php",
type:"POST",
data:{cid:Cid, name:Cname, cartype:Ctype, regno:Regno,fare:Fare, nfare:Nightfare},
success: function(response){
if(response==1){
alert('Data Inserted / Modified Successfully');
}
else
{
alert('Error !! Data Insertion / Modification Failed');
}
}
})
tdCid.html(tdCid.children("input[type=text]").val());
tdCname.html(tdCname.children("input[type=text]").val());
tdCtype.html(tdCtype.children("input[type=text]").val());
tdRegno.html(tdRegno.children("input[type=text]").val());
tdFare.html(tdFare.children("input[type=number]").val());
tdNightfare.html(tdNightfare.children("input[type=number]").val());
tdButtons.html("<img src='delete.png' class='btnDelete'/><img src='edit.png' class='btnEdit'/>");
$(".btnEdit").bind("click", Edit);
$(".btnDelete").bind("click", Delete);
};
cardetails.php script:
include('helper.php');
$car = new Admin;
$r=$car->update($_POST['cid'],$_POST['name'],$_POST['cartype'],$_POST['regno'],$_POST['fare'],$_POST['nfare']);
if($r==1)
return 1;
else
return 0;
helper.php script:
class Admin extends connection
{
var $update;
var $insert;
var $delete;
function update($id,$name,$typ,$rno,$fare,$ncharge)
{
$this->update=mysqli_query($this->con,"UPDATE cars SET cname='$name',ctype='$typ',regno='$rno',fare='$fare',nightcharge='$ncharge' WHERE cid='$id'") or die(mysqli_error($this->con));
if($this->update)
{
return 1;
}
}
}
the path and connection class and all the names and id included within the AJAX query, PHP script and database table has been cross-checked twice.
I've using jQuery Nestable menu from http://robertan.com/blog/?p=108
But I want make an enhancement on the JSON serialize from
[{"id":1},{"id":2},{"id":3,"children":[{"id":4},{"id":5}]}]
become
[{"id":1,"order":1},{"id":2,"order":2},{"id":3,"order":3,"children":[{"id":4,"order":1},{"id":5,"order":2}]}]
Any suggestion?
I don't know javascript well,but PHP is OK~
This gives your expected result, find the inline comments for more details
<script>
$(document).ready(function(){
//create the json object
var menu = $.parseJSON('[{"id":1},{"id":2},{"id":3,"children":[{"id":4},{"id":5}]}]');
//final result variable menu
var final_menu = [];
//initial variable
var i = 1;
//process each element
$.each(menu, function(index, value){
//local variable
var item = {};
//type of validation
if(typeof(value.children) !== 'undefined')
{
var j = 1;
item['id'] = value.id;
item['order'] = i;
item['children'] = [];
//process each children
$.each(value.children, function(index1, value1){
var child = {};
child['id'] = value1.id;
child['order'] = j;
item['children'].push(child);
j++;
});
}
else
{
item['id'] = value.id;
item['order'] = i;
}
//create the final menu
final_menu.push(item);
i++;
});
console.log(final_menu);
});
</script>
In server side I give table data from MySql and I send it with json_encode to JQuery:
<?php
include 'DB.php';
$result20 = mysql_query("SELECT * FROM Gallery WHERE Section = 'Chosen' AND ID = 19");
$array20 = mysql_fetch_row($result20);
$result19 = mysql_query("SELECT * FROM Gallery WHERE Section = 'Chosen' AND ID = 19");
$array19 = mysql_fetch_row($result19);
$data = array();
$data['Div20'] = $array20;
$data['Div19'] = $array19;
echo json_encode($data);
?>
json_encode export this arrays: {"Div20":["Image20","20.jpg"],"Div19":["Image19","19.jpg"]}
but, in client side I need use a loop for use all arrays in events. When I use for, it's not work with multiple arrays, how to do it?
$(function() {
$.get('data.php' ,function(response)
{
var data = jQuery.parseJSON(response);
var array;
for(array in data)
{
var ImageID = data.array[0];
var ImageSrc = data.array[1];
$('#'+ImageID ).click(function(){
//some codes
})
}
})
})
Try this
$(function() {
$.get('data.php' ,function(response) {
var data = jQuery.parseJSON(response);
$.each( data, function( key, value) {
var ImageID = value[0];
var ImageSrc = value[1];
$("#"+ImageID ).click(function(){
//some codes
})
})
})
It will work if you add # to your imageid like,
$('#'+ImageID ).click(function(){
//some codes
});
I've tried some code for you,
var json={"Div20":["Image20","20.jpg"],"Div19":["Image19","19.jpg"]};
for(div in json){
ImageID=json[div][0];
ImageSRC=json[div][1];
$('#'+ImageID)
.attr('src',ImageSRC)
.click(function(){
alert(this.src);
});
}
Demo
Replace .array with [array] in your for loop:
for(array in data)
{
var ImageID = data[array][0];
var ImageSrc = data[array][1];
}
"array" is not an attribute of your json object, it's just an argument of your for ... in loop. So you must use it as a dynamic value. Moreover you missed using a # to target properly the element id.
var data = {"Div20":["Image20","20.jpg"],"Div19":["Image19","19.jpg"]};
for(array in data)
{
var ImageID = "#"+data[array][0];
var ImageSrc = data[array][1];
$(ImageID).on("click",function(){
//some codes
});
};
Avoid using $.each() loop as someone recommended above, jQuery loops are usually slower than native loops.
Try this..
$(function() {
$.get('data.php' ,function(response)
{
var data = jQuery.parseJSON(response);
$.each(data,function(k, v){
var ImageID = v[0];
var ImageSrc = v[1];
$('#'+ImageID ).click(function(){
//some codes`enter code here`
})
})
})
function ChangeGallery(){
var GalleryName = $('.SubSubGalleryLock').text();
/*Send string to Data1.php and include Tags from Database*/
$.post("Data1.php", { Sections: GalleryName },
function(data){
$(".IncludeData").append(data);
});
/*send string to Data2.php and include Events data from Database*/
$.post("Data2.php",{ GallerySec: GalleryName },
function(response){
/*when i use alert method, this function works very well, why?*/
alert('SomeString');
var data = jQuery.parseJSON(response);
var ImageID = data[0];
var ImageSrc = data[1];
$(ImageID).click(function(){
$(".LargeImage").attr('src', ImageSrc);
});
});
};
in Data1.php
/*give data from database1 and print to HTML File*/
if ($_POST['Sections']) == "String")
{ $results = mysql_query("SELECT * FROM Table1");
while($row = mysql_fetch_array($results))
{ echo $row['Tags']; }
in Data2.php
/*give data from database2 and Use for events*/
if ($_POST['GallerySec']) == "String")
{ $results = mysql_query("SELECT * FROM Table2");
while($row = mysql_fetch_array($results))
{ echo json_encode($row); }
in Client side when i use it then Data1.php works very well but Data2.php only when i write an
alert('Some stringh');
after
var data = jQuery.parseJSON(response);
line, it's work well, why? what's due to this problem?
I'm going to guess that you need the second .post() to be processed AFTER the first .post() and when you put the alert() in, that guarantees that it will go in that order, but without the alert(), it is a race condition and depends upon which .post() returns quicker.
There are a couple ways to fix the sequencing. The most straightforward is to start the second .post() from the success handler of the first so that you know the first has already completed.
You can also use jQuery promises or you could use your own flags to keep track of which has finished and call the last bit of code only when both have finished.
Here's how you would start the second .post() from the success handler of the first to guarantee the order:
function ChangeGallery(){
var GalleryName = $('.SubSubGalleryLock').text();
/*Send string to Data1.php and include Tags from Database*/
$.post("Data1.php", { Sections: GalleryName },
function(data){
$(".IncludeData").append(data);
/*send string to Data2.php and include Events data from Database*/
$.post("Data2.php",{ GallerySec: GalleryName },
function(response){
var data = jQuery.parseJSON(response);
var ImageID = data[0];
var ImageSrc = data[1];
$(ImageID).click(function(){
$(".LargeImage").attr('src', ImageSrc);
});
});
});
};
I have a database where i'm using php to randomize the information by ID and send it out via xml. My issue is that I only want to grab the xml once and store it for use in at least 2 functions... one function that runs onload to grab the first line of xml, another that will run every time a button is pressed to access the next line of xml until the end. My 2 functions are loadfirst() and loadnext(). loadfirst() works perfectly, but I'm not sure how to pass the xml data to loadnext(). Right now I'm just using loadfirst() on pageload and loadfirst() on button press, but i end up creating new xml from the database each time which causes randomization issues and is incredibly inefficient. Any help would be appreciated.
var places;
var i = 0;
function loadXML(){
downloadUrl("places.php", function(data){
places = data.responseXML;
getFeatured(i);
});
}
function getFeatured(index){
var id = places[index].getAttribute("id");
var name = places[index].getAttribute("name");
var location = places[index].getAttribute("location");
var imgpath = places[index].getAttribute("imgpath");
var tags = places[index].getAttribute("tags");
}
function getPrev() {
i--;
getFeatured(i);
}
function getNext() {
i++;
getFeatured(i);
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
loadnext() will be very similar to loadfirst(), I'm just running into issues with passing the xml data so that i can use it without having to access the database again. Thanks.
Set your xml and i in public scope. Then all you have to do is increment/decrement i and re-read data from XML. Something like this:
var xml;
var xml_idx = 0; // replaces your i counter
function loadXML() {
downloadUrl ("places.php", function(data) {
xml = data.responseXML;
)};
}
function loadItem(index) {
var id = xml[index].getAttribute("id");
var name = xml[index].getAttribute("name");
var location = xml[index].getAttribute("location");
var imgpath = xml[index].getAttribute("imgpath");
var tags = xml[index].getAttribute("tags");
// do something with this data
}
function loadCurrentItem() {
loadItem(xml_idx);
}
function loadNextItem() {
xml_idx++;
loadItem(xml_idx);
}
function loadPreviousItem() {
xml_idx--;
loadItem(xml_idx);
}
// usage
loadXML(); // do this first to populate xml variable
loadItem(xml_idx); // loads first item (i=0)
loadCurrentItem(); // loads i=0
loadNextItem(); // loads i=1
loadNextItem(); // loads i=2
loadPreviousItem(); // loads i=1
If you really want to get fancy (and keep the global namespace cleaner), you could easily make this into a class.
Use global variables (items - items array, iterator - counter) to store data available for all functions.
Try something like this:
items = false;
iterator = 0;
function loadfirst(){
downloadUrl ("places.php", function(data) {
var i = 0;
var xml = data.responseXML;
var places = xml.documentElement.getElementsByTagName("place");
var id = places[i].getAttribute("id");
var name = places[i].getAttribute("name");
var location = places[i].getAttribute("location");
var imgpath = places[i].getAttribute("imgpath");
var tags = places[i].getAttribute("tags");
items = places;
iterator++;
)};
}
function loadnext(){
var i = iterator;
var id = items[i].getAttribute("id");
var name = items[i].getAttribute("name");
var location = items[i].getAttribute("location");
var imgpath = items[i].getAttribute("imgpath");
var tags = items[i].getAttribute("tags");
iterator++;
}
You should wrap all this into a single object to control scope and data state. (Untested code below, which should just illustrate a possible pattern and interface to use.)
function PlacesScroller(url, callback) {
this.url = url;
this.data = null;
this._index = null;
this.length = 0;
var self = this;
downloadURL(this.url, function(result, status) {
if (Math.floor(status/100)===2) {
self.setData(result);
}
if (callback) {
callback(self, result);
}
});
}
PlacesScroller.prototype.setData(xmldom) {
this._index = 0;
// this may require changing; it depends on your xml structure
this.data = [];
var places = xmldom.getElementsByTagName('place');
for (var i=0; i<places.length; i++) {
this.data.push({
id : places[i].getAttribute('id'),
name : places[i].getAttribute('name')
// etc
});
}
}
PlacesScroller.prototype.getPlaceByIndex = function(index) {
if (this.data) {
return this.data[index];
} else {
return null;
}
}
PlacesScroller.prototype.getCurrentFeature = function() {
return this.getPlaceByIndex(this._index);
}
PlacesScroller.prototype.addToIndex(i) {
// This sets the index forward or back
// being careful not to fall off the end of the data
// You can change this to (e.g.) cycle instead
if (this.data===null) {
return null;
}
var newi = i+this._index;
newi = Math.min(newi, this.data.length);
newi = Math.max(0, newi);
this._index = newi;
return this._index;
}
PlacesScroller.prototype.getNextFeature = function() {
this.addToIndex(1);
return this.getCurrentFeature();
}
PlacesScroller.prototype.getPreviousFeature = function() {
this.addToIndex(-1);
return this.getCurrentFeature();
}
Then initialize it and use it like so:
var scroller = new PlacesScroller('places.php', function(scrollerobject, xmlresult){
// put any initialization code for your HTML here, so it can build after
// the scrollerobject gets its data.
// You can also register event handlers here
myNextButton.onclick = function(e){
var placedata = scrollerobject.getNextFeature();
myPictureDisplayingThing.update(placedata);
}
// etc
});