2010-11-03 63 views
1

我剛寫了一些代碼,看了一下,想哭了。以''結尾的行');「>';不能是件好事如何從我的ajax php函數中獲取html和javascript?

我正在寫一個ajax函數來返回一個添加到表中的新行該行使用javascript來作爲用戶可編輯的。

$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; 

因此,如何我應該會對此獲得HTML和JavaScript變量了我的PHP的?

回答

1

使用外部JavaScript文件,你只是你結束</body>標籤之前包括與script標籤(或在head,有折衷  —題外話題討論以下)。您可以使用DOM選擇器和/或ID以及attachEvent(IE)或addEventListener(標準)連接事件處理程序。

例如,假設您的結構是這樣的:

<table id='niftyStuff'> 
    <tbody> 
     <tr> 
      <td>Cool</td> 
      <td>Stuff</td> 
     </tr> 
     <tr> 
      <td>Cool</td> 
      <td>Stuff</td> 
     </tr> 
    </tbody> 
</table> 
直的JavaScript + DOM方法

然後,您可以掛鉤這樣一個單擊處理的細胞:

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"; 
    } 
} 

(或者你可以定義hookEvent的方式只能查找一次使用哪個版本,但對於上述示例來說,這樣做會過於複雜。)

偏離主題,但如果hookEvent看起來很尷尬,那麼使用像jQuery,Prototype,YUI,Closureany of several others這樣的庫可以真正幫助平滑瀏覽器差異。

例如,使用jQuery:

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

下面就像你使用jQuery編輯從您的評論的聲音,所以這裏是爲上述一live example。)

隨着原型:

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

題外話:我上面說的把你的script標籤在身體的盡頭。這只是一個選擇。如果這樣做,DOM 可靠地準備好進行搜索等,您don't have to waitwindow.onload發生很多,更晚或依賴「準備好」事件。但是,如果您的腳本文件不是來自瀏覽器緩存,那麼您的網頁可能會顯示一段延遲(並且您的用戶點擊),然後再進行連接。另一方面,頁面顯示速度更快(因爲腳本文件不在head中);在不利的方面,你可能不希望他們在你準備好之前點擊而感到沮喪(儘管差距很小)。所以你把它放在那些東西之間是平衡的。如果您擔心人們跳躍點擊,請將腳本放在head中,但在body的末尾有一個小腳本標記,該標記調用文件中定義的函數來掛鉤事件。或使用一個ready事件(大多數圖書館提供它們)。或者有複雜的策略可以使用小型內聯腳本來捕獲和推遲點擊。

+0

我嘗試儘可能使用外部js文件。但是,由於這一行是動態生成的,我怎樣才能將它連接到外部文件? – Matt 2010-11-03 14:48:04

+0

@Matt:我發現我幾乎可以通過給自己一些固定點然後從那裏導航來把事情搞定。例如,在我剛剛添加的示例中,固定點是表格,然後從那裏導航到單元格。 – 2010-11-03 14:51:37

+0

啊謝謝你。這jquery看起來像我想要的,假設'this'實際上是指'this' – Matt 2010-11-03 15:07:02

1

我不知道你所說的「獲取HTML ...我的PHP的」的意思,但這樣的事情應該是更好:

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

return $html; 

注意,這裏使用heredoc syntax,這StackOverflow的解析器無法應付,因此醜陋的格式。

您還可以通過使用addEventListener/attachEvent將嵌入式Javascript調用移動到外部文件中,但如果要動態添加內容,這樣會更棘手。

相關問題