Develop Reference

Json foreach loop is outputting the word object instead of its contents

I am attempting to send the foreach loop through json and then display with innerHTML. There aren't any errors. The issue I am having is that the output is display:
[object Object]
Instead of what is in the foreach loop.
How do I get the output to be the $html lines that are within the foreach loop?
try {
$sql_recentProjects = "
SELECT *
FROM project_gallery
ORDER BY date_added ASC
LIMIT 5
";
if ($recentProjects_stmt = $con->prepare($sql_recentProjects)) {
$recentProjects_stmt->execute();
$recentProjects_rows = $recentProjects_stmt->fetchAll(PDO::FETCH_ASSOC);
$recProj_arr = array();
foreach ($recentProjects_rows as $recentProjects_row) {
$precProjName = $recentProjects_row['p_name'];
$recProjImg = $recentProjects_row['p_img'];
//$project_img = substr($project_img, 2);
$displayRecProjImg = '<img src="/php'.$recProjImg.'" alt="'. $precProjAlt .'" class="projectDisplayImg">';
$html = '';
$html .= '<div class="recentProjectCont">';
$html .= '<div class="recentProjectImg">';
$html .= $displayRecProjImg;
$html .= '</div>';
$html .= '<div class="recProjInfoCont">';
$html .= '<div class="">';
$html .= $precProjName;
$html .= '</div>';
$html .= '</div>';
$html .= '</div>';
$recentProjData = array('html' => $html);
//$proj_arr[] = $data;
}
}
}
catch(PDOException $e) {
echo "Connection failed: " . $e->getMessage();
}
echo json_encode(['recentProjectData' => $recentProjData]);
JS
function ajaxCallCatalogs() {
$.ajax({
url: 'php/projects/projectGallerySelect.php',
datatype: 'json',
success: function (data) {
//console.log(data);
obj = JSON.parse(data);
recentProjectData = obj.recentProjectData; //Recent 5 Projects submitted to gallery
document.getElementById('recentProjectWrap').innerHTML = recentProjectData;
}
});
}
ajaxCallCatalogs();
setInterval(ajaxCallCatalogs, 150000);

(Read the comments of the OP to know why I posted this answer)
You have two options... the easiest way, but more restrictive method is this:
try {
$sql_recentProjects = "
SELECT *
FROM project_gallery
ORDER BY date_added ASC
LIMIT 5
";
if ($recentProjects_stmt = $con->prepare($sql_recentProjects)) {
$recentProjects_stmt->execute();
$recentProjects_rows = $recentProjects_stmt->fetchAll(PDO::FETCH_ASSOC);
$recProj_arr = array();
$html = ''; // MOVE THIS OUTSIDE THE LOOP
foreach ($recentProjects_rows as $recentProjects_row) {
$precProjName = $recentProjects_row['p_name'];
$recProjImg = $recentProjects_row['p_img'];
//$project_img = substr($project_img, 2);
$displayRecProjImg = '<img src="/php'.$recProjImg.'" alt="'. $precProjAlt .'" class="projectDisplayImg">';
$html .= '<div class="recentProjectCont">';
$html .= '<div class="recentProjectImg">';
$html .= $displayRecProjImg;
$html .= '</div>';
$html .= '<div class="recProjInfoCont">';
$html .= '<div class="">';
$html .= $precProjName;
$html .= '</div>';
$html .= '</div>';
$html .= '</div>';
//$proj_arr[] = $data;
}
// SET THIS AFTER YOU GET ALL ROWS INTO THE STRING
$recentProjData = array('html' => $html);
}
}
catch(PDOException $e) {
echo "Connection failed: " . $e->getMessage();
}
echo json_encode(['recentProjectData' => $recentProjData]);
Or, you can do this, which will truly separate the rows into more consumable data, but means you need to re-code your JS to output it proper (loop through the data via JS):
try {
$sql_recentProjects = "
SELECT *
FROM project_gallery
ORDER BY date_added ASC
LIMIT 5
";
if ($recentProjects_stmt = $con->prepare($sql_recentProjects)) {
$recentProjects_stmt->execute();
$recentProjects_rows = $recentProjects_stmt->fetchAll(PDO::FETCH_ASSOC);
$recProj_arr = array( 'html' => array() ); // SET UP THE ARRAY
foreach ($recentProjects_rows as $recentProjects_row) {
$precProjName = $recentProjects_row['p_name'];
$recProjImg = $recentProjects_row['p_img'];
//$project_img = substr($project_img, 2);
$displayRecProjImg = '<img src="/php'.$recProjImg.'" alt="'. $precProjAlt .'" class="projectDisplayImg">';
$html = '';
$html .= '<div class="recentProjectCont">';
$html .= '<div class="recentProjectImg">';
$html .= $displayRecProjImg;
$html .= '</div>';
$html .= '<div class="recProjInfoCont">';
$html .= '<div class="">';
$html .= $precProjName;
$html .= '</div>';
$html .= '</div>';
$html .= '</div>';
$recentProjData['html'][] = $html; //ADD TO THE ARRAY, INSTEAD OF OVERWRITING IT
//$proj_arr[] = $data;
}
}
}
catch(PDOException $e) {
echo "Connection failed: " . $e->getMessage();
}
echo json_encode(['recentProjectData' => $recentProjData]);

