Question

I just wrote some code, looked it over, and wanted to cry. Lines that end in .’\’);”>’; cannot be a good thing.

I’m writing an ajax function to return a new row to add to a table. The row uses javascript to be user editable.

$ident=mysql_insert_id().'_c_label';

    $html='<tr>';
        $html.='<td class="label" id="'.$ident.'" onclick="editTextStart(\''.$ident.'\');">';
            $html.='<div>';
                $html.='<span id="'.$ident.'_field">'.self::default_label.'</span>';
                $html.='<input id="'.$ident.'_input" type=text onblur="editTextEnd(\''.$ident.'\');" onclick="editTextEnd(\''.$ident.'\');"/>';
            $html.='</div>';
        $html.='</td>';
        $html='<td>';
        $html.='</td>';
        $html='<td>';
        $html.='</td>';
        $html='<td>';
        $html.='</td>';
    $html.='</tr>';

    return $html;

So how should I be going about this to get html and javascript variables out of my php?

Answer 1

Use an external JavaScript file, which you include with a script tag just before your closing </body> tag (or in the head, there are trade-offs — off-topic discussion of them below). You can hook up event handlers at that point by using DOM selectors and/or IDs and attachEvent (IE) or addEventListener (standard).

For instance, say your structure looks like this:

<table id='niftyStuff'>
    <tbody>
        <tr>
            <td>Cool</td>
            <td>Stuff</td>
        </tr>
        <tr>
            <td>Cool</td>
            <td>Stuff</td>
        </tr>
    </tbody>
</table>

Then with straight JavaScript+DOM methods, you can hook up a click handler to the cells like this:

var table, cells, index;
table  = document.getElementById('niftyStuff');
cells = table.getElementsByTagName('td');
for (index = 0; index < cells.length; ++index) {
    hookEvent(cells.item(index), 'click', clickHandler);
}

function clickHandler() {
    // Handle the click; `this` will refer to the cell
}

// Convenience function defined somewhere to smooth out IE/Standards
function hookEvent(element, name, handler) {
    if (element.attachEvent) {
        element.attachEvent("on" + name, handler);
    }
    else if (element.addEventListener) {
        element.addEventListener(name, handler, false);
    }
    else {
        throw "Unsupported browser";
    }
}

(Or you can define hookEvent in a way that only looks for which version to use once, but it would be over-complex for the example above.)

Off-topic, but if that hookEvent looks awkward, a using a library like jQuery, Prototype, YUI, Closure, or any of several others can really help smooth these browser differences out.

For instance, with jQuery:

$('#niftyStuff td').click(clickHandler);
function clickHandler() {
    // Handle the click; `this` will refer to the cell
}

(Edit Sounds from your comment below like you’re using jQuery, so here’s a live example for the above.)

With Prototype:

$$('#niftyStuff td').invoke('observe', 'click', clickHandler);
function clickHandler() {
    // Handle the click; `this` will refer to the cell
}

Off-topic: I said above to put your script tag at the end of the body. That’s just one choice. If you do, the DOM will reliably be ready to be searched, etc., you don’t have to wait for window.onload which happens much, much later or rely on “ready” events. But if your script file isn’t coming from the browser cache, there’s a delay while your page may be showing (and your user clicking) before you hook things up. On the up side, your page displays more quickly (because the script file didn’t hold things up by being in the head); on the downside, you probably don’t want them frustrated by clicking before you’re ready (although the gap is quite small). So where you put it is a balance between those things. If you’re worried about people jumping on clicks, put the script in head but then have a small script tag at the end of body that calls a function defined in the file that hooks things up. Or use a ready event (most libraries provide them). Or there are sophisticated strategies to use a small inline script to capture and defer clicks.