image does not display during drag and drop in hosted site - html

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?

Related

Datalist attribute is not working in google chrome

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.

Issue using REST API call in Angular JS code

The below function is working fine with Static data but when i get it using a REST API Call it is throwing error
i an following the link http://angular-js.in/md-chips/
angular.module('mdChips', [])
.factory('chipsService', [function(){
alert("chipservice");
return {
helper: function(scope, collection, active, rule, chipsList){
if (active == -1 && collection.length > 0){
collection[0].active = true;
} else if (collection.length > 0){
if (collection[active+rule]){
collection[active].active = false;
collection[active+rule].active = true;
} else {
collection[active].active = false;
var index = rule == 1 ? 0 : (collection.length-1);
collection[index].active = true;
}
}
scope.$apply();
if (collection.length > 0)
chipsList.querySelector('.active').scrollIntoView({block: "start", behavior: "smooth"});
},
nextActive: function(scope, collection, active, chipsList){
this.helper(scope, collection, active, 1, chipsList);
},
prevActive: function(scope, collection, active, chipsList){
this.helper(scope, collection, active, -1, chipsList);
}
}
}])
.directive('mdChips', ['$compile','$timeout', '$document', 'chipsService', function($compile, $timeout, $document, chipsService){
return {
restrict: 'E',
replace:true,
template: '<div class="md-chips" ng-cloak> \
<div class="chips-input-field"> \
<div class="input-chips-elements"> \
<div ng-repeat="chips in ngModel track by $index" class="chips-mini-item"> \
<div class="chips-mini" ng-click="showMore($index, $event)"> \
\
<div class="chips-mini-title">{{chips[mdTitle]}}</div> \
</div> \
</div> \
<div class="chips-active" ng-style="{top: ytop}" ng-model="ytop" ng-click="closeActive($event)"></div> \
<input type="text" ng-model="chipsText[mdTitle]" ng-focus="clearActive()" ng-keydown="clearPrev($event)" class="chipsInput"/> \
</div> \
</div> \
</div>',
require: '?ngModel',
scope: {
collection: '=',
ngModel: '=',
text: '#',
//mdItem: '#',
mdTitle: '#',
//mdThumbnail: '#',
mdSubtitle: '#'
},
link: function (scope, element, attrs) {
scope.ytop = '10px';
scope.innerCollection = scope.collection.map(function(item){
if (!item[scope.mdTitle]){
alert(item[scope.mdTitle]);
return;
}
if (!item[scope.mdSubtitle] && !item[scope.mdThumbnail]){
if (item[scope.mdItem].length < 1){
return;
} else {
item[scope.mdSubtitle] = item[scope.mdItem][0][scope.mdSubtitle];
item[scope.mdThumbnail] = item[scope.mdItem][0][scope.mdThumbnail] ? item[scope.mdItem][0][scope.mdThumbnail] : '';
item[scope.mdItem].shift();
return item;
}
}
item['active'] = false;
return item;
});
element.bind('input', function(event) {
console.log("event started");
var self = scope;
scope.clearActive();
if (event.target.value) {
scope.$apply(function(){
var list = angular.element("<div id='chips-list' ng-show='true' ng-cloak> \
<div ng-repeat='item in (filteredCollection = (innerCollection | filter:chipsText))' class='chips-list-item' ng-click=addToInput(item) ng-class='{active: item.active}'> \
<div class='chips-item-wrapper'> \
<div class='chips-image'> \
<img ng-src='{{item[mdThumbnail]}}' ng-show='item[mdThumbnail] ? true : false'> \
<div class='image-default' ng-show='item[mdThumbnail] ? false : true'></div> \
</div> \
<span class='chips-title'>{{item[mdTitle]}}</span> \
\
</div> \
</div> \
</div>");
$compile(list)(scope);
$timeout(function() {
self.removeList();
element.append(list);
});
});
} else {
self.removeList();
}
});
$document.bind('click', function(evt){
scope.clearActive();
if(scope.chipsText){
scope.chipsText[scope.mdTitle] = '';
}
scope.removeList();
scope.$apply();
});
element.bind('click', function(evt){
evt.stopPropagation();
element[0].querySelector('.chipsInput').focus();
});
scope.removeList = function(){
this.innerCollection.forEach(function(item, index){
if(item.active){
item.active = false;
}
});
var chipsList = element[0].querySelector('#chips-list');
if (chipsList) {
chipsList.parentNode.removeChild(chipsList);
}
};
scope.addToInput = function(item){
console.log("add to input");
var chipsElement = JSON.parse(JSON.stringify(item));
console.log(chipsElement);
this.ngModel.push(chipsElement);
this.chipsText[this.mdTitle] = '';
this.removeList();
element[0].querySelector('.chipsInput').focus();
};
scope.showMore = function(index, event){
this.removeList();
scope.ytop = event.currentTarget.offsetTop + 'px';
var item = scope.ngModel[index],
chipsActive = element[0].querySelector('.chips-active');
var show = item[scope.mdThumbnail] ? true : false;
var thumb = item[scope.mdThumbnail]? item[scope.mdThumbnail] : '';
var htmlCode = '<div id ="chips-active-list" ng-cloak> \
<div class="chips-active-main"> \
\
<div class="boxclose" id="boxclose" ng-click=deleteChips(' + index + ')><a></a></div> \
<div class="chips-active-wrap"> \
<div class="chips-active-title" >' + item[scope.mdTitle] + '</div> \
\
</div> \
</div>';
if (item[scope.mdItem] && item[scope.mdItem].length > 0){
for(var i=0; i < item[scope.mdItem].length; i++){
var url = item[scope.mdItem][i][scope.mdThumbnail] ? item[scope.mdItem][i][scope.mdThumbnail] : '';
show = url ? true : false;
htmlCode += '<div class="md-chips-single-line" ng-click=setOtherEmail(' + index + ',"'+url+'","' + item[scope.mdItem][i][scope.mdSubtitle] + '",' + i + ')> \
<div class="chips-active-img"> \
<img src="' + url + '" ng-show=' + show + ' /> \
<div class="chips-active-image-default" ng-show=' + !show + '></div> \
</div> \
<div class="chips-active-wrap"> \
<p class="chips-active-description-only">' + item[scope.mdItem][i][scope.mdSubtitle] + '</p> \
</div> \
</div>';
}
}
htmlCode += '</div>';
var chips = angular.element(htmlCode);
if (chipsActive.hasChildNodes()){
this.clearActiveChildren(chipsActive);
}
$compile(chips)(scope);
$timeout(function() {
if (element[0].querySelector('#chips-list')){
this.chipsText[this.mdTitle] = '';
element[0].querySelector('#chips-list').remove();
}
chipsActive.appendChild(chips[0]);
});
};
element.bind('keydown', function(kEv){
var chipsList = element[0].querySelector('#chips-list');
if (chipsList){
var active = -1;
scope.filteredCollection.forEach(function(item, index){
if(item.active){
active = index;
}
});
switch(kEv.keyCode){
case 40:
chipsService.nextActive(scope, scope.filteredCollection, active, chipsList);
break;
case 38:
chipsService.prevActive(scope, scope.filteredCollection, active, chipsList);
break;
case 13:
if (active!==-1){
scope.addToInput(scope.filteredCollection[active]);
scope.removeList();
kEv.target.style.width = 20;
scope.$apply();
} else if (scope.chipsText[scope.mdTitle] ){
item = {};
item[scope.mdTitle] = scope.chipsText[scope.mdTitle];
item[scope.mdSubtitle] = scope.chipsText[scope.mdTitle];
scope.addToInput(item);
kEv.target.style.width = 20;
scope.$apply();
}
break;
default:
break;
}
} else {
return;
}
});
scope.deleteChips = function(index){
scope.ngModel.splice(index,1);
this.clearActive();
};
scope.clearPrev = function(event){
if(event.keyCode === 8 && event.target.value === '' && scope.ngModel.length !== 0){
scope.ngModel.pop();
}
if (scope.chipsText){
var length = scope.chipsText[scope.mdTitle].length * 15 + 15;
event.target.style.width = length ? length : 20;
}
return true;
};
scope.closeActive = function(event){
if (event.currentTarget.hasChildNodes()){
this.clearActiveChildren(event.currentTarget);
}
};
scope.clearActive = function(){
var chipsActive = element[0].querySelector('.chips-active');
this.clearActiveChildren(chipsActive);
};
scope.clearActiveChildren = function(active){
while (active.firstChild) {
active.removeChild(active.firstChild);
}
};
scope.setOtherEmail = function(index, url, email,i){
var old = {};
old.url = this.ngModel[index][scope.mdThumbnail];
old.subtitle = this.ngModel[index][scope.mdSubtitle];
if (url && url !== 'undefined'){
this.ngModel[index][scope.mdThumbnail] = url;
} else {
delete this.ngModel[index][scope.mdThumbnail];
}
this.ngModel[index][scope.mdSubtitle] = email;
this.ngModel[index][scope.mdItem][i][scope.mdSubtitle] = old.subtitle;
this.ngModel[index][scope.mdItem][i][scope.mdThumbnail] = old.url;
};
}
}
}]);
The error details are TypeError: Cannot read property 'map' of undefined
HTML CODE
<md-chips collection='itemsCollection' ng-model='selectedUsers' text='To' md-title='Name' md-subtitle='City' class='input' />
Below is the ANgular JS Code . The collection is showing undefined value when i use the REST API Call
angular.module('mdChipsDemo', ['mdChips'])
.controller('MainController', function($scope, $http) {
$http.get('http://www.w3schools.com/angular/customers.php')
.success(function(data) {
$scope.itemsCollection = JSON.stringify(data.records);
if ($scope.itemsCollection.length > 0) {
alert(123);
console.log($scope.itemsCollection);
}
})
.error(function(data, status, headers, config) {
$scope.errorMessage = "Couldn't load the list of customers, error # " + status;
});
$scope.selectedUsers = [];
console.log($scope.selectedUsers);
});
This line: $scope.itemsCollection = JSON.stringify(data.records); sets the item as a String but then passes it into your directive.
The first action on the directive's collection is: scope.innerCollection = scope.collection.map(...)
typeof JSON.stringify(data.records).map; // => undefined
See this plunkr.

