Develop Reference

Vanilla JS xmlhttp request errors 500, but results still appear on form submit?

I've got a little bit of a conundrum here.
I've got a simple FAQs section running in WordPress, and for styling reasons I need to filter the array through PHP. The problem I'm currently having is that the XML request I'm making through JS is coming out with an error 500, but after the form submits, the data filters.
I want to avoid the submit refresh, and get the data like ajax. Ajax hasn't worked in the ways that I've tried it, so looking for some implementation.
The PHP display
This script is just for displaying the form, and also displaying the results. But I want to get these results asynchronously to display them.
<?php
function faqs_display() {
include( dirname(__FILE__, 2) . '/faq-results.php');
?>
<div class="faqs-search">
<form method="post" name="faqs-search-form" id="faqs-search-form">
<select name="category" id="category">
<option value="" disabled selected>Select a category...</option>
<option value="none">None</option>
<option value="web-dev">Web Dev</option>
<option value="ecommerce">Ecommerce</option>
<option value="paid-ads">Paid Ads</option>
<option value="branding">Branding</option>
</select>
</form>
</div>
<div class="faqs-container">
<div class="faqs-half">
<?php foreach($faqs as $key => $faq) {
if($key % 2 == 0) { ?>
<div class="single-faq <?php foreach($faq['categories'] as $key => $cat) { echo $cat . ' '; } ?>">
<h4><?php echo $faq['question']; ?></h4>
<p><?php echo $faq['answer']; ?></p>
</div>
<?php }
} ?>
</div>
<div class="faqs-half">
<?php foreach($faqs as $key => $faq) {
if($key % 2 != 0) { ?>
<div class="single-faq <?php foreach($faq['categories'] as $key => $cat) { echo $cat . ' '; } ?>">
<h4><?php echo $faq['question']; ?></h4>
<p><?php echo $faq['answer']; ?></p>
</div>
<?php }
} ?>
</div>
</div>
<?php
}
add_shortcode('faqs-display', 'faqs_display');
?>
The JS
This is the script that does the request. When we change the "category" select, I want to run this async function to force a data sort.
window.addEventListener('DOMContentLoaded', (event) => {
/* ========== Global Functions JS ========== */
document.getElementById("category").addEventListener("change", filterFAQs)
setTimeout(function(){
}, 1000);
/* ========== Global Functions JS END ========== */
});
async function filterFAQs() {
// e.preventDefault;
var category = document.getElementById('category').value;
var faqs = document.getElementsByClassName('single-faq');
var form = document.getElementById('faqs-search-form');
var http = new XMLHttpRequest();
http.open("POST", "faq-results.php", true);
var params = "category=" + category;
http.send(params);
http.onload = function () {
alert(http.status.toString() + ': ' + http.statusText);
}
form.submit()
return false;
}
The PHP script to parse
This is the PHP that the JS calls on, as well as the one that's included in the display PHP.
<?php
$faqs = [];
$i = 0;
$query = new WP_Query(array(
'post_type' => 'faq',
'post_status' => 'publish',
'posts_per_page' => -1
));
while($query->have_posts()) {
$query->the_post();
$post_id = get_the_ID();
$question = get_post_meta( get_the_ID(), 'question', true );
$answer = get_post_meta( get_the_ID(), 'answers', true );
$categories = [];
if(
str_contains(strtolower($question), 'web dev') || str_contains(strtolower($answer), 'web dev')
) {
array_push($categories, 'web-dev');
}
if(
str_contains(strtolower($question), 'branding') || str_contains(strtolower($answer), 'branding') ||
str_contains(strtolower($question), 'logo') || str_contains(strtolower($answer), 'logo')
) {
array_push($categories, 'branding');
}
if(
str_contains(strtolower($question), 'paid ad') || str_contains(strtolower($answer), 'paid ad') ||
str_contains(strtolower($question), 'keywords') || str_contains(strtolower($answer), 'keywords')
) {
array_push($categories, 'paid-ads');
}
if(
str_contains(strtolower($question), 'ecommerce') || str_contains(strtolower($answer), 'ecommerce') ||
str_contains(strtolower($question), 'e-commerce') || str_contains(strtolower($answer), 'e-commerce')
) {
array_push($categories, 'ecommerce');
}
$faqs[$i]['question'] = $question;
$faqs[$i]['answer'] = $answer;
$faqs[$i]['categories'] = $categories;
$i++;
if(isset($_POST['category'])) {
$faqs_filtered = [];
$j = 0;
foreach($faqs as $key => $faq) {
if(in_array($_POST['category'], $faq['categories'])) {
$faqs_filtered[$j]['question'] = $faq['question'];
$faqs_filtered[$j]['answer'] = $faq['answer'];
$faqs_filtered[$j]['categories'] = $faq['categories'];
}
$j++;
}
$faqs = $faqs_filtered;
}
}
echo json_encode($faqs);
?>
What happens is that when I send the alert, I get "500: " which means I've got an error 500. But when the alert is closed and the page is refreshed by the submit (which I don't want it to refresh, but we'll worry about that later), the results JSON appears as it should. I just want to skip the refreshing part, and have the results display when the select is changed.
Any and all help is appreciated.

