Opencart checout Issue....unable to call data type json

Hi there…

I am trying to fix an error on my newly installed shopping cart…(open cart)

I tried with json but it shows empty tab.

$.ajax({
					url: 'index.php?route=checkout/shipping',
					dataType: 'json',
					success: function(json) {
						if (json['redirect']) {
							location = json['redirect'];
						}
									
						if (json['output']) {
							$('#shipping-method .checkout-content').html(json['output']);
							
							$('#shipping-address .checkout-content').slideUp('slow');
							
							$('#shipping-method .checkout-content').slideDown('slow');
							
							$('#shipping-address .checkout-heading a').remove();
							$('#shipping-method .checkout-heading a').remove();
							$('#payment-method .checkout-heading a').remove();
								
							$('#shipping-address .checkout-heading').append('<a><?php echo $text_modify; ?></a>');
						}
					}
				});			

Then I tried with html rather thn json datatype…

$.ajax({
					url: 'index.php?route=checkout/payment',
					dataType: 'html',
					success: function(html) {
						
						$('#payment-method .checkout-content').html(html);
						
						$('#shipping-method .checkout-content').slideUp('slow');
						
						$('#payment-method .checkout-content').slideDown('slow');

						$('#shipping-method .checkout-heading a').remove();
						$('#payment-method .checkout-heading a').remove();
						
						$('#shipping-method .checkout-heading').append('<a><?php echo $text_modify; ?></a>');	

					},
					error: function(xhr, ajaxOptions, thrownError) {
						alert(thrownError + "\\r\
" + xhr.statusText + "\\r\
" + xhr.responseText);
					}
				});		

But the output is something wired…as the function is designed for reading json…and it cant read html properly…

so the out put is something like

