Question

I am getting the invalid label error now I have upgraded my jQuery. I read that the new 1.5 version is now more strict on the JSON encoding. Although I use Zend_Json::encode(array(“content”=>$result)); to encode the HTML so would of thought this would .

I read in the manual that it has been updated although cant get this to work without parse errors.
jQuery JSON Manual

Error: invalid label
Source File: http://domain.local/register/#
Line: 0, Column: 1
Source Code:
{"content":"<div id=\"captcha_captcha.json\">\r\n<div class=\"input\">\r\n\t<div class=\"text-small\"><input type=\"text\" size=\"12\" name=\"captcha.json[input]\" id=\"captcha_id\" \/><\/div> \r\n\t<img src=\"http:\/\/domain.local\/tmp\/captchas

This is my JavaScript code.

function regenerateCaptcha<?php echo $params["name"]?>(){
    captcha_id = "captcha_<?php echo $params["name"]?>";

        $.getJSON("/default/captcha/regeneratecaptcha/name/<?php echo $params["name"]?>.json", function(data){
               success : pasteCaptcha<?php echo $params["name"]?>
        });
    } 

    function pasteCaptcha<?php echo $params["name"]?>(json){
        $("#captcha_<?php echo $params["name"]?> .input").replaceWith(json.content);
    }

And when I view the source of the URL:

{"content":"<div id=\"captcha_captcha\">\r\n<div class=\"input\">\r\n\t<div class=\"text-small\"><input type=\"text\" size=\"12\" name=\"captcha[input]\" id=\"captcha_id\" \/><\/div> \r\n\t<img src=\"http:\/\/fantasyolympics.local\/tmp\/captchas\/6498c75d8e3f9b8ed2cbb7a066f962a6.png\" class=\"captcha\" width=\"185\" height=\"36\" \/>\r\n    <input type=\"hidden\" name=\"captcha[id]\" value=\"6498c75d8e3f9b8ed2cbb7a066f962a6\" \/>    \r\n    <a href=\"#\" onclick=\"regenerateCaptchacaptcha();return false;\" class=\"captcha_refresh\" title=\"Try a new code\"><\/a>\t\r\n<\/div>\r\n<\/div>\r\n<script type=\"text\/javascript\">\r\n\tfunction regenerateCaptchacaptcha(){\r\n\t\tcaptcha_id = \"captcha_captcha\";\r\n\r\n\t\t$.getJSON(\"\/default\/captcha\/regeneratecaptcha\/name\/captcha.json\", function(data){\r\n            success : pasteCaptchacaptcha\t    });\r\n\t} \r\n\t\r\n\tfunction pasteCaptchacaptcha(json){\r\n\t\t$(\"#captcha_captcha .input\").replaceWith(json.content);\r\n\t}\r\n<\/script>\r\n"}

Answer 1

I solved a similar problem just now.

The reason jQuery throws an invalid label error is that it expects services to respond in JSONP format not JSON format. If your service responds in JSON format you will get this error message.

The workaround for this is to make an asynchronous call to your service and then parse your result with jQuery.parseJSON. To call a service that responds in JSON format your code should look something like this:

    function createRequest() {
       try { return new XMLHttpRequest(); } catch(e) {}
       try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {}
       alert("XMLHttpRequest not supported");
       return null;
     }

    var request = createRequest();
    request.open(“GET”, HTTP://URL.of.service.to.call, true);
    request.onreadystatechange = callback;
    request.send(null);

   function callback() {
        if(request.readyState != 4) { return }
        ObjectYouWant = $.parseJSON(request.responseText);
    }

I got this solution working in my app by adapting code found on AjaxPatterns.org and the jQuery.com