SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2010
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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.

    Code:
    $.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...

    Code:
    $.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\n" + xhr.statusText + "\r\n" + 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

    HTML Code:
    {"output":"
    
    Please select the preferred payment method to use on this order.<\/p>\r\n
    \r\n \r\n
    \r\n <\/td>\r\n 	Cash On Delivery<\/label><\/td>\r\n <\/tr>\r\n <\/table>\r\nAdd Comments About Your Order<\/b>\r\n<\/textarea>\r\n<br \/>\r\n<br \/>\r\n<div class=\"buttons\">\r\n <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\n <a id=\"button-payment\" class=\"button\"><span>Continue<\/span><\/a><\/div>\r\n<\/div>\r\n<script type=\"text\/javascript\"><!--\r\n$('.fancybox').fancybox({\r\n\twidth: 560,\r\n\theight: 560,\r\n\tautoDimensions: false\r\n});\r\n\/\/--><\/script> \r\n<script type=\"text\/javascript\">\r\n$('.button').button();\r\n<\/script>"}
    Any help would be really appreciable...

    Please let me know...if u can help.

    Thanks
    Danish;

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    In your success callback, when using JSON, can you try doing a console.log() and see what the output is?

    Code javascript:
    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.
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2010
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried with ur both of the suggestions...but nthing happened.

    Code:
    $('#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);
    					}
    				});					
    			}
    		}
    	});	
    });

  4. #4
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code:
    } else {
        console.log("About to do ajax request to index.php?route=checkout/payment");
        $.ajax({
         url: 'index.php?route=checkout/payment',
         dataType: 'json',
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  5. #5
    SitePoint Enthusiast
    Join Date
    Dec 2010
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi...Jhon...

    I go with chorme developers tool...and i checked...

    its retruning with the object...

    Code:
    output: "<p>Please select the preferred payment method to use on this order.</p>
    ↵<table class="form">
    ↵    <tr>
    ↵    <td style="width: 1px;">            <input type="radio" name="payment_method" value="cod" id="cod" checked="checked" />
    ↵      </td>
    ↵    <td><label for="cod">Cash On Delivery</label></td>
    ↵  </tr>
    ↵  </table>
    ↵<b>Add Comments About Your Order</b>
    ↵<textarea name="comment" rows="8" style="width: 98%;"></textarea>
    ↵<br />
    ↵<br />
    ↵<div class="buttons">
    ↵  <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" />
    ↵        <a id="button-payment" class="button"><span>Continue</span></a></div>
    ↵</div>
    ↵<script type="text/javascript"><!--
    ↵$('.fancybox').fancybox({
    ↵	width: 560,
    ↵	height: 560,
    ↵	autoDimensions: false
    ↵});
    ↵//--></script>  
    ↵<script type="text/javascript">
    ↵$('.button').button();
    ↵</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...

  6. #6
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code:
    if (json['output']) {
        console.log("JSON Output:", json.output);
        $('#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.
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  7. #7
    SitePoint Enthusiast
    Join Date
    Dec 2010
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •