How to activate a php include by clicking a button? - javascript

I am working on an admin panel in php.
My idea is to add a store in the admin panel and it should add the store in database.In the admin panel after submitting it should show the 4 buttons as shown in figure!
for this i have written some html ,but main problem is if i click on show stores it should add a php include and show below like thisBut the problem is without clicking on show stores the php iclude is default enable.Please help me to include the php file only if i press the show stores button.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Database connection is created with the db AskCoupon.com -->
<?php
//Step1
if ( ! empty( $_POST ) ) {
// Connect to MySQL
$mysqli = new mysqli( 'localhost', 'root', 'sai123', 'askcoupon.com' );
// Check our connection
if ( $mysqli->connect_error ) {
die( 'Connect Error: ' . $mysqli->connect_errno . ': ' . $mysqli->connect_error );
}
/*New Code added here*/
$storeName = $_POST['store_name'];
$check=mysqli_query($mysqli,"select * from featured_stores where store_name='$storeName'");
$checkrows=mysqli_num_rows($check);
if($checkrows>0){echo "customer exists";}
else{
//insert results from the form input
$query = "INSERT INTO featured_stores ( store_id, store_name,no_of_coupons,caption ) VALUES ( '{$mysqli->real_escape_string($_POST['store_id'])}', '{$mysqli->real_escape_string($_POST['store_name'])}', '{$mysqli->real_escape_string($_POST['no_of_coupons'])}', '{$mysqli->real_escape_string($_POST['caption'])}' )";
// $insert = $mysqli->query($sql);
$result = mysqli_query($mysqli, $query) or die('Error querying database.');
mysqli_close($mysqli);
echo "Store Added";
}
};
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Admin Panel</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<a class="btn btn-primary" href="../admin_panel" role="button">Insert Another Store</a>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<a class="btn btn-danger" href="../admin_panel" role="button">Insert Another Coupon</a>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<a class="btn btn-success" href="../Admin_panel/show_stores.php" role="button" onclick="loadThis">Show Stores</a>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<button class="btn btn-success" href="#" role="button" onclick="loadThis">Show Coupons</button>
</div>
</div>
</div>
<script>
function loadThis(){
<?php include'show_stores.php';?>
}
</script>
</body>
</html>
Also I am including showstores.php file here
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<?php
// 1) connect to the database by mysql_connect()
mysql_connect("localhost", "root", "sai123") or die(mysql_error());
// 2) than select the database like mysql_select_db()
mysql_select_db("askcoupon.com") or die(mysql_error());
// 3) you need to use mysql_query()
$data = mysql_query("SELECT * FROM featured_stores where 1") or die(mysql_error());
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Admin Panel</title>
</head>
<body>
<div class="container">
<div class="row well">
<?php
while($row= mysql_fetch_array( $data )){ ?>
<div class="col-xs- col-sm- col-md-2 col-lg-">
<?php echo $row['store_id']; ?>
</div>
<div class="col-xs- col-sm- col-md-4 col-lg-">
<?php echo $row['store_name'] ?>
</div>
<div class="col-xs- col-sm- col-md-3 col-lg-">
<?php echo $row['no_of_coupons'] ?>
</div>
<div class="col-xs- col-sm- col-md-3 col-lg-">
<?php echo $row['caption'] ?>
</div>
<?php } ?>
</div>
</div>
</body>
</html>
Console Log after answer 1

there are many options, one of which include sending ajax request, in this situation very simple example you can create new include.php file
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
function loadThis() {
$.ajax({
type: "POST",
url: "include.php",
dataType: "html",
success: function(data) {}
});
}
/* include.php file */
<?php
include('showstores.php');
?>

Related

javascript change background color using if statement in php

please i always stuck with javascript that can't run in my php. i wanna change the background color on class one-container if the data on class one >= 100. the data come from db that i connect with my php.
any help would be appreciated.
thanks and sorry for my bad english
<!DOCTYPE html>
<html lang="eng">
<head>
<title>Dashboard</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="body-container">
<div class="sec-nav-container">
<div class="wrapper">
<nav>
<div class="title">
<span class="dashboard">Dashboard Billing</span>
</div>
<div class="time-container">
<b class="last-updated">Last Updated on:</b>
<script type="text/javascript">
function lastModified () {
document.write(document.lastModified);
}
lastModified();
</script>
</div>
</nav>
</div>
</div>
<div class="header-container">
<div class="wrapper">
<?php
include "connect_db.php";
$sql = "SELECT * FROM tb_dashboard";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) {
echo "
<div class='one-container'>
<h1 class='one'>" . $row['kirim_mpn'] . "</h1>
<p class='mpn'>Siap Kirim MPN</p>
</div>";
}
}
else {
echo "Tidak ada hasil";
}
mysqli_close($conn);
?>
</div>
</div>
</div>
</div>
<script src="main.js"></script>
<script language="JavaScript" src="emil.js" type="text/javascript"></script>
</body>
</html>
and this is raw code of javascript that i wanna use in my php
<script>
var colorBox = function () {
var data = [100];
if (data >= 100) {
document.getElementById("one-container").style.backgroundColor = '#FF6C60';
} else {
document.getElementById("one-container").style.backgroundColor = '#F8D347';
}
}
colorBox();>
</script>
i wanna make var data = [100] become var data = [" . $row['kirim_mpn'] . "]