append php echo in javascript

This is image want to make selct2 function... thanks .append($(<?php echo $property_address1;?>)) this is my javascript code that i want to append.. this is select2 function actually i want multiple select2 onchange fucntion is required...
public function test($id = null)
{
$this->layout->set(
array(
'property_address1' => $this->mdl_quotes->property_address1()
)
);
$this->load->model('mdl_quotes');
$this->layout->buffer('content', 'quotes/test');
$this->layout->render();
}
My controller function
function property_address1()
{
$query = $this->db->query('SELECT host,price,city,property_thumbnail, apartments_type, contactnumber, contactperson,photographlinks,emailid, propertyaddress FROM tbl_contacts')->result();
$output = '<select id="neww" class="property_add_ form-control">';
foreach ($query as $row)
{
//echo $row->location;
$output .= "<option value='". $row->propertyaddress ."'";
$output .= " data-propertyaddress='" . $row->propertyaddress ."'" ;
$output .= " data-host_name='" . $row->host ."'" ;
$output .= " data-apartments_type ='" . $row->apartments_type."'" ;
$output .= " data-city ='" . $row->city."'" ;
$output .= " data-property_thumbnail='" . $row->property_thumbnail."'" ;
$output .= " data-price='" . $row->price."'" ;
$output .= " data-contactperson='" . $row->contactperson ."'" ;
// $output. = $row->pincode.", ".$row->city.", ".$row->location;
$output .= " data-photographlinks='" . $row->photographlinks ."'" ;
$output .= " data-emailid='" . $row->emailid ."'" ;
$output .= " data-contactnumber='". $row->contactnumber . "'>" ;
$output .= $row->host . ' , '.$row->propertyaddress . ' ,'.$row->price. ' ,'.$row->apartments_type. ' , '. $row->contactperson . ' , ' . $row->contactnumber. "</option>";
}
$output .= '</select>';
//var_dump($output);
return $output;
}

Detect difference of form submit via submit button or javascript submit function in PHP