MySQL query search includes results from wrong column

I've got a search bar that is returning proper results, except that it is including results from a column I don't want to be searched.
MySQL query (file name search2.php):
if ($_SERVER["REQUEST_METHOD"] === "POST") {
$submitted_search = $_POST['search'];
}
$safe_search = '%' . $submitted_search . '%'; //I know it's not 'safe' yet-bound below!
$sqlSearch = "
SELECT tbl.title
, tbl.artists
, tbl.date_starting
, tbl.date_ending
, tbl.opening_date
, tbl.opening_time
, tbl.category
, tbl.cost
, tbl.place_decode_strip
, tbl.title_decode_strip
, tbl.artists_decode_strip
, place.site
, place.addr
, place.hours
, place.web
, place.admis
FROM tbl
JOIN place
ON tbl.place = place.site
WHERE CONCAT_WS(' || ', tbl.date_ending, tbl.opening_date, tbl.place_decode_strip,
tbl.title_decode_strip, tbl.artists_decode_strip,
place.aka)
LIKE ?
ORDER
BY date_ending DESC
";
$stmt = $conn->prepare($sqlSearch);
$stmt->bind_param("s", $safe_search);
$stmt->execute();
$data = $stmt->get_result();
$searchResultsNum = mysqli_num_rows($data);
if ($searchResultsNum === 0) {
echo "<h3>There are no results matching your search.</h3>";
} elseif ($searchResultsNum === 1) {
echo "<h3>There is 1 result matching “<i>" . $submitted_search . "</i> ”.</h3>";
} else {
echo "<h3>There are " . $searchResultsNum . " results matching “<i>" . $submitted_search . "</i> ”.</h3>";
}
if ($searchResultsNum > 0) {
// data of each row
while ($searchRow = $data->fetch_assoc()) {
$date = strtotime($searchRow["opening_date"]);
$sdate = strtotime($searchRow["date_starting"]);
$edate = strtotime($searchRow["date_ending"]); ?>
<section class="entry">
<article class="site-info">
<p class="site"><?php $web = $searchRow["web"];
echo "<a href='$web' target='_blank' rel='noreferrer'>" . $searchRow["site"]; ?></a>
</p>
<p class="site-add"><?php echo $searchRow["addr"]; ?></p>
<p class="site-hrs"><?php echo $searchRow["hours"]; ?></p>
</article>
<article class="event-info">
<p class="title"><?php echo $searchRow["title"]; ?></p>
<p class="artists"><?php echo $searchRow["artists"]; ?></p>
<?php if ($searchRow["date_starting"] != $searchRow["date_ending"]) {
?><p><?php
echo date("F j", $sdate) . " – ";
echo date("F j, Y", $edate); ?></p>
<p><?php
}
echo $searchRow["category"] . ": ";
echo date("F j", $date) . ", ";
echo $searchRow["opening_time"]; ?></p>
<?php if ($searchRow["cost"] !== null) { ?>
<p><?php echo $searchRow["cost"]; ?></p>
<?php } ?>
</article>
</section>
<?php }
}
?>
JavaScript:
const searchButton = document.getElementById('search-btn');
searchButton.addEventListener("click", stopRedirect);
function submitSearch() {
const searchInput = document.getElementById('searchInput').value;
// const searchResultId = document.getElementById('search-results');
if (!searchInput) {
document.getElementById('search-results').innerHTML = "Please enter search term."
} else if (searchInput == ' ') {
document.getElementById('search-results').innerHTML = "Please enter a valid search term."
} else if (searchInput == '%') {
document.getElementById('search-results').innerHTML = "Please enter a valid search term."
} else {
var formData = new FormData();
formData.append('search', searchInput);
var xhttp = new XMLHttpRequest();
xhttp.open("POST", "../phpScripts/search2.php", true);
xhttp.onreadystatechange = function () {
if (xhttp.readyState == 4 && xhttp.status == 200) {
const response_data = xhttp.response;
document.getElementById('search-results').innerHTML = response_data; //this.response
}
}
}
xhttp.send(formData);
}
function stopRedirect(e) {
e.preventDefault();
}
HTML search form:
<aside class="search-field">
<form class="search-form" id="search-form" action="/phpScripts/search2.php" method="POST" role="search">
<input type="search" name="search" placeholder="Search all events"
id="searchInput" aria-label="Search through site content" />
<input type="submit" value="Submit" id="search-btn" onclick="submitSearch()" />
</form>
</aside>
When I search for < I get correct results from event_tbl.title (that is, it includes titles with HTML tags) but I don't want results from that column. I only want results from the decoded and stripped columns, tbl.title_decode_strip in this case.
Why is the query returning results from tbl.title? How can I limit the query to not include search (WHEN) results from tbl.title? I need to include tbl.title in the query because that is part of the HTML that gets returned in the AJAX. tbl.title isn't included in the WHEN part of the query, so I don't know why it is included in the results.

