I have a shop which uses dynamic content. Users can click on checkboxes to view products of specific categories. For this I am using jQuery to get products from another php file (works fine).
shop.php:
<input type="checkbox" class="category_btn" name="cat" id="category-books" value="books">
<input type="checkbox" class="category_btn" name="cat" id="category-dvds" value="dvds">
...
<div id="allProducts">
Load dynamic content with jQuery here...
</div>
loadProducts.php:
<?php
$categories = $_POST['categories'];
$productsData = load_products($categories);
for ($i = 0; $i < $amount; $i++) {?>
<div class="singleproduct">
<a href="product.php?id=<?php echo $productsData[$i]['ID'] ?>"><img
src="images/<?php echo get_image($productsData[$i]['ID']) ?>"
alt=""></a>
<p class="prod-title"><?php echo $productsData[$i]['title'] ?></p>
</div>
<?php }?>
jQuery code (shop.php):
<script>
jQuery(document).ready(function($) {
var checkedCats = [];
$(".category_btn:checked").each(function() {
checkedCats.push($(this).val());
});
$(".category_btn").click(function () {
var arraydata = {"categories[]" : checkedCats};
$.post('loadProducts.php', arraydata, function (data) {
var test = $('#allProducts').html(data);
});
});
};
</script>
Now if a user clicks on a product to view details and then returns to shop.php by using the back-button, he will see the main page of the shop with no dynamic loaded content. Is it possible to save the last view with marked checkboxes and loaded products?
I think history.js is the solution, but I have no idea how to do this. Maybe somebody can help...
Related
I have a code in PHP that prints HTML elements based on the information we got in the database, so if we have for example 8 products the code will print 8 divs with the following elements inside
h1 the id of this element will be the same as the product in the database
input for client name
buy button that send the ID of the H1 to the database
here is some code i made
<?php
while($row=$consulta->fetch())
{
?> <img src="<?php echo $row["Imagen"];?>"style="width:12rem;height:12rem;" alt="Scotter" >
<br>
<div>
<h4 id="<?php echo $row["ID_Scooter"]; ?>"> <?php echo $row["ID_Scooter"]; ?> </h4>
<br>
<?php
echo $row["Nombre"];
?>
<br>
<?php
echo $row["Descripcion"];
?>
<br>
<?php
?>
<button onclick="abrir()">Alquilar</button>
<br>
</div>
<?php
}
?>
JavaScript
function abrir(){
var dialog = document.getElementById('favDialog');
dialog.show();
var id=document.getElementById("heres is where im supposed to get the id of the id i clicked");
alert("div id is="+id);
}
php assing ID for example (3,4,5,6,7) but when i click the button inside the div with id=5 it prints the id=3 no matter which button i click
please note that you've set onclick="abrir()" without passing any specific data!
you have got 2 way to do it:
1- passing data with php:
HTML:
abrir(<?php echo $row["ID_Scooter"]; ?>)
and use it in your js :
function abir(id){
let id_scooter = id;
...
}
2- passing clicked element with js:
HTML:
onclick="abrir(this)"
JS:
function abir(el){
let id_scooter = (el).attr(id);
...
}
I've flexible content based on wordpress page which gives our client opportunities to configure pop-ups in specific page by himselfs.
So the problem is that on one page we've quite a few, let's say infinity numbers of rows of content.
Every specific row has a unique ID created by counting "$i++;".
I'm trying to create a script which will give me the possibility to create unique pop-ups for unique flexible content automatically, based on numbers of current rows.
Here is PHP code
<div class="row">
<?php if( have_rows('service_component') ): $i = 0; ?>
<?php while( have_rows('service_component') ): the_row(); $i++; ?>
<div class="six columns">
<img onclick="openRightMenu()" src="<?php the_sub_field("feature_image"); ?>">
<h3><?php the_sub_field("title"); ?></h3>
<div class="servicesHidden sidenav" id="right_slider_<?php echo $i; ?>">
×
<?php the_sub_field("services"); ?>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
Code above works correctly: content is generated and every div is unique:
<div class="servicesHidden sidenav" id="right_slider_<?php echo $i; ?>">
So next step is to create javascript. Code below also works properly, but only on one unique ID.
<script>
function openRightMenu() {
document.getElementById("right_slider_1").style.width = "33%";
document.getElementById("main").style.marginRight = "33%";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
function closeRightMenu() {
document.getElementById("right_slider_1").style.width = "0";
document.getElementById("main").style.marginRight = "0";
document.body.style.backgroundColor = "white";
}
</script>
Question is: how to modify function above to to let it display and hide unique content endlessly?
You could pass the id into the function
function openRightMenu(id) {
document.getElementById(id).style.width = "33%";
...
}
And in your html
<img onclick="openRightMenu('right_slider_<?php echo $i; ?>')" src="<?php the_sub_field("feature_image"); ?>">
I'm trying to get different data to display based on a select value. This select is in a Bootstrap modal which I am displaying different products by running a loop. I already have all of the data that I need without running an AJAX request, although I think that I may need to run one to display the data now.
What I'm trying to do is:
Output the amount of stock from row['size_sm'] if I select small or from row[size_lg] if I select large and so on.
Hide size from the select if the size is out of stock. My method does not seem to be working as options are still showing even when they are out of stock.
Here is my code. I'm passing the value from the database via the div classes inside of the link clicked to open the modal that do not show on the page as they are empty but it does not seem to work for the stock sizes.
I don't really understand AJAX, if that is the way to go about this, and I am stuck. What is my best route here? I don't really want to build the whole modal again as I have a carousel inside the body which works fine displaying
pic1, pic2, pic3 from the database.
$(document).ready(function() {
$(".t_shirt_pic_main").on('click', function() {
// // get the title of current item and add to modal from the "value" of the item a link that opens modal
var title = $(this).attr("value");
// get the image by going inside the a link to the image.. faster than first child
var main_pic = $(this).find('.main_img').attr('src');
var second_pic = $(this).find('.pic2').attr('rel');
var third_pic = $(this).find('.pic3').attr('rel');
var price = $(this).find('.price').attr('rel');
var stock_xl = $(this).find('.stock_xl').attr('rel');
var stock_lg = $(this).find('.stock_lg').attr('rel');
var stock_md = $(this).find('.stock_md').attr('rel');
var stock_sm = $(this).find('.stock_sm').attr('rel');
// get the title of current item and add to modal from the "value" of the item a link
$("#modal_title").text(title);
// change modal pics to the ones from the clicked on item getting values from hidden inputs
$("#first_slide").attr('src', main_pic);
$("#second_slide").attr('src', second_pic);
$("#third_slide").attr('src', third_pic);
// add price in the bottom of modal
$('#modal_price').html('£' + price);
if (stock_sm == 0) {
$('#option_small').hide()
}
if (stock_sm != 0) {
$('#option_small').show()
}
if (stock_md == 0) {
$('#option_medium').hide()
}
if (stock_md != 0) {
$('#option_small').show()
}
if (stock_lg == 0) {
$('#option_large').toggle()
}
if (stock_lg != 0) {
$('#option_large').show()
}
if (stock_xl == 0) {
$('#option_extralarge').toggle()
}
if (stock_xl != 0) {
$('#option_extralarge').show()
}
$("#t_shirt_and_jumper_modal").modal('show');
});
});
while($row = mysqli_fetch_assoc($result)){ ?>
<div class="col-lg-3 col-md-6 products">
<a class="t_shirt_pic_main" href="javascript:void(0)" value="<?php echo $row['title'] ?>" rel="<?php echo $row['id'] ?>">
<!-- hidden values to pass to jquery for the modal -->
<div class="stock_xl" rel="<?php echo $row['size_xl'] ?>"></div>
<div class="stock_lg" rel="<?php echo $row['size_lg'] ?>"></div>
<div class="stock_md" rel="<?php echo $row['size_md']; ?>"></div>
<div class="stock_sm" rel="<?php echo $row['size_sm'] ?> "></div>
<div class="pic2" rel="<?php echo $row['image_2'] ?>"></div>
<div class="pic3" rel="<?php echo $row['image_3'] ?>"></div>
<div class="price" rel="<?php echo $row['price'] ?>"></div>
<img class="img-fluid main_img" src="<?php echo $row['image_1'] ?> ">
</a>
<h5 class="item_title"><?php echo $row['title'] ?></h5>
<p class="price_para">£<?php echo $row['price'] ?></p>
</div>
<?php include "includes/t_shirt_and_jumper_modal.php" ?>
<?php } ?>
<!-- Here is the modal i thought it would be easier to read putting it underneath instead of in the loop -->
<div class="modal-footer">
<form action="basket.php" method="post">
<div class="form-group">
<label for="size">Size</label>
<? here i would like to hide the size from the select if the stock is empty ?>
<select name="size" id="size">
<option id="option_small" value="sm">small</option>
<option id="option_medium" value="md">medium <span id="available"></span></s>
</option>
<option id="option_large" value="lg">large <span id="available"></span></s>
</option>
<option id="option_extralarge" value="xl">x-large <span id="available"></span></s>
</option>
</select>
</div>
<? HERE IS WHERE I WANT THE INFO $row[size_selected] to display once i choose a size. ?>
<p> Available: <span id="available"> </span> </p>
<div class="form-group">
<label for="quantity">Quantity</label>
<input type="text" id="quantity" name="quantity"> <br>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary"> Add to basket <i class="fa fa-shopping-basket" aria-hidden="true"></i></button>
</div>
</form>
</div>
</div>
</div>
sorted now i was able to do it without a ajax call and just by passing the values via div attributes it was still holding the id from the last item clicked on as it was in a loop and i was able to fix it with jquery and javascript i used on change in the select to display amounts of stock and the .remove to clear the modal of previous item when it was closed here is the code i used incase anybody else has the same problem ` // size
$('#size').change(function(){
var selected_size = $(this).children("option:selected").val();
if(selected_size == "sm"){
$('#display_stock').html( stock_sm )
};
if(selected_size == "md"){
$('#display_stock').html( stock_md )
};
if(selected_size == "lg"){
$('#display_stock').html( stock_lg )
};
if(selected_size == "xl"){
$('#display_stock').html( stock_xl )
};
});
// clears modal so that we dont pick up ids from previously clicked on stock
//and so select size returns to please choose
$('#t_shirt_and_jumper_modal').on('hidden.bs.modal', function () {
// location.reload();
setTimeout(function(){
$('#t_shirt_and_jumper_modal').remove();
},500)
});`
I have a project in which I am displaying a button tag in a while loop. On every button click I want to display an alert box with the respective UserId. Here is my code:
<?php
$data = mysql_query("Select RegisterId,FName,Image1 from Information where RegisterID='$profileMonth1'") or die(mysql_error());
while ($dis1 = mysql_fetch_array($data)) {
?>
<div id="demo1" value="<?php echo "$RegisterId" ?>">
<button onClick="validate()">Show Interest</button>
</div>
<?php } ?>
Here is my validate function:
function validate1(id2)
{
// var id2;
id2 = document.getElementById('demo2').getAttribute('value');
alert(id2);
}
But it is always showing me last user id .. whereas i want to display userid for every user on everyclick.
Can someone help?
Here man, the function you were calling was undefined validate1, also you don't need to get any arguments on your function declaration, since you are not passing any arguments when you invoke it.
<?php
$data = mysql_query("Select RegisterId,FName,Image1 from Information where RegisterID='$profileMonth1'") or die(mysql_error());
while ($dis1 = mysql_fetch_array($data)) {
?>
<div id="demo" value="<?php echo "$RegisterId" ?>">
<button onClick="validate()">Show Interest</button>
</div>
JS
function validate(){
var id2 = document.getElementById('demo').getAttribute('value');
alert(id2);
}
try this in your code
HTML:
<button onClick="validate('<?php echo $RegisterId; ?>')">Show Interest</button>
Javascript:
function validate(id2)
{
alert(id2);
}
Your code needs some modifications.
Firstly, you have made a provision to send id to javascript function, but, you are not passing id to it.
PHP
<?php
$data = mysql_query("Select RegisterId,FName,Image1 from Information where RegisterID='$profileMonth1'") or die(mysql_error());
while ($dis1 = mysql_fetch_array($data)) {
?>
<div id="demo1" value="<?php echo $dis1['RegisterId'];?>">
<button onClick="validate('<?php echo $dis1['RegisterId'];?>')">Show Interest</button>
</div>
<?php } ?>
Javascript:
function validate1(id2) {
// var id2;
//id2 = document.getElementById('demo2').getAttribute('value');
alert(id2);
}
With this code, your clicks shouldn't even return the last id. Your javascript function is not looking good.
This should work;
<?php
$data = mysql_query("Select RegisterId,FName,Image1 from Information where RegisterID='$profileMonth1'") or die(mysql_error());
while ($dis1 = mysql_fetch_array($data)) {
?>
<!-- removed id attribute, as they're unique, you can't set it to every div.
If you really need id attribute, you can set one by using your RegisterId (e.g. id="demo-<?php echo $RegisterId; ?>)
And moved value attribute to button tag, it's much more useful in it. -->
<div>
<button onClick="validate(this)" value="<?php echo "$RegisterId" ?>">Show Interest</button>
</div>
<?php } ?>
Javascript
function validate(element){
alert(element.value)
}
This way, you can use it in other stuff much easier.
I have products in table I wish to display some when page load and remain data should display on button click, I have set limit as 6 per page, when page loading it is displaying first six rows and if I click on Load More button it is displaying another six rows here problem coming after got 12 rows from table when I click again on Load More button it is not working even I have more data in table, I have cross checked parameters also, it is fine parameters also sending with request. please help me how to solve this.
NOTE: when I test this script in core php it is working fine, when I implement this script in codeigniter first time click load more data working second time when i click it is not wokring.
Javascript Code Block
$('.more').click(function(){
var ID = $(this).attr("id");
var cats = $('input[name=cats]').val();
$("#more"+ID).html('<img src="<?=ROOT;?>resources/moreajax.gif" />');
$.post('<?=ROOT;?>product/dataLoad', {id:ID,cats:cats}, function(data){
if(data)
{
$('ol#updates').append(data);
$("#more"+ID).remove();
}
else
{
$(".morebox").html('The End');// no results
}
});
return false;
});
codeigniter controller function
public function dataLoad() {
if(isset($_POST['id']))
{
$lastmsg=$_POST['id'];
$cats = $_POST['cats'];
$query=mysql_query("select * from product where id > '".$lastmsg."' AND category_id IN ($cats) order by id asc limit 4");
$numrows = mysql_num_rows($query);
while($ob = mysql_fetch_array($query))
{
?>
<div>
<p>ID: <?=$ob['id']; </p>
<p>NAME: <?=$ob['name']; </p>
</div>
<?php
}//while
?>
<?php
if($numrows > 0)
{
?>
<div id="more<?php echo $ob['id']; ?>" class="morebox" style="clear:both">
<input type="hidden" name="cats" value="<?=$cats;?>" />
Load More
</div>
<?php
}
}
?>
product page code
<ol class="timeline" id="updates">
$str = implode(",",$cats);
$query = "select * FROM product WHERE category_id IN (".$str.") order by id asc limit 4";
$result=mysql_query($query);
$numrows = mysql_num_rows($result);
while($ob = mysql_fetch_array($result))
{
?>
<div>
<p>ID: <?=$ob['id']; </p>
<p>NAME: <?=$ob['name']; </p>
</div>
<?php
}//while
?>
</ol>
<?php
if($numrows > 0)
{
?>
<div id="more<?php echo $ob['id']; ?>" class="morebox" style="clear:both">
<input type="hidden" name="cats" value="<?=$cats;?>" />
Load More
</div>
<?php
}
?>
I solved this problem insted of this
$('.more').click(function(){
$("#updates").on("click",".more",function(){