Develop Reference

How to Write a Function that Lists Products in a Table Side-by-Side

I have a script that allows users on my e-commerce site to select 3 products and it highlights the products as they select.
How can I grab the $pro_image, title, desc, etc. of the 3 products selected and put them into a table for side-by-side view?
I am assuming we will somehow need to check for the $pro_id that is selected to identify each product separately?
<div class="col-md-10">
<h4>Not sure which product to choose? <br> Select up to 3 and compare side-by-side.</h4>
<div class="col-md-2">
<button type="compare" class="btn btn-success" name="submit-compare">Compare</button>
</div>
<div class="col-md-12">
<?php getpcatpro();
$get_products = "SELECT * FROM products ORDER BY RAND() LIMIT 0,9";
$run_products = mysqli_query($con,$get_products);
while($row_products=mysqli_fetch_array($run_products)){
$pro_id = $row_products['product_id'];
$pro_title = $row_products['product_title'];
$pro_img1 = $row_products['product_img1'];
$pro_link = $row_products['product_link'];
echo "
<div class='col-md-4 col-sm-6'>
<div class='product' onclick='highlight(this)'>
<center>
<img class='img-responsive' src='admin_area/product_images/$pro_img1'>
</center>
<div class='text'>
<center>
<a href='$pro_link'> $pro_title </a>
</center>
</div>
</div>
</div> ";
}
?>
<script>
var selected_items = 0;
function highlight(target) {
if(target.style.border == ""){
if(selected_items < 3){
target.style.border = "1px solid red";
selected_items += 1;
}
} else{
target.style.border = "";
selected_items -= 1;
}
}
</script>
</div>
</div>

