Datalist attribute is not working in google chrome - html

Datalist attribute is not working in Google chrome, it is working fine in Firefox
Please have a look here http://prntscr.com/arny81
Thanks for your help in advance.
HTML
<td><input onkeyup="showCustomers(this.value)" placeholder="Enter Customer Name" list="selectCust" name="Cno" />
<datalist id="selectCust">
</datalist>
</td>
Javascript
function showCustomers(str) {
if (str.length == 0) {
document.getElementById("selectCust").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("selectCust").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET", "getCustomers.php?q=" + str, true);
xmlhttp.send();
}
}
getCustomers.php File
<?php include('conn.php'); ?>
<?php // get the q parameter from URL
$q = $_REQUEST["q"];
// lookup all hints from array if $q is different from ""
if ($q !== "") {
$q = strtolower($q);
$len=strlen($q);
$sql2 = 'SELECT Customer_Name as Cname,No from customers order by Customer_Name';
$result2 = mysqli_query($connection, $sql2) or die(mysqli_error($connection));
if (mysqli_num_rows($result2) > 0) {
?><option value=""></option><?php
// output data of each row
while($row2 = mysqli_fetch_assoc($result2)) {
if (stristr($q, substr($row2["Cname"], 0, $len))) { ?>
<option value="<?php
echo $row2['No']; ?>"><?php echo $row2["Cname"]; ?></option>
<?php } } ?>
<?php } } ?>
I have not used CSS at all.

Target the ID in your CSS instead, that should work fine.
HTML:
<datalist id="dl">
Your content goes here
</datalist>
CSS:
#dl {
display: block;
}
This works fine in Chrome or any other browser.

Related

HTML SELECT OPTION convert/changed to <UL> <LI>

I want my code below to be converted or changed to list style or div.
<div class="input-box">
<select id="<?php echo $_code ?>_cc_type" name="payment[cc_type]" class="required-entry validate-cc-type-select">
<option value=""><?php echo $this->__('--Please Select--')?></option>
<?php $_ccType = $this->getInfoData('cc_type') ?>
<?php foreach ($this->getCcAvailableTypes() as $_typeCode => $_typeName): ?>
<option value="<?php echo $_typeCode ?>"<?php if($_typeCode==$_ccType): ?> selected="selected"<?php endif ?>><?php echo $_typeName ?></option>
<?php endforeach ?>
</select>
</div>
Instead of having this on dropdown selection, i just want it display as list selection with validation properly working.
Thanks!
Hey I have tried to work on the same concept.
May this would help.
FYI, this is not full-fledged code. I am still working on it.
SCRIPT
(function ($) {
$.fn.customSelect = function( options ) {
var settings = $.extend({
//mainWidth: '200',
selected: '0',
alignRight: 'false',
}, options );
return this.each(function() {
var el = $(this);
var name = el.prop('name');
var optionTag = el.children();
var wrapperDIV = $('<div class="customSelect"/>');
var newDIV = $('<div class="custom-select"/>');
var inputTag = $("<input name='"+name+"' type='text' readonly='readonly' />").hide();
var inputDummy = $("<div class='input-dummy'/>");
var valueHolder = $('<div class="value-holder clearfix"/>');
var ULTag = $('<ul class="clearfix"/>');
var spanTag = '<span/>'
el.wrap(wrapperDIV);
el.parent().append(newDIV);
newDIV.append(valueHolder);
valueHolder.append(spanTag);
valueHolder.append(inputTag);
valueHolder.append(inputDummy);
newDIV.append(ULTag);
optionTag.each(function(){
ULTag.append("<li data-selected='"+$(this).val()+"'>"+$(this).text()+"</li>");
}).end().remove();
var valDefault = $('li').eq(settings.selected - 1).val();
var textDefault = $('li').eq(settings.selected - 1).text();
$(inputTag).val(valDefault);
$(inputDummy).text(textDefault);
valueHolder.click(function(){
$(this).next().toggle();
});
ULTag.each(function(){
$('li',this ).click(function(){
$(this).each(function(){
$(this).addClass('active').siblings().removeClass('active');
var x = $(this).data('selected');
var y = $(this).text();
$(inputTag).val(x);
$(inputDummy).text(y);
$(this).parent().hide();
});
});
});
if(settings.selectorRight == 'true'){
inputDummy.css('float', 'right');
//valueHolder.css('float', 'right');
}
else{
inputDummy.css('float', 'left');
//valueHolder.css('float', 'left');
}
var woVH = valueHolder.width();
inputDummy.width(woVH-20);
ULTag.width(woVH);
});
};
}( jQuery ));
Related to: Custom SelectBox (UL-LI) with same functionality in HTML FORM
JSFIDDLE