My SQL PHP Generated edit button is only working once

I'm developing a web application which is like a notepad or a to-do list with php sql html css jquery
The query gets the list at index page and displays it and on displaying it adds a button with an "edit" class.
When they press on the edit the edit works but only once after submitting.
On submitting the button launches an ajax call with jQuery to another PHP file which edits the data and and displays all the items from the database again.
There's also an "add item" button which adds a new item. Which on submit adds a new item and also gets everything again from the database and displays it (also ajax).
The bug is either after submitting a new item or after editing, the edit button stops working
Please check the snippet below -- snippet 1 is the jquery, snippet 2 is the file to be run on ajax call, and snippet 3 is the index php file:
$("#submit").click(function(){
textarea = $("#textarea").val();
date = $("#date").val();
if(textarea == "" || date == ""){
$("#message").html("<span class='error'>Make sure you didn't leave anything empty");
}
else{
$("#message").html("");
submitItem();
$("#contentCont").fadeOut(200);
}
});
$(".edit").click(function(){
i = "edit";
itemID = $(this).attr("name");
var dateValue = $("#date"+itemID).text();
var statusValue = $("#status"+itemID).attr("name");
var textboxValue = $("#textbox"+itemID).text();
var categoryValue = $("#category"+itemID).text().toLowerCase();
$("#contentCont").fadeIn(200);
$("#textarea").val(textboxValue);
$("#date").val(dateValue);
$("#categories").val(categoryValue).prop("selected",true);
$("#status").val(statusValue).prop("selected",true);
});
function submitItem(){
textarea = $("#textarea").val();
status = $("#status").val();
category = $("#categories").val();
date = $("#date").val();
var ajaxReq = new XMLHttpRequest();
ajaxReq.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("todoCont").innerHTML = this.responseText;
}
}
ajaxReq.open("POST","../php/addItem.php",true);
ajaxReq.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
ajaxReq.send("textarea="+textarea+"&category="+category+"&status="+status+"&date="+date+"&itemID="+itemID+"&i="+i);
}
<?php
session_start();
require("server.php");
$cnx = new mysqli($server_name,$server_username,$server_password,$db);
$category = validate($_POST["category"]);
$item = $_POST["textarea"];
$date = $_POST["date"];
$status = validate($_POST["status"]);
$userID = $_SESSION["userID"];
$itemID = $_POST["itemID"];
$i = $_POST["i"];
$searchForCategoryID = "SELECT * FROM categories where userID='$userID' AND categoryname = '$category'";
$result = $cnx->query($searchForCategoryID);
$row = $result->fetch_assoc();
$categoryID = $row["CategoryID"];
if ($i === "new"){
$addItem = "INSERT INTO Items(userID,ItemValue,DueDate,CategoryID,Status) VALUES ($userID, '$item' , '$date' , $categoryID,'$status')";
$cnx->query($addItem);
}
else if ($i === "edit"){
$editItem = "UPDATE Items SET ItemValue='$item' , DueDate='$date' , CategoryID = $categoryID,Status='$status' WHERE itemID = $itemID " ;
$cnx->query($editItem);
}
$getTableRows = "SELECT * FROM Items WHERE userID = $userID ORDER BY DueDate";
$result = $cnx->query($getTableRows);
if($cnx->error){
echo "Could not get your stuff";
}
if($result->num_rows > 0){
while ($rows = $result->fetch_assoc()){
$getCategory = "SELECT CategoryName FROM Categories WHERE CategoryID = " . $rows["CategoryID"] . ";";
$result2 = $cnx->query($getCategory);
$rows2 = $result2->fetch_assoc();
if ($rows["Status"] == "ongoing"){
$status = "ongoing";
}else
if ($rows["Status"] == "overdue"){
$status = "overdue";
}else
if ($rows["Status"] == "done"){
$status = "done";
}
echo ' <div class="box-container">
<div class="right">
<div class="textbox">
<span id="textbox'.$rows["itemID"].'">'. $rows["ItemValue"] .'</span>
</div>
<div class="footer">
<div class="status '. $status .'" id="status'.$rows["itemID"].'" name="'.$status.'"></div>
<span class="date" id="date'.$rows["itemID"].'">'.$rows["DueDate"].'</span>
<span class="category" id="category'.$rows["itemID"].'">'.ucfirst($rows2["CategoryName"]).'</span>
<button type="button" name="'. $rows["itemID"] .'" class="btn btn-info edit">Edit</button>
</div>
</div>
</div>';
}
}
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<?php session_start();?>
<?php
include("server.php");
$cnx = new mysqli($server_name,$server_username,$server_password,$db);
$userID = $_SESSION["userID"];
<!--This is how the info is shown and the EDIT button is made-->
echo ' <div class="box-container">
<div class="right">
<div class="textbox">
<span id="textbox'.$rows["itemID"].'">'. $rows["ItemValue"] .'</span>
</div>
<div class="footer">
<div class="status '. $status .'" id="status'.$rows["itemID"].'" name="'.$status.'"></div>
<span class="date" id="date'.$rows["itemID"].'">'.$rows["DueDate"].'</span>
<span class="category" id="category'.$rows["itemID"].'">'.ucfirst($rows2["CategoryName"]).'</span>
<button type="button" name="'. $rows["itemID"] .'" class="btn btn-info edit">Edit</button>
</div>
</div>
</div>';
}
?>

