Jump to content

help with img src and a calculator

wright67uk

By wright67uk
in PHP Coding Help

 Share

Recommended Posts

wright67uk Advanced Member

wright67uk

Posted
Posted

Im after a little bit of help with two things in my code.

 

www.1pw.co.uk/demo2.php

 

1) getting an image to appear opposed to just the filename.

 

where and how in my code should i put <img src="filename" />

in the img column of mysql  database i am just listing filenames.  should i wrap these in the html above instead?

 

2) how can i get my calculator to behave?

 

i get the correct tally when checking out (using order.php), but as you will see from the link provided the calculator does not work properly, in demo2.php

 

-- addtocart2.php --

 

<?php

define('INCLUDE_CHECK',1);
require "../connect2.php";

if(!$_POST['img']) die("There is no such product!");

$img=mysql_real_escape_string(end(explode('/',$_POST['img'])));
$row=mysql_fetch_assoc(mysql_query("SELECT * FROM internet_shop WHERE img='".$img."'"));

$jsonArr = array('img' => $row['img'], 'status' => 1, 'id' => $row['id'], 'price' => $row['price'], 'txt' => ' 

<table width="100%" id="table_'.$row['id'].'">  
<tr>   
<td width="40%">'.$row['img'].'</td>   
<td width="20%">'.$row['name'].'</td>    
<td width="10%">$'.$row['price'].'</td>    
<td width="15%">
<select name="'.$row['id'].'_cnt" id="'.$row['id'].'_cnt" onchange="change('.$row['id'].');">	
<option value="1">1</option>	
<option value="2">2</option>	
<option value="3">3</option></slect>		
</td>	
<td width="15%"><a href="#" onclick="remove('.$row['id'].');return false;" class="remove">remove</a></td>  
</tr>
</table>');

echo json_encode($jsonArr);

?>

 

 

--- demo2.php ---

<?php

define('INCLUDE_CHECK',1);
require "connect2.php";

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>shop</title>

<link rel="stylesheet" type="text/css" href="demo.css" />

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.ui.main.js"></script>

<!--[if lt IE 7]>
<style type="text/css">
.pngfix { behavior: url(pngfix/iepngfix.htc);}
    .tooltip{width:200px;};
</style>
<![endif]-->


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

<script type="text/javascript" src="simpletip/jquery.simpletip-1.3.1.pack.js"></script>


<script type="text/javascript" src="script2.js"></script>

</head>

<body>

<div id="main-container">
<div class="tutorialzine">
    <h1>Shopping cart</h1>
    <h3>The best products at the best prices</h3>
    </div>

    <div class="container">
    
    	<span class="top-label">
            <span class="label-txt">Products</span>
        </span>
        
        <div class="content-area">
    
    		<div class="content drag-desired">
            	
                <?php

			$result = mysql_query("SELECT * FROM internet_shop");
			while($row=mysql_fetch_assoc($result))
			{
				echo '<div class="product"><a href="#" class="item"><img src="img/products/'.$row['img'].'" alt="'.htmlspecialchars($row['name']).'" width="128" height="128" class="pngfix" /></a></div>';

			}

			?>
                
                
       	        <div class="clear"></div>
            </div>

        </div>
        
        <div class="bottom-container-border">
        </div>

    </div>



    <div class="container">
    
    	<span class="top-label">
            <span class="label-txt">Shopping Cart</span>
        </span>
        
        <div class="content-area">
    
    		<div class="content drop-here">
            	<div id="cart-icon">
            	<img src="img/Shoppingcart_128x128.png" alt="shopping cart" class="pngfix" width="128" height="128" />
				<img src="img/ajax_load_2.gif" alt="loading.." id="ajax-loader" width="16" height="16" />
                </div>

			<form name="checkoutForm" method="post" action="order.php">
                
                <div id="item-list">
                </div>
                
			</form>                
                <div class="clear"></div>

			<div id="total"></div>

       	        <div class="clear"></div>
                
                <a href="" onclick="document.forms.checkoutForm.submit(); return false;" class="button">Checkout</a>
                
           </div>
          </div>
         <div class="bottom-container-border">
        </div>
       </div>
      </div>

<div class="bowlpic"> 

</div>
</body>
</html>

 

 

-- script2.js --

 

var purchased=new Array();
var totalprice=0;

$(document).ready(function(){

$('.product').simpletip({

	offset:[40,0],
	content:'<img src="img/ajax_load.gif" alt="loading" style="margin:10px;" />',
	onShow: function(){

		var param = this.getParent().find('img').attr('src');

		if($.browser.msie && $.browser.version=='6.0')
		{
			param = this.getParent().find('img').attr('style').match(/src=\"([^\"]+)\"/);
			param = param[1];
		}

		this.load('ajax/tips.php',{img:param}); 
	} 

});

$(".product img").draggable({

containment: 'document',
opacity: 0.6,
revert: 'invalid',
helper: 'clone',
zIndex: 100

});

$("div.content.drop-here").droppable({

		drop:
				function(e, ui)
				{
					var param = $(ui.draggable).attr('src');

					if($.browser.msie && $.browser.version=='6.0')
					{
						param = $(ui.draggable).attr('style').match(/src=\"([^\"]+)\"/);
						param = param[1];
					}

					addlist(param);
				}

});

});


function addlist(param)
{
$.ajax({
type: "POST",
url: "ajax/addtocart2.php",
data: 'img='+encodeURIComponent(param),
dataType: 'json',
beforeSend: function(x){$('#ajax-loader').css('visibility','visible');},
success: function(msg){

	$('#ajax-loader').css('visibility','hidden');
	if(parseInt(msg.status)!=1)
	{
		return false;
	}
	else
	{
		var check=false;
		var cnt = false;

		for(var i=0; i<purchased.length;i++)
		{
			if(purchased[i].id==msg.id)
			{
				check=true;
				cnt=purchased[i].cnt;

				break;
			}
		}

		if(!cnt)
			$('#item-list').append(msg.txt);

		if(!check)
		{
			purchased.push({id:msg.id,cnt:1,price:msg.price});
		}
		else
		{
			if(cnt>=3) return false;

			purchased[i].cnt++;
			$('#'+msg.id+'_cnt').val(purchased[i].cnt);
		}

		totalprice+=msg.price;
		update_total();

	}

	$('.tooltip').hide();

}
});
}

function findpos(id)
{
for(var i=0; i<purchased.length;i++)
{
	if(purchased[i].id==id)
		return i;
}

return false;
}

function remove(id)
{
var i=findpos(id);

totalprice-=purchased[i].price*purchased[i].cnt;
purchased[i].cnt = 0;

$('#table_'+id).remove();
update_total();
}

function change(id)
{
var i=findpos(id);

totalprice+=(parseInt($('#'+id+'_cnt').val())-purchased[i].cnt)*purchased[i].price;

purchased[i].cnt=parseInt($('#'+id+'_cnt').val());
update_total();
}

function update_total()
{
if(totalprice)
{
	$('#total').html('total: $'+totalprice);
	$('a.button').css('display','block');
}
else
{
	$('#total').html('');
	$('a.button').hide();
}
}

 

 

-- order2.php --


<?php

define('INCLUDE_CHECK',1);
require "connect2.php";

if(!$_POST)
{
if($_SERVER['HTTP_REFERER'])
header('Location : '.$_SERVER['HTTP_REFERER']);

exit;
}

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="demo.css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

<script type="text/javascript" src="simpletip/jquery.simpletip-1.3.1.pack.js.txt"></script>


<script type="text/javascript" src="script2.js"></script>

</head>

<body>

<div id="main-container">

    <div class="container">
    
    	<span class="top-label">
            <span class="label-txt">Your order</span>
        </span>
        
        <div class="content-area">
    
    		<div class="content">
            	
                <?php

			$cnt = array();
			$products = array();

			foreach($_POST as $key=>$value)
			{
				$key=(int)str_replace('_cnt','',$key);

				$products[]=$key;
				$cnt[$key]=$value;
			}

			$result = mysql_query("SELECT * FROM internet_shop WHERE id IN(".join($products,',').")");

			if(!mysql_num_rows($result))
			{
				echo '<h1>There was an error with your order!</h1>';
			}
			else
			{
				echo '<h1>You ordered:</h1>';

				while($row=mysql_fetch_assoc($result))
				{
					echo '<h2>'.$cnt[$row['id']].' x '.$row['name'].'</h2>';

					$total+=$cnt[$row['id']]*$row['price'];
				}

				echo '<h1>Total: $'.$total.'</h1>';
			}
			?>
                
                
       	        <div class="clear"></div>
            </div>

        </div>
        
        <div class="bottom-container-border">
        </div>

    </div>

</div>

</body>
</html>

Link to comment
Share on other sites
wright67uk Advanced Member

wright67uk

Posted
  • Author
Posted

As to the first question about getting an image to appear in my table.

ive added 'thumb' => $row['thumb']  to my json array, aswell as a thumb column in my mysql database.

in the row containing my dafodil image ive added - <img src="http://www.1pw.co.uk/img/products/yellowdaf.jpg" height="20px" width="20px />

ok, my images appear fine.

 

Im still confused however why my calculator has stopped working properly since creating the json array.

 

This is my code before I created the json array. (Calulator worked fine).  Im really confused!?!?!?!

 

echo '{status:1,id:'.$row['id'].',price:'.$row['price'].',txt:\'\
\
<table width="100%" id="table_'.$row['id'].'">\
  <tr>\
    <td width="60%">'.$row['name'].'</td>\
    <td width="10%">$'.$row['price'].'</td>\
    <td width="15%"><select name="'.$row['id'].'_cnt" id="'.$row['id'].'_cnt" onchange="change('.$row['id'].');">\
<option value="1">1</option>\
<option value="2">2</option>\
<option value="3">3</option></slect>\
\
</td>\
<td width="15%"><a href="#" onclick="remove('.$row['id'].');return false;" class="remove">remove</a></td>\
  </tr>\
</table>\'}';

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.