Disable choose an option in configurable products of Magento

I want to disable choose an option in configurable products drop-down.Rather it should automatically select a default product. Where and what to edit?
You can have those changes in the following file.
app/design/frontend/YOUR_PACKAGE/YOUR_THEME/template/catalog/product/view/type/options/configurable.phtml
And Better work with "Template Path Hints" Enabled from the backend. You will know what and where you need to customize.
UPDATE:
Open this file:
/app/design/frontend/default/your_theme/template/catalog/product/view/type/options/configurable.phtml
Right below
var spConfig = new Product.Config(< ?php echo $this->getJsonConfig() ?>);
add this JavaScript code:
//we create new function
spConfig.setInitialState = function(dropdown_id)
{
//select dropdown
var dropdown = $(dropdown_id);
//remove empty option from dropdown so it is not selectable after initial selection
dropdown[0].remove();
//change selections in dropdowns
for(index = 0; index < dropdown.length; index++)
{
if(dropdown[index].value != "")
{
dropdown.selectedIndex = index;
var element = dropdown;
var event = 'change';
//fire events
if(document.createEventObject)
{
var evt = document.createEventObject();
return element.fireEvent('on'+event,evt)
}
else
{
var evt = document.createEvent("HTMLEvents");
evt.initEvent(event, true, true );
return !element.dispatchEvent(evt);
}
}
}
};
<?php foreach($_attributes as $_attribute): ?>
spConfig.setInitialState("attribute< ?php echo $_attribute->getAttributeId() ?>")
<?php endforeach; ?>
For more information See Here and more Here
Full Working file
/app/design/frontend/default/your_theme/template/catalog/product/view/type/options/configurable.phtml
<?php
$_product = $this->getProduct();
$_attributes = Mage::helper('core')->decorateArray($this->getAllowAttributes());
?>
<?php if ($_product->isSaleable() && count($_attributes)):?>
<dl>
<?php foreach($_attributes as $_attribute): ?>
<dt><label class="required"><em>*</em><?php echo $_attribute->getLabel() ?></label></dt>
<dd<?php if ($_attribute->decoratedIsLast){?> class="last"<?php }?>>
<div class="input-box">
<select name="super_attribute[<?php echo $_attribute->getAttributeId() ?>]" id="attribute<?php echo $_attribute->getAttributeId() ?>" class="required-entry super-attribute-select">
<option><?php echo $this->__('Choose an Option...') ?></option>
</select>
</div>
</dd>
<?php endforeach; ?>
</dl>
<script type="text/javascript">
var spConfig = new Product.Config(<?php echo $this->getJsonConfig() ?>);
//we create new function
spConfig.setInitialState = function(dropdown_id)
{
//select dropdown
var dropdown = $(dropdown_id);
//remove empty option from dropdown so it is not selectable after initial selection
dropdown[0].remove();
//change selections in dropdowns
for(index = 0; index < dropdown.length; index++)
{
if(dropdown[index].value != "")
{
dropdown.selectedIndex = index;
var element = dropdown;
var event = 'change';
//fire events
if(document.createEventObject)
{
var evt = document.createEventObject();
return element.fireEvent('on'+event,evt)
}
else
{
var evt = document.createEvent("HTMLEvents");
evt.initEvent(event, true, true );
return !element.dispatchEvent(evt);
}
}
}
};
<?php foreach($_attributes as $_attribute): ?>
spConfig.setInitialState("attribute<?php echo $_attribute->getAttributeId() ?>")
<?php endforeach; ?>
</script>
<?php endif;?>

Ajax GET content from php page

