Как я могу получить html и javascript из моей функции PHP ajax? - PullRequest
Новая
       2

Как я могу получить html и javascript из моей функции PHP ajax?

1 голос
/ 03 ноября 2010

Я только что написал код, посмотрел его и захотел заплакать.Строки, заканчивающиеся на '.редактируемый пользователем. 

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

Ответы [ 2 ]

1 голос
/ 03 ноября 2010

Я не уверен, что вы подразумеваете под "получить 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 , с которым парсер StackOverflow не может справиться, отсюда и уродливое форматирование.

Вы также можете переместить встроенные вызовы Javascript во внешний файл, используя addEventListener / attachEvent, но это будет сложнее, если вы добавляете контент динамически.

1 голос
/ 03 ноября 2010

Используйте внешний файл JavaScript, который вы включаете с тегом script непосредственно перед закрывающим тегом </body> (или в head есть компромиссы - обсуждение их не по теме ниже).В этот момент вы можете подключить обработчики событий, используя селекторы DOM и / или идентификаторы и 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 , Прототип , YUI , Закрытие или Любой из нескольких других действительно может помочь сгладить эти различия браузера.

Например, с jQuery: 

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

( Редактировать Звучит из вашего комментария ниже, как если бы вы использовали jQuery, так что вот живой пример длявыше.)

с прототипом: 

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

не по теме : я сказал выше, чтобы поставить ваш тег script наконец тела.Это только один выбор.Если вы это сделаете, DOM будет надежно готов к поиску и т. Д., Вам не нужно ждать для window.onload, что происходит много, намного позже или полагаться на "готовые "события.Но если ваш файл скрипта не поступает из кэша браузера, может возникнуть задержка, пока ваша страница может показываться (и ваш пользователь нажимает), прежде чем что-то подключить.С другой стороны, ваша страница отображается быстрее (потому что файл сценария не удерживал вещи, находясь в head);с другой стороны, вы, вероятно, не хотите, чтобы они были разочарованы, если вы нажмете, прежде чем будете готовы (хотя разрыв довольно мал).Так что, где вы положили, это баланс между этими вещами.Если вы беспокоитесь о людях, прыгающих по щелчкам, поместите скрипт в head, но затем в конце body добавьте небольшой тег скрипта, который вызывает функцию, определенную в файле, которая подключается.Или используйте событие ready (большинство библиотек предоставляют их).Или существуют сложные стратегии использования небольшого встроенного скрипта для захвата и отсрочки кликов.

...