Trying to create a looping cards in php (bootstrap)

im fairly new in php and mysqli and trying to make some basic website.
basically i want to make a looping statement in php to create cards in the same row with same size and col without myself creating the cards manually in html.
using bootstrap, php and mysqli
the code is successfully running, but the output doesnt match the bootstrap cards, and they refuse to be in the same row
can anyone help me ? thank you
<?php include("conn.php"); ?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="icon" href="img/ArdiantaPargo.png" />
<link rel="stylesheet" href="https://getbootstrap.com/docs/4.1/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="bootstrap/css/style.css" />
<link rel="stylesheet" href="font-awesome/css/font-awesome.css" />
</head>
<body>
<header>
<?php include("header.php"); ?>
</header>
<nav class="navbar navbar-default"><?php include("menu.php"); ?></nav>
<article>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<!-- article ------------------->
<?php
$query = mysqli_query($koneksi, "SELECT * FROM article ORDER BY datae DESC");
// looping Artikel
while($artikel = mysqli_fetch_array($query)){
echo "<div class='card-body'>";
echo "<a class='card-title' href='artikel.php?id=".$artikel['id']."' />".$title['title']."</a>";
echo "<p class='article-date'>Oleh <b>".$author['author']."</b>, pada ".$article['date']."</p>";
echo "</div>";
}
?>
<!-- END article --------------->
</div>
</div>
</div>
</div>
</article>
<footer>
<?php include("footer.php"); ?>
</footer>
</body>
</html>
I think you left part of your card out of your loop. I'm guessing you've got one <div class="card"> containing many <div class="card-body">s.
I would leave the <div class="row"> out of your loop, but everything inside that should be part of the loop.
<div class="row">
<?php
$query = mysqli_query($koneksi, "SELECT * FROM article ORDER BY datae DESC");
// looping Artikel
while($artikel = mysqli_fetch_array($query)){
echo "<div class='col-12 col-md-4'>";
echo "<div class='card mb-4 shadow-sm'>";
echo "<div class='card-body'>";
echo "<a class='card-title' href='artikel.php?id=".$artikel['id']."' />".$title['title']."</a>";
echo "<p class='article-date'>Oleh <b>".$author['author']."</b>, pada ".$article['date']."</p>";
echo "</div>";
echo "</div>";
echo "</div>";
}
?>
</div>

Set data extraction from javascript to php

