Динамическое воссоздание формы HTML / jQuery Mobile в jQuery

Question

Динамическое воссоздание формы HTML / jQuery Mobile в jQuery

0

Как я могу динамически воссоздать следующую форму jQuery Mobile в jQuery? Я в основном хочу попробовать и взять как можно меньше строк кода. Все, что Ive пробовало до сих пор, заканчивается примерно такой же длины. Любые предложения и советы приветствуются!

    <div data-role="page" id="create-person-dialog">
        <div data-role="header" data-theme="c" >
            <h1></h1>
        </div>
        <div data-role="content">                         
                <form id="create-person-dialog">
                <fieldset data-role="fieldcontain"> 
                    <textarea data-theme="b" type="input" id="editFirstName" placeholder="First Name"></textarea>
                </fieldset>
                <fieldset data-role="fieldcontain"> 
                    <textarea type="input" id="editLastName" placeholder="Last Name *"></textarea>
                </fieldset>
                <fieldset data-role="fieldcontain"> 
                        <select id="editSalutation" data-native-menu="false">
                          <option> </option>
                          <option value="Mr.">Mr.</option>
                          <option value="Ms.">Ms.</option>
                          <option value="Mrs.">Mrs.</option>
                        </select>
                </fieldset>
                    <button href="#" id="edit" data-theme="b" data-role="button">Save</button>  

                    <div id="delete">
                        <button data-icon="delete" data-iconpos="right" data-theme="a" type="button">Delete</button>
                    </div>  
            </form>
        </div>
    </div>

Вот начало моей первой попытки, я просто создаю пустой div и начинаю добавлять...

JQuery:

   $('#create-contact-dialog').append("<div id='dataRole' data-role='content'></div>");
   $('#create-contact-dialog #dataRole').append("<form id='create-contact-dialog'></form>");
   $('#create-contact-dialog form').append("<fieldset data-role='fieldcontain'></fieldset>");
   $('#create-contact-dialog fieldset').append("<textarea data-theme='b' type='input' id='firstName' placeholder='First Name'></textarea>");

Daft 18 сен. 2013, в 12:35

Источник

Теги:

jquery

html

jquery-mobile

1 ответ

Ещё вопросы

Daft · Answer 1 · 2013-09-18T08-47-00.000Z

Просто решил взломать все это в обычном jQuery и скрыть его в нижней части страницы.

Для тех, кто когда-либо нуждается в большой старой форме...

   jQuery('#create-contact-dialog')
        .append("<div id='dataRole' data-role='content'></div>");
   jQuery('#create-contact-dialog #dataRole')
        .append("<form id='create-contact-dialog'></form>");
   jQuery('#create-contact-dialog form')
        .append("<fieldset id='fnFeild' data-role='fieldcontain'></fieldset>");
   jQuery('#create-contact-dialog #fnFeild')
        .append("<textarea data-theme='b' type='input' class='reg' id='firstName' placeholder='First Name'></textarea>");
   jQuery('#create-contact-dialog form')
        .append("<fieldset id='lnFeild' data-role='fieldcontain'></fieldset>");
   jQuery('#create-contact-dialog #lnFeild')
        .append("<textarea data-theme='b' type='input' class='reg' id='lastName' placeholder='Last Name *'></textarea>");
   jQuery('#create-contact-dialog form')
        .append("<fieldset id='sFeild' data-role='fieldcontain'></fieldset>");
   jQuery('#create-contact-dialog #sFeild')
        .append("<select id='salutation' placeholder='Salutation'></select>");     
   jQuery('#create-contact-dialog form')
        .append("<fieldset id='tFeild' data-role='fieldcontain'></fieldset>");
   jQuery('#create-contact-dialog #tFeild')
        .append("<textarea data-theme='b' type='input' class='reg' id='title' placeholder='Title'></textarea>");
   jQuery('#create-contact-dialog form')
        .append("<fieldset id='dFeild' data-role='fieldcontain'></fieldset>");
   jQuery('#create-contact-dialog #dFeild')
        .append("<textarea data-theme='b' type='input' class='reg' id='department' placeholder='Department'></textarea>");
   jQuery('#create-contact-dialog form')
        .append("<fieldset id='accFeild' data-role='fieldcontain'></fieldset>");
   jQuery('#create-contact-dialog #accFeild')
        .append("<textarea data-theme='b' type='input' class='reg' id='account' placeholder='Account'></textarea>");
   jQuery('#create-contact-dialog form')
        .append("<fieldset id='btnFeild' data-role='fieldcontain'></fieldset>");
   jQuery('#create-contact-dialog #btnFeild')
        .append("<button href='#' data-theme='b' data-role='button' id='save'>Save</button>");

Я заполняю select с помощью функции, вызываемой при вызове диалога:

        function populateSel(){
         jQuery("#salutation")
         .append('<option value=""></option>')
         .append('<option value="Mr.">bar</option>')
         .append('<option value="Ms."></option>')   
         .append('<option value="Mrs."></option>')  
         .append('<option value="Dr."></option>')   
         .append('<option value="Prof."></option>')        
     }