I have a javascript code that reads from a set of checkboxes and loads a php in case one or more checkboxes are checked. This php will load only the items that are selected.
However, now I click on the checkboxes and nothing happens. I am not sure if the issue is in the php or in the javascript.
Here are the codes:
CHECKBOXES:
function echoCheckboxSet($header, $divClass, $columnName, $setName) {
include ("../commonItems/connection.php");
$checkboxes = $con -> prepare("SELECT DISTINCT $columnName FROM item_descr ORDER BY $columnName ASC");
$checkboxes->execute();
<?php
while ($box = $checkboxes->fetch(PDO::FETCH_ASSOC)):
$boxColumnName = str_replace('_',' ',$box[$columnName]);
?>
<input type='checkbox' class='regularCheckbox' name='<?php echo $setName; ?>' value='<?php echo $box[$columnName]; ?>' />
<font class='similarItemsText'><?php echo $boxColumnName; ?></font>
<br />
<?php
endwhile;
echoCheckBoxSet("COLOR", "colors", "color_base1", "color");
echoCheckBoxSet("PRICE", "prices", "price", "price");
?>
JAVASCRIPT
$(function() {
$("input[type='checkbox']").on('change', function() {
var boxes = [];
// You could save a little time and space by doing this:
var name = this.name;
// critical change on next line
$("input[type='checkbox'][name='"+this.name+"']:checked").each(function() {
boxes.push(this.value);
});
if (boxes.length) {
$(".loadingItems").fadeIn(300);
// Change the name here as well
$(".indexMain").load('indexMain.php?'+this.name+'=' + boxes.join("+"),
function() {
$(".indexMain").fadeIn('slow');
$(".loadingItems").fadeOut(300);
});
} else {
$(".loadingItems").fadeIn(300);
$(".indexMain").load('indexMain.php', function() {
$(".indexMain").fadeIn('slow');
$(".loadingItems").fadeOut(300);
});
}
});
});
INDEXMAIN (indexMain.php)
include('../commonItems/connection.php');
if ($colors != '')
{
$colors = explode(' ', $colors);
$parameters = join(', ', array_fill(0, count($colors), '?'));
$items = $con -> prepare("SELECT * FROM item_descr WHERE color_base1 IN ({$parameters})");
$items ->execute($colors);
$count = $items -> rowCount();
}
while($info = $items->fetch(PDO::FETCH_ASSOC))
{
......... echo everything....
At some point the code was working fine... but now it is not...
Thanks!
indexMain.php is not getting the passed variables.
Adding this at the top made it work:
$colors = $_GET['color'];
Related
I have the code below and this code works, but only after clicking on selection option but code doesn't work when i change value when use arrow up and down.
I tried modification script, change option "click" to "change" but this solution doesn't work. Someone can help me ?
$select = $db_connect -> query("SELECT * FROM templates");
if($select -> num_rows > 0)
{
echo '<select id="subject" name="subject" class="form-select">';
while($row = $select -> fetch_assoc())
{
echo '<option id="'.$row["id"].'" value="'.$row['template_subject'].'">'.$row['template_subject'].'</option>';
?>
<script>
$("#subject #<?php echo $row['id']; ?>").on('click', function(){
if((this.id = "<?php echo $row['id'];?>") && (this.id != 1))
{
$("textarea").html("<?php echo $row['template_text']; ?>");
$("input[name='new_subject']").hide();
}
else
{
$("textarea").html("");
$("input[name='new_subject']").show();
}
});
</script>
<?php
}
echo '</select>';
}
Your problem is in the Javascript code.
<script>
$("#subject").change( function(){
var text = $( "#subject option:selected").val();
var id = $(this).children(":selected").attr("id");
if(id != 1)
{
$("textarea").html(text);
$("input[name='new_subject']").hide();
}
else
{
$("textarea").html("");
$("input[name='new_subject']").show();
}
});
</script>
remove the script from the while loop , put it at the end before </body> tag.
I want to display custom option price with name in price box in product detail page.
I also try this link but not getting success this is link i use
So please suggest me any solution.
first of all you have to put button calculateprice
then onclick of calculateprice you have to call function chkprice()
function chkpice()
{
var a=document.getElementById("options_1_text").value;
var b=document.getElementById("options_2_text").value;
var c=document.getElementById("options_3_text").value;
var d=document.getElementById("options_4_text").value;
var e=<?php echo $_product = $this->getProduct()->getPrice()?>;
var f=(a+b+c+d)+e;
var e=document.getElementById(('product-price-'+<?php echo $_product = $this->getProduct()->getId()?>)).innerHTML;
$('product-price-'+<?php echo $_product = $this->getProduct()->getId()?>).innerHTML =''+e.replace(<?php echo $_product = $this->getProduct()->getPrice()?>,d)+'</span>';
}
insted of options_1_text,options_2_text,options_3_text,options_4_text put your id it will get your result
First you do the function that takes care of updating the charges:
function updateCharges(){
var tmpText="";
$("input[type='select']").each(function{
tmpText+=$("#"+this.id+"option:selected").text()+"<br>";
});
$("#detailDiv").html(tmpText)
}
Then you just bind the selects to that function
$("input[type='select']").change(updateCharges)
Now you just have to make sure to include in your template a <div id="detailDiv"></div>
I would just create a custom block with the above code and place it inside the product detail page. Also you should check the selectors used, they will look for absolutelty ALL selects on the page, so thats not what you may want. But its just a matter of firebug-ging untill the aproppiate selector is found
Recently I need something similar. Perhaps it is helpful for you.
Block class:
class Foo_Bar_Block_Baz extends Mage_Catalog_Block_Product_View {
protected function getOptionDataCollection($options) {
$optionDataCollection = array();
foreach ($options as $option) {
$optionDataCollection[$option->getData('option_id')] = array_filter($option->getData());
}
return $optionDataCollection;
}
protected function getOptionValueDataCollection($options) {
$optionValueDataCollection = array();
foreach ($options as $option) {
$optionType = $option->getType();
if ($optionType == 'drop_down') {
$optionValues = $option->getValues();
foreach ($optionValues as $valueItem) {
// here you could also use the option_type_id (in my case I needed the sku)
$optionValueDataCollection[$valueItem->getData('sku')] = array_filter($valueItem->getData());
}
} else {
//Mage::throwException('Unexpected input. Processing for this optionType is not implemented');
}
}
return $optionValueDataCollection;
}
public function getOptionsJson() {
$data = array(
'options' => array(),
'optionValues' => array()
);
$options = $this->getProduct()->getOptions();
array_push($data['options'], $this->getOptionDataCollection($options));
array_push($data['optionValues'], $this->getOptionValueDataCollection($options));
$optionsJson = json_encode($data);
return $optionsJson;
}
}
Template
<script id="optionsJson" type="application/json">
<?php echo $this->getOptionsJson(); ?>
</script>
JS
var json = JSON.parse(document.getElementById("optionsJson").innerHTML),
options = json.options[0],
optionValues = json.optionValues[0];
optionValues['<optionValueSKU>'].default_title
optionValues['<optionValueSKU>'].price
-----------Create controller-------------
<?php
class Magento_Guys_IndexController extends Mage_Core_Controller_Front_Action
{
public function indexAction()
{
echo "Thank you !";
}
public function genCartAction()
{
$id = $this->getRequest()->getParam('pid');
$_product = Mage::getModel('catalog/product')->load($id);
$buy = Mage::helper('checkout/cart')->getAddUrl($_product);
echo $qty = (int) Mage::getModel('cataloginventory/stock_item')->loadByProduct($_product)->getQty();
//echo $id;
//echo $this->getRequest()->getParam('id');;
}
}
?>
----------------Change Add to cart code-------------------
<?php if ($_product->isAvailable()): ?>
<b class="available_quanity" style="display: none">Available Quantity :</b> <span id="simplestock" class="simplestock">Please select a color to view the quantity</span>
<?php endif; ?>
</div>
<?php if(!$_product->isGrouped()): ?>
<div class="qty">
<label for="qty"><?php echo $this->__('Qty:') ?></label>
<?php $i = 0; ?>
<select id="qty" class="input-text" name="qty" style="width:50px;">
<?php while($i<=(int) Mage::getModel('cataloginventory/stock_item')->loadByProduct($_product)->getQty()):?>
<option value="<?php echo $i; ?>"><?php echo $i++; ?></option>
<?php endwhile; ?>
</select>
</div>
<?php endif; ?>
----------------Add Ajax for get Quantity---------------
<script>
jQuery(document).ready(function() {
jQuery(".product-options select[id^='attribute']").on('change', function() {
var id = getSimpleProductId();
var qty = "";
jQuery('.available_quanity').show();
jQuery("#fancybox-loading").show();
jQuery.ajax({
type: "POST",
data: 'pid=' + id,
url:'https://www.thewirelesscircle.com/guys/index/genCart',
success:function(response){
if (response) {
qty = response;
var x = document.getElementById("qty");
var i;
removeOptions(x);
for(i=1;i<=qty;i++) {
var option = document.createElement("option");
option.text = i;
option.value = i;
x.add(option);
}
}
jQuery("#fancybox-loading").hide();
}
});
});
});
</script>
---------------Get Selected Option Id in Magento-------------------
<script type="text/javascript">
function removeOptions(selectbox)
{
var i;
for(i = selectbox.options.length - 1 ; i >= 0 ; i--)
{
selectbox.remove(i);
}
}
function getSimpleProductId() {
var productCandidates = [];
jQuery.each(spConfig.settings, function (selectIndex, select) {
var attributeId = select.id.replace('attribute', '');
var selectedValue = select.options[select.selectedIndex].value;
jQuery.each(spConfig.config.attributes[attributeId].options, function(optionIndex, option) {
if (option.id == selectedValue) {
var optionProducts = option.products;
if (productCandidates.length == 0) {
productCandidates = optionProducts;
} else {
var productIntersection = [];
jQuery.each(optionProducts, function (productIndex, productId) {
if (productCandidates.indexOf(productId) > -1) {
productIntersection.push(productId);
}
});
productCandidates = productIntersection;
}
}
});
});
return (productCandidates.length == 1) ? productCandidates[0] : null;
}
</script>
Open page: app\code\core\Mage\Catalog\Block\Product\View\Options.php find protected function _getPriceConfiguration($option) function and add $data['title'] = $option->getTitle(); before return $data; statement.
Now, open app\design\frontend\YOUT_TEMPLATE_PATH\default\template\catalog\product\view\options.phtml
Add <div id="optiontitle"></div> top of the page.
Then find this:
$A(element.options).each(function(selectOption){
if ('selected' in selectOption && selectOption.selected) {
if (typeof(configOptions[selectOption.value]) != 'undefined') {
curConfig = configOptions[selectOption.value];
}
}
});
Replace by:
$A(element.options).each(function(selectOption){
if ('selected' in selectOption && selectOption.selected) {
if (typeof(configOptions[selectOption.value]) != 'undefined') {
curConfig = configOptions[selectOption.value];
optionTitle = curConfig.title + "<br>";
$("optiontitle").insert(optionTitle);
}
}
});
Hey I've created a sortable list for the backend of my site to organize my categories and I have it all working so it runs an update SQL statement with Ajax and it saves my data without a reload, but the order number that I'm displaying in my backend from the database doesn't change until I reload, any help would be great, thanks in advance!
PHP
<?php
$sql = "SELECT cat_id, cat_name, cat_slug, cat_status, cat_order, sta_id, sta_name
FROM app_categories LEFT JOIN app_status
ON app_categories.cat_status = app_status.sta_id
ORDER BY cat_order ASC";
if($result = query($sql)){
$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['cat_id']; ?>">
<div class="column two"><?php echo $row['cat_name']; ?></div>
<div class="column two"><?php echo $row['cat_slug']; ?></div>
<div class="column two"><?php echo $row['cat_status']; ?></div>
<div class="column two"><?php echo $row['cat_order']; ?></div>
</div>
<?php
}
}
else {
echo "FAIL";
}
?>
jQuery with Ajax call
$(document).ready(function(){
$("#menu-pages").sortable({
update: function(event, ui) {
$.post("ajax.php", { type: "orderPages", pages: $('#menu-pages').sortable('serialize') } );
}
});
});
And my ajax.php which does my update
<?php
parse_str($_POST['pages'], $pageOrder);
foreach ($pageOrder['page'] as $key => $value) {
$sql = "UPDATE app_categories SET `cat_order` = '$key' WHERE `cat_id` = '$value'";
if(query($sql)) {
echo "YES";
}
else {
echo "NO";
}
}
?>
You don't appear to have any kind of code for handling the front-end update. The easiest thing to do would be to add a callback in your ajax post and have the server send back the update information as json data.
So ajax.php would look more like
<?php
parse_str($_POST['pages'], $pageOrder);
foreach ($pageOrder['page'] as $key => $value) {
$sql = "UPDATE app_categories SET `cat_order` = '$key' WHERE `cat_id` = '$value'";
if(query($sql)) {
$orderSql = "SELECT cat_id, cat_name, cat_slug, cat_status, cat_order, sta_id, sta_name
FROM app_categories LEFT JOIN app_status
ON app_categories.cat_status = app_status.sta_id
ORDER BY cat_order ASC";
if($result = query($sql)){
echo json_encode(mysqli_fetch_assoc($result));
return;
}
} else {
echo json_encode( array('result' => 'failure'));
}
}
(Yeah, it's ugly and untested but you get the idea.)
Your javascript would then look something like
$.post("ajax.php", { type: "orderPages", pages: $('#menu-pages').sortable('serialize') }, function(res){
if (typeof res.result !== undefined && res.result === 'failure'){
alert('failed!');
return;
} else {
$.each(res, function(i, item){
$("#page_" + item.cat_id).find('div:eq(3)').html(item.cat_order);
});
}, 'json' );
Which again is terrible, but hopefully conveys the point.
Alternatively you could simply update the number in the sort div whenever it is moved. That would look like:
$("#menu-pages").sortable({
update: function(event, ui) {
$.post("ajax.php", { type: "orderPages", pages: $('#menu-pages').sortable('serialize') } );
$('.row').each(function(i){
$(this).find('div:eq(3)').html(parseInt(i) + 1);
});
}
});
Also not test, and that's assuming cat_sort is 1-indexed and not missing any values etc etc.
I am having issues with the following code. It just blocks the rest of the site to load and it does not do it´s intended function.
There is a JS before the main PHP, which looks as follows:
<script type="text/javascript">
//http://jsbin.com/ujuse/1/edit
$(function() {
$("input[type='checkbox']").on('change', function() {
var boxes = [];
// You could save a little time and space by doing this:
var name = this.name;
// critical change on next line
$("input[type='checkbox'][name='"+this.name+"']:checked").each(function() {
boxes.push(this.value);
});
if (boxes.length) {
$(".loadingItems").fadeIn(300);
// Change the name here as well
$(".indexMain").load('store/indexMain.php?'+this.name+'=' + boxes.join("+"),
function() {
$(".indexMain").fadeIn('slow');
$(".loadingItems").fadeOut(300);
});
} else {
$(".loadingItems").fadeIn(300);
$(".indexMain").load('store/indexMain.php', function() {
$(".indexMain").fadeIn('slow');
$(".loadingItems").fadeOut(300);
});
}
});
});
</script>
<?php
function echoCheckboxSet($con, $header, $divClass, $columnName, $setName) {
$checkboxes = $con -> prepare("SELECT DISTINCT $columnName FROM item_descr ORDER BY $columnName ASC");
$checkboxes->execute();
?>
<div class="bgFilterTitles">
<h1 class="filterTitles"><?php echo $header;?></h1>
</div>
<div class="<?php echo $divClass; ?>">
<?php
while ($box = $checkboxes->fetch(PDO::FETCH_ASSOC)):
$boxColumnName = str_replace('_',' ',$box[$columnName]);
?>
<input type='checkbox' class='regularCheckbox' name='<?php echo $setName; ?>' value='<?php echo $box[$columnName]; ?>' />
<font class='similarItemsText'><?php echo $boxColumnName; ?></font>
<br />
<?php
endwhile;
?>
</div>
<?php
} // end of echoCheckboxSet
// Call our method twice, once for colors and once for prices
echoCheckBoxSet("COLOR", "colors", "color_base1", "color");
echoCheckBoxSet("PRICE", "prices", "price", "price");
?>
Warning: Missing argument 5 for echoCheckboxSet(), called in
\store\indexLeftBar.php on line 58 and defined in \store\indexLeftBar.php on line 35
Fatal error: Call to a member function prepare() on a non-object in \store\indexLeftBar.php on line 36
Do you see any issue?
Thanks!
$con is used, but not in scope:
function echoCheckboxSet($header, $divClass, $columnName, $setName) {
$checkboxes = $con->....
}
Either pass it in as an argument (shown below) to the function, or declare it as global (the latter is not recommended).
function echoCheckboxSet($con, $header, $divClass, $columnName, $setName) {
$checkboxes = $con->....
}
$con = some_method_that_connects_to_your_db(); // <!-- Still need this
echoCheckBoxSet( $con, "COLOR", "colors", "color_base1", "color");
I am trying to submit a form without leaving the page using json.
However, the method below ignores the data I have entered into the CKEditor.
Any ideas (and feel free to correct my terminology)?
<script type="text/javascript">
$(document).ready( function() {
$("#addStory input[type=submit]").click(function(e) {
e.preventDefault();
$.post('_posteddata.php', $("#addStory").serialize(), function(result) {
alert(result.adminList);
}, "json");
});
});
</script>
<form name="addStory" action="" method="post" id="addStory">
<label for="story_story">Story: </label><textarea id="story_story" name="story_story"><p></p></textarea>
<?php
// Include the CKEditor class.
include("ckeditor/ckeditor.php");
// Create a class instance.
$CKEditor = new CKEditor();
$CKEditor->basePath = '/ckeditor/'
$CKEditor->replace("story_story");
?>
<input type="submit" value="Submit" />
</form>
_posteddata.php:
include 'connection.php';
function check_input($value, $quoteIt)
{
// Stripslashes
if (get_magic_quotes_gpc())
{
$value = stripslashes($value);
}
// Quote if not a number
if (is_null($value) || $value=="") {
$value = 'NULL';
} else if (!is_numeric($value) && $quoteIt == 1) {
$value = "'" . mysql_real_escape_string($value) . "'";
}
return $value;
}
// CKEDITOR STUFF FOR STORY_STORY
if (isset($_POST)) {
$postArray = &$_POST;
}
foreach ( $postArray as $sForm => $value )
{
if($sForm == "story_story") {
$story_story = check_input($value, 1);
}
}
$query = "INSERT INTO story_table (story) VALUES ($story_story)";
mysql_query($query) or die(mysql_error() . $query);
$return = array();
$return['adminList'] = "New story added with ID: " . mysql_insert_id();
header('application/json');
echo json_encode($return);
mysql_close();
In this kind of situation you must force CKEditor to update the contents of the textarea
So your function would be something like this:
$(document).ready( function() {
$("#addStory input[type=submit]").click(function(e) {
e.preventDefault();
CKEDITOR.instances.story_story.updateElement(); // Update the textarea
$.post('_posteddata.php', $("#addStory").serialize(), function(result) {
alert(result.adminList);
}, "json");
});
});