echoing an image stops any output from my script!

wright67uk · February 4, 2012

hello,

when i add

 echo $row['img'];

to the code below it prevents it from working correctly. Have I written the line correctly or is there another underlying cause?

any help greatly appreciated.

working = http://www.1pw.co.uk/demo2.php

not working = http://www.1pw.co.uk/demo.php

<?php

define('INCLUDE_CHECK',1);
require "../#########.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."'"));

echo $row['img'];

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>\'}';
?>

not sure if needed but this is the file that includes the above file....

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

not sure if this is needed, but it links to the above file;

<?php

define('INCLUDE_CHECK',1);
require "######.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="script.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>

kicken · February 4, 2012

When you echo the image name, your json string is no longer valid so your Javascript fails. You need to add the image name as another key in your json output.

As for outputting json, I would suggest you store your info in an array then use json_encode to output it. It is far easier to use and manipulate the object before outputting it when you do that.


$jsonArr = array(
  'img' => $row['img'],
  '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>'
);

echo json_encode($jsonArr);

wright67uk · February 5, 2012

Thankyou very much for your reply.

how can i factor in the following line? :

echo '{status:1,id:'.$row['id'].',price:'.$row['price'].',txt:\'\

I tried it without but my calculator goes bananas.

also should echoing json now output my image or do i need to echo

$row['img'] ?

this is how i left my script...

<?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="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>');

echo json_encode($jsonArr);

?>

Sign In

echoing an image stops any output from my script!

Recommended Posts

wright67uk

Link to comment

Share on other sites

kicken

Link to comment

Share on other sites

wright67uk

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information