I am using a date picker in PHP, but I experience a small problem.
When selecting a month, I automatically submit the form to change the amount of days:
<script>
function change()
{
document.getElementById("datepickerform").submit();
}
</script>
But, when I press submit, I also want to execute some extra code (querying a database for some info with the selected date.
Is there a way to make a difference when the OK button is pressed or when the form is "submitted" via the function above?
Hereunder is the entire code (not finished, leap year also not included yet) of my datepicker.php:
<script>
function change(){
document.getElementById("datepickerform").submit();
}
</script>
<?php
// Include global Definitions and variables
// http://stackoverflow.com/questions/18179067/select-from-drop-down-menu-and-reload-page
// Form
define("FORM_DAY", "theday");
define("FORM_MONTH", "themonth");
define("FORM_YEAR", "theyear");
// Date related
$days = array(31,28,31,30,31,30,31,31,30,31,30,31);
// Get result from FORM POST
$submittedday = $_POST[FORM_DAY];
$submittedmonth = $_POST[FORM_MONTH];
$submittedyear = $_POST[FORM_YEAR];
if ($submittedday != '')
{
$currentday = $submittedday;
$currentmonth = $submittedmonth;
$currentyear = $submittedyear;
}
else
{
$currentday = intval(date("d"));
$currentmonth = intval(date("m"));
$currentyear = intval(date("Y"));
}
//DEBUG ON
echo $submittedday."/".$submittedmonth."/".$submittedyear."<br>\r\n";
echo $currentday."/".$currentmonth."/".$currentyear."<br>\r\n";
// DEBUG OFF
echo '<form id="datepickerform" action="' . $_SERVER['PHP_SELF'] . '" method="POST">';
echo '<table border="1" cellpadding="2">';
echo '<tr><td>';
echo '<table border="0" cellpadding="2">';
echo '<tr><th>Day</th><th>Month</th><th>Year</th></tr>';
echo '<tr>';
echo '<td><select name=' . FORM_DAY . '>';
$i = 1;
for ($i==1; $i<=$days[$currentmonth-1]; $i++)
{
echo '<option value="' . $i . '"';
if ($i == $currentday)
{
echo ' selected';
}
echo '>' . $i . '</option>';
}
echo '</select></td>';
echo '<td><select name=' . FORM_MONTH . ' onchange="change()">';
$i = 1;
for ($i==1; $i<=12; $i++)
{
echo '<option value="' . $i . '"';
if ($i == $currentmonth)
{
echo ' selected';
}
echo '>' . $i . '</option>';
}
echo '</select></td>';
echo '<td><select name=' . FORM_YEAR . '>';
$i = 2015;
for ($i==2015; $i<=2020; $i++)
{
echo '<option value="' . $i . '"';
if ($i == $currentyear)
{
echo ' selected';
}
echo '>' . $i . '</option>';
}
echo '</select></td>';
echo '</tr>';
echo '</table>';
echo '</td></tr>';
echo '<tr><td align="middle">';
echo '<input type="submit" value="OK"></td>';
echo '</td></tr>';
echo '</table>';
echo '</form>';
?>
Could anybody help?

Most JS libraries that preform AJAX calls pass an extra header with the request, typically X_REQUESTED_WITH with a value of XMLHttpRequest. If you were using something like jQuery you can check for this using PHP, or you could just use a hidden field that your JS creates and fills in when it is submitted that way.
function change()
{
var form = document.getElementById('datepickerform'),
el = document.createElement('input');
el.type = 'hidden';
el.name = 'js';
el.value = '1';
form.appendChild(el);
form.submit();
}
And then when handling in PHP, use
if (isset($_POST['js'])) {
// ...
}

You can Keep a hidden field in form and if the form is beig submitted using js then change the value of hidden field before submitting the form.

You could change it so that there is an Ajax call when the month changes, and use a button that can be used to invoke processing prior to submit.

Thanks for the above tips, this solved my problem. Also Change value of input then submit form in javascript helped solving my problem.
<script>
function change(){
document.getElementById("datepickerform").submitform.value = '1';
document.getElementById("datepickerform").submit();
}
</script>
<?php
// Include global Definitions and variables
// https://stackoverflow.com/questions/18179067/select-from-drop-down-menu-and-reload-page
// Form
define("FORM_DAY", "theday");
define("FORM_MONTH", "themonth");
define("FORM_YEAR", "theyear");
// Date related
$days = array(31,28,31,30,31,30,31,31,30,31,30,31);
// Get result from FORM POST
$submitform = $_POST["submitform"];
$submittedday = $_POST[FORM_DAY];
$submittedmonth = $_POST[FORM_MONTH];
$submittedyear = $_POST[FORM_YEAR];
if ($submittedday != '')
{
$currentday = $submittedday;
$currentmonth = $submittedmonth;
$currentyear = $submittedyear;
}
else
{
$currentday = intval(date("d"));
$currentmonth = intval(date("m"));
$currentyear = intval(date("Y"));
}
//DEBUG ON
echo $submitform."<br>\r\n";
echo $submittedday."/".$submittedmonth."/".$submittedyear."<br>\r\n";
echo $currentday."/".$currentmonth."/".$currentyear."<br>\r\n";
if ($submitform == '0')
{
echo 'Button pressed.<br>';
}
else
{
echo 'Javascript executed.<br>';
}
// DEBUG OFF
echo '<form id="datepickerform" action="' . $_SERVER['PHP_SELF'] . '" method="POST">';
echo '<table border="1" cellpadding="2">';
echo '<tr><td>';
echo '<table border="0" cellpadding="2">';
echo '<tr><th>Day</th><th>Month</th><th>Year</th></tr>';
echo '<tr>';
echo '<td><select name=' . FORM_DAY . '>';
$i = 1;
for ($i==1; $i<=$days[$currentmonth-1]; $i++)
{
echo '<option value="' . $i . '"';
if ($i == $currentday)
{
echo ' selected';
}
echo '>' . $i . '</option>';
}
echo '</select></td>';
echo '<td><select name=' . FORM_MONTH . ' onchange="change()">';
$i = 1;
for ($i==1; $i<=12; $i++)
{
echo '<option value="' . $i . '"';
if ($i == $currentmonth)
{
echo ' selected';
}
echo '>' . $i . '</option>';
}
echo '</select></td>';
echo '<td><select name=' . FORM_YEAR . '>';
$i = 2015;
for ($i==2015; $i<=2020; $i++)
{
echo '<option value="' . $i . '"';
if ($i == $currentyear)
{
echo ' selected';
}
echo '>' . $i . '</option>';
}
echo '</select></td>';
echo '</tr>';
echo '</table>';
echo '</td></tr>';
echo '<tr><td align="middle">';
echo '<input type="hidden" name="submitform" value="0">';
echo '<input type="submit" value="OK"></td>';
echo '</td></tr>';
echo '</table>';
echo '</form>';
?>

execute javascript from dom in ajax response

I have a page which loads it's content from ajax response. The problem is that ajax igonres all my scripts from the head tag in my html page. Is there any way to make those javascript files to execute in my ajax response?
ajax:
$(document).ready(function () {
$(".all").click(function () {
var all = $(this).attr("id");
if (all != '') {
$.ajax({
type: "POST",
url: "php/searchbrowselist.php",
data: "all=" + all,
async: true,
success: function (option) {
var $this = $("#browsemusic")
$this.html(option);
$('#sortable1, #sortable2').sortable({
connectWith: ".connected"
}).disableSelection();
}
});
}
});
});
php:
<?php
include ('dbcon.php');
if (isset($_REQUEST['all']) && $_REQUEST['all'] != '') {
// ===============================Button "ALL"====================================
unset($_REQUEST['kw']);
unset($_REQUEST['genre']);
$query = "select * from music";
$result = mysqli_query($link, $query) or die(mysqli_error());
echo '<ul id="sortable1" class="connected">';
while ($info = mysqli_fetch_array($result)) {
echo '<li><div class="ui360"><button type="button" class="addtoplaylist" >Add</button> ' . $info['artist'] . ' - ' . $info['title'] . ' (' . $info['album'] . ') ' . '</div><hr /></li>';
};
echo '</ul>';
}
elseif (isset($_REQUEST['kw']) && $_REQUEST['kw'] != '') {
// ============================= Search for music ================================
$kws = $_REQUEST['kw'];
$kws = mysqli_real_escape_string($link, $kws);
$query = "select * from music where title like '%" . $kws . "%' or artist like '%" . $kws . "%'";
$result = mysqli_query($link, $query) or die(mysqli_error($link));
echo '<ul id="sortable1" class="connected">';
while ($info = mysqli_fetch_array($result)) {
echo '<li><div class="ui360"><button type="button" class="addtoplaylist" >Add</button> ' . $info['artist'] . ' - ' . $info['title'] . ' (' . $info['album'] . ') ' . '</div><hr /></li>';
};
echo '</ul>';
}
elseif (isset($_REQUEST['genre']) && $_REQUEST['genre'] != '') {
// =====================================Browse By Genre ===========================================
$genre = $_REQUEST['genre'];
$genre = mysqli_real_escape_string($link, $genre);
$gquery = "select music_id from musicgenre where genre_id = '$genre'";
$results = mysqli_query($link, $gquery) or die(mysqli_error($link));
$music = array();
while ($id_result = mysqli_fetch_array($results)) {
$music[] = $id_result['music_id'];
};
echo '<ul id="sortable1" class="connected">';
foreach($music as $song) {
$query = "select * from music where music_id = '$song'";
$result = mysqli_query($link, $query) or die(mysqli_error());;
while ($info = mysqli_fetch_array($result)) {
echo '<li><div class="ui360"><button type="button" class="addtoplaylist" >Add</button> ' . $info['artist'] . ' - ' . $info['title'] . ' (' . $info['album'] . ') ' . '</div><hr /></li>';
};
};
echo '</ul>';
}
else {
// ================================ Default =========================================
$query = "select * from music";
$result = mysqli_query($link, $query) or die(mysqli_error());
echo '<ul id="sortable1" class="connected">';
while ($info = mysqli_fetch_array($result)) {
echo '<li><div class="ui360"><button type="button" class="addtoplaylist" >Add</button> ' . $info['artist'] . ' - ' . $info['title'] . ' (' . $info['album'] . ') ' . '</div><hr /></li>';
};
echo '</ul>';
};
?>
html:
<div id="browsemusic">
<?php include ( 'php/searchbrowselist.php'); ?>
</div>
so, the php file gets some values from ajax and loads the results in my div. I need it to also execute my scripts loaded in the head:
<head>
<script src="js/berniecode-animator.js"></script>
<script src="js/soundmanager2.js"></script>
<script src="js/360player.js"></script>
</head>

setInterval: Why isn't it resetting?

Why doesn't this code work to turn off setInterval? I click an element to start it, and it begins fine (fading in and out a div #content on 5 second intervals). I click an element to stop it, and it just continues to fade in and out on the week=current, even though it loads the proper week initially.
It does not matter whether I separate the function from the jQuery encapsulation. Any help appreciated.
$out .= '<script type="text/javascript">'."\n";
$out .= '$(document).ready(function () {'."\n";
$out .= ' $("span.archives").click(function () {'."\n";
$out .= ' $("#content").load("update.php?week=" + this.id);'."\n";
$out .= ' if (this.id == \'current\') {'."\n";
$out .= ' StartStop(\'on\');'."\n";
$out .= ' } else {'."\n";
$out .= ' StartStop(\'off\');'."\n";
$out .= ' }'."\n";
$out .= ' });'."\n";
$out .= ' function StartStop(txt) {'."\n";
$out .= ' if (txt == \'on\') {'."\n";
$out .= ' var refresh = setInterval(function() {'."\n";
$out .= ' $("#content").fadeOut("slow", function() {'."\n";
$out .= ' $("#content").load("update.php?week=current", function() {'."\n";
$out .= ' $("#content").delay(250).fadeIn("slow");'."\n";
$out .= ' });'."\n";
$out .= ' });'."\n";
$out .= ' }, 5000);'."\n";
$out .= ' } else {'."\n";
$out .= ' clearInterval(refresh);'."\n";
$out .= ' }'."\n";
$out .= ' }'."\n";
$out .= '});'."\n";
$out .= '</script>'."\n";

refresh is defined locally within StartStop, its value isn't saved between calls to StartStop.
Try defining it outside of it, for example:
var refresh;
function StartStop(txt) {
refresh = setInterval(/* ... */);
}
Also, you may want to clear the previous refresh before creating a new one:
if (txt == 'on') {
if(refresh) clearInterval(refresh);
refresh = setInterval(/* ... */);
}