Firstly, there's no button type called 'compare', please stick to standards, you shouldn't put random things into these attributes, you can create your own if need be (which I do not think you need to). See here for the three types you are allowed: https://www.w3schools.com/tags/att_button_type.asp (you should just use 'button')
Second, do not add styles through JS, you will cause an entire repaint every time you change a pixel. Instead, toggle class names on the class attribute of an element, let CSS do the work of styling, and JS do the work of interaction.
Thirdly, move all 'PHP' to the top of your script (such as defining your SQL statement and fetching the result of it) rather than having these things interspersed within HTML (just use PHP later in the document to build HTML from the PHP variables at the top of the script), such as looping through your result set to build out the HTML, not to perform important tasks such fetching the data itself, this will help you track whats doing what where so you don't tie yourself up in IF statements etc.
OK, Create a function, bound to your compare button, that toggles the state of an element. Instead of 'highlighting' using styles, toggle a class 'compare' on the product parent container:
<style>
.product.compare{
border: 1px solid red;
}
</style>
<script>
$('.btn.compare').click(function(){
$(this).closest('.product').toggleClass('compare');
});
</script>
<div class='products'>
<div class='product' data-id='1'>
<h2>A Product</h2>
<button class='btn compare'>compare</button>
</div>
<div class='product' data-id='2'>
<h2>Another Product</h2>
<button class='btn compare'>compare</button>
</div>
</div>
This will basically, when the button is clicked, find the parent element with class '.product' then toggle the class '.compare' on it, so you should have .product.compare
You'll need to design your table to have fixed rows with class names, like so:
<table class='comparison'>
<thead>
<tr class='product-title'></tr>
</thead>
<tbody>
<tr class='product-price'></tr>
</tbody>
</table>
Once you have products with a toggled state (a class has been added which both highlights the row with CSS visibly, but also flags it for comparison to jQuery, create a new button and method for it to call to build the comparison table
<button class='btn goCompare'>Go Compare</button>
$(function(){
$(".btn.goCompare").on('click', function(e){
e.preventDefault();
buildComparisonTable();
});
});
function buildComparisonTable(){
var comparisonTableBody = $('table.comparison tbody');
var comparisonTableBodyProductTitleCol = $('table.comparison thead tr.product-title');
var comparisonTableBodyProductPriceCol = $('table.comparison tbody tr.product-price');
comparisonTableBody.find('.product-col').remove();
$('.product.compare').each(function(){
var id = $(this).attr('data-id');
var title = $(this).attr('data-title');
var price = $(this).attr('data-price');
comparisonTableBodyProductTitleCol.append('<th class="product-col">'+title+'</th>');
comparisonTableBodyProductPriceCol.append('<td class="product-col">'+price+'</td>');
});
}
The choice is yours, but think about how you can cleverly and correctly mark up your pages to be easily read by your scripts. You can either stuff all of the product data into attributes on a parent element:
<div class='product' data-id='1' data-title='A Product' data-price='$10.00' data-primary-category='Homeware'>
<h2>A Product</h2>
<button class='btn compare'>compare</button>
</div>
Or you can add a class to each element that has the data you intend to gleam:
<div class='product' data-id='1'>
<h2 class='product-title'>A Product</h2>
<span class='product-price'>$10.00</span>
<span class='product-category'>Homeware</span>
<img class='product-img' src='/images/product-1.jpg' />
</div>
Now you can target what you want easily and get information from it using proper class names, a considered layout, correct use of technologies and a simple approach. This code-pen illustrates: https://codepen.io/anon/pen/voBKgV

Why would jQuery prependTo duplicate the element(s) I'm moving?

tl;dr: Here is a recording of my problem where I set a breakpoint, reload the page and step through the code: http://recordit.co/uNtqr31G0e
I created this code a few weeks ago and it's been working perfectly, but after checking the website today (and messing with some unrelated owl-carousel JavaScript) any elements on our product page moved with insertAfter or prependTo are showing twice in the new location once the JavaScript executes. This was working perfectly yesterday though.
Embedded is the stripped down version of the code from the product page that I'm modifying, but the code works fine using StackOverflows code editor & Codepen.io
$(document).ready(function() {
var shoppingCartIcon = $('.describe-list-icon .fa-shopping-cart');
var pricingDescribeList = shoppingCartIcon.closest('.describe-list');
pricingDescribeList.addClass('pricing');
pricingDescribeList.prependTo('.content');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
</div>
<div class="describe-list">
<div class="describe-list-icon text-center">
<i class="fa fa-shopping-cart"></i>
</div>
<div class="describe-list-content">
<p>$229.99</p>
<p></p><div id="book_button_partyz_id_73847" class="button_book" style="cursor:pointer; display:inline-block" onclick="if(navigator.cookieEnabled){if(typeof last_item_container_id != "undefined") { document.getElementById("container_" + last_item_container_id).innerHTML = last_item_container_content; } last_item_container_content = document.getElementById("container_partyz_id_73847").innerHTML; last_item_container_id = "partyz_id_73847"; document.getElementById("container_partyz_id_73847").innerHTML = "<div id=\"item_container\"> </div>"; ajax_link("item_container","store.item.calendar?root_path=&responsive=1&show_instructions=1&show_start_form=1&itemid=partyz_id_73847","post_info=1"); this.style.display = "none";}else{alert("Cookies are not enabled. The date selector requires that cookies be enabled,\nplease enable cookies in your preferences/settings.");}"><nobr>Add to Cart</nobr></div><br><p></p>
</div>
</div>
Codepen Link: https://codepen.io/CodeBradley/pen/oMYzoB
The product page I'm referring to: https://partyz.ourers.com/items/dunk_tank/
The actual JavaScript:
https://files.sysers.com/cp/upload/partyz/editor/full/main.js

change a specific string inside html with a javascript variable

i know that there is similiar question like mine here, but sadly not of them seems to work, anyway this is my situation;
i have multiple specific html string that i would change with a variable
the var:
var modelstring="something";
the HTML:
<div class="caratteristichedesk" style="position: relative; text-align: center;font-family: 'corporate_s_reg';height:200px">
<img class="pointdesk" src="img/pointers.png">
<div style="position:absolute;top:60px;width:200px;left:5px;">Verrai ricontattato entro 24 ore per confermare i tuoi dati.</div>
<div style="position:absolute;top:60px;width:200px;left:235px;">Il dealer ti richiamerà per confermare l’appuntamento.</div>
<div style="position:absolute;top:60px;width:250px;left:435px;">Vivi l’esperienza di guida a bordo <br>della MODELLO.</div>
</div>
i was looking for a very simple way to change the "MODELLO" string with my var above, anyone have an advice? thank you

Here's a jquery free way to do it.
var modelstring = "something",
replaceSelector = document.querySelectorAll('.toReplace'),
replaceCount;
for(replaceCount = 0; replaceCount < replaceSelector.length; replaceCount++) {
replaceSelector[replaceCount].innerHTML = modelstring;
}
<div class="caratteristichedesk" style="position: relative; text-align: center;font-family: 'corporate_s_reg';height:200px">
<img class="pointdesk" src="img/pointers.png">
<div style="position:absolute;top:60px;width:200px;left:5px;">Verrai ricontattato entro 24 ore per confermare i tuoi dati.</div>
<div style="position:absolute;top:60px;width:200px;left:235px;">Il dealer ti richiamerà per confermare l’appuntamento.</div>
<div style="position:absolute;top:60px;width:250px;left:435px;">Vivi l’esperienza di guida a bordo
<br>della <span class="toReplace">MODELLO.</span></div>
</div>

There are many ways to make that,
var modelstring ="something";
$(document).ready ( function (){
$('div').each( function() {
var txt = $(this).text();
$(this).text( txt.replace("MODELLO", modelstring) );
});
});

use html5 output tag to display javascript variables?

Sorry if this is a silly question, but I've been trying to use AJAX to display my javascript variables in 'real time' with little luck. I'm definitely a beginner though so this could be the problem haha- When I see the AJAX code, it always seems to require an additional url that it refreshes, but I just want to refresh the javascript variables on click.
http://jsfiddle.net/bagelpirate/m9Pm2/
<script>
var one = 0;
var two = 0;
var three = 0;
</script>
<body>
<div id="div_1">
One: <script>document.write(one)</script> |
Two: <script>document.write(two)</script> |
Three: <script>document.write(three)</script>
</div>
<div id="div_2">
<img id="mine" src="https://si0.twimg.com/profile_images/3170725828/ac1d6621fc3c3ecaa541d8073d4421cc.jpeg" onclick="one++;" />
<img id="forest" src="http://blogs.dallasobserver.com/sportatorium/No.%202.png" onclick="two++;" />
<img id="farm" src="https://si0.twimg.com/profile_images/3732261215/bd041d1f0948b6ea0493f90507d67ef2.png" onclick="three++;" />
</div>
</body>
As you can see in the above code, when a user clicks one of the images, I want to increment the count and display it at the top of the page. I found the HTML5 output tag, and was wondering if it's possible to use this to display the javascript variable in real time? Everything I've read seems to imply it can't be done because the output tag only works on forms? Anyway, I figured it couldn't hurt to ask!
Thanks for your time!

You shouldn't use document.write to write to the DOM after it's finished loading. You have tagged your question with jQuery, so I'll assume you can use that to update things. Instead, update the DOM from within your script block. Here is an example that might help you get started.
http://jsfiddle.net/prxBb/
<script type="text/javascript">
$(function() {
var one = 0;
var two = 0;
var three = 0;
$('img#mine').click(function() {
one++;
$('span#one').html(one);
});
$('img#forest').click(function() {
two++;
$('span#two').html(two);
});
$('img#farm').click(function() {
three++;
$('span#three').html(three);
});
});
</script>
<body>
<div id="div_1">
One: <span id="one"></span> |
Two: <span id="two"></span> |
Three: <span id="three"></span>
</div>
<div id="div_2">
<img id="mine" src="https://si0.twimg.com/profile_images/3170725828/ac1d6621fc3c3ecaa541d8073d4421cc.jpeg" />
<img id="forest" src="http://blogs.dallasobserver.com/sportatorium/No.%202.png" />
<img id="farm" src="https://si0.twimg.com/profile_images/3732261215/bd041d1f0948b6ea0493f90507d67ef2.png" />
</div>
</body>

Maybe you should try putting all your variables inside a named object, iterating through it at predefined interval and displaying the values.
var varContainer = {
one:0,
two:0,
three:0
};
jQuery("#div_2 img").on('click',function(){
jQuery.each(varContainer,function(key,value){
//Add key + value to the DOM
if(jQuery("."+key+value).length<1)
jQuery("#div_2").append("<div class='"+key+value+"'></div>");
var newHtmlVal= "<p><span>Var name: "+key+"</span><br><span>Value: "+value+"</span>";
jQuery("."+key+value).html();
});
});
HTML
<div id="div_2">
</div>
Of course the script could be upgraded to look through each variable recursivley in case of nested objects/arrays...
Hope this helps!

How to tell a javascript function what element to manipulate?

I am so very new to asp.net and javascript, and I am supposed to do the following task in a couple of days. I know I have to learn all the basics, before asking, but really don't know where to get what I need in short time. Thanks a lot in advance!
Here's a number cities, which will be shown on a country map:
Each city has it's own style (since city positions are different), defined in a css.
<div class="node">
<div class="taxonomy">
</div>
<div class="content">
<div id="contact_map" runat="server">
<ul>
<li id="city1" onmouseover= "onmouseoveragent(this)"
onmouseout="onmouseoutagent(this)">
<a href="someAddress"><span class="hideme">Some City Name</span>
</a>
<p class="hideme">Some City Name<strong class="tel">0123456789</strong>
</p>
</li>
<%-- other cities here, with different city name and tel --%>
</ul>
</div>
</div>
</div>
I will probably try to figure out how to create these city items dynamically later.
Below is a hint box, to be shown when mouse is over the city. It has to be repeated for all the cities. (Question1: How can I create these hint boxes dynamically, and somehow fill them with the information associated with the right city? Maybe I have to create the previous list dynamically, too..)
<div id="agentVisit" class="floating-tip-wrapper" style="margin: 0px; padding: 0px; position:
absolute; display:none; opacity: 1;">
<div class="floating-tip" style="margin: 0px;">Some City Name
<strong class="tel">0123456789</strong>
</div>
</div>
And this is tha javascript code for onmouseover and onmouseout of each city:
(Question 2: How can I tell the function which agentVisit to get? )
<script language="javascript" type="text/javascript">
function onmouseoveragent(e) {
var hint = document.getElementById("agentVisit");
console.log(hint);
hint.style.display = 'block';
hint.style.top = Math.max(e.offsetTop - hint.offsetHeight, 0) + "px";
hint.style.left = e.offsetLeft + "px";
};
function onmouseoutagent(e) {
var hint = document.getElementById("agentVisit");
hint.style.display = 'none';
}
</script>
I would appreciate it if you provide an idea (or just a general hint) of how to do it. Or just a link to a quick tutorial. Thanks!

I think you are making this way more complicated than it has to be, because you can leverage data dash (data-) attributes of DOM elements and then use something like jQueryUI Tooltip.