Uncaught Typeerror, Broken JS

Uncaught Typeerror, Broken JS - javascript

I have a menu drop down and a series of filter drop downs, both of which have been working fine up until today.
After adding a logo, with css, to the menu drop down, when I select a filter it breaks my javascript for the menu and the menu doesn't work at all. I get an Uncaught Typeerror.
The filters use forms and 'get' to sort with the onChange set to re-submit the page with the appropriate 'get' parameters.
Here is the menu html
<button id="burg" onclick="menuChange();" class="hamburger">☰</button>
<button id="xCross" onclick="menuChange();" class="cross">˟ </button>
<ul id="navList">
<div class="nav-item">
<a href="inventory.php">
<li>Inventory</li>
</a>
</div>
<div class="nav-item">
<a href="#">
<li>Finance</li>
</a>
</div>
<div class="nav-item">
<a href="contact.php">
<li>Contact Us</li>
</a>
</div>
<div class="nav-item">
<a href="about.html">
<li>About Us</li>
</a>
</div>
<div id="lastNav" class="nav-item">
<a href="reviews.html">
<li>Reviews</li>
</a>
</div>
<div class="" id="navImage">
<a href="index.html">
<li><img src="images/asmOriginalLogo_V4.png" alt="Arizona Specialty Motors"/>
<div id="dropDownSocial"> <img class="socialMediaLinks" src="images/fbLogo.png" alt="Facebook"/> <img class="socialMediaLinks" src="images/In-Black-128px-TM.png" alt="LinkedIn"/> <img class="socialMediaLinks" src="images/instaGlyph.png" alt="Instagram"/> <img class="socialMediaLinks" src="images/twitterLogo.png" alt="Twitter" /> </div>
</li>
</a>
</div>
</ul>
<div id="dropdownFreeze">
Here is my javascript function to open/close the menu.
function menuChange() {
"use strict";
/****** Variables *****/
// Burger link & image
var burger = document.getElementById("burg");
// Individual drop down elements; home, inventory, etc.
var lines = document.getElementsByClassName("nav-item");
// Overall container; to make dropdown 'un-scrollable'
var mainArea = document.getElementById("dropdownFreeze");
// Cross link & image
var cross = document.getElementById("xCross");
// Background for dropdown & navigation
var navList = document.getElementById("navList");
// Social Media images & buttons
var social = document.getElementById("navImage");
// If menu is open, close it. If closed, open it
if (burger.style.display === 'none') {
burger.style.display = 'block';
cross.style.display = 'none';
navList.style.display = 'none';
social.style.display = 'none';
for (var i = 0; i < lines.length; i++) {
lines[i].style.display = 'none';
}
mainArea.style.position = 'relative';
} else {
burger.style.display = 'none';
cross.style.display = 'block';
navList.style.display = 'block';
social.style.display = 'block';
for (var j = 0; j < lines.length; j++) {
lines[j].style.display = 'block';
}
mainArea.style.position = 'fixed';
}
}
Here is one of my filters (all of them cause issues now, but didn't before adding the 'navImage' div)
<form name="sortMake" action="inventorySort.php?limit=10&page=1" method="get">
<select name="makeOrder" class="dropButton" onchange=this.form.submit();>
<option value="choose">Make</option>
<?php
$makeQuery = "select distinct make from vehicle order by make asc";
$makeResult = mysqli_query( $con, $makeQuery );
$selectMakeCount = 0;
if ( $makeResult ) {
while ( $makeRow = mysqli_fetch_array( $makeResult ) ) {
if ( isset( $_GET[ 'makeOrder' ] ) && $_GET[ 'makeOrder' ] == $makeRow[ 'make' ] ) {
echo '<option value="' . $makeRow[ 'make' ] . '"selected>' . $makeRow[ 'make' ] . '</option>';
} else {
echo '<option value="' . $makeRow[ 'make' ] . '">' . $makeRow[ 'make' ] . '</option>';
}
}
}
?>
</select>
The Uncaught Typeerror points to
mainArea.style.position = 'relative';
And to
navList.style.display = 'block';
It says that it cannot read property 'style' of null.
I'm fairly certain the issue is happening in the filter/get.

Wow I feel like a scrub.
For whatever reason, my ids for navList and dropDownFreeze got deleted from one of my pages. After resetting them, it worked perfectly.
Code: 1 Me: 0

Related

card rendering function fails only after clicking on pagination button

I'm trying to figure out why my function that renders bootstrap 5 cards fails but only after first clicking a pagination button then selecting a drop down menu option. The pagination buttons work fine it seems and the dropdown menu also works fine but only if a pagination button is never clicked.
The problem seems to be in my displayList() function. After clicking a pagination button and clicking a dropdown option the correct array is passed into displayList() but let paginatedItems = items.slice(start, end); returns an empty array. Any help at all would be greatly appreciated.
I've my stripped down code so that hopefully it's easier to read and understand:
const setPosters = [{id:'1',img:'libs/images/pdfFile.jpg',title:'Virus Treatments',author:'Sam Smith',category:'treatments'},{id:'2',img:'libs/images/pdfFile.jpg',title:'Treatments',author:'Dave Smith',category:'illness'},{id:'3',img:'libs/images/pdfFile.jpg',title:'Pain',author:'Sam Smith',category:'illness'},{id:'4',img:'libs/images/pdfFile.jpg',title:'Virus Treatments',author:'Bob Burke',category:'illness'},{id:'5',img:'libs/images/pdfFile.jpg',title:'Pain Treatments',author:'James Frank',category:'cures'},{id:'6',img:'libs/images/pdfFile.jpg',title:'Sinus Treatments',author:'Ted Reed',category:'illness'},{id:'7',img:'libs/images/pdfFile.jpg',title:'Migrain Treatments',author:'Ted Reed',category:'remedy'},{id:'8',img:'libs/images/pdfFile.jpg',title:'Flu Treatments',author:'Ted Reed',category:'remedy'},{id:'9',img:'libs/images/pdfFile.jpg',title:'Virus Treatments',author:'James Frank',category:'remedy'},{id:'10',img:'libs/images/pdfFile.jpg',title:'Flu Treatments',author:'Ralph Barnes ',category:'remedy'},{id:'11',img:'libs/images/pdfFile.jpg',title:'Virus Treatments',author:'Thomas Smith',category:'cures'},{id:'12',img:'libs/images/pdfFile.jpg',title:'Pain Treatments',author:'Ralph Barnes',category:'remedy'},{id:'13',img:'libs/images/pdfFile.jpg',title:'Virus Treatments',author:'Sam Smith',category:'treatments'},{id:'14',img:'libs/images/pdfFile.jpg',title:'Treatments',author:'Dave Smith',category:'illness'},{id:'15',img:'libs/images/pdfFile.jpg',title:'Pain',author:'Sam Smith',category:'illness'},]
// this continues for a total of about 80 cards in my local version
let posters;
const cardElement = $('#cards');
const paginationElement = $('#pagination');
let currentPage = 1;
let rows = 10;
let page_count;
///////////\\\\\\\\\\\
// **** Functions ***\\
//////////\\\\\\\\\\\\\\
function displayList(items, wrapper, rows_per_page, page) {
wrapper.html("");
page--;
console.log('displayList', items);
let start = rows_per_page * page;
let end = start + rows_per_page;
let paginatedItems = items.slice(start, end);
console.log('paginatedItems:', paginatedItems);
for (let i = 0; i < paginatedItems.length; i++) {
wrapper.append(`
<div class="col gx-2">
<div class="card">
<img
src=${paginatedItems[i].img}
class="card-img-top"
alt="..."
/>
<div class="card-body p-1">
</div>
<div class="card-footer">
Title: ${paginatedItems[i].title}
Category: <strong>${paginatedItems[i].category}</strong><br>
Author: ${paginatedItems[i].author}<br>
id: ${paginatedItems[i].id}<br>
</div>
</div>
</div>
`)
};
};
function setupPagination(items, wrapper, rows_per_page) {
wrapper.html("");
page_count = Math.ceil(items.length / rows_per_page) + 1;
for (let i = 1; i < page_count; i++) {
wrapper.append(`<li class="page-item"><a class="page-link" href="#">${i}</a></li>`);
};
};
/////////////////////\\\\\\\\\\\\\\\\\\\\
// **** Posters By Category Dropdown ***\\
////////////////////\\\\\\\\\\\\\\\\\\\\\\
//Adds Categories to Dropdown Select Options
uniqCatergoriesArray = uniqCatergories(setPosters, it => it.category);
function uniqCatergories(data, key) {
return [...new Map(data.map(x => [key(x), x])).values()]
}
for (var i = 0; i < uniqCatergoriesArray.length; i++) {
$('#selPosterCat').append($('<option>', {
value: uniqCatergoriesArray[i].category,
text: uniqCatergoriesArray[i].category,
}));
}
//Displays Posters By Category
$('#selPosterCat').on('change', function() {
console.log($('#selPosterCat').val());
$('#textSearchResult').html('&nbsp');
$('#inlineFormInput').val('');
if ($('#selPosterCat').val() === 'all') {
posters = setPosters.filter(item => item);
displayList(posters, cardElement, rows, currentPage);
setupPagination(posters, paginationElement, rows);
} else {
posters = setPosters.filter(item => item.category === $('#selPosterCat').val());
console.log('dropdown', posters);
displayList(posters, cardElement, rows, currentPage);
setupPagination(posters, paginationElement, rows);
}
});
/////////////////\\\\\\\\\\\\\
// **** Pagination Click ***\\
/////////////////\\\\\\\\\\\\\\
$(document).on("click", "ul.pagination li a:not(.static)", function(e) {
currentPage = parseInt($(this).text());
posters = setPosters.filter(item => item);
displayList(posters, cardElement, rows, currentPage);
});
posters = setPosters.filter(item => item)
displayList(posters, cardElement, rows, currentPage);
setupPagination(posters, paginationElement, rows);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- *** Main Content Container *** -->
<div class="container-fluid" id="mainContainer">
<div id="mainCardContainer">
<!-- *** Search Bar *** -->
<div class="container-fluid">
<div class="row">
<div class="col">
<form id="form-id">
<div class="mb-3 d-flex justify-content-center" style="margin-top: 5vh;">
<select id="selPosterCat" class="form-select-sm w-25" aria-label="Default select example" style="border-right: none; border-width: 1px; height: 2rem;">
<option value="all" selected>All Categories</option>
<!-- other options added here by javaScript -->
</select>
</div>
</form>
</div>
</div>
<div class="row row-cols-1 row-cols-lg-5 row-cols-sm-2 g-4" id="cards">
<!-- individual cards added here by javaScript -->
</div>
<!-- *** Pagination Bar *** -->
<div class="container-fluid mt-3 pe-0 me-0">
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-end">
<li class="page-item" id="previousBtn">
<a class="page-link static" href="#" tabindex="-1" aria-disabled="true" id="">Previous</a>
</li>
<div class="d-flex" id="pagination">
<!-- page numbers added here by javaScript -->
</div>
<li class="page-item" id="nextBtn">
<a class="page-link static" id="" href="#">Next</a>
</li>
</ul>
</nav>
</div>

Just change this code:
item => item.category === $('#selPosterCat').val()
With this:
item => item.category = $('#selPosterCat').val()
and be sure from adding these links respectively:
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css
https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js
http://jsfiddle.net/rewan_95/107zxr3g is the fiddle I tested on.
Note: don't forget to add the above links for testing on jsfiddle

Hide menu item according to user account

On my login mysql table, i have an account type column. If the user has a Manager account type, i want to show a management menu item and if not hide it.
This is pretty simple but its not working:
In my header, i have the following:
<script>
var logged_in_account_type = "<?php echo $_SESSION['account_type'] ; ?>";
if(logged_in_account_type === "Manager") {
document.getElementById('management_menu').style.display = 'block';
} else {
document.getElementById('management_menu').style.display = 'none';
}
</script>
I tried without the echo has well.
<div id="management_menu" style="display:none">
<li>
<i class="menu-icon fa fa-dashboard"></i><span class="mm-text">Dashboard</span>
</li>
</div>
<div class="text-bg"><span class="text-slim">Welcome,</span> <span class="text-semibold"><?php echo $_SESSION['account_type'] ?></span></div>

Have you tried using php if while rendering your menu? Something like this:
<?php if($_SESSION['account_type'] == 'Manager'): ?>
<div id="management_menu">
<ul>
<li>
Dashboard
</li>
<li>
Users
</li>
</ul>
</div>
<?php endif; ?>

Where is your javascript code in the document? If your javascript code is on the top of the document, it possibly shows or hides the <div> element properly, but, because the <div> element is at the bottom of the document, it is hidden because its "style" says so.
The solution is to move the javascript code below the <div> element, this will solve the "execution order" problem you have. Example :
<div id="management_menu" style="display:none">
<li>
<i class="menu-icon fa fa-dashboard"></i><span class="mm-text">Dashboard</span>
</li>
</div>
<?php
session_start();
$_SESSION['account_type'] = "Manager";
?>
<script>
var logged_in_account_type = "<?php echo $_SESSION['account_type'] ; ?>";
if(logged_in_account_type === "Manager") {
document.getElementById('management_menu').style.display = 'block';
} else {
document.getElementById('management_menu').style.display = 'none';
}
</script>

Toggle DIVs without reloading page

Pie1 displays by default. Clicking the drop down for Pie2 or Pie3 leaves the DIV blank, selecting Pie1 once again returns echarts_Pie1. MY dropdown for pie2 and pie3 is not working.
<script language="javascript">
ivan = {};
ivan.showhide = function(val1)
{
if(val1 == 1)
{
document.getElementById('echart_pie1').style.display = "";
document.getElementById('echart_pie2').style.display = "none";
document.getElementById('echart_pie3').style.display = "none";
}
else if (val1 == 2)
{
document.getElementById('echart_pie1').style.display = "none";
document.getElementById('echart_pie2').style.display = "";
document.getElementById('echart_pie3').style.display = "none";
}
else if (val1 == 3)
{
document.getElementById('echart_pie1').style.display = "none";
document.getElementById('echart_pie2').style.display = "none";
document.getElementById('echart_pie3').style.display = "";
}
}
</script>
Pie1 displays by default. Clicking the drop down for Pie2 or Pie3 leaves the DIV blank, selecting Pie1 once again returns echarts_Pie1. MY dropdown for pie2 and pie3 is not working.
<div class="col-md-3 col-sm-4 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>Storage</h2>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<i class="fa fa-wrench"></i>
<ul class="dropdown-menu" role="menu">
<option onclick="ivan.showhide(1)">Pie1</option>
<option onclick="ivan.showhide(2)">Pie2</option>
<option onclick="ivan.showhide(3)">Pie3</option>
</ul>
</li>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<div id="echart_pie1" style="height:180px;"></div>
<div id="echart_pie2" style="height:180px; display:none;"></div>
<div id="echart_pie3" style="height:180px; display:none;"></div>
</div>

Is this the result, you was searching for?
HTML:
<ul role="menu">
<option onclick="ivan.showhide(1)">Pie1</option>
<option onclick="ivan.showhide(2)">Pie2</option>
<option onclick="ivan.showhide(3)">Pie3</option>
</ul>
<div id="echart_pie1" style="height:180px;">a</div>
<div id="echart_pie2" style="height:180px; display:none;">b</div>
<div id="echart_pie3" style="height:180px; display:none;">c</div>
JS:
ivan = {};
ivan.showhide = function(val1)
{
if(val1 == 1)
{
document.getElementById('echart_pie1').style.display = "";
document.getElementById('echart_pie2').style.display = "none";
document.getElementById('echart_pie3').style.display = "none";
}
else if (val1 == 2)
{
document.getElementById('echart_pie1').style.display = "none";
document.getElementById('echart_pie2').style.display = "";
document.getElementById('echart_pie3').style.display = "none";
}
else if (val1 == 3)
{
document.getElementById('echart_pie1').style.display = "none";
document.getElementById('echart_pie2').style.display = "none";
document.getElementById('echart_pie3').style.display = "";
}
}
Actually i didnt even change something, except the contents in your DIV's ( i used a, b and c). This works if it it the result that you expected.

The echarts library might need the containers to be visible during the generation of the graphics, so I would suggest to remove the display:none style from the HTML:
<ul role="menu">
<option onclick="ivan.showhide(1)">Pie1</option>
<option onclick="ivan.showhide(2)">Pie2</option>
<option onclick="ivan.showhide(3)">Pie3</option>
</ul>
<div id="echart_pie1" style="height:180px;"></div>
<div id="echart_pie2" style="height:180px;"></div>
<div id="echart_pie3" style="height:180px;"></div>
In the JavaScript code you have code to initialise the graphics, with calls like these:
var echartPie1 = echarts.init(document.getElementById('echart_pie1'), theme);
// ... etc
Right after that code, add this line:
ivan.showhide(1);
This assumes of course that you have already defined ivan at this point. If not, put that definition first, and then add the above line below it.
A simplification
Not related to the problem, but note that you can simplify the showhide function to this:
ivan = {};
ivan.showhide = function(val1)
{
document.getElementById('echart_pie1').style.display = val1 !== 1 ? "none" : "";
document.getElementById('echart_pie2').style.display = val1 !== 2 ? "none" : "";
document.getElementById('echart_pie3').style.display = val1 !== 3 ? "none" : "";
}
If all three graphs flash at page load
Maybe the page will for a fraction of a second show all three graphs when the page loads. If that is a problem, try this, although it might bring back the original problem:
Add the style visibility: hidden to the ul tag:
<ul role="menu" style="visibility: hidden">
Remove that style once you have called showhide(1):
ivan.showhide(1);
document.querySelector('ul[role=menu]').style.visibility = 'visible';

It doesn't really matter if the <div> is visible when init with ECharts. What matters is that it should have width and height as a container.
So, you could set them with all three charts when page loaded, no matter which one is visible.
document.getElementById('echart_pie1').style.width = '800px';
document.getElementById('echart_pie1').style.height = '600px';
document.getElementById('echart_pie2').style.width = '800px';
document.getElementById('echart_pie2').style.height = '600px';
document.getElementById('echart_pie3').style.width = '800px';
document.getElementById('echart_pie3').style.height = '600px';

onclick function is not work in option element ! So try to change your option format a little bit
<select class="dropdown-menu" role="menu" onchange="ivan.showhide(this.value)">
<option value="1">Pie1</option>
<option value="2">Pie2</option>
<option value="3">Pie3</option>
</select>

Thank you everyone for assisting. Its working now - I tested it using pie1a, pie1b, pie1c.
<script type="text/javascript">
function doLoadStuff()
{
document.getElementById('echart_pie1b').style.display = "none";
document.getElementById('echart_pie1c').style.display = "none";
}
</script>
HTML
<body class="nav-md" onload="doLoadStuff()">
...
<ul class="dropdown-menu" role="menu">
<option onclick="showhidePie1('a')">Pie1a</option>
<option onclick="showhidePie1('b')">Pie1b</option>
<option onclick="showhidePie1('c')">Pie1c</option>
</ul>
<div id="echart_pie1a" style="height:200px;"></div>
<div id="echart_pie1b" style="height:200px;"></div>
<div id="echart_pie1c" style="height:200px;"></div>
I then initialized my 3 pies inside the bottom script
var echartBar1a = echarts.init(document.getElementById('echart_bar1a'), theme);
echartBar1a.setOption(
{
Options...
}
And then used a function to set the style.
function showhidePie1(theChar) {
document.getElementById('echart_pie1a').style.display = "none";
document.getElementById('echart_pie1b').style.display = "none";
document.getElementById('echart_pie1c').style.display = "none";
document.getElementById('echart_pie1'+theChar).style.display = "";
}
Its now working perfectly. Thank you.

database query fails randomly, cannot replicate on my machine

edit #1:As you can see below I have multiple $db->query 's and I am wondering if this issue could be cause by too many calls to the database on slower connections? cause the page itself works the database calls just don't go through sometimes. IF this is the issue what would be a good solution for that?
I've been having a really hard time with this one. Some reason the database code only works 2/3rds of the time for customers. I have been unable to find a reason why it would not work for them either.
When some customers use my sight everything works fine up until the final page where the payment gateway sends me a transaction ID and a confirmation on whether or not the payment was successful(1 for yes 0 for no). But for some reason my database line that adds the transaction is not working
$db->query("UPDATE transactions
SET charge_id = '{$trans_id}'
WHERE cart_id = '{$cart_id}'");
$cart_id is from a cookie (issue does not lie with users having cookies blocked.) Now I had previously thought that the issue lied within safari and IE (since customers with issue had these browsers) but after some testing both browsers work on my computer and a friends (just in case). So now I really do not know what the issue could be. Without the transaction ID being set the transaction will not be marked as complete which means it doesn't get registered in an admin panel inventory systems and the quantity of the item does not get updated. The ordered and items are going through and processing So the issue has to be on this page.
Current possible ideas(not sure how to fix either):
Too many db query causing issues for people with slower interenet.
Auto cycle side bar causing an issue (2nd code block)
Code:
<?php require_once 'system/init.php'; include 'includes/head.php'; include 'includes/navigation.php'; include 'includes/headerpartial.php'; include 'includes/leftbar.php'; ?>
<div id="maincontent" class="col-md-8">
<?php
if ($_GET['response_code'] == 1) { $trans_id = $_GET['transaction_id'];
$db->query("UPDATE transactions SET charge_id = '{$trans_id}' WHERE cart_id = '{$cart_id}'");
$db->query("UPDATE cart SET paid = 1 WHERE id = '{$cart_id}'");
$tsql = $db->query("SELECT * FROM transactions WHERE charge_id = '$trans_id' ");
$tran = mysqli_fetch_assoc($tsql);
$domain = '.'.$_SERVER['HTTP_HOST'];
setcookie(CART_COOKIE,'',1,"/",$domain,false);
?> <h1 id="reciept">Thank you for your support!</h1><hr> <p id="reciept"> On behalf of LettuceHeadsFarm <?=$tran['full_name']?> we thank you for your purchase and hope you enjoy it! </p>
<p id="reciept"> You have selected <b>"<?=$tran['pickup-location']?>"</b> as your pickup point. </p>
<table id="nav-button" class="table table-bordered table-auto"> <tbody> <tr> <td>Transaction ID : <?=$tran['charge_id']?></td> </tr> <?php $a = 1; $it = 1; $string = $tran['items']; $itemar = explode(',', $string); $num = 1;
$istr = $tran['inventory'];
$stri = explode(',', $istr);
if ($tran['status'] != "Complete") {
foreach (array_slice($stri, $num) as $inve ){
$exploded = explode('.', $inve);
$itname = $exploded['0'];
$itquan = $exploded['1'];
$db->query("UPDATE products
SET `quantity` = `quantity` - '$itquan'
WHERE title = '$itname'");
$db->query("UPDATE products
SET `Sold` = `Sold` + '$itquan'
WHERE title = '$itname'");
$it++;
}
$compl = "Complete";
$db->query("UPDATE transactions
SET `status` = '$compl'
WHERE charge_id = '$trans_id'");
}
foreach (array_slice($itemar, $num) as $itemr ){
?> <tr> <td><?=$itemr?></td> </tr>
<?php $a++; } ?>
<tr> <td> Total: <?=money($tran['grand_total']);?> </td> </tr> </tbody>
</table> <?php }else { echo "Sorry, an error occurred: ".htmlentities($_GET['response_reason_text']); } ?> </div>
<?php include 'includes/rightbar.php'; include 'includes/footer.php'; ?>
Sidebar Code:
<!-- right side bar-->
<div id="sidebar" class="col-md-2" >
<div class="col-md-12" style="font-size: 75%;">
<ul id="tabs" class="nav nav-pills" role="toolbar">
<li role="presentation">
</li>
<li role="presentation">
</li>
<li role="presentation">
</li>
<li role="presentation">
</li>
</ul>
</div>
<br />
<br />
<div class="tabContent" id="insta">
<div class="contentText" id="aboutContent">
<!-- LightWidget WIDGET --> -info removed instagram widget-
</div>
</div>
<div class="tabContent" id="WHoF">
<div id="whoof">
<?php
$sql = "SELECT * from happening ORDER BY post_date desc limit 3 offset 0;";
$result = $db->query($sql);
?>
<?php while($post = mysqli_fetch_assoc($result)) : ?>
<p><b><?=$post['title'];?></b></p>
<hr>
<p ><?= $post['entry']; ?></p>
<hr>
<?php endwhile; ?>
</div>
</div>
<div class="tabContent" id="veggie">
<div>
<p><a href="veggie.php">
<img border="0" alt="Veggie_crate" src="../images/header/veg.png" style="width: 100%; height: 100%;" >
</a></p>
</div>
</div>
<div class="tabContent" id="social">
<div>
-info removed. facebook widget-
</div>
</div>
<script>
$(document).ready(function () {
var timeInterval, tabCount = 0, currnetIndex = 1;
tabCount = $('ul#tabs').find('li a').length;
var tabContentObj = $('.tabContent');
changeTabIndex();
timeInterval = setInterval(function () { changeTabIndex(); }, 6 * 1000);
function changeTabIndex() {
if (currnetIndex > tabCount) {
currnetIndex = 1;
}
tabContentObj.hide();
$('ul#tabs').find('li.selected').removeClass('active');
$('ul#tabs').find('li.selected').removeClass('selected');
var currentAncorObj = $('ul#tabs').find('li a').eq(currnetIndex - 1);
currentAncorObj.parent().addClass('selected');
currentAncorObj.parent().addClass('active');
$(currentAncorObj.attr('href')).show();
currnetIndex++;
};
$('#tabs li').mouseenter(function () {
clearInterval(timeInterval);
}).mouseleave(function () {
timeInterval = setInterval(function () { changeTabIndex(); }, 4 * 1000);
});
$('#tabs li a').click(function () {
tabContentObj.hide();
$('ul#tabs').find('li.selected').removeClass('active');
$('ul#tabs').find('li.selected').removeClass('selected');
var currentAncorObj = $(this);
currnetIndex = $('ul#tabs').find('li a').index($(this)) + 1;
currentAncorObj.parent().addClass('active');
currentAncorObj.parent().addClass('selected');
$(currentAncorObj.attr('href')).show();
currnetIndex++;
//return false;
});
});
</script>
</div>

Try to generate a log of the user request and see what's going on.
$error_code = uniqid(mt_rand(), true);
file_put_contents(__DIR__ . '/cookie_' . $error_code . '.log', print_r($_REQUEST, 1), FILE_APPEND);
This will let you see what information is being supplied by the user during cart submission in order to troubleshoot. $_REQUEST includes $_GET, $_POST, and $_COOKIE data.
If you haven't already, you should also test for the existence of the $cart_id instead of expecting it to have been submitted with the user's request.
if (!empty($cart_id) && $_GET['response_code'] == 1) {
$trans_id = (int) $_GET['transaction_id'];
...//
}else{
echo "Sorry, an error occurred (Error Code: " . $error_code . "): ".htmlentities($_GET['response_reason_text']);
}

How to trigger ng-hide on all elements

I have a list that when you click on an li, it reveals a hidden list of information about that person.
In the footer, theres simple navigation showing the different views and when you click, angular filters through the original list for the matched elements.
All I am stuck on is this;
if you click an li element and reveal the info for that person, then click one of the navigation buttons, it will still show that person but with the hidden element revealed...not closed.
Ideally, id prefer that when the user clicks any of the footer navigation buttons, the list reveals just the names, not the hidden info..regardless of whether it was clicked or not.
If this was just in Jquery or javascript, i would know how to approach this but, Im sure theres an 'angular specific' approach I just don't know about.
Heres the HTML:
<div ng-controller="MyCtrl">
<ul id="housewrapper" ng-cloak>
<li ng-repeat="item in house track by item.member" class="listings" ng-click="showComments = !showComments;" ng-show="([item] | filter:filters).length > 0" >
<span ng-if="item.whereHesheStands == 'oppose'"><img class="dot againstdot" src="img/against.png">{{item.member}}
</span>
<span ng-if="item.whereHesheStands == 'leanoppose'">
<img class="dot againstdot" src="img/against.png">{{item.member}}
</span>
<span ng-if="item.whereHesheStands == 'support'" ng-click="clickMeImg($event);">
<img class="dot supportdot" src="img/support.png">{{item.member}}
</span>
<span ng-if="item.whereHesheStands == 'leansupport' ">
<img class="dot supportdot" src="img/support.png">{{item.member}}
</span>
<span ng-if="item.whereHesheStands == 'unknown' ">
<img class="dot undecideddot" src="img/undecided.png">{{item.member}}
</span>
<span ng-if="item.whereHesheStands == 'undecided' ">
<img class="dot undecideddot" src="img/undecided.png">{{item.member}}
</span>
<div class="memberdetail" ng-show="showComments" ng-click="$event.stopPropagation();" >
<ul class="memberbreakdown">
<li class="partyline" >
{{item.party}} - {{item.state}}</li>
<li class="comments">
<span style="color:#a4a4a4;" ng-if="!(item.comments)">Comment not available</span>
<span>{{item.comments}}</span>
</li>
</ul>
</div>
</li>
</ul>
<div id="appfooterWrapper">
<ul id="appfooter">
<li ng-click="myFunctionRepublican();" ng-class="class">R</li>
<li ng-click="myFunctionDemocrat();" ng-class="class2">D</li>
<li ng-click="myFunctionSupport();" ng-class="class3">S</li>
<li ng-click="myFunctionOppose();" ng-class="class4">A</li>
<li ng-click="myFunctionUnknown();" ng-class="class5">U</li>
</ul>
</div>
and the javascript of the "R" navigation button
$scope.myFunctionRepublican = function() {
$('.memberdetail').removeClass('ng-show');
$('.memberdetail').bind('click');
$scope.filters = function(house) {
return house.party == 'R' ;
};
if ($scope.class === ""){
$scope.class = "rep";
$scope.class2 = "";
$scope.class3 = "";
$scope.class4 = "";
$scope.class5 = "";
}
else{
$scope.class = "";
}
$('html, body').animate({scrollTop:0}, 'fast');
var loading;
loading = true;
if (loading == true) {
setTimeout(function() {
spinner.stop();
$('.listings').not('.ng-hide').addClass('republican');
console.log($('.republican').length);
$('#housewrapper').stop().fadeIn(350).addClass(
'marginAdd');
$('#subhead').removeClass('slidedown');
$('#subhead').html('Republicans').css('color', '#d41600');
setTimeout(function() {
$('#subhead').addClass('slidedown');
}, 300);
}, 500);
}
}
Here's the Fiddle

A couple changes, attach a property onto each member.
View changes:
ng-click="item.showComments = !item.showComments;"
<div class="memberdetail" ng-show="item.showComments" ng-click="$event.stopPropagation();" >
Controller changes:
function resetShow() {
for(var i = 0, l = $scope.house.length; i < l; i++) {
$scope.house[i].showComments = false;
}
}
Then just call it when you navigate:
$scope.myFunctionUnknown = function() {
resetShow();
....
Forked Fiddle

Develop Reference

JavaScript is the programming language of the Web.

Uncaught Typeerror, Broken JS - javascript

Wow I feel like a scrub. For whatever reason, my ids for navList and dropDownFreeze got deleted from one of my pages. After resetting them, it worked perfectly. Code: 1 Me: 0

Related

card rendering function fails only after clicking on pagination button

Hide menu item according to user account

Toggle DIVs without reloading page

database query fails randomly, cannot replicate on my machine

How to trigger ng-hide on all elements

Categories

Resources