The AJAX portion takes a name out of a text field, sends it to a mod_perl handler, and sends back the 'original' javascript to rebuild the same link (the new name) with an onClick handler associated with it. the code, before being clicked and turned into the AJAX widget, looks like this:
titleValue
When the link is clicked, the span's innerHTML is changed to a text box and a button with the associated onClick handler added to the button. The AJAX portion works; the database is updated with the new value, and I try to recreate the above code using the values passed to the handler.
I can't seen to get the quoting right, and I've been fighting with it for hours now. What I'm currently sending back to the AJAX request is:
$response = "\$('override_$componentId').innerHTML=\"$newTitle';";
Which, when evaluated on the client side
eval( request.responseText );throws a syntax error: Syntax Error: missing semicolon before statement.
(I'm using the Prototype libraries to handle the AJAX abstraction.)
The JavaScript code you are sending (as seen by using print $response) is:
$('override_...').innerHTML="...';
but it should be
$('override_...').innerHTML="...";
The first double-quote is wrongly closed with a single quote, and you have unescaped double-quotes.
Other potential problems:
- Is $('override_123') valid JavaScript? I've never seen that syntax before, but I have little JavaScript experience.
- Are $componentId, $componentType and $newTitle properly escaped to be used in a JavaScript double-quoted string? (\ => \\, " => \")
- Are $componentId, $componentType and $newTitle properly escaped to be used in an HTML single-quoted value? (& => &, ' => ')
- Is $newTitle properly escaped to be used in HTML? (& => &, < => <)
Update: The following addresses quoting issues:
use strict;
use warnings;
use HTML::Entities qw( encode_entities );
sub js_from_text {
for (@_ ? $_[0] : $_) {
s/([\\"])/\\$1/g;
return qq{"$_"};
}
}
sub html_from_text {
for (@_ ? $_[0] : $_) {
return encode_entities($_);
}
}
my ($text_componentId, $text_componentType, $text_newTitle) = ...;
my $js_component = js_from_text("override_$text_componentId");
my $js_componentId = js_from_text($text_componentId);
my $js_componentType = js_from_text($text_componentType);
my $js_newTitle = js_from_text($text_newTitle);
my $js_onClick = "makeForm($js_componentId, $js_componentType, $js_newTitle);";
my $html_onClick = html_from_text($js_onClick);
my $html_newTitle = html_from_text($text_newTitle);
my $html = qq{$html_newTitle};
my $js_html = js_from_text($html);
my $js_response = "\$($js_component).innerHTML = $js_html;";
print("$js_response\n");
There is a situation where hungarian notation is very useful. [http://www.joelonsoftware.com/articles/Wrong.html|Making Wrong Code Look Wrong] is a worthwhile read.
the values i've been using for the three vars don't need escapes. i can tackle that issue once i have a working repsonseText replacer. they've been simple strings.
$('overide_123').innerHTML is valid javascript. the same handler uses it for another (working) part of the application.
The $('someId') is syntactic sugar provided by the Prototype library to fetch the DOM object for the element with that tag. If passed anything rather than a string it returns that object. More info here on the script.aculo.us wiki.
$response = "\$('override_$componentId').innerHTML=\"$newTitle\";";
print qq{
{"componentId": "$componentId",
"html": "$newTitle"}
};
Inside your JavaScript, use:
jsonText = eval( '(' request.responseText ')' );
$('override_' + jsonText.componentId).innerHTML = jsonText.html;