Controller:
In that i am used two table category and secound sub_category
In category I am fetched category name to display dynamically
In Sub_Category I am fetched image,price,title
public function product_grid()
{
$id= $this->input->post('dataid');
echo 'Data-Id is form controller: '.$id ;
$this->PizzaUp_User_model->getid($id);
$data['res'] = $this->PizzaUp_User_model->select('category');
$data['rs'] = $this->PizzaUp_User_model->get_cetegory('sub_category');
$this->load->view('product_grid',$data);
}
View File
<?php
foreach ($res as $ro)
{
?>
<div data-filter="<?php echo $ro['category_id']; ?>" data_id="<?php echo $ro['category_id']; ?>" name="id" class="cbp-filter-item button_id">
<?php echo $ro['category_name']; ?><div class="cbp-filter-counter"></div>
</div>
<?php
}
?>
</div>
<div id="grid-container" class="cbp" >
<?php foreach ($rs as $row)
{
?>
<div class="cbp-item <?php echo $ro['category_id']; ?>">
<div class="cbp-caption">
<div class="cbp-caption-defaultWrap">
<img src="<?php echo base_url('image/category/'.$row['image']); ?>" alt="">
</div>
<div class="cbp-caption-activeWrap">
<div class="cbp-l-caption-alignCenter">
<div class="cbp-l-caption-body">
Add to cart
view larger
</div>
</div>
</div>
</div>
<div class="cbp-l-grid-projects-title"><?php echo $row['category_name']; ?></div>
<div class="cbp-l-grid-projects-desc"><?php echo $row['sub_category_title']; ?></div>
<div class="cbp-l-grid-projects-price"><?php echo $row['R_price']; ?></div>
</div>
<?php
}
?>
fetch and pass id using Ajax
<script type="text/javascript">
$(document).ready(function() {
$(".button_id").click(function(){
var dataid=$(this).attr('data_id');
$.ajax({
url: '<?php echo site_url(); ?>/Home/product_grid',
type: "POST",
data: {
dataid: dataid
},
success: function(data) {
alert(data);
},
error: function(xhr, status, error) {
var error=xhr.responseText;
alert(error);
}
});
});
});
</script>
I dont know php but guess that your controller function missing parameter
public function product_grid()
to
public function product_grid($dataid)
Related
I have code for loading more content on button click. And I have another for loading on scroll. The code for the button loads fine. The code for scroll duplicates the new loaded content like 3 times. Both codes use the same php load file. All are listed below. What is wrong with the scroll code? All help is appreciated. FYI, I am not interested in Jquery infinite scroll, or any other plugin. Thanks!
LOAD ON CLICK WITH BUTTON
<!DOCTYPE html>
<html>
<head>
<title>Load More Button</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div>
<h2 align="center">Load More Button</h2>
<div style="height:10px;"></div>
<div id="load-content">
<?php
$lastid = '';
include('connection.php');
$query = mysqli_query($connection, "select * from transactions order by id asc limit 5");
while ($row = mysqli_fetch_array($query)) {
?>
<div>
<div>
<?php echo $row['id']; ?>
<br>
<?php echo $row['description']; ?>
<br>
<?php echo $row['promorefnum']; ?>
<br><br>
</div>
</div>
<?php
$lastid = $row['id'];
}
?>
<div id="remove">
<div style="height:10px;"></div>
<div>
<div>
<div id="load-more" data-id="<?php echo $lastid; ?>">Load More</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$(document).on('click', '#load-more', function() {
var lastid = $(this).data('id');
$('#load-more').html('Loading...');
$.ajax({
url: "load-data.php",
method: "POST",
data: {
lastid: lastid,
},
success: function(data) {
if (data != '') {
$('#remove').remove();
$('#load-content').append(data);
} else {
$('#load-more').html('End Of Data');
}
}
});
});
});
</script>
</body>
</html>
LOAD MORE ON SCROLL
<!DOCTYPE html>
<html>
<head>
<title>Load More Scroll</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div>
<h2 align="center">Load More Scroll</h2>
<div style="height:10px;"></div>
<div id="load-content">
<?php
$lastid = '';
include('connection.php');
$query = mysqli_query($connection, "select * from transactions order by id asc limit 11");
while ($row = mysqli_fetch_array($query)) {
?>
<div>
<div>
<?php echo $row['id']; ?>
<br>
<?php echo $row['description']; ?>
<br>
<?php echo $row['promorefnum']; ?>
<br><br>
</div>
</div>
<?php
$lastid = $row['id'];
}
?>
<div id="remove">
<div style="height:10px;"></div>
<div>
<div>
<div id="load-more" data-id="<?php echo $lastid; ?>"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
window.onscroll = function() {
if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight - 2) {
var lastid = $('#load-more').data('id');
$('#load-more').html('Loading...');
$.ajax({
url: "load-data.php",
method: "POST",
data: {
lastid: lastid,
},
success: function(data) {
if (data != '') {
$('#remove').remove();
$('#load-content').append(data);
} else {
$('#load-more').html('End Of Data');
}
}
});
}
}
});
</script>
</body>
</html>
PHP CODE / LOAD FILE
<?php
sleep(1);
include('connection.php');
if (isset($_POST['lastid'])) {
$lastid = $_POST['lastid'];
$query = mysqli_query($connection, "select * from transactions where id > '$lastid' order by id asc limit 10");
if (mysqli_num_rows($query) > 0) {
while ($row = mysqli_fetch_array($query)) {
?>
<div>
<?php echo $row['id']; ?>
<br>
<?php echo $row['description']; ?>
<br>
<?php echo $row['promorefnum']; ?>
<br><br>
</div>
<?php
$lastid = $row['id'];
}
?>
<div id="remove">
<div style="height:10px;"></div>
<div>
<div>
<div id="load-more" data-id="<?php echo $lastid; ?>">Load More</div>
</div>
</div>
</div>
<?php
}
}
?>
Try this check
<head>
<title>Load More Scroll</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div>
<h2 align="center">Load More Scroll</h2>
<div style="height:10px;"></div>
<div id="load-content">
<?php
$lastid = '';
include('connection.php');
$query = mysqli_query($connection, "select * from transactions order by id asc limit 11");
while ($row = mysqli_fetch_array($query)) {
?>
<div>
<div>
<?php echo $row['id']; ?>
<br>
<?php echo $row['description']; ?>
<br>
<?php echo $row['promorefnum']; ?>
<br><br>
</div>
</div>
<?php
$lastid = $row['id'];
}
?>
<div id="remove">
<div style="height:10px;"></div>
<div>
<div>
<div id="load-more" data-id="<?php echo $lastid; ?>"></div>
</div>
</div>
</div>
<span id="loading">Loading...</span>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$("#loading").hide();
window.onscroll = function() {
if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight - 2) {
var lastid = $('#load-more').data('id');
if($("#loading").css('display') == 'none') {
$("#loading").show();
$.ajax({
url: "load-data.php",
method: "POST",
data: {
lastid: lastid,
},
success: function(data) {
if (data != '') {
$('#remove').remove();
$('#load-content').append(data);
$("#loading").hide();
} else {
$('#load-more').html('End Of Data');
}
}
});
}
}
}
});
</script>
</body>
</html>
I've been struggling to create a shopping cart using ajax. I'm new to codeigniter and ajax but it seems the request from ajax is successful since the alert('success') in success:function is working. But I can't output data from the controller. At the place where I want to output cart I just get "welcome to xamp window" Could you tell me what I'm doing wrong?
Product view:
<?php if(count($data)): ?>
<?php foreach ($data as $item) { ?>
<div class="shop-item">
<div class="image">
<a href="<?php echo base_url(); ?>index.php/items/item1">
<img class="shop-item-image" src="<?php echo base_url("uploads/".$item->image) ?>" alt="Ariana Grande: thank u, next exclusive clear/pink lp"/>
</a>
<?php if($item->status=='sold'): ?>
<p class="sold-btn">Sold out</p>
<?php else: ?>
<button class="cart-btn" data-productid="<?php echo $item->id;?>" data-productartist="<?php echo $item->artist;?>"
data-producttitle="<?php echo $item->title;?>" data-productprice="<?php echo $item->price;?>" data-productimage="<?php echo $item->image;?>">
<i class="fa fa-shopping-cart"></i>Add to cart</button>
<?php endif; ?>
</div>
<a class="artist" href="#">
<div class="shop-item-details">
<span class="brand"><?php echo $item->artist; ?></span>
</div>
</a>
<div class="title">
<span class="format double-vinyl-lp"><?php echo $item->title; ?></span>
</div>
<div>
<span class="price">€<?php echo $item->price; ?></span>
</div>
</div>
<?php } ?>
<?php endif; ?>
</div>
Jquery
$(document).ready(function() {
$('.cart-btn').click(function () {
var product_id = $(this).data("productid");
var product_artist = $(this).data("productartist");
var product_title = $(this).data("producttitle");
var product_price = $(this).data("productprice");
var image = $(this).data("productimage");
var quantity = 1;
$.ajax({
url :'/index.php/cart/add_to_cart',
method : "POST",
data : {product_id: product_id, product_artist: product_artist, product_title: product_title, product_price: product_price, quantity:quantity, image:image},
success: function(data){
alert(product_artist);
$('#detail-cart').html(data);
},
});
});
$('#detail-cart').load("<?php echo site_url('index.php/cart/load_cart');?>");
})
Controller
public function add_to_cart() {
$data = array(
'id' => $this->input->post('product_id'),
'name' => $this->input->post('product_artist'),
'price' => $this->input->post('product_price'),
'qty' =>1
//'title'=>$this->input->$_POST('product_title'),
//'image'=>$this->input->$_POST('image')
);
$this->cart->insert($data);
print_r(($this->cart->total_items()));
echo $this->show_cart();
}
public function show_cart(){
$output = '';
$no = 0;
foreach ($this->cart->contents() as $items) {
$no++;
$output .='
<div>
<a href="">
<p>hello</p>
</a>
</div>
<div class="description">
<a class="artist" href="">'.$items['name'].'</a>
<p class="mini-total"><span>'.number_format($items['qty']).'</span>×<span>'.number_format($this->cart->total()).'</span></p>
remove
</div>
<div class="quantity">
<i class="fa fa-chevron-up"></i>
<i class="fa fa-chevron-down"></i>
</div>
';
}
return $output;
}
public function load_cart(){
echo $this->show_cart();
}
}
cert view I want to display it in a different view as a part of the header
<div id="detail-cart" class="mini-cart-item">
</div>
I figured the problem. the problem was in url
url :'/index.php/cart/add_to_cart'
didn't work; neither:
url :'<?phph echo base_url();?>index.php/cart/add_to_cart
what i did was declaring :
<script>
base_url= '<?phph echo base_url();?>index.php/cart/add_to_cart'
</script>
and then set url as
url: base_url+'index.php/cart/add_to_cart'
and it worked;
I have several records from my database displayed like this in HTML.
<?php foreach($adverts_list as $ad) { ?>
<!--anuncio 1-->
<div class="card all ad-isotope <?php echo $ad->ad_categorie; ?>">
<div class="card-body">
<div class="card-title">
<div class="card-info">
<i class="fa fa-tags"></i>
<p class="card-tag"><?php echo $ad->categorie_name; ?></p>
<?php if($ad->subCategorie_id != 10) { ?>
<p class="card-subcat"> <?php echo $ad->subCategorie_display; ?></p>
<?php } ?>
</div>
</div>
<div class="new-symbol">
<p>
<?php if($ad->ad_nouveau == 1) {
echo "nouveau";
} ?>
</p>
</div>
<div class="card-subtitle">
<p class="db-title"><?php echo $ad->ad_title; ?></p>
<p class="db-subtitle"><?php echo $ad->ad_subtitle; ?></p>
</div>
<div class="card-readmore">
<a data-toggle="modal" href="#ad-detail-modal-<?php echo $ad->ad_id; ?>">
<p class="read-more">voir l'annonce</p>
</a>
</div>
</div>
</div>
But i wan't to filter it according to a click in a button. I'll have 10 buttons, each corresponding to a category. I wan't to extract the innerHTML from the button, and match it to the records with the same category.
I'm stuck here
//save in variable all elements refering to categories
var categorias = document.querySelectorAll("a.link");
//a loop to create event on click of each element
for(var i = 0; i < categorias.length; i++) {
categorias[i].addEventListener("click", function() {
//save innerHTML
var categoria = this.innerHTML;
//make ajax call
$.ajax({
url: "index.php",
type: "GET",
dataType: "html",
success: function(response) {
}
});
});
}
How can i make the ajax call to search for the records that have the saved category, and display only those?
So this the code, and I want to append the <article> tag with data from the database to display a username and post, but then the next entry should be in the next line.
<div id ="test">
<article id="main">
<p><div id ="post"><?php //echo $row ['POST']; ?></p></div>
<p><?php $p= $row['POST']; ?></p>
<a href="http://www2.cs.uregina.ca/~khanna2g/public_html1/hashtagresult.php?hs=<?php echo $row['HASHTAG']; ?>">
<?php
$hh=$row['HASHTAG'];
if(strlen($hh)>14){
echo "#".$hh;
}
else{
echo "";
}
?>
</a>
<?php
$sqlw = "select * from A4_Comment WHERE POST ='$p'";
$result = mysqli_query($conn, $sqlw);
while ($row = mysqli_fetch_assoc($result)) {?>
<article class = "comment">
<?php
echo $row['EMAIL']." :- ";
echo $row ['Comment'];
?>
<br/><br/>
</article>
<?php }?>
</article>
</div>
This is the whole jQuery:
$(document).ready(function(){
setInterval(d,6000);
});
function d(){
$.ajax({
url: 'homeajax.php',
type: 'get',
dataType: 'json',
success: function(data){
console.log(data[0].pt);
var post=document.getElementById("post");
var main=document.getElementById("main");
var test=document.getElementById("test2");
var i=0;
for(i=data.length-1;i>0;i--){
var r=document.createTextNode(data[i].pt);
main.appendChild(r);
//test.appendChild(main);
}
}
});
}
I am only showing posts because it was messy, but it does not show the next post in another line or in another <article> tag.
I'm trying to make it so when I click a span icon it will send the article_id to my php sql page which deletes my article, I'm using jQuery Ajax to send the id, the id sends alright on the jQuery side but after the http post request is done my table row is still there, can anyone see if somethings wrong with my code, thanks in advance!
<?php
$sql_categories = "SELECT art_id, art_title, art_company, art_cat_id, art_sta_id, art_date, art_rating, art_price, cat_id, cat_name, sta_id, sta_name
FROM app_articles LEFT JOIN app_categories
ON app_articles.art_cat_id = app_categories.cat_id
LEFT JOIN app_status
ON app_articles.art_sta_id = app_status.sta_id
ORDER BY art_order ASC";
if($result = query($sql_categories)){
$list = array();
while($data = mysqli_fetch_assoc($result)){
array_push($list, $data);
}
foreach($list as $i => $row){
?>
<div class="row" id="page_<?php echo $row['art_id']; ?>">
<div class="column one">
<span class="icon-small move"></span>
<span class="icon-small edit"></span>
<span id="<?php echo $row['art_id']; ?>" class="icon-small trash"></span>
</div>
<div class="column two"><p><?php echo $row['art_title']; ?></p></div>
<div class="column two"><p><?php echo $row['art_company']; ?></p></div>
<div class="column two"><p><?php echo $row['cat_name']; ?></p></div>
<div class="column one"><p><?php echo $row['art_date']; ?></p></div>
<div class="column one"><p><?php echo $row['art_rating']; ?></p></div>
<div class="column one"><p><?php echo $row['art_price']; ?></p></div>
<div class="column one"><p><?php echo $row['sta_name']; ?></p></div>
<div class="column one"><span class="icon-small star"></span></div>
</div>
<?php
}
}
else {
echo "FAIL";
}
?>
jQuery
$(document).ready(function(){
$(".trash").click(function(){
var del_id = $(this).attr('id');
$.ajax({
type:'POST',
url:'ajax-delete.php',
data: 'delete_id='+del_id,
success:function(data) {
if(data) {
}
else {
}
}
});
});
});
PHP mySQL Statement
if(isset($_POST['delete_id'])) {
$sql_articles = "DELETE FROM app_articles WHERE art_id = ".$_POST['delete_id'];
if(query($sql_articles)) {
echo "YES";
}
else {
echo "NO";
}
}
else {
echo "FAIL";
}
?>
the reason your row is still there because AJAX call does not refresh the page. If you want your row to be removed you gotta do something like:
ASSUMING that your span click event is inside the row
$(".trash").click(function(){
var del_id = $(this).attr('id');
var rowElement = $(this).parent().parent(); //grab the row
$.ajax({
type:'POST',
url:'ajax-delete.php',
data: {delete_id : del_id},
success:function(data) {
if(data == "YES") {
rowElement.fadeOut(500).remove();
}
else {
}
}
});
Replace:
data: 'delete_id='+del_id,
with:
data: delete_id : del_id,