0
私は、ajax経由で使用されるHTMLを処理するための「スペック」または「適切な」方法が何であるか疑問に思っていました。ajax HTMLブロックを適切に処理する方法
たとえば、使用している実際のページにすべてのHTMLを保存する必要がありますか？または、それをロードするために私はちょうどajaxコールを行うべきですか？
負荷が少なくてもページにロードされ続けるパフォーマンスが向上していますか？または、余分なデータをページロード時にロードしてオフセットします。
ここに私が意味するものを示すスクリーンショットがあります。ユーザーが提供する内容に応じて変更される{名前}が表示されます（もちろん限定キャラクター）。
ご意見・ご感想ありがとうございます。ありがとう！
<!-- text field -->
<div class="add-field-wrapper float-left">
<input type="radio" value="text" name="input_type" id="rad-type-text" class="type-radio-btn">
<label for="rad-type-text" class="radio-lbl" data-tooltip="Used for simple inputs such as: <b>Phone Number</b> or <b>Email Address</b>">
<img src="https://placeholdit.imgix.net/~text?txtsize=16&txt=70x70&w=70&h=70" class="field-type-icon" />
<div class="field-type-text">Text Field</div>
</label>
</div>
<!-- select -->
<div class="add-field-wrapper float-left">
<input type="radio" value="select" name="input_type" id="rad-type-select" class="type-radio-btn">
<label for="rad-type-select" class="radio-lbl" data-tooltip="Use this option when you need to provide a list of choices for the user." >
<img src="https://placeholdit.imgix.net/~text?txtsize=16&txt=70x70&w=70&h=70" class="field-type-icon" />
<div class="field-type-text">Select Menu</div>
</label>
</div>
<!-- textarea -->
<div class="add-field-wrapper float-left">
<input type="radio" value="textarea" name="input_type" id="rad-type-textarea" class="type-radio-btn">
<label for="rad-type-textarea" class="radio-lbl" data-tooltip="The textarea field will appear as a <b>WYSIWIG</b> (What you see is what you get) editor. This allows for some customization of the appearance of the input.">
<img src="https://placeholdit.imgix.net/~text?txtsize=16&txt=70x70&w=70&h=70" class="field-type-icon" />
<div class="field-type-text">Text Area</div>
</label>
</div>
編集：
<!-- Datepicker HTML block - used in JS -->
<div id="datepicker_html" style="display: none;">
<div id="{name}-block" class="datepicker-wrapper form-input-wrapper">
<div class="template-drag-handle"><img src="images/design/up-down-icon.png" class="template-drag-handle-icon" alt="Drag" /></div>
<div class="inputs-wrapper">
<div class="form-row"><input type="text" name="{name}" class="input-datepicker" placeholder="{placeholder}" id="{name}"/></div>
</div>
<?php echo $default_template_chkbox_options_html; ?>
</div>
</div>
HTMLの "作品" だ...それはJS変数にロードされる：
それらの提示のための部分のソース
これが処理するものです。名前を追加し、プレースホルダを変更します
function addDatePickerField(){
//Get the HTML
var datepicker_html = $('#datepicker_html').html();
datepicker_html = datepicker_html.replaceAll(/{name}/g, input_name_underscores);
datepicker_html = datepicker_html.replaceAll('{placeholder}', input_name);
$('#template-fields-wrapper').append(datepicker_html);
wrapUpAddInput('datepicker');
}
私はちょうどAJAX呼び出しを行う「外部」を格納する方が良いだろう場合は、今didntの（これらは、あなたが望む何度でも再利用することができます）htmlと私はそれを必要なときにそれを呼び出します - そのdatepickerのHTMLブロックのように、別のファイルに格納され、リンク上でDOMにロードされます。
...それは、AJAX呼び出しによってHTMLを読み込むか、ハードHTMLファイルにコード化され、それを残す方が良いでしょう場合は、求めていますか？また、その{name}式は何ですか？ angular.jsか何かからですか？あなたはそれをどのように使って管理しましたか？ – OzzyTheGiant
ほとんどのものと同様に、それは異なります。私は通常、AJAXリクエストで*データのみを返送し、それが所属するデータをjavascriptで置きますが、完全なHTMLを返すのが理にかなっていることもあります。 –
**開発者用コンソールの画像を埋め込むことをお勧めするすべてのユーザー**：「ソースの表示」からのものであれ、実際のマークアップをコピーして貼り付けるのと同じくらい簡単で便利ですあなたのコンソールから。 –