I downloaded a great script for the store locator of google, the parent programmer, has set that once, performed the search in the input field, the data are extracted from a json file, by calling a script.
according to this guide (https://www.bjornblog.com/web/jquery-store-locator-plugin/comment-page-6), ie that of the owner would be enough to create a connection file that I created:
<?php
$connessione = new mysqli("localhost", "root", "root", "ca2solution");
if ($connessione->connect_errno) {
echo "Failed to connect to MySQL: (" . $connessione->connect_errno . ") " . $connessione->connect_error;
}
and include this php code, to extract instead of from the .json file, directly from the database:
$results = $db->query("SELECT * FROM locations");
$locations = array();
foreach($results as $location){
array_push($locations, $location);
}
//Output JSON
echo json_encode($locations);
the code is divided into two phases index where inside there is the form that as action has set submit.html
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Map Example</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="../assets/css/storelocator.css" />
</head>
<body>
<div class="bh-sl-container">
<div id="page-header">
<h1 class="bh-sl-title">Using Chipotle as an Example</h1>
<p>I used locations around Minneapolis and the southwest suburbs. So, for example, Edina, Plymouth, Eden Prarie, etc. would be good for testing the functionality.
You can use just the city as the address - ex: Edina, MN. METTICE </p>
</div>
<div class="bh-sl-form-container">
<form id="bh-sl-user-location" method="get" action="submit.html">
<div class="form-input">
<label for="bh-sl-address">Enter Address or Zip Code:</label>
<input type="text" id="bh-sl-address" name="bh-sl-address" />
</div>
<button id="bh-sl-submit" type="submit">Submit</button>
</form>
</div>
</div>
</body>
</html>
submit.html:
<?php
include '../connessione.php';
?
<!DOCTYPE html>
<html>
<head>
<title>Map Example</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="../assets/css/storelocator.css" />
</head>
<body>
<div class="bh-sl-container">
<div id="page-header">
<h1 class="bh-sl-title">Using Chipotle as an Example</h1>
<p>I used locations around Minneapolis and the southwest suburbs. So, for example, Edina, Plymouth, Eden Prarie, etc. would be good for testing the functionality.
You can use just the city as the address - ex: Edina, MN.</p>
</div>
<div class="bh-sl-form-container">
<form id="bh-sl-user-location" method="post" action="#">
<div class="form-input">
<label for="bh-sl-address">Enter Address or Zip Code:</label>
<input type="text" id="bh-sl-address" name="bh-sl-address" />
</div>
<button id="bh-sl-submit" type="submit">Submit</button>
</form>
</div>
<div id="bh-sl-map-container" class="bh-sl-map-container">
<div id="bh-sl-map" class="bh-sl-map"></div>
<div class="bh-sl-loc-list">
<ul class="list">
$results = $connessione->query("SELECT * FROM locations");
$locations = array();
foreach($results as $location){
array_push($locations, $location);
}
//Output JSON
echo json_encode($locations);
</ul>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="../assets/js/libs/handlebars.min.js"></script>
<script src="https://maps.google.com/maps/api/js?key=AIzaSyCPi_BiC2r0ZOw-4eyXTVcxTpCMv4FOils"></script>
<script src="../assets/js/plugins/storeLocator/jquery.storelocator.js"></script>
<script>
$(function() {
$('#bh-sl-map-container').storeLocator({
'querystringParams' : true,
'fullMapStart': true,
// I seguenti percorsi sono impostati perché questo esempio si trova in una sottodirectory
'dataLocation': '../data/locations.json',
'infowindowTemplatePath': '../assets/js/plugins/storeLocator/templates/infowindow-description.html',
'listTemplatePath': '../assets/js/plugins/storeLocator/templates/location-list-description.html'
});
});
</script>
</body>
</html>
but unfortunately I do not get any results, where am I wrong?

How to get div values that are dynamically generated by a php script?

I want to alert the name of the item whose place bid button I will click but my code seems to alert only laptop. Can anyone tell me how to get div values that are dynamically generated through a php script. Below is the code for the page.I want to alert name of that item whose place bid I click on. Since the page is dynamically generated which gets item details from a database containing item details.
<?php
$con = mysqli_connect("localhost","root","*****","bidding") or
die(mysqli_error($con));
$select_query = "select * from items";
$select_query_result = mysqli_query($con, $select_query) or
die("Query Mistake");
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bid</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="materialize/css/materialize.css"/>
<link rel="stylesheet" type="text/css" href="seperate2.css">
<script src="jquery-3.2.1.min.js"></script>
<script src="materialize/js/materialize.min.js"></script>
<script type="text/javascript">
function post_data(){
var item_name = document.getElementById("item_name").innerHTML;
alert(item_name);
}
</script>
</head>
<body>
<div class="container">
<h1>Bid</h1>
<div class="row">
<?php while($row = mysqli_fetch_array($select_query_result)) { ?>
<div class="col s3" >
<div id="item_name"><?php echo"$row[item_name]"?></div>
<div id="starting_price"><?php echo"$row[starting_price]"?</div>
<div><?php echo"$row[description]"?></div>
<button class="btn waves-effect waves-teal"
onclick="post_data()">Place Bid</button>
</div>
<?php } ?>
</div>
</div>
</body>
</html>
ID of element in HTML must be unique. Use class.
In loop you declare static name of ID, that are not unique.
Your code requires a counter by which the dynamically created DIVs may be accessed. Your <div class="row"> block would be:
<div class="row">
<?php
$divCounter = 0;
while($row = mysqli_fetch_array($select_query_result)) {
$divCounter += 1;
?>
<div class="col s3" >
<div id="item_name<?php echo $divCounter; ?>"><?php echo"$row[item_name]"?></div>
<div id="starting_price"><?php echo"$row[starting_price]"?</div>
<div><?php echo"$row[description]"?></div>
<button class="btn waves-effect waves-teal"
onclick="post_data('<?php echo 'item_name'.$divCounter; ?>')">Place Bid</button>
</div>
<?php } ?>
</div>
Notice that the call to the Javascript function post_data() now provides the DIV id that contains its counter. To complete the job, adjust post_data() to include the parameter:
<script type="text/javascript">
function post_data(divId){
var item_name = document.getElementById(divId).innerHTML;
alert(item_name);
}
</script>
If you prefer, instead of using a counter and concatenating with the static "item_name", you may use the $row[item_name] property instead. Whether or not you can do this will depend on whether this property can serve as a valid HTML id attribute value.

How to change header background on scroll down?

I started with modifing the header on my site, and have a hard time to make it worked as i wanted.
I want, header background to change background color to white, when scroll down 100-150px, exactly like is on this site.
I found this JS:
$(function(){
$('#header_nav').data('size','big');
});
$(window).scroll(function(){
if($(document).scrollTop() > 0) {
if($('#header_nav').data('size') == 'big') {
$('#header_nav').data('size','small');
$('#header_nav').stop().animate({
height:'40px'
},600);
}
}
else {
if($('#header_nav').data('size') == 'small') {
$('#header_nav').data('size','big');
$('#header_nav').stop().animate({
height:'100px'
},600);
}
}});
what i inserted into custom JS plugin in my WP site.
Also have this JS:
<script>
$(window).on("scroll", function() {
if ($(this).scrollTop() > 100) {
$("header").css("background","#252525");
}
else {
$("header").css("background","#fff");
}
});
</script>
Is maybe this better sollution, then previous code?
How to use this JS to make the effect on demo site i posted before in this post?
use following code snippet, working fine in the demo website
jQuery(document).scroll(function(){
if(jQuery(this).scrollTop() > 300)
{
jQuery('#navigation').css({"background":"red"});
} else {
jQuery('#navigation').css({"background":"transparent"});
}
});
Try this code.
$(function() {
var bgcolor_navigation = function(){
var bg_offset_top = $(window).scrollTop(); // our current vertical position from the top
if ((100 > bg_offset_top) &&(150 < bg_offset_top)) {
$('#navigation').addClass("bgcolorheadnav");
} else {
$('#navigation').removeClass("bgcolorheadnav");
}
};
// run our function on load
bgcolor_navigation();
// and run it again every time you scroll
$(window).scroll(function() {
bgcolor_navigation();
});
});
css
.bgcolorheadnav{
background-color:#000;
}
This is just for websites made by WordPress:
Create a child theme for your theme.
Activate your child theme.
Copy your header.php file to the child theme folder by FTP client
Replace the code in the child’s header.php with this code:
<?php
/**
* The Header for our theme
*
* Displays all of the <head> section and everything up till <div id="main">
*
* #package WordPress
* #subpackage Twenty_Fourteen
* #since Twenty Fourteen 1.0
*/
?><!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) & !(IE 8)]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(window).bind('scroll', function() {
var distance = 50;
if ($(window).scrollTop() > distance) {
$('.header-main').addClass('scrolled');
}
else {
$('.header-main').removeClass('scrolled');
}
});
});
</script>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<?php if ( get_header_image() ) : ?>
<div id="site-header">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
<img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
</a>
</div>
<?php endif; ?>
<header id="masthead" class="site-header" role="banner">
<div class="header-main">
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<div class="search-toggle">
<?php _e( 'Search', 'twentyfourteen' ); ?>
</div>
<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
<button class="menu-toggle"><?php _e( 'Primary Menu', 'twentyfourteen' ); ?></button>
<a class="screen-reader-text skip-link" href="#content"><?php _e( 'Skip to content', 'twentyfourteen' ); ?></a>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'menu_id' => 'primary-menu' ) ); ?>
</nav>
</div>
<div id="search-container" class="search-box-wrapper hide">
<div class="search-box">
<?php get_search_form(); ?>
</div>
</div>
</header><!-- #masthead -->
<div id="main" class="site-main">
Put following code to your Child Theme style.css file or install the Simple Custom CSS plugin and put the code there.
.header-main {
transition:top 0.5s ease;
box-shadow:0 0 10px black;
transition: background-color 0.5s ease;
}
.scrolled {
background: #bada55!important;
}
If you don't do the CSS this way and put the code to themes -> style.css, you will loose all changes you made when you update your theme in the future.
The site you referred uses bootstrap framework.
You can see what is done on that site by right clicking on the site and say inspect element. The following code was found for the navbar: This way you do not need to write custom js, jut follow the industry the best practice.
<nav class="navbar navbar-dark navbar-fixed-top top-nav-collapse" role="navigation">
<div class="navbar-container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="/">
<span class="logo hidden-xs">
<img src="img/logo-santa.svg" alt="">
</span>
<span class="logo hidden-sm hidden-md hidden-lg">
<img src="img/logo-notext.svg" alt="">
</span>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden active">
</li>
<li class="page-scroll">
Pricing
</li>
<li class="page-scroll">
XenoPanel
</li>
<li class="page-scroll">
Multicraft
</li>
<li class="page-scroll navbar-borderbtnn">
Client Area <i class="fa fa-arrow-circle-right" aria-hidden="true"></i>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>

Categories