Basically, I am doing this: I have already read the database and obtained all the items, each includes a 'name' and a 'link'. On the page, I have an image, a select menu, and a button; each select option displays an item name (but no link information). I want to implement this: first select an option (nothing happen), and then click the button to change the image src to the selected item's link (in PHP variable). But I have trouble to pass the link to the javascript function, because it involves PHP variable. The code is like this:
<script type="text/javascript">
function selectItem(i) {
var name, link;
/*
...
*/
document.getElementById("name").innerHTML = name;
document.getElementById("pic").src = link;
}
</script>
...
<body>
<img id="pic" src="default.png">
<div id="name"></div>
<div onclick="location.href='javascript:selectItem(document.
getElementsByName("menu")[0].value)';"></div>
<select name="menu">
<option value="">select one</option>
<?php
$i = 0;
foreach ($items as $item):
echo ("<option value=\"" . $i . "\">" . $item['name'] . "</option>");
$i++;
endforeach;
?>
</select>
</body>
Thanks for helping!
Is the foreach loop actually looping? Try:
<?php
$i = 0;
foreach ($items as $item) { ?>
<option value="<? echo $i ?>"><? echo $item['name'] ?></option>
<? $i++; }
?>
I know this is late, but my solution is: to record name and link together (separated by " | ") in the attribute "value" of each option. Then there is no need to pass PHP variable to the JavaScript.
Related
<td><b>Image File Name</b></td><td><input type='text' name='imgfn' id='imgfn' value='$imgfn'>
<?PHP
if(isset($_POST['imgfn']))
{
echo "
<img src='img/$imgfn' alt='$imgfn' style='width:200px;height:200px;'>
";
}
?>
so if my image is dog.jpg, in my form I would enter dog.jpg in the text box and when submitted it will pop up the dog image
I do wonder if there are many things to discuss here, but let me start with this being a more sane method of producing what it is you're asking for. There is no sense in offering a buffet if you only serve cold chicken.
Just show them the list they can pick from. Or tell them there is no food.
<?php
$dir = '/img/';
$imgs = glob($dir.'*.*');
if (empty($imgs)) :
die('this server has no images...this form will do nothing. ending output now.');
else :
?>
<td><b>Image File Name</b></td>
<td>
<select name="imgfn">
<?php
foreach ($imgs as &$img) :
?>
<option value="<?php echo str_replace('"', '\"', basename($img)); ?>"><?php echo basename($img); ?></option>
<?php
endforeach;
?>
</select>
<?PHP
if (!empty($_POST['imgfn']) && in_array($dir.$_POST['imgfn'], $imgs)) {
echo "<img src='img/$imgfn' alt='$imgfn' style='width:200px;height:200px;'>";
}
?>
</td>
<?php
endif;
?>
I have a code like this.
If the $j or $get_book_rating value is '1' then I need to change the select box colour to red or highlight and show the value(if the value is 1). Else let it show the
normal select box with no styles applied. How can I achieve that?
<?php $get_book_rating = $row['book_rating']; ?>
<select name="<?php echo $bookName ?>" id="<?php echo $bookId ?>">
<?php for($j=0;$j<2;$j++){ ?>
<option <?php if($j == $get_book_rating) echo 'selected="selected"'; ?>><?php echo $j; ?></option>
<?php } ?>
</select>
In other words, I need to check the value of $j and also $get_book_rating and if the value is '1' i need to highlight or show some styles to the select box.
Is that possible.
Thanks,
Kimz
Hope below code may be help you- Not tested but you can use logic as i have write:
You can change condition as per your requirement
<?php $get_book_rating = $row['book_rating']; ?>
<?php
$className='';
$str='';
for($j=0;$j<2;$j++){
if($j=='1' || $get_book_rating=='1') // you need to change condition here as per your requirement
{
$className='highlight';
$str.="<option selected='selected'>". $j ."</option>";
}
else
$str.="<option>". $j ."</option>";
}
$select="<select name='".$bookName."' id='".$bookId."' class='".$className."'>";
echo $select . $str ."</select>";
?>
//Define css for class highlight in css like color,width etc
Can anyone tell me how to update the options (using a dropdown select) of a configurable product that is already in the cart in Magento.
I put the code to show the super attributes options (using a dropdown list) of a configurable product in the following file: magento\app\design\frontend\default\theme-name\template\checkout\cart\item\default.phtml.
I found a line with this code:
<?php if ($_options = $this->getOptionList()):?>
After that, I put my code to show the attribute dropdown list for configurable products, and its working fine, but I need to update the super attribute option values for that product when I select another option from the super attribute dropdown list. Below is my code to show the dropdown:
<?php
if($this->getProduct()->isConfigurable()){
$_product = Mage::getModel('catalog/product')->load($this->getProduct()->getId());
Mage::getBlockSingleton('catalog/product_view_type_configurable')->unsetData();
$_configurable = Mage::getBlockSingleton('catalog/product_view_type_configurable')->setData('product', $_product);
$_cdata = json_decode($_configurable->getJsonConfig());
$_current = array();
foreach((array)$this->getOptionList() as $_option) {
$_current[$_option['label']]=$_option['value'];
}
foreach($_cdata->attributes as $attribute) {
?>
<strong><?php echo $attribute->label;
$catchlabel = $attribute->label;
if($catchlabel == 'Clipboard Color'):
$SelectOptions = "selectAtt";
else:
$SelectOptions = "selectFont";
endif;
?>
</strong>
<select style="width: 150px;"
name="cart[<?php echo $_item->getId() ?>][option][<?php echo $attribute->id ?>]"
id="<?php echo $_item->getId(); ?>_<?php echo $attribute->id; ?>"
class="<?php echo $SelectOptions; ?>">
<?php
foreach($attribute->options as $option) {
?>
<option
<?php echo ($_current[$attribute->label]==$option->label) ? ' selected' : '' ?>
value="<?php echo $option->id ?>">
<?php echo $option->label ?>
</option>
<?php
}
?>
</select>
<script type="text/javascript">
jQuery('#<?php echo $_item->getId(); ?>_<?php echo $attribute->id; ?>').change(function() {
var getOption = jQuery('#<?php echo $_item->getId(); ?>_<?php echo $attribute->id; ?>').val();
// something to do here for update attibute options for current product
alert(getOption);
});
</script> <?php
}
}
?>
please tell me how to update the super attribute options of the selected configurable product.
You need to submit the new configuration info to a controller action that handles the updates.
Magento has no such controller action, BUT, when you edit a single configurable product in the cart you get the product view with a slightly different markup. The form in that page is used to edit the product in the cart instead of adding a new one.
You should check the algorithm in that controller action and create a module with a controller that applies that algorithm on every product in your cart
What I am trying to do is change the image when an item is selected from the drop down. This is part of a form so I cant have the value change. However the option value is the row id, that row would also contain the target for the image. But because the target 'file' is called outside the loop it isn't firing.
I read I have to call it within the loop first but can't get it to work. Could you look at the code below and throw me a hint?
Thanks
<?php
include ("conned-db.php");
$result = mysql_query("SELECT * FROM gallery")
or die(mysql_error());
echo "<select id='gallery_id' name='gallery_id' style='width:200px;' >";
while($row = mysql_fetch_array( $result ))
{
echo '<option value=' . $row['id'] . '>';
echo $row['gallery_name'];
echo '</option/>';
}
echo "</select>";
echo "</td>";
echo "<td colspan='2' rowspan='2'>";
echo '<img src=' .$row['file']. '/></td>';
?>
Try this, I think this is what you are looking for
If you want to do something like this you must use Ajax. Here you go for the link that helps you to understand about Ajax.
http://www.w3schools.com/php/php_ajax_database.asp
Note:
If you wanted it to be only PHP without Javascript, you would have to sacrifice the 'must not refresh' constraint, as the only way to submit the form is by pressing the button, and submitting the content.
This should work too. If the file locations of the images are available at the time you load the page using ajax is not a must. You have to use ajax if you need to query the server again to retrieve the required file location. The following code assumes that you have the location of the images for each item of the dropdown list at the time you load the page.
<select id='gallery_id' name='gallery_id' style='width:200px;'
onchange='document.getElementById("image").src=this.options[this.selectedIndex].title' >
<?php
while($row = mysql_fetch_array( $result ))
{
?>
<option value='<?php echo $row["id"]; ?>' title='<?php echo $row["file"]; ?>'>
<?php echo $row["gallery_name"]; ?>
</option>
<?php
}
?>
<img id="image" />
Here is a short example which implements java scrip and php where i update src of an image based on the id from the select you might want to change with specific src based on that id
<?php
include ("conned-db.php");
$item = $_GET["imageid"];
if ($item == "")
{
$item = 1;
}
$result = mysql_query("SELECT * FROM gallery")
or die(mysql_error());
?>
<select id='gallery_id' name='gallery_id' onChange="window.location='file.php?imageid='+this.value" style='width:200px;' >
<?
while($row = mysql_fetch_array( $result ))
{
echo '<option value=' . $row['id'] . '>';
echo $row['gallery_name'];
echo '</option/>';
}
?>
</select>
</td>
<?
echo "<td colspan='2' rowspan='2'>";
?>
<img src=' <?=$item?> '/></td>
I have jQuery Tabs in which each tab and corresponding content are populated by a PHP foreach loop.
For each tab the user can upload a picture. I have this setup in a way so that as soon as the user chooses a file, a jquery script makes the upload begin automatically -- and the browse button is hidden and replaced by "Uploading your picture".
Here is the code (CI markup):
<ul class="tab_header">
<?php foreach ($p as $row):
echo '<li>
' . $row->p_name . '
</li>';
endforeach; ?>
</ul>
<?php foreach ($p as $row): ?>
<div id="tabs-<?php echo $row->p_id; ?>">
<?php echo form_open_multipart('/p/p_upload_picture/' . $row->p_id, 'id="upload_form"');
echo form_upload('userfile', '', 'id="file_select"');
echo form_hidden('upload','upload');
echo form_close(); ?>
<div id="loading" style="display:none;">
Uploading your picture...
</div>
</div>
<?php endforeach; ?>
<script>
$(function(){
$("#file_select").change(function(){
$("#upload_form").submit();
$("#upload_form_div").hide();
$("#loading").show();
});
});
</script>
This works perfectly but only on the first tab.
In all other tabs, the jquery script doesn't run -- as soon as I choose a file, the file name is shown in the browse button field instead, and no upload happens (form isn't submitted).
I wonder if this has to do with the script not being initialized for the other tabs.
How can I fix this?
Thanks for helping, much appreciated.
Your field has an id. Which should be unique per element.
jQuery only returns the first element it encounters with the given id, that's why your code isn't working. I would suggest adding a class instead of an id to your field.
$('.class-of-field')..change(function() {
..
});
The above should do the job.
This would be the equivalent code without jQuery:
var el = document.getElementById('file_select');
Which only returns one element, have a look at the documentation.