Sage Pay v3.00 Integration

Can anyone help me incorporate the Sagepay v3.00 AES/CBC/PKCS#5 algorithm (encryption) into the following file. I'm really struggling to understand how to include so that customer data is encrypted to the new standard and then decrypted on the way back. Using Sagepay Form with a very old version of cs-cart, though have successfully managed to upgrade from version 2.22 to 2.23, but Sagepay are pulling all support from July.
Not sure how much of this script is relevant to the encryption:
<?php
if ( !defined('IN_CSCART') ) { die('Access denied'); }
if (defined('PAYMENT_NOTIFICATION')) {
// Get the password
$payment_id=db_get_field("SELECT $db_tables[payments].payment_id FROM $db_tables[payments] LEFT JOIN $db_tables[payment_processors] ON $db_tables[payment_processors].processor_id = $db_tables[payments].processor_id WHERE $db_tables[payment_processors].processor_script='protx_form.php'");
$processor_data = fn_get_payment_method_data($payment_id);
$result = "&".simpleXor(base64Decode($_REQUEST['crypt']), $processor_data["params"]["password"])."&";
preg_match("/Status=(.+)&/U", $result, $a);
if(trim($a[1]) == "OK") {
$pp_response['order_status'] = ($processor_data["params"]["transaction_type"] == 'PAYMENT') ? 'P' : 'O';
preg_match("/TxAuthNo=(.+)&/U", $result, $authno);
$pp_response["reason_text"] = "AuthNo: ".$authno[1];
preg_match("/VPSTxID={(.+)}/U", $result, $transaction_id);
$pp_response["transaction_id"] = #$transaction_id[1];
} else {
$pp_response['order_status'] = 'F';
preg_match("/StatusDetail=(.+)&/U", $result, $stat);
$pp_response["reason_text"] = "Status: ".trim($stat[1])." (".trim($a[1]).") ";
}
preg_match("/AVSCV2=(.*)&/U", $result, $avs);
if(!empty($avs[1])) {
$pp_response['descr_avs'] = $avs[1];
}
include $payment_files_dir.'payment_cc_complete.php';
fn_order_placement_routines($order_id);
}
else
{
global $http_location, $b_order, $_total_back;
$post_address = ($processor_data['params']['testmode'] != "N") ? "https://test.sagepay.com/gateway/service/vspform-register.vsp" : "https://live.sagepay.com/gateway/service/vspform-register.vsp";
$post["VPSProtocol"] = "2.23";
$post["TxType"] = $processor_data["params"]["transaction_type"];
$post["Vendor"] = htmlspecialchars($processor_data["params"]["vendor"]);
// Form Cart products
$strings = 0;
if (is_array($cart['products'])) {
$strings += count($cart['products']);
}
if (!empty($cart['products'])) {
foreach ($cart['products'] as $v) {
$_product = db_get_field("SELECT product FROM $db_tables[product_descriptions] WHERE product_id='$v[product_id]' AND lang_code='$cart_language'");
$products_string .= ":".str_replace(":", " ", $_product).":".$v['amount'].":".fn_format_price($v['subtotal']/$v['amount']).":::".fn_format_price($v['subtotal']);
}
}
if (!empty($cart['payment_surcharge'])) {
$products_string .= ":Payment surcharge:---:---:---:---:".fn_format_price($cart['payment_surcharge']);
$strings ++;
}
if (!empty($cart['shipping_cost'])) {
$products_string .= ":Shipping cost:---:---:---:---:".fn_format_price($cart['shipping_cost']);
$strings ++;
}
$post_encrypted .= "Basket=".$strings.$products_string;
$post["Crypt"] = base64_encode(simpleXor($post_encrypted, $processor_data["params"]["password"]));
$post["Crypt"] = htmlspecialchars($post["Crypt"]);
$msg = fn_get_lang_var('text_cc_processor_connection');
$msg = str_replace('[processor]', 'Protx Server', $msg);
echo <<<EOT
<html>
<body onLoad="document.process.submit();">
<form action="{$post_address}" method="POST" name="process">
<INPUT type=hidden name="VPSProtocol" value="{$post['VPSProtocol']}">
<INPUT type=hidden name="Vendor" value="{$post['Vendor']}">
<INPUT type=hidden name="TxType" value="{$post['TxType']}">
<INPUT type=hidden name="Crypt" value="{$post['Crypt']}">
<p>
<div align=center>{$msg}</div>
</p>
</body>
</html>
EOT;
}
exit;
//
// ---------------- Additional functions ------------
//
function simpleXor($InString, $Key) {
$KeyList = array();
$output = "";
for($i = 0; $i < strlen($Key); $i++){
$KeyList[$i] = ord(substr($Key, $i, 1));
}
for($i = 0; $i < strlen($InString); $i++) {
$output.= chr(ord(substr($InString, $i, 1)) ^ ($KeyList[$i % strlen($Key)]));
}
return $output;
}
function base64Decode($scrambled) {
// Initialise output variable
$output = "";
// Fix plus to space conversion issue
$scrambled = str_replace(" ","+",$scrambled);
// Do encoding
$output = base64_decode($scrambled);
// Return the result
return $output;
}
?>
You could try dropping the following functions into the script, then swapping out simpleXor for encryptAes. Make sure that you also add an '#' symbol as the first character of the crypt string (and strip it off when decoding the response from Sage Pay).
function addPKCS5Padding($input)
{
$blockSize = 16;
$padd = "";
$length = $blockSize - (strlen($input) % $blockSize);
for ($i = 1; $i <= $length; $i++)
{
$padd .= chr($length);
}
return $input . $padd;
}
function removePKCS5Padding($input)
{
$blockSize = 16;
$padChar = ord($input[strlen($input) - 1]);
$unpadded = substr($input, 0, (-1) * $padChar);
return $unpadded;
}
function encryptAes($string, $key)
{
$string = addPKCS5Padding($string);
$crypt = mcrypt_encrypt(MCRYPT_RIJNDAEL_128, $key, $string, MCRYPT_MODE_CBC, $key);
return strtoupper(bin2hex($crypt));
}
function decryptAes($strIn, $password)
{
$strInitVector = $password;
$strIn = pack('H*', $hex);
$string = mcrypt_decrypt(MCRYPT_RIJNDAEL_128, $password, $strIn, MCRYPT_MODE_CBC,$strInitVector);
return removePKCS5Padding($string);
}
You could try this. I can't test it, so let me know how you get on.
<?php
if ( !defined('IN_CSCART') ) { die('Access denied'); }
if (defined('PAYMENT_NOTIFICATION')) {
// Get the password
$payment_id=db_get_field("SELECT $db_tables[payments].payment_id FROM $db_tables[payments] LEFT JOIN $db_tables[payment_processors] ON $db_tables
[payment_processors].processor_id = $db_tables[payments].processor_id WHERE $db_tables[payment_processors].processor_script='protx_form.php'");
$processor_data = fn_get_payment_method_data($payment_id);
#Rik added:
$result = "&".decryptAes($_REQUEST['crypt'], $processor_data["params"]["password"])."&";
#$result = "&".simpleXor(base64Decode($_REQUEST['crypt']), $processor_data["params"]["password"])."&";
preg_match("/Status=(.+)&/U", $result, $a);
if(trim($a[1]) == "OK") {
$pp_response['order_status'] = ($processor_data["params"]["transaction_type"] == 'PAYMENT') ? 'P' : 'O';
preg_match("/TxAuthNo=(.+)&/U", $result, $authno);
$pp_response["reason_text"] = "AuthNo: ".$authno[1];
preg_match("/VPSTxID={(.+)}/U", $result, $transaction_id);
$pp_response["transaction_id"] = #$transaction_id[1];
} else {
$pp_response['order_status'] = 'F';
preg_match("/StatusDetail=(.+)&/U", $result, $stat);
$pp_response["reason_text"] = "Status: ".trim($stat[1])." (".trim($a[1]).") ";
}
preg_match("/AVSCV2=(.*)&/U", $result, $avs);
if(!empty($avs[1])) {
$pp_response['descr_avs'] = $avs[1];
}
include $payment_files_dir.'payment_cc_complete.php';
fn_order_placement_routines($order_id);
}
else
{
global $http_location, $b_order, $_total_back;
$post_address = ($processor_data['params']['testmode'] != "N") ? "https://test.sagepay.com/gateway/service/vspform-register.vsp" :
"https://live.sagepay.com/gateway/service/vspform-register.vsp";
$post["VPSProtocol"] = "2.23";
$post["TxType"] = $processor_data["params"]["transaction_type"];
$post["Vendor"] = htmlspecialchars($processor_data["params"]["vendor"]);
// Form Cart products
$strings = 0;
if (is_array($cart['products'])) {
$strings += count($cart['products']);
}
if (!empty($cart['products'])) {
foreach ($cart['products'] as $v) {
$_product = db_get_field("SELECT product FROM $db_tables[product_descriptions] WHERE product_id='$v[product_id]' AND lang_code='$cart_language'");
$products_string .= ":".str_replace(":", " ", $_product).":".$v['amount'].":".fn_format_price($v['subtotal']/$v['amount']).":::".fn_format_price($v
['subtotal']);
}
}
if (!empty($cart['payment_surcharge'])) {
$products_string .= ":Payment surcharge:---:---:---:---:".fn_format_price($cart['payment_surcharge']);
$strings ++;
}
if (!empty($cart['shipping_cost'])) {
$products_string .= ":Shipping cost:---:---:---:---:".fn_format_price($cart['shipping_cost']);
$strings ++;
}
$post_encrypted .= "Basket=".$strings.$products_string;
#Rik added:
$post["Crypt"] = "#".encryptAes($post_encrypted, $processor_data["params"]["password"]);
# $post["Crypt"] = base64_encode(simpleXor($post_encrypted, $processor_data["params"]["password"]));
# $post["Crypt"] = htmlspecialchars($post["Crypt"]);
$msg = fn_get_lang_var('text_cc_processor_connection');
$msg = str_replace('[processor]', 'Protx Server', $msg);
echo <<<EOT
<html>
<body onLoad="document.process.submit();">
<form action="{$post_address}" method="POST" name="process">
<INPUT type=hidden name="VPSProtocol" value="{$post['VPSProtocol']}">
<INPUT type=hidden name="Vendor" value="{$post['Vendor']}">
<INPUT type=hidden name="TxType" value="{$post['TxType']}">
<INPUT type=hidden name="Crypt" value="{$post['Crypt']}">
<p>
<div align=center>{$msg}</div>
</p>
</body>
</html>
EOT;
}
exit;
//
// ---------------- Additional functions ------------
//
function simpleXor($InString, $Key) {
$KeyList = array();
$output = "";
for($i = 0; $i < strlen($Key); $i++){
$KeyList[$i] = ord(substr($Key, $i, 1));
}
for($i = 0; $i < strlen($InString); $i++) {
$output.= chr(ord(substr($InString, $i, 1)) ^ ($KeyList[$i % strlen($Key)]));
}
return $output;
}
function base64Decode($scrambled) {
// Initialise output variable
$output = "";
// Fix plus to space conversion issue
$scrambled = str_replace(" ","+",$scrambled);
// Do encoding
$output = base64_decode($scrambled);
// Return the result
return $output;
}
#added by Rik
function addPKCS5Padding($input)
{
$blockSize = 16;
$padd = "";
$length = $blockSize - (strlen($input) % $blockSize);
for ($i = 1; $i <= $length; $i++)
{
$padd .= chr($length);
}
return $input . $padd;
}
function removePKCS5Padding($input)
{
$blockSize = 16;
$padChar = ord($input[strlen($input) - 1]);
$unpadded = substr($input, 0, (-1) * $padChar);
return $unpadded;
}
function encryptAes($string, $key)
{
$string = addPKCS5Padding($string);
$crypt = mcrypt_encrypt(MCRYPT_RIJNDAEL_128, $key, $string, MCRYPT_MODE_CBC, $key);
return strtoupper(bin2hex($crypt));
}
function decryptAes($strIn, $password)
{
#Sagepay specific - remove the '#'
$strIn = substr($strIn,1)
$strInitVector = $password;
$strIn = pack('H*', $hex);
$string = mcrypt_decrypt(MCRYPT_RIJNDAEL_128, $password, $strIn, MCRYPT_MODE_CBC,$strInitVector);
return removePKCS5Padding($string);
}
?>
/*First build your data. */
$data = 'variableA='.$this->variableA;
$data .= '&variableB='.$this->variableB;
...
$data .= '&variableZ='.$this->variableZ;
/** Encript data */
$dataEncrip = $this->encData($data);
/** function to Encrypt *//
public function encData($data){
$data = $this->pkcs5_pad( $data, 16);
$dataEnc = "#".bin2hex( mcrypt_encrypt( MCRYPT_RIJNDAEL_128,
$this->passwordToEncript,
$data,
MCRYPT_MODE_CBC,
$this->getPasswordToEncrypt()));
return $dataEnc;
}
/** Pkcs5_pad */
public function pkcs5_pad( $data, $blocksize ){
$pad = $blocksize - (strlen( $data ) % $blocksize);
return $data . str_repeat( chr( $pad ), $pad );
}

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

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();
}
}