Develop Reference

How to write jquery append $("#id").append() statement if element id is defined as a php function?

I am building a website and a webpage contains same elements with element id which is created by a php function so that element id will be unique.
I want to use a jquery append statement to add div element with id created by a php function.How to write jquery append statement?
HTML PART:
<div id="q2s<?php the_ID(); ?>">
<span class="t2"><input type="text" class="t2" id="t2s<?php the_ID(); ?>">
</span> <span id="star2s<?php the_ID(); ?>" class="rating2"></span>
<hr></div>
In html part <?php the_ID();?> is the php function used for getting unique id
JAVASCRIPT PART:
<script>
var getstarid="<?php the_ID();?>";//php function for getting unique id
$(document).ready(function() {
var q2 = $("#q2s"+getstarid);//This is the part i am asking
//about.How to write this statement?
$(q2).append('<div id="q2s<?php the_ID(); ?>"<span class="t2"><input
type="text" class="t2" id="t2s<?php the_ID(); ?>"></span> <span
id="star2s<?php the_ID(); ?>" class="rating2"></span><hr></div>');
});
</script>
in javascript part var getstarid="<?php the_ID();?>";is used for getting unique id.
How to write var q2 = $("#q2"+getstarid);in jquery so that element id can change and jquery append can work according to change in value of php function <?php the_ID();?>?
Thanking you in advance.

With something like this, I usually embed the code/id/whatever in a data attribute in an element on the page.
HTML:
<div id="q2s" data-id = "q2s<?php the_ID ?>">
Then I retrieve it in my javascript using the jquery "data" method:
JAVASCRIPT:
var getstarid=$("#q2s").data("id");
...
var q2 = $("#q2s"+getstarid);//This is the part i am asking
//about.How to write this statement?
$(q2).append('<div id='+getstarid+'><span class="t2"><input
type="text" class="t2" id="t2s"'+getstarid+'></span> <span
id="star2s'+getstarid+'>" class="rating2"></span><hr></div>');
});
This benefits you in two ways, potentially: 1 - It's cleaner. You shouldn't be putting PHP code mixed in with your javascript. 2 - It might save you some database access. I don't know if PHP hits the database every time it hits "". This way, it only calls that function once and then lets jQuery do the heavy lifting.

Show PHP object data inside javascript

I know there have been just too many questions so far asking about PHP and JS working together...I went through them, but I cannot find an elegant solution for my use case.
What I currently have is following PHP code in my webpage that fetches product info and shows it:
<?php
$p= new Product($prodId);
$p->getProductInfo();
//now show product info...
echo "<div>Product Name: ".$p['productName']."</div>";
echo "<div>Product Rating: ".$p['productRating']."</div>";
//etc...
?>
Now what I have been asked to do is instead of showing this data directly in the page, I should show it only when a button is clicked. And I should show it inside a bootbox modal dialog box
So I did:
<span id='prod-details'> View Product Details </span>
<input type='hidden' id ='prod-id' value='<?php echo $p['productId'];?>'>
And in my jquery file I have:
$('#prod-details').click(function(
var prodId = $('#prod-id').val();
productDetail = "Product Details for "+prodId;
//how do I get rest of product details from PHP object?
bootbox.alert(productDetail);
));
Any help is very much appreciated...I have been trying hard to make this work.

What I normally do is echo the information inside the bootbox modal div and just hide/show the bootbox modal div with an onClick function

you can either put it in your html file like this:
<script>
var productName = <?php echo $p['productName'];?>;
</script>
or exactly like you did with the product id, just put all the data you need inside the input div (or any oher div releated to that product)
<input type='hidden' id ='prod-id' value='<?php echo $p['productId'];?>' productName='<?php echo $p['productName'];?>'>
and then using jquery get that data like you got the id
var prodName = $('#prod-id').attr('productName');

Clicking on a div and saving its value to use with PHP

I have been having some problems with some code.
So I'm developing a website that accesses a mysql database and creates a number of divs accordingly to the number of specialties that are on the database.
<div id="services_panel">
<?php foreach ($specialties as $especialidade_id => $especialidade) { ?>
<div class="service_div" onclick ="highlightLink(this); $('#content_div').show();" value="<?php echo $especialidade_id; ?>"><?php echo $especialidade; ?></div>
<?php } ?>
</div>
<div id="content_div""/>
Now what I wanted to do was set the value of the content div to the value of $especialidade of the div that was clicked, but since javascript runs clientside and php runs server side, I know that I can't do it on onclick()
I'd really hope you guys could help me with this issue
Thanks in advance