{"output":"

Please select the preferred payment method to use on this order.<\\/p>\\r\

\\r\
 \\r\

\\r\
 <\\/td>\\r\
 	Cash On Delivery<\\/label><\\/td>\\r\
 <\\/tr>\\r\
 <\\/table>\\r\
Add Comments About Your Order<\\/b>\\r\
<\\/textarea>\\r\
<br \\/>\\r\
<br \\/>\\r\
<div class=\\"buttons\\">\\r\
 <div class=\\"right\\">I have read and agree to the <a class=\\"fancybox\\" href=\\"http:\\/\\/kettenhemd-mittelalter-shop.com\\/index.php?route=information\\/information\\/info&information_id=5\\" alt=\\"Terms & Conditions\\"><b>Terms & Conditions<\\/b><\\/a> <input type=\\"checkbox\\" name=\\"agree\\" value=\\"1\\" \\/>\\r\
 <a id=\\"button-payment\\" class=\\"button\\"><span>Continue<\\/span><\\/a><\\/div>\\r\
<\\/div>\\r\
<script type=\\"text\\/javascript\\"><!--\\r\
$('.fancybox').fancybox({\\r\
\	width: 560,\\r\
\	height: 560,\\r\
\	autoDimensions: false\\r\
});\\r\
\\/\\/--><\\/script> \\r\
<script type=\\"text\\/javascript\\">\\r\
$('.button').button();\\r\
<\\/script>"}

Any help would be really appreciable…

Please let me know…if u can help.

Thanks
Danish;

In your success callback, when using JSON, can you try doing a console.log() and see what the output is?


success: function(json) {
    console.log("JSON Returned: ", json);

    if (json['redirect']) {
        location = json['redirect'];
    }
    ...

This should give you an indication of what is happening. It could be that the JSON is invalid, or returned with the wrong mime type.

I tried with ur both of the suggestions…but nthing happened.


$('#button-shipping').live('click', function() {
	$.ajax({
		url: 'index.php?route=checkout/shipping',
		type: 'post',
		data: $('#shipping-method input[type=\\'radio\\']:checked, #shipping-method textarea'),
		dataType: 'json',
		 
		beforeSend: function() {
			$('#button-shipping').attr('disabled', true);
			$('#button-shipping').after('<span class="wait">&nbsp;<img src="catalog/view/theme/default/image/loading.gif" alt="" /></span>');
		},	
		complete: function() {
			$('#button-shipping').attr('disabled', false);
			$('.wait').remove();
		},			
		success: function(json) {
			$('.warning').remove();
			
			if (json['redirect']) {
				location = json['redirect'];
			}
			
			if (json['error']) {
				if (json['error']['warning']) {
					$('#shipping-method .checkout-content').prepend('<div class="warning" style="display: none;">' + json['error']['warning'] + '</div>');
					
					$('.warning').fadeIn('slow');
				}			
			} else {
				$.ajax({
					url: 'index.php?route=checkout/payment',
					dataType: 'json',
					success: function(json) {
    						console.log("JSON Returned: ", json);
							 var details = {
								 web: "afterlight.com.au",
								 photos: "jvdl.id.au",
								psa: "usethelatestversion.com"
								}
						if (json['redirect']) {
							location = json['redirect'];
						}
												
						if (json['output']) {
							$('#payment-method .checkout-content').html(json['output']);
							
							$('#shipping-method .checkout-content').slideUp('slow');
							
							$('#payment-method .checkout-content').slideDown('slow');

							$('#shipping-method .checkout-heading a').remove();
							$('#payment-method .checkout-heading a').remove();
							
							$('#shipping-method .checkout-heading').append('<a><?php echo $text_modify; ?></a>');	
						}
					},
					error: function(xhr, ajaxOptions, thrownError) {
						alert(thrownError);
					}
				});					
			}
		}
	});	
});

Were you looking in the Console part of your browser’s developer tools?

In Chrome for example, hit CTRL+SHIFT+I on Windows or CMD+OPT+I on Mac, then navigate to the Console tab.

You should see something logged there when the sucess callback is fired.

Also, it might be worth adding a console.log above that AJAX statement to make sure it is getting there.


} else {
[COLOR=#ff0000]    console.log("About to do ajax request to index.php?route=checkout/payment");[/COLOR]
    $.ajax({
     url: 'index.php?route=checkout/payment',
     dataType: 'json',

Hi…Jhon…

I go with chorme developers tool…and i checked…

its retruning with the object…


output: "<p>Please select the preferred payment method to use on this order.</p>
&#8629;<table class="form">
&#8629;    <tr>
&#8629;    <td style="width: 1px;">            <input type="radio" name="payment_method" value="cod" id="cod" checked="checked" />
&#8629;      </td>
&#8629;    <td><label for="cod">Cash On Delivery</label></td>
&#8629;  </tr>
&#8629;  </table>
&#8629;<b>Add Comments About Your Order</b>
&#8629;<textarea name="comment" rows="8" style="width: 98%;"></textarea>
&#8629;<br />
&#8629;<br />
&#8629;<div class="buttons">
&#8629;  <div class="right">I have read and agree to the <a class="fancybox" href="http://kettenhemd-mittelalter-shop.com/index.php?route=information/information/info&amp;information_id=5" alt="Terms &amp; Conditions"><b>Terms &amp; Conditions</b></a>        <input type="checkbox" name="agree" value="1" />
&#8629;        <a id="button-payment" class="button"><span>Continue</span></a></div>
&#8629;</div>
&#8629;<script type="text/javascript"><!--
&#8629;$('.fancybox').fancybox({
&#8629;	width: 560,
&#8629;	height: 560,
&#8629;	autoDimensions: false
&#8629;});
&#8629;//--></script>  
&#8629;<script type="text/javascript">
&#8629;$('.button').button();
&#8629;</script>"
__proto__: Object
 

this is as per log details…but nothing on user…side…the final tab is not working…

please let me know if you have further suggestions…

Hmm so the JSON object is coming through ok, but isn’t being injected.

Can you try putting a few more console.log statements in there and see what gets returned by each one of those.

Especially in the success function it might be worth putting one in the if statement where the output is being injected.


if (json['output']) {
[COLOR=#ff0000]    console.log("JSON Output:", json.output);[/COLOR]
    $('#payment-method .checkout-content').html(json['output']);

If that console.log shows you the HTML output, there might be something else going on.

It will be worth double checking that $(‘#payment-method .checkout-content’) is actually present on the page when you try to inject the HTML.

hi john…

i keep on checking the console…

and found that…there’s was a error on calling fancybox…

its the script at the footer of the page…

<script type=“text/javascript”><!–
$(‘.fancybox’).fancybox({
width: 560,
height: 560,
autoDimensions: false
});
//–></script>
<script type=“text/javascript”>
$(‘.button’).button();
</script>

I removed it…and it worked perfectly…

Thanks for your hellp…much aapreciable…thanks again!!