在php内部回显javascript，无法获得正确的引号

Question

I want to have some javascript execute based on some php if statement, but I can't get the quotes around my link correct .. In console it shows that a ) is missing from the following line. I'm sure I messed up the quotes, it was correct when I just had it javascript, but now mixing with echo I can't get it. I'm using single quotes around the whole thing and doubles inside. The rest is working, please take a look and help me fix this line. Thanks!

$(this).append("<a href=""index.php?patient=test&a="".""appointment_nums[count]""."">Schedule Appointment   </a>"); 


if ($mode== 'view' && $action==''){
    echo '<script >

$(document).ready(function(e){

    $("body").click(function(event) {
redirect = $(event.target).context.getAttribute("href");
});


checkColumns(); 


});

function checkColumns(){

     count=0;

appointment_nums = [];
$(".mgrid_table > tbody > tr").each(function() {

appointment_nums.push($(this).find("td").eq(3).find("label").html());

appointment_nums = appointment_nums.filter(function(n){ return n != undefined     }); 

});
appointments = appointment_nums.length;

appendColumns();

}
function appendColumns(){


 function ajax() {

    return $.ajax({
        type:"post",
        url: "../testrequest.php",
        data : {appointment_nums:appointment_nums},
        dataType:"json",
    });
    };

ajax().done(function(result){

$("table:nth-of-type(2) > tbody > tr > td:nth-of-type(2)").each(function() {    
if($(this).children().length < 1){
    if (result[count] == false){
    $(this).append("<a href=""index.php?patient=test&a="".""appointment_nums[count]""."">Schedule Appointment   </a>"); 
    }else{

        $(this).append("<span>Waiting For Doctor to Schedule</span>");
        }
}
    count = count + 1 ;
});

});
}
</script>';

Answer 1

Either vary the quote types, or start escaping. e.g. with this raw (and broken) snippet:

.append("<a href="foo.php" onclick="someFunction("hi mom!");">");

you actually have code 3 levels deep. There's the original Javascript (layer 1):

.append("<a href="foo.php" onclick="someFunction("hi mom!");">");
        ^--------------layer 1--------------------------------^

Then there's the embedded HTML (layer 2):

.append("<a href="foo.php" onclick="someFunction("hi mom!");">");
                 ^-------^         ^----------layer 2---------^

And then there's the sub-embedded Javascript (layer 3):

.append("<a href="foo.php" onclick="someFunction("hi mom!");">");
                                                 ^-------^

IN every case, you have to use the quotes appropriate for the layer you're embedding within. So to embed your layer 2 quotes within layer 1, use escapes:

.append("<a href=\"foo.php\" onclick=\"someFunction(\"hi mom!\");\">");

So now you've got valid Javascript at layer 1. But the HTML itself is still broken, because once that snippet is embedded in the DOM, you end up with

<a href="foo.php" onclick="someFunction("hi mom!");">
                          ^---start attribute
                                        ^---end attribute
                                                   ^--start unterminated attribute

So now you have to worry about embedding layer 3 in layer 2. Since it's Javascript-in-html:

.append("<a href=\"foo.php\" onclick=\"someFunction(&quot;hi mom!&quot;);">\");
                 ^--------^----------^ etc... layer 2-in-1 escapes
                                                    ^^^^^--------^^^^^ layer 3-in-1 quotes

Basically - you always have to consider the context in which the code will be seen. If you're embedding HTML in javascript, any quotes in HTML must also be valid Javascript. If you're embedding Javascsript in HTML, then any JS quotes must also produce valid HTML. And when you're nesting languages 3 or 4 levels deep, you have to consider ALL of the layers. Every layer must itself be valid to all of the parent layers.