Display results from one query in different divs or areas of the page
I had this question after viewing how to get id from url using php and Jquery.
This is the php:
This is the jQuery/Ajax:
Perhaps I want to show the title at the top of the page and the date at the bottom of the page. Do I need to put everything into divs?
So, at the top of the page I would have <div id="news-headline"></div> and at the bottom of the page I might have <div id="article-date"></div>.
Is that the correct way to do it? And if so, how would I get the values into those divs? When using a while loop for lost of records I used:
but since I am not looping through records, and only getting one row, I am not entirely sure how to get that data.
This is the php:
$url = filter_var($_GET['id'], FILTER_SANITIZE_URL);
$stmt = $link->prepare("SELECT `n_title`, `n_dateTime`, `n_article` FROM `news` WHERE `id` = ?");
$stmt->bind_param("i", $url);
if (!$stmt->execute()) echo "Execute Error: ($stmt->errno) $stmt->error";
$result = $stmt->get_result();
if ($result) {
$row = $result->fetch_assoc();
$n_title = sanitize($row['n_title']);
$n_dateTime = sanitize(row['n_dateTime']);
$n_article = sanitize($row['n_article]);
$news_detail[] = array(
"n_title" =>$n_title,
"n_dateTime" => $n_dateTime,
"n_article" =>$n_article
);
} else {
echo "No record found";
}
$stmt->close();
echo json_encode($news_detail);This is the jQuery/Ajax:
myApp.onPageInit('article', function (page) {
var id = page.query.id;
$$.ajax({
url: "news-detail.php",
type:"GET",
data: {id: id},
success: function(data) {
console.log(data);
},
});
});Perhaps I want to show the title at the top of the page and the date at the bottom of the page. Do I need to put everything into divs?
So, at the top of the page I would have <div id="news-headline"></div> and at the bottom of the page I might have <div id="article-date"></div>.
Is that the correct way to do it? And if so, how would I get the values into those divs? When using a while loop for lost of records I used:
$$.each(data, function(item) {but since I am not looping through records, and only getting one row, I am not entirely sure how to get that data.
What does this show
What format is the data in? If JSON you should add dataType: "JSON" to your AJAX params.
Lets start with that.
success: function(data) {
console.log(data);What format is the data in? If JSON you should add dataType: "JSON" to your AJAX params.
Lets start with that.
ASKER
Thanks Julian for pointing that out. Yes, the data is in JSON format. When I tap on an article title the console shows:
[Object]
0: Object
n_dateTime: "2017-06-25 21:24:03"
n_title: "Boks manage to actually win a game"
__proto__: Object
length: 1
__proto__: Array(0)
[Object]
0: Object
n_dateTime: "2017-06-25 21:24:03"
n_title: "Boks manage to actually win a game"
__proto__: Object
length: 1
__proto__: Array(0)
ASKER
I tried something like this but it gives me 'undefined':
$$( "#title" ).html(data.n_title);
So you would create a title element and a content element and then add them to your page
You could do this dynamically like so
Or you could create the element up front
<div id="articleTitle"></div>
<div id="articleDate"></div>
In code
The code above would all be in your success function.
You could do this dynamically like so
var title = $('<div>').html(data.n_title);
var date = $('<div>').html(data.n_date);
$('yourcontainer').prepend(title);
$('yourcontainer').append(datee);Or you could create the element up front
<div id="articleTitle"></div>
<div id="articleDate"></div>
In code
$('#articleTitle').html(data.n_title);
$('#articleDate').html(data.n_date);The code above would all be in your success function.
I tried something like this but it gives me 'undefined':Can you post your full jQuery implementation
ASKER
myApp.onPageInit('article', function (page) {
var id = page.query.id;
$$.ajax({
url: "news-detail.php",
type:"GET",
dataType: "json",
data: {id: id},
success: function(data) {
$$( "#title" ).html(data.n_title);
},
});
});The div is:
<h1><div id="title"></div></h1>If I just put a hard coded value in then it appears in the div as it should.
$$( "#title" ).html("some text");ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Aha, thanks. That works! But why doesn't just (data.n_title) work?
Because data is an object with a member 0 (think array - but as an object) - Refer to your dump above
[Object]
0: Object <== This says there is another level indexed by '0'
var responseObject = JSON.parse(data)
in your callback function. Then you'll set the contents of your containers like such:
document.getElementByID("T
and you'll probably find it's easiest just to add another line like this for each container that you want to set with your response.
I've accomplished the same task by adding a class to all of the elements that should be updated in a group (in your case, the class might be "articleDetail"). Then, I structure my JSON object so that the first property corresponds to the first articleDetail element in my DOM, second property corresponds to the second articleDetail element in my DOM, etc. I then add one additional property called "updateGroup" which I set to the class name of the elements I wish to update. In this example, since we're returning article details, the "updateGroup" property is "articleDetail." I read the last property of responseObject, select elements with a class matching that property into a node list, and then I use a for...in loop to iterate through the properties in my responseObject. With each iteration, I increment a counter, so on the first pass I set the inner HTML of element 0 in the node list to the first property in the responseObject, second pass I set inner HTML on element 1 in the node list, etc. This solution is very scalable, but if this is going to be a one off piece of ajax you're probably going to be better off hardcoding four or five lines of code, as much as it might be bad practice.