Hi I have a table which I am trying to update with a call to a MySQL database in a separate php page. This separate page loops through a result set and builds the table through a series of echos. In the main page I am trying to insert that echoed content into a div.
This is all kicked off by the user selecting an option from a drop down box.
This is the separate php page. (It works fine when i manually type in the GET parameters, it is the link between the two pages which doesn't seem to work)
tableGetter.php
<?PHP
$user_name = "rocketeermus_pr";
$password = "zuluhead2";
$database = "rocketeermus_pr";
$server = "pdb1.awardspace.com";
$db_handle = mysql_connect($server, $user_name, $password);
$db_found = mysql_select_db($database, $db_handle);
echo "Bonjour";
if (isset($_GET['composer'])){
echo "Helloooo";
if ($db_found) {
echo "SELECT * FROM catalogue WHERE Composer = '".mysql_escape_string($_GET['composer'])."';";
$SQL = "SELECT * FROM catalogue WHERE Composer = '".mysql_escape_string($_GET['composer'])."';";
$result = mysql_query($SQL);
setlocale(LC_MONETARY,"en_GB");
echo "<table class=\"sortable\" id=\"moder\" width=\"800\">";
echo "<th>TITLE</th><th>COMPOSER</th><th>VOICING</th><th>PRICE</th><th></th></tr>";
while ( $db_field = mysql_fetch_assoc($result) ) {
echo "Hi.";
echo "<tr><td>{$db_field['Title']}</td><td>{$db_field['Composer']}</td><td>{$db_field['Voicing']}</td><td>";
echo money_format("%n", $db_field['Price']);
echo "</td><td> <div class=\"product\"> <input value=\"{$db_field['Title']}\" class=\"product-title\" type=\"hidden\"> <input value=\"0.5\" class=\"product-weight\" type=\"hidden\"> <input value=\"{$db_field['NoVox']}\" class=\"googlecart-quantity\" type=\"hidden\"> <input value=\"{$db_field['Price']}\" class=\"product-price\" type=\"hidden\"> <div title=\"Add to cart\" role=\"button\" tabindex=\"0\" class=\"googlecart-add-button\"> </div> </div> </td></tr>";
}
echo "</table>";
mysql_close($db_handle);
} else {
print "Database NOT Found ";
mysql_close($db_handle);
}
}
?>
And here is the important stuff from the main page:
Javascript:
function getdata()
{
var req = getXMLHTTP();
if (req)
{
//function to be called when state is changed
var queryString1 = "";
req.onreadystatechange = function()
{
//when state is completed i.e 4
if (req.readyState == 4)
{
var ajaxSearchResults1 = document.getElementById("table");
ajaxSearchResults1.innerHTML = req.responseText;
// only if http status is "OK"
if (req.status == 200)
{
var new1 = document.getElementById('composer').value;
queryString1 = "?composer=" + encodeURIComponent(new1);
console.log (queryString1);
}
else
{
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", "tableGetter.php" + queryString1, true);
req.send();
}
}
function getXMLHTTP() {
var xmlhttp;
if(window.XMLHttpRequest){ //For Firefox, Mozilla, Opera, and Safari
xmlhttp = new XMLHttpRequest();
}
else if (window.ActiveXObject){ //For ie
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
if (!xmlhttp){
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
}
}
return xmlhttp;
}
html:
<div id="menus">
<table>
<tr>
<td><form action=""">
<select name="composer" id ="composer" onchange="getdata();">
<?php
$user_name = "***";
$password = "****";
$database = "****";
$server = "****.com";
$db_handle = mysql_connect($server, $user_name, $password);
$db_found = mysql_select_db($database, $db_handle);
if ($db_found) {
$SQL = "SELECT DISTINCT Composer FROM catalogue ORDER BY Composer";
$result = mysql_query($SQL);
setlocale(LC_MONETARY,"en_GB");
while ( $db_field = mysql_fetch_assoc($result) ) {
?>
<option id="composer" onchange="getdata();" value="<?php echo $db_field['Composer'];?>">
<?php
echo $db_field['Composer'];
?>
</option>
<?php
}
}
?>
</select>
</form></td>
</tr>
</table>
</div>
<div id="table">
<?php include("tableGetter.php"); ?>
</div>
The html on the main page works fine, the drop down menu fills up nicely with all the distinct composer names in the database. When an option in the menu is selected the only thing echoed in the "table" div is "Bonjour". It's not getting further than if (isset($_GET['composer'])) in the tableGetter.php page. I'm printing out the queryString1 variable (The get parameters) which is requested in the getData() function and it reports: ?composer=Animuccia%2C%20Paulo which works perfectly when loading the page manually. It just won't work dynamically!
Anybody know what's going on here?
You aren't setting queryString1 before sending the AJAX request. Try this rewrite of getdata().
function getdata()
{
var req = getXMLHTTP();
if (req)
{
//function to be called when state is changed
req.onreadystatechange = function()
{
//when state is completed i.e 4
if (req.readyState == 4)
{
// only if http status is "OK"
if (req.status == 200)
{
var ajaxSearchResults1 = document.getElementById("table");
ajaxSearchResults1.innerHTML = req.responseText;
}
else
{
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
var new1 = document.getElementById('composer').value;
var queryString1 = "?composer=" + encodeURIComponent(new1);
req.open("GET", "tableGetter.php" + queryString1, true);
req.send();
}
}

How can I pass a value from my PHP to a javascript function?

<p align="left">
<b>Click this button to create div element dynamically:</b>
<?php $qry = "SELECT COUNT(*) AS count From Contact Where CustomerID=$pid";
$result = mysql_query($qry);
$row = mysql_fetch_array($result);
$count = $row['count'];
echo $count;
if($count >= 6)
{
?>
<input id="btn1" type="button" value="create div" onClick="popup();" />
<?php
}
else
{
$num = 6 - $count ;
echo $num;
?>
<input id="btn1" type="button" value="create div" onClick="createDiv(<?php echo $num ?>);" />
<?php
}
?>
I want to pass the "$num" to my create DIV function
if the $num is 6 it can create 6 div, if $num is 4 it can only generate up to 4 div only
this my createDiv function
var i=0;
function createDiv(num)
{
if(i < num) {
var divTag = document.createElement("div");
divTag.id = "div1"+i;
divTag.setAttribute("align","left");
divTag.style.margin = "0px auto";
divTag.className ="ex";
divTag.innerHTML = "<img class='myimage' onclick='changeimage(this)' border='0' src='images/white_contact.png' width='60'/><table border='0'><tr><td>Name:</td><td><input type='text'></d></tr><tr><td>Title:</td><td><input type='text'></td></tr><tr><td>Contact:</td><td><input type='text'></td></tr></table>";
document.getElementById("newdiv").appendChild(divTag)
}
i++;
$( ".ex" ).draggable({containment:'parent',cursor:'pointer',opacity:0.6, });
$( ".ex" ).droppable({ hoverClass:'border' });
}
But now I can only create one DIV, why is this so?
You can cleanup your code a bit and use handlers for this kind of thing..
You seem to have jQuery installed (since you're using droppable and draggable)
HTML:
<input type='button' class='div-creator' data-div-id="<? echo $id ?>" value="Click Me">
JAVASCRIPT:
$('body').on("click", '.div-creator', function() {
var id = $(this).data("div-id");
// And do whatever else you want to do here.
// $(this) is the element that was clicked. id is the div-id in the button tag.
});

image does not display during drag and drop in hosted site

I have a drag and drop function which seems fine displaying images during localhost but when I try it in a hosted site the problem occurs. It also seems to emit this error image corrupt or truncated in firebug, but when I download it and try it again in the localhost it seems fine. Any idea what the problem may be?
<?php
session_start();
?>
<?php
require "menu.php";
?>
<!DOCTYPE HTML>
<html>
<title>imageload</title>
<head>
<style type="text/css">
#div1 {width:255px;height:285px;border:1px solid #aaaaaa;z-index:1;}
</style>
<script>
function dress()
{
document.getElementById("shirt1").style.visibility = "visible";
document.getElementById("shirt2").style.visibility = "visible";
document.getElementById("shirt3").style.visibility = "visible";
}
function braces()
{
document.getElementById("brace1").style.visibility = "visible";
document.getElementById("brace2").style.visibility = "visible";
document.getElementById("brace3").style.visibility = "visible";
}
function shoes()
{
document.getElementById("shoe1").style.visibility = "visible";
document.getElementById("shoe2").style.visibility = "visible";
document.getElementById("shoe3").style.visibility = "visible";
}
var x = "waa";
var y = "waa";
var z = "waa";
var shoe = "waa";
var shirt = "waa";
var brace = "waa";
function AddCart()
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("DivAddDrag").innerHTML=xmlhttp.responseText;
}
}
var formData = new FormData();
var q1 = document.getElementById("quantity1").value;
var q2 = document.getElementById("quantity2").value;
var q3 = document.getElementById("quantity3").value;
formData.append("shoe", shoe);
formData.append("shirt", shirt);
formData.append("brace", brace);
formData.append("q1", q1);
formData.append("q2", q2);
formData.append("q3", q3);
xmlhttp.open("POST","adddrag.php");
xmlhttp.send(formData);
}
function allowDrop(ev)
{
if(x=="shirt1" || x == "shirt2" || x =="shirt3")
{
document.getElementById(x).style.visibility = "hidden";
}
if(x=="shirt1" && y=="waa" && z=="waa")
{
// is this what you are referring to?
document.getElementById('image').src = "dragged/d1.jpg";
}
if(x=="shirt2" && y=="waa" && z=="waa")
{
document.getElementById('image').src = "dragged/d2.jpg";
}
if(x=="shirt3" && y=="waa" && z=="waa")
{
document.getElementById('image').src = "dragged/d3.jpg";
}
if(y=="brace1" || y == "brace2" || y =="brace3")
{
document.getElementById(y).style.visibility = "hidden";
}
if(z=="shoe1" || z == "shoe2" || z =="shoe3")
{
document.getElementById(z).style.visibility = "hidden";
}
if(x=="shirt1")
{
shirt = "upload/d1.jpg";
}
if(x=="shirt2")
{
shirt = "upload/d2.jpg";
}
if(x=="shirt3")
{
shirt = "upload/d3.jpg";
}
if(y=="brace1")
{
brace = "upload/b1.jpg";
}
if(y=="brace2")
{
brace = "upload/b2.jpg";
}
if(y=="brace3")
{
brace = "upload/b3.jpg";
}
if(z=="shoe1")
{
shoe = "upload/s1.jpg";
}
if(z=="shoe2")
{
shoe = "upload/s2.jpg";
}
if(z=="shoe3")
{
shoe = "upload/s3.jpg";
}
ev.preventDefault();
}
function drag(ev)
{
if(ev.target.id == "shirt1" || ev.target.id == "shirt2" || ev.target.id == "shirt3")
{
x = ev.target.id;
}
if(ev.target.id == "brace1" || ev.target.id == "brace2" || ev.target.id == "brace3")
{
y = ev.target.id;
}
if(ev.target.id == "shoe1" || ev.target.id == "shoe2" || ev.target.id == "shoe3")
{
z = ev.target.id;
}
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<?php
require "header.php";
?>
<div id = "wrapper" style="background-color:white; width:1013px; margin-left: auto;margin-right: auto;height:auto;z-index:1100;" >
<?php
if ($_SESSION['users_userName'] == "user")
{
?>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" style="position:relative;top:120px;left:730px;border: 5px solid #032472;height:500px;">
<img id ="image" src = "draggable/d1.jpg" style = "height:500px;width:255px;position:relative;bottom:30px;"/></div>
<?php
echo '<div style = "position:relative;left:50px;bottom:400px;">';
$sql = "select * from draggable Limit 6,3";
$data = mysql_query($sql,$con);
$y = 1;
while($row = mysql_fetch_array($data))
{
$id="shirt".$y;
echo '<img src="'.$row['Drag'].'" id = "'.$id.'" name="shirt" width="85px" height="85px" draggable="true" ondragstart="drag(event)" onClick="next()" style = "visibility:hidden;"/>';
$y=$y+1;
}
echo '<label> Quantity : </label>';
echo '<input type = "text" id = "quantity1" />';
echo '</br>';
$sql = "select * from draggable Limit 3";
$data = mysql_query($sql,$con);
$y = 1;
while($row = mysql_fetch_array($data))
{
$id="brace".$y;
echo '<img src="'.$row['Drag'].'" id = "'.$id.'" name="brace" width="85px" height="85px" draggable="true" ondragstart="drag(event)" onClick="next()" style = "visibility:hidden;"/>';
$y=$y+1;
}
echo '<label> Quantity : </label>';
echo '<input type = "text" id = "quantity2" />';
echo'</br>';
$sql = "select * from draggable Limit 3,3";
$data = mysql_query($sql,$con);
$y = 1;
while($row = mysql_fetch_array($data))
{
$id="shoe".$y;
echo '<img src="'.$row['Drag'].'" id = "'.$id.'" name="shoe" width="85px" height="85px" draggable="true" ondragstart="drag(event)" onClick="next()" style = "visibility:hidden;"/>';
$y=$y+1;
}
echo '<label> Quantity : </label>';
echo '<input type = "text" id = "quantity3" />';
echo'</br>';
echo '</div>';
?>
<button style = "position:relative;bottom:250px;left:30px;" onClick="AddCart()"> Add to Cart</button>
<div style ="position:relative;left:150px;bottom:750px;z-index:1300;">
<button id = "dressclick" onclick = "dress()"> Dress </button>
<button id = "shoeclick" onclick = "shoes()"> Shoes </button>
<button id = "braceclick" onclick = "braces()"> Bracelet </button>
</div>
<div id ="DivAddDrag" style ="position:relative;height:200px;width:500px;left:150px;bottom:400px;border:3px solid black"></div>
<?php
}
?>
<div class="push4">
</div>
</div>
<div id="footer4" style="margin-left:auto;margin-right:auto;width:1013px;"><?php require "footer.php";?></div>
</body>
</html>
It sounds like the link to your image is hard-coded for your local environment. You may need to make your path root-relative so its link is independent of deployment environment. What server OS are you running? Where is your code for us to see?