you need to register your events more globally:
$("body").on("click", "#submit", function(){
});
and
$("body").on("click", ".edit", function(){
});

You need to delegate as the element is getting created dynamically.
Change the below line:
$(".edit").click(function(){
to:
$(".edit").on('click', function(){
And the same applies for
$("#submit").click(function(){
to
$("#submit").on('click', function(){

Codeigniter Jquery : I want reload this page same

I want when I add a product to the cart and reload the same page, but the problem did not this product.
The controller
public function detail()
{
$data=array('title' =>'Ecommerce Online | Detail Product',
'username' => $this->session->userdata('id'),
'categories' => $this->categories_model->get_categories(),
'details' => $this->categories_model->get_details($this->uri->segment(3)),
'isi' =>'member/detail');
$this->load->view('template_home/wrapper',$data);
}
function addtocart()
{
if($this->cart_model->validate_add_cart_item() == TRUE){
if($this->input->post('ajax') != '1'){
redirect('member/detail/'); // this problem
}else{
echo 'true';
}
}
}
I add my models
function validate_add_cart_item()
{
$id = $this->input->post('product_id');
$cty = $this->input->post('quantity');
$this->db->where('productID', $id);
$query = $this->db->get('product', 1);
if($query->num_rows > 0){
foreach ($query->result() as $row)
{
$data = array(
'id' => $id,
'qty' => $cty,
'price' => $row->price,
'name' => $row->productName
);
$this->cart->insert($data);
return TRUE;
}
}else{
return FALSE;
}
}
I add my view
<?php foreach ($details as $s) { ?>
<div class="col-md-5">
<div class="box text-center">
<img src="<?php echo base_url('upload/'.$s->photo); ?>" width="150px" height="150px">
<br><?php echo $s->productName; ?>
<br><strong>Rp. <?php echo $s->price; ?></strong>
<br>
<?php echo form_open('member/add'); ?>
<fieldset>
<label>Quantity</label>
<?php echo form_input('quantity', '1', 'maxlength="2"'); ?>
<?php echo form_hidden('product_id', $s->productID); ?>
<?php echo form_submit('add', 'Add'); ?>
</fieldset>
<?php echo form_close(); ?>
</div>
</div>
<?php } ?>
Jquery script
<script type="text/javascript">
$(document).ready(function() {
/*place jQuery actions here*/
var link = "<?php echo site_url('member/detail')?>/"; // Url to your application (including index.php/)
$(".detail-product").submit(function(){
var id = $(this).find('input[name=product_id]').val();
var qty = $(this).find('input[name=quantity]').val();
$.post(link + "member/add", { product_id: id, quantity: qty, ajax: '1' },
function(data){
if(data == 'true'){
$.get(link + "member/detail", function(cart){ // Get the contents of the url cart/show_cart
$("#cart_content").html(cart); // Replace the information in the div #cart_content with the retrieved data
});
}else{
alert("Product does not exist");
});
return false; // Stop the browser of loading the page defined
});
});
</script>
This is problem url: http://localhost/scientificwriting/member/detail/ and productid can not be invoked. Do I need to replace the IF statement on my controller and my jquery?
Please help me thanks

How to display product Attribute Group Name on Magento Product page attribute tab?

i did some coding to group the product attributes on frontend and show their groups names above theme like this:
attgroup 1
attribute 1
attribute 2
...
attgroup 2
attribute 3
attribute 4
...
I added /app/code/local/Mage/Catalog/Block/Product/View/Attributesgroups.php with the following code:
<?php
class Mage_Catalog_Block_Product_View_Attributesgroups extends Mage_Core_Block_Template
{
protected $_product = null;
function getProduct()
{
if (!$this->_product) {
$this->_product = Mage::registry('product');
}
return $this->_product;
}
public function getAdditionalData(array $excludeAttr = array())
{
$data = array();
$product = $this->getProduct();
$attributes = $product->getAttributes();
foreach ($attributes as $attribute) {
if ($attribute->getIsVisibleOnFront() && !in_array($attribute->getAttributeCode(), $excludeAttr)) {
$value = $attribute->getFrontend()->getValue($product);
// TODO this is temporary skipping eco taxes
if (is_string($value)) {
if (strlen($value) && $product->hasData($attribute->getAttributeCode())) {
if ($attribute->getFrontendInput() == 'price') {
$value = Mage::app()->getStore()->convertPrice($value,true);
} elseif (!$attribute->getIsHtmlAllowedOnFront()) {
$value = $this->htmlEscape($value);
}
$group = 0;
if( $tmp = $attribute->getData('attribute_group_id') ) {
$group = $tmp;
}
$data[$group]['items'][ $attribute->getAttributeCode()] = array(
'label' => $attribute->getFrontend()->getLabel(),
'value' => $value,
'code' => $attribute->getAttributeCode()
);
$data[$group]['attrid'] = $attribute->getId();
}
}
}
}
// Noch Titel lesen
foreach( $data AS $groupId => &$group ) {
$groupModel = Mage::getModel('eav/entity_attribute_group')->load( $groupId );
$group['title'] = $groupModel->getAttributeGroupName();
}
return $data;
}
}
Then, I created the /app/design/frontend/MY_TEMPLATE/default/template/catalog/product/view/attributesgroups.phtml file with the following content:
<?php
$_helper = $this->helper('catalog/output');
$_product = $this->getProduct()
?>
<?php if($_additionalgroup = $this->getAdditionalData()): ?>
<div class="box-collateral box-additional">
<h2><?php echo $this->__('Additional Information') ?></h2>
<?php $i=0; foreach ($_additionalgroup as $_additional): $i++; ?>
<h3><?php echo $this->__( $_additional['title'] )?></h3>
<table class="data-table" id="product-attribute-specs-table-<?php echo $i?>">
<col width="25%" />
<col />
<tbody>
<?php foreach ($_additional['items'] as $_data): ?>
<tr>
<th class="label"><?php echo $this->htmlEscape($this->__($_data['label'])) ?></th>
<td class="data"><?php echo $_helper->productAttribute($_product, $_data['value'], $_data['code']) ?></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<script type="text/javascript">decorateTable('product-attribute-specs-table-<?php echo $i?>')</script>
<?php endforeach; ?>
</div>
<?php endif;?>
Last step was to modify /app/design/frontend/default/YOUR_TEMPLATE/layout/catalog.xml in line 223, and replaced
<block type="catalog/product_view_attributes" name="product.attributes" as="additional" template="catalog/product/view/attributes.phtml">
with
<block type="catalog/product_view_attributesgroups" name="product.attributes" as="additional" template="catalog/product/view/attributesgroups.phtml">
i did this but nothing is changed on product attribute tap on frontend product page.
im using magento 1.9.1 ce and custom template

First try to simple way
foreach($product->getAttributes() as $att){
$group_id = $att->getData('attribute_group_id');
$group = Mage::getModel('eav/entity_attribute_group')->load($group_id); var_dump($group);
}
or please try to below code....
Get attribute set ID programmatically..
$sDefaultAttributeSetId = Mage::getSingleton('eav/config')
->getEntityType(Mage_Catalog_Model_Product::ENTITY)
->getDefaultAttributeSetId();
Get group name programmatically..
$attributeSetId = 10;
$groups = Mage::getModel('eav/entity_attribute_group')
->getResourceCollection()
->setAttributeSetFilter($attributeSetId)
->setSortOrder()
->load();
$attributeCodes = array();
foreach ($groups as $group) {
echo $groupName = $group->getAttributeGroupName();
$groupId = $group->getAttributeGroupId();
}