I have a WooCommerce store where we need to have a lot of related products. We wish to only show 4 to begin with and then a "Show more" function. I would prefer not just to hide the products and then show with jQuery, but have them loaded dynamically with ajax.
I have searched for similar solution, but can't find anything. So I am hoping there are some out there that can help me?
And for the index.php file:
<?php
include 'dbh.php';
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="index.js"></script>
<script src="jquery-3.5.1.min.js"></script>
</head>
<body>
<div id="products">
<?php
$sql = "SELECT * FROM products LIMIT 2";
$result = mysqli_query($conn, $sql);
if(mysqli_num_rows($result) > 0){
while ($row = mysqli_fetch_assoc($result)) {
echo "<p>";
echo $row['product'];
echo "<br>";
echo $row['product_name'];
echo "</p>";
}
} else {
echo "There are no more products.";
}
?>
</div>
<button id="btn">Show more products</button>
</body>
</html>
<!-- language: lang-js -->
$(document).ready(function(){
var productCount = 2;
$("btn").click(function() {
productCount += 2;
$("#data-placeholder").load("loaded_data.php", {
productNewCount: productCount
});
});
});
<!-- end snippet -->
enter code hereYou need to to use multiple files in Ajax, one where the data loads that you can call loaded_data.php that is going to to get added to the main php file (example: index.php),
<?php
include 'dbh.php';//dbh.php is the file that hold the database connection.
$productNewCount = $POST['productNewCount'];
$sql = "SELECT * FROM products LIMIT $productNewCount";
$result = mysqli_query($conn, $sql);
if(mysqli_num_rows($result) > 0){
while ($row = mysqli_fetch_assoc($result)) {
echo "<p>";
echo $row['product_name'];
echo "<br>";
echo $row['product'];
echo "</p>";
}
} else {
echo "There are no more products!";
}
?>
Related
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<!--Navigation bar-->
<div id="nav-placeholder">
</div>
<div id="carousel">
</div>
<div id="successfulModal">
</div>
<script>
$(function(){
$("#nav-placeholder").load("newnavbar.html");
$("#carousel").load("carousel.php");
});
</script>
<!--end of Navigation bar-->
<?php
if($_REQUEST['signupValue']==1)
{
echo "<script>";
echo "alert('Thank you for signup');";
echo "</script>";
}
require "database.php";
/* echo " after requre database.php"; */
$result = home_page_image();
if(!$result)
{
/* echo 'Could not run query'.mysql_error(); */
exit;
}
/* $row = $result->fetchAll(PDO::FETCH_ASSOC); */
/* $row = $result->fetch(PDO::FETCH_ASSOC); */
/* echo 'inside php'; */
$count = $result->rowCount();
echo '<div class="container">';
while($count>0)
{
echo '<div class="row">';
$i=0;
while($i<3)
{
$row = $result->fetch(PDO::FETCH_ASSOC);
echo '<div class="col-sm-4">';
echo '<div class="card">';
echo '<div class="card-body"><a href="productDetails.php?id=';
echo $row['code'];
echo '"><img src="../';
echo $row['imageurl'];
echo '" class="img-responsive" style="width:250px;height:250px" alt="Image">';
echo '</a></div><div class="card-footer">';
echo mb_strimwidth($row['name'],0,28,"...");
echo '<button type="button" class="btn btn-outline-dark pull-right" onclick="like('.$row['code'].')"><i class="fa fa-thumbs-o-up"></i></button><button type="button" class="btn btn-outline-dark pull-right" onclick="cart('.$row['code'].')"><i class="fa fa-cart-arrow-down"></i></button></div></div></div>';
$i++;
$count--;
}
echo '</div>';
}
?>
</div><br><br>
<div id="footer">
</div>
<script>
function like($code)
{
alert("like button clicked");
$.ajax({
url: 'insertLike.php',
type: 'POST',
data: {
code: $code
}
/*success: function(msg) {
alert('Email Sent');
} */
});
};
$(function(){
$("#footer").load("footer.html");
});
</script>
</body>
</html>
When I use <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
instead of <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> the output damaged.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> works.
But the original view of the output is
newnavbar.html uses some other script where there is a different version of jquery. I don't sure whether this generates the error or not.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
I view some answer answer with the same error, but nothing solves my problem. For that I have to post a new question with same error. Is it jquery version problem? Or, syntax error problem?
first you should put any scripts in the end of body
for that you should put jquery script in the end of body
As e.g
<body>
<h1> hello world </h1>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
</body>
replace https://code.jquery.com/jquery-3.3.1.slim.min.js with the full jQuery version https://code.jquery.com/jquery-3.3.1.min.js that works.
Hi I have a basic session code for testing which I have uploaded to two different servers.
File1 -
<?php
// Start the session
session_start();
?>
<!DOCTYPE html>
<html>
<body>
<?php
// Set session variables
$_SESSION["favcolor"] = "green";
$_SESSION["favanimal"] = "cat";
echo "Session variables are set.";
?>
</body>
</html>
File2 -
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<body>
<?php
// Echo session variables that were set on previous page
echo "Favorite color is " . $_SESSION["favcolor"] . ".<br>";
echo "Favorite animal is " . $_SESSION["favanimal"] . ".";
?>
</body>
</html>
we can access the session information we set on the first page.
Links for Server 1 :
http://thycart.in/adaptyapp/1.php
http://thycart.in/adaptyapp/2.php
Links for Server 2 :(not working)
http://103.231.209.162:60070/1.php
http://103.231.209.162:60070/2.php
PHP Info Server 1:
http://thycart.in/adaptyapp/phpinfo.php
PHP Info Server 2:
http://103.231.209.162:60070/phpinfo.php
For some reason the session is not working in one server.Please help to find the reason.Thanks
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<body>
<?php
// Echo session variables that were set on previous page
if(isset($_SESSION)) {
echo "Favorite color is " .$_SESSION["favcolor"] . ".<br>";
echo "Favorite animal is " .$_SESSION["favanimal"]. ".";
}
?>
</body>
</html>
i have integrated uploadify with codeigniter.i can't able select images while clicking the select photos.
MY View file
<!DOCTYPE HTML>
<html lang="en-GB">
<head>
<meta charset="UTF-8">
<title>Uploadify V3 & CodeIgniter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="Capsone-System2" >
<!-- Styles -->
<link href="/assets/bootstrap/css/bootstrap.min.css" type="text/css" media="screen" rel="stylesheet"/>
<link href="<?php echo base_url;?>assets/js/jquery/uploadify_31/uploadify.css" type="text/css" media="screen" rel="stylesheet"/>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<!-- Main Content -->
<div class="container">
<h1 class="page-header">Uploadify V3 & CodeIgniter</h1>
<p>This is a simple tutorial demo showing Uploadify V3 working with CodeIgniter 2.1.2</p>
<?php echo form_open_multipart(); ?>
<ul class="unstyled">
<li>
<?php echo form_upload('userfile','','id="userfile"'); ?>
<?php echo (isset($error)) ? $error : ''; ?>
</li>
<li>
<?php echo form_button(array('content'=> 'Upload', 'id'=>'upload-file', 'class'=>'btn btn-large btn-primary')); ?>
</li>
</ul>
<?php echo form_close(); ?>
</div>
<!-- End Of Main Content -->
<!--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>-->
<!--<script>window.jQuery || document.write('<script src="<?php echo base_url;?>assets/js/jquery/jquery-1.8.0.min.js"></script>')</script>-->
<script src="<?php echo base_url;?>assets/js/jquery/uploadify_31/jquery.uploadify-3.1.min.js" type="text/javascript"></script>
<!--<script src="<?php echo base_url;?>assets/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>-->
<script type="text/javascript">
$(document).ready(function () {
var base_url = '<?php echo base_url; ?>';
alert(base_url);
$('#upload-file').click(function (e) {
e.preventDefault();
$('#userfile').uploadify('upload', '*');
alert(base_url);
});
$('#userfile').uploadify({
'debug':true,
'auto':false,
'swf': base_url + 'assets/js/jquery/uploadify_31/uploadify.swf',
'uploader': base_url + 'uploadify_v3/do_upload',
'cancelImg': base_url + 'assets/javascript/jquery/uploadify_31/uploadify-cancel.png',
'fileTypeExts':'*.jpg;*.bmp;*.png;*.tif',
'fileTypeDesc':'Image Files (.jpg,.bmp,.png,.tif)',
'fileSizeLimit':'2MB',
'fileObjName':'userfile',
'buttonText':'Select Photo(s)',
'multi':true,
'removeCompleted':false,
'onUploadError' : function(file, errorCode, errorMsg, errorString) {
alert('The file ' + file.name + ' could not be uploaded: ' + errorString);
}
});
});
</script>
</body>
</html>
My Controller File
I have error uncaught exception: Call to StartUpload failed
<?php if (!defined('BASEPATH')) exit('No direct script access allowed');
/**
* #property CI_Upload $upload
*/
class Uploadify_v3 extends CI_Controller
{
public $view_data = array();
private $upload_config;
function __construct()
{
parent::__construct();
}
public function index()
{
$this->load->helper(array('url', 'form'));
$this->load->view('uploadify_v3', $this->view_data);
}
public function do_upload()
{
$this->load->library('upload');
$image_upload_folder = FCPATH . '/uploads';
if (!file_exists($image_upload_folder)) {
mkdir($image_upload_folder, DIR_WRITE_MODE, true);
}
$this->upload_config = array(
'upload_path' => $image_upload_folder,
'allowed_types' => 'png|jpg|jpeg|bmp|tiff',
'max_size' => 2048,
'remove_space' => TRUE,
'encrypt_name' => TRUE,
);
$this->upload->initialize($this->upload_config);
if (!$this->upload->do_upload()) {
$upload_error = $this->upload->display_errors();
echo json_encode($upload_error);
} else {
$file_info = $this->upload->data();
echo json_encode($file_info);
}
}
}
/* End of file uploadify_v3.php */
/* Location: ./application/controllers/uploadify_v3.php */
I have spent more time..still now i can't fix this error..please help me.
I too had the same problem, it was a security issue because I was hosting the flash .swf file on a separate domain eg: static.mysite.com
Make sure your swf file and post handler script are hosted on the same domain that you are accessing the site from.
Or if you need to add cross domain posting then see here:
http://www.adobe.com/devnet/adobe-media-server/articles/cross-domain-xml-for-streaming.html
I am using CI 2.1.3, having problem with jQuery UI inheritance. Trying to create a ajax gui sortable page nesting.
view/admin/components/page_head.php
<!DOCTYPE html>
<html>
<head>
<title><?php echo $meta_title; ?></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="<?=site_url(config_item('path_bootstrap').'css/bootstrap.min.css');?>" rel="stylesheet" media="screen">
<!-- jQuery -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
if (!window.jQuery) {
document.write('<script src="<?php echo site_url(config_item("path_assets")."js/jquery-1.10.1.js"); ?>"><\/script>');
}
</script>
<script src="<?php echo site_url(config_item('path_bootstrap').'js/bootstrap.min.js'); ?>"></script>
<?php //if((isset($sortable)) AND ($sortable === TRUE)): ?>
<!-- script src="<?php echo site_url(config_item('path_jqueryui').'minified/jquery-ui.min.js'); ?>"></script -->
<script src="<?php echo site_url(config_item('path_assets').'js/jquery-ui.js'); ?>"></script>
<script src="<?php echo site_url(config_item('path_assets').'js/jquery.mjs.nestedSortable.js'); ?>"></script>
<script type="text/javascript">
if (window.jQuery.ui) {
alert('jquery ui found');
}
else {
alert('jquery ui not found');
}
/*if (window.jQuery) {
alert('jquery found');
}
if (window.jQuery.ui) {
alert('jquery ui found');
}
if (window.jQuery.ui.sortable) {
alert('jquery ui sortable found');
}
if (window.jQuery.mjs.nestedSortable) {
alert('jquery nestedSortable found');
}*/
</script>
<?php //endif; ?>
<script src="<?php echo site_url(config_item('path_assets').'js/tinymce/tinymce.min.js'); ?>"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>
view/admin/order.php
<section>
<h2>Order pages</h2>
<p class="alert alert-info">Drag to order pages and then click 'Save'</p>
<div id="orderResult"></div>
<input type="button" id="save" value="Save" class="btn btn-primary" />
</section>
<?php dump($sortable); ?>
<script>
$(function() {
$.post('<?php echo site_url("tutsplus_admin/page/order_ajax"); ?>', {}, function(data)
{
$('#orderResult').html(data);
});
$('#save').click(function()
{
oSortable = $('.sortable').nestedSortable('toArray');
$('#orderResult').slideUp(function()
{
$.post('<?php echo site_url("tutsplus_admin/page/order_ajax"); ?>', { sortable: oSortable }, function(data)
{
$('#orderResult').html(data);
$('#orderResult').slideDown();
});
});
});
});
</script>
order_ajax.php
<?php
//dump($pages);
function get_ol ($array, $child = FALSE)
{
$str = '';
if (count($array)) {
$str .= $child == FALSE ? '<ol class="sortable">' : '<ol>';
foreach ($array as $item) {
$str .= '<li id="list_' . $item['id'] .'">';
$str .= '<div>' . $item['title'] .'</div>';
// Do we have any children?
if (isset($item['children']) && count($item['children'])) {
$str .= get_ol($item['children'], TRUE);
}
$str .= '</li>' . PHP_EOL;
}
$str .= '</ol>' . PHP_EOL;
}
return $str;
}
?>
<?php echo get_ol($pages); ?>
<script type="text/javascript">
$(document).ready(function()
{
$('.sortable').nestedSortable({
handle: 'div',
items: 'li',
toleranceElement: '> div',
maxLevels: 2
});
});
</script>
In order.php jquery, jquery_ui and msj.nestedSortable is succesfully loaded. order_ajax.php is loaded as ajax content. It is not working unless I load jquery ui and msj.nestedSortable script again in order_ajax.php.
Any thoughts?
Script content in a page loaded via AJAX is not beeing executed. Put your script in a *.js-File and load this via jQuery.getScript or change dataType of your AJAX call to script:
$.ajax({
...
dataType: "script",
...
});
From http://api.jquery.com/jQuery.ajax/:
dataType (default: Intelligent Guess (xml, json, script, or html))
Type: String
The type of data that you're expecting back from the server. If none is specified, jQuery will try to infer it based on the MIME type of the response (an XML MIME type will yield XML, in 1.4 JSON will yield a JavaScript object, in 1.4 script will execute the script, and anything else will be returned as a string).
I am going to show $Content in a new window. after some searches I found the following code. but it doesn't open a new window and echoes $content in the same page.
<form method="POST" action=" <?php echo $Content; ?> " target="blank"></form>
update:
THIS IS THE CODE:
<?php
if(isset($_POST['submit']))
{
include 'library/config.php';
include 'library/opendb.php';
$Unit_Code = $_POST['Unit_Code'];
$File_Name = $_POST['File_Name'];
$_SESSION['Unit'] =$Unit_Code;
$_SESSION['file'] =$File_Name;
$query = "SELECT Unit_Code,File_Name, type,size, Content FROM Units WHERE ((Unit_Code = '$Unit_Code')&&(File_Name='$File_Name'))";
$result = mysql_query($query) or die(mysql_error());
list($Unit_Code, $File_Name, $type, $size, $Content) = mysql_fetch_array($result);
header("Content-length: $size");
header("Content-type: $type");
header("Content-Disposition: attachment; filename=$File_Name");
?>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="dblclick.js"></script>
</head>
<body>
<form method="POST" action=" <?php echo $Content; ?> " target="_blank"></form>
</body>
</html>
<?php
include 'library/closedb.php';
exit;
}
?>
It's target="_blank". The underscore is important.
You missed the _
<form action="URL TO POST THE FORM" method="POST" target="_blank">
<?php echo $Content; ?>
</form>
Missing: _ before targetin your HTML attribute: < .. target="_blank">