Using onclick() inline you could do
onclick ="highlightLink(this); $('#content_div').show().html(this.innerHTML);"
or if you bind it separately using .on() and 'click'
$(function(){
$('.service_div').on('click',function(){
$('#content_div').show().html($(this).html());
});
});

Click on image to change chosen plugin item

I'm working on a layout for a product using hikashop in joomla. example page can be seen here: product page. The characteristics select box is using the Chosen plugin. What I am trying to accomplish is to have the thumbnail images below change the selected item in the select box like this:
<img id="hikashop_product_characteristic_35"
onclick="document.getElementById('hikashop_product_characteristic_19').value='35';"
class="hikashop_child_image"
src="/zink/media/com_hikashop/upload/nbg_blackstealth_1061075554.png"
alt="hikashop_child_image_35">
Well if this was working, clearly I wouldn't be posing here. I think the chosen plugin overrides the select box, and i dont know enough about this to work around, so any help would be appreciated.
#isherwood - I tried your example and am getting UncaughtSyntaxError: Unexpected Token ;
Not too sure where my error is, here is my entire code block:
foreach($this->element->variants as $variant){
foreach($variant->characteristics as $k => $characteristic){
$char_id = $characteristic->variant_characteristic_id;
$cat_id = $k;
}
foreach($variant->images as $image){
echo '
<img id="hikashop_product_characteristic_'.$char_id.'" class="hikashop_child_image" src="' . $this->image->uploadFolder_url . $image->file_path . '" alt="hikashop_child_image_' . $char_id . '" />'; ?>
<script>
char_id = '<?php echo $char_id ?>'
</script>
<?php
}
} ?>
<script>
$('img.hikashop_child_image').click(function() {
$('#hikashop_product_characteristic_19').val(char_id);
}
</script>

After you set your select value, you need to update Chosen:
$("#hikashop_product_characteristic_14_chzn").trigger("chosen:updated");
http://harvesthq.github.io/chosen/#change-update-events
Indicentally, you're using jQuery, so
document.getElementById('hikashop_product_characteristic_19').value='35'
can simply be
$('#hikashop_product_characteristic_19').val('35');
This would all be better done with a single click event listener rather than inline onclick handlers.
$('img.hikashop_child_image').click(function() {
...
}

ajax.click function is not loading relevant page, button is not working at all

Hi before I put my code in im just going to briefly explain what im trying to do. I have a "live search" page where if a user types "A" all results that have an A in it are shown and if "AB" then all that have AB.
What I have done is made buttons appear next to each result so that when I click a particular one, another page is run and something appears on the right hand side. I'm trying to do this through ajax but it just is not working! Eventually, on the right hand side i'll have data from my sql database but for now im just trying to display basic html. Could someone help please?
the live search page:
<form name="searching" method="post">
Search<input type="text" name="search" OnKeyUp="dynamicSearch();">
<div id="sResults"></div>
</form>
Beneath this I have my "dynamicSearch" script which is just the xmlhttp request which gets my searchCars.php and displays data.
The searchCars.php page (where the ajax script will be).
echo "<input type='button' class='viewbutton'>" . $row['carName'] . "</a>";
<div id="rightdiv" style="width: 60%; float:right">
</div>
Above this button I have my SELECT * statements and that's all.
Ajax script on this page:
$( document ).ready(function() {
$(".viewbutton").each(function(){
var btn = $(this);
btn.on("click",function(){
$("#rightdiv").empty();
$.post("test.php",
function(data) {
$("#rightdiv").append(data);
}
);
});
});
});
All that test.php contains is:
<html>
<body>
<h2>test</h2>
</body>
</html>
Any help would be great, thanks.

This line looks suspicious:
echo "<input type='button' class='viewbutton'>" . $row['carName'] . "</a>";
<input> isn't closed (like <input /> or </input>) and there's some unpaired </a> there. Something's wrong here, either:
You have opened that <a> somewhere before that code and you have <input> wrapped in <a>, or
It was an <a> before, but you have partially changed it to <input>
Anyway, your browser is trying to fix the markup and messes it up even more. As a final result, there's no .viewbutton element to bind event to or it's not the element you expect.
I would try something like this:
echo "<button type='button' class='viewbutton'>" . $row['carName'] . "</button>";

Right now it looks like you are trying to loop through each button that is appended and put a click function on each. However, you do not need to do this, and this is where your issue could reside. The way do accomplish what you want to accomplish can work like this:
$(document).ready(function(){
$(".viewbutton").click(function(){
//Put your ajax here
});
});
Example: http://pastebin.com/U029bDed