Проверенные переключатели не работают правильно в модальном диалоге jQuery

Question

Проверенные переключатели не работают правильно в модальном диалоге jQuery

0

У меня есть регистрационная форма, которая позволяет пользователю зарегистрироваться как один из двух типов пользователей. Выбор осуществляется путем выбора радиокнопки, в зависимости от выбранной радиокнопки, будут показаны разные формы регистрации через всплывающее диалоговое окно jquery modal,

Моя проблема в том, что в настоящий момент работают переключатели, и модальные диалоги отображаются правильно. ОДНАКО, при вызове другого диалога радиокнопки не обновляются (т.е. Они не отображают текущий отображаемый диалог), даже если диалоги меняются. (Пример приведен в ссылке JsFiddle ниже)

Например, когда вы нажимаете "Зарегистрироваться" в первый раз, открывается диалоговое окно, и пользователь может нажать "Бизнес", и он переключится без каких-либо проблем. Однако после этого, когда пользователь снова попытается снова вернуться к "Пользователь", переключатель не переключится обратно, чтобы отобразить, что выбрано "Пользователь", даже если диалог уже переключился на диалог "Пользователь".

Как я могу убедиться, что переключатели соответствуют отображаемым диалогам?

HTML (Extract):

     <form id='Login' name='Login' method='post' action='login.php'>
    <table id='MainPage' name='MainPage' border='1'>

        <tr>
            <td><label for='LoginEmail'>Email:</label></td>
            <td><input type='text' class='Login' id='LoginEmail' name='LoginEmail' size='50' maxlength='50'></td>
        </tr>

        <tr>
            <td><label for='LoginPassword'>Password:</label></td>
            <td><input type='password' class='Login' id='LoginPassword' name='LoginPassword' size='50' maxlength='60'></td>
        </tr>

        <tr>
            <td><span id='Register' name='Register' class='Registration' >Register </span></td>
            <td><span id='ForgotPassword' name='ForgotPassword' class='Registration' >&nbsp Forgot Password</span></td>

            <td><input type='submit' name='LoginSubmit' id='LoginSubmit' value='Login'></td>
        </tr>

    </table>
    </form>




<div id='CreateUserForm' name='CreateUserForm' class='ModalDialog'>
    <form id='UserCreate' name='UserCreate' action='registeruser.php' method='POST' enctype="multipart/form-data" novalidate="novalidate">

    <div class='UserCreateField'>
        I would like to register as a :
        <label for='UserCreateUser'>User</label>
        <input type='radio'  name='UserCreateType' id='UserCreateUser' value='User' checked />

        <label for='UserCreateBusiness'>Business</label>
        <input type='radio'  name='UserCreateType' id='UserCreateBusiness' value='Business' />
    </div><br />

    <div class='UserCreateField'>
        <label for='UserCreateEmail'>Email:</label>
        <div class='UserCreateInput'><input type='text' size='50' name='UserCreateEmail' id='UserCreateEmail' /></div>
        <span>dasdasdasdasdasdsadasdasdasdasdadsaddsadsaddsa</span>
    </div><br />

    <div class="UserCreateField">
        <label for="UserCreateConfirmEmail'">Confirm Email:</label>
        <div class="UserCreateInput"><input type="text" size="50" name="UserCreateConfirmEmail" id="UserCreateConfirmEmail"></div>
        <span></span>
    </div><br />

    <div class='UserCreateField'>
        <label for='UserCreatePassword'>Password:</label>
        <div class='UserCreateInput'><input type='password' size='50' name='UserCreatePassword' id='UserCreatePassword' /></div>
        <span></span>
    </div><br />

    <div class='UserCreateField'>
        <label for='UserCreateConfirmPassword'>Confirm Password:</label>
        <div class='UserCreateInput'><input type='password' size='50' name='UserCreateConfirmPassword' id='UserCreateConfirmPassword' /></div>
        <span></span>
    </div><br />


    <div class='ModalButton'>
        <input type="button" id="UserCreateCancel" name="UserCreateCancel" class='ModalDialogButton' value="Cancel">
        <input type="button" id="UserCreateSubmit" name="UserCreateSubmit" class='ModalDialogButton' value="Submit">
    </div>


    </form> 
</div>



<div id='CreateBizForm' name='CreateBizForm' class='ModalDialog'>
    <form id='BusinessCreate' name='BusinessCreate' action='registerbusiness.php' method='POST' enctype="multipart/form-data" novalidate="novalidate">

    <div class='BusinessCreateField'>
        I would like to register as a :
        <label for='BusinessCreateUser'>User</label>
        <input type='radio'  name='BusinessCreateType' id='BusinessCreateUser' value='User' />

        <label for='BusinessCreateBusiness'>Business</label>
        <input type='radio'  name='BusinessCreateType' id='BusinessCreateBusiness' value='Business' checked />
    </div><br />

    <div class='BusinessCreateField'>
        <label for='BusinessCreateEmail'>Email:</label>
        <div class='BusinessCreateInput'><input type='text' size='50' maxlength='50' name='BusinessCreateEmail' id='BusinessCreateEmail' /></div>
        <span></span>
    </div><br />

    <div class="BusinessCreateField">
        <label for="BusinessCreateConfirmEmail'">Confirm Email:</label>
        <div class="BusinessCreateInput"><input type="text" size="50" maxlength='50' name="BusinessCreateConfirmEmail" id="BusinessCreateConfirmEmail"></div>
        <span></span>
    </div><br />

    <div class='BusinessCreateField'>
        <label for='BusinessCreatePassword'>Password:</label>
        <div class='BusinessCreateInput'><input type='password' size='50' name='BusinessCreatePassword' id='BusinessCreatePassword' /></div>
        <span></span>
    </div><br />

    <div class='BusinessCreateField'>
        <label for='BusinessCreateConfirmPassword'>Confirm Password:</label>
        <div class='BusinessCreateInput'><input type='password' size='50' name='BusinessCreateConfirmPassword' id='BusinessCreateConfirmPassword' /></div>
        <span></span>
    </div><br />

    <div class='BusinessCreateField'>
        <label for='BusinessCreateBusinessName'>Business Name:</label>
        <div class='BusinessCreateInput'><input type='text' size='50' maxlength='50' name='BusinessCreateBusinessName' id='BusinessCreateBusinessName' /></div>
        <span></span>
    </div><br />

    <div class='BusinessCreateField'><!--Category-->
        <label for='BusinessCreateCategory'>Business Category</label>
        <div class='BusinessCreateInput'><select name='BusinessCreateCategory' id='BusinessCreateCategory'></select></div>
        <span></span>
    </div><br />

    <div class='BusinessCreateField'><!--SubCategory-->
        <label for='BusinessCreateSubCategory'>Business SubCategory</label>
        <div class='BusinessCreateInput'><select name='BusinessCreateSubCategory' id='BusinessCreateSubCategory'></select></div>
        <span></span>
    </div><br />

    <div class='BusinessCreateField'>
        <label for='BusinessCreateBusinessAddress'>Address:</label>
        <div class='BusinessCreateInput'><input type='text' size='50' maxlength='300' name='BusinessCreateBusinessAddress' id='BusinessCreateBusinessAddress' /></div>
        <span></span>
    </div><br />

    <div class='BusinessCreateField'>
        <label for="BusinessCreateDescription">Business Description:</label><br>
        <textarea class='BusinessCreateInput' name='BusinessCreateDescription' id='BusinessCreateDescription' cols='39' rows='5'  maxlength='500' ></textarea>
        <span></span>
    </div><br />

    <div class='BusinessCreateField'>
        <label for='BusinessCreateFileUpload'>DisplayPic:</label>
        <div class='BusinessCreateInput'><input type='file' name='BusinessCreateFileUpload' id='BusinessCreateFileUpload' /></div>
        <span></span>
    </div><br />


    <div class='ModalButton'>
        <input type="button" id="UserCreateCancel" name="BusinessCreateCancel" class='ModalDialogButton' value="Cancel">
        <input type="button" id="UserCreateSubmit" name="BusinessCreateSubmit" class='ModalDialogButton' value="Submit">
    </div>

    </form>
</div>

JQuery:

 $(document).ready(function(){

    $('#CreateUserForm').hide();
$('#CreateBizForm').hide();



$('#Register').on('click',function(){

    $('#CreateUserForm').dialog("open");

});


$('#CreateUserForm').dialog({

    autoOpen: false,
    closeOnEscape:false,
    draggable:false,
    resizable:false,
    modal:true,
    minWidth:400

});

$('#CreateBizForm').dialog({

    autoOpen: false,
    closeOnEscape:false,
    draggable:false,
    resizable:false,
    modal:true,
    minWidth:400,
    height:'auto',
    show:"slide"

});

$('#UserCreateBusiness').on('click',function(){

    $('#CreateUserForm').dialog("close");
    $('#CreateBizForm').dialog("open");
    //$('#BusinessCreateBusiness').attr('checked','checked');

});

$('#BusinessCreateUser').on('click',function(){

    $('#CreateBizForm').dialog("close");
    $('#CreateUserForm').dialog("open");
    //$('#UserCreateUser').attr('checked','checked');

});

    });

По достоинству оценят любые идеи. благодаря

EDIT: ссылка Jsfiddle

http://jsfiddle.net/5Y5ZM/4/

Kenneth .J 09 дек. 2013, в 13:11

Источник

0

Что вы имеете в виду под "переключатели не обновляются"? Можете ли вы привести свой пример на jsfiddle.net ?
reporter 09 дек. 2013, в 12:11
0

@reporter Кажется, я не могу заставить его работать в jsfiddle. Я имел в виду, что когда я переключал disload (например, из формы 1 в форму 2, переключаемый переключатель работал, но когда я пытаюсь нажать назад, диалоговое окно переключается, но переключатель не меняется.)
Kenneth .J 09 дек. 2013, в 12:44
0

Что произойдет, если вы дадите каждой радиопереключателю в каждой форме одно и то же имя? Насколько я знаю, для обновления кнопок браузер игнорирует атрибут id и следит только за атрибутом name.
reporter 09 дек. 2013, в 12:50
0

Я уже изменил имена переключателей в каждой форме на одно и то же имя, но ничего нового не происходит. Обновлю вопрос относительно имен
Kenneth .J 09 дек. 2013, в 12:53
1

@reporter У меня есть jsfiddle, вот ссылка jsfiddle.net/5Y5ZM/1
Kenneth .J 09 дек. 2013, в 12:57

Показать ещё 3 комментария

Теги:

javascript

jquery

modal-dialog

jquery-ui

dialog

3 ответа

Ещё вопросы

Что вы имеете в виду под "переключатели не обновляются"? Можете ли вы привести свой пример на jsfiddle.net ?
@reporter Кажется, я не могу заставить его работать в jsfiddle. Я имел в виду, что когда я переключал disload (например, из формы 1 в форму 2, переключаемый переключатель работал, но когда я пытаюсь нажать назад, диалоговое окно переключается, но переключатель не меняется.)
Что произойдет, если вы дадите каждой радиопереключателю в каждой форме одно и то же имя? Насколько я знаю, для обновления кнопок браузер игнорирует атрибут id и следит только за атрибутом name.
Я уже изменил имена переключателей в каждой форме на одно и то же имя, но ничего нового не происходит. Обновлю вопрос относительно имен
@reporter У меня есть jsfiddle, вот ссылка jsfiddle.net/5Y5ZM/1

Abhisek · Answer 1 · 2013-12-09T09-54-00.000Z

$('#form1choice2').on('click',function(){

    $('#1').dialog("close");
    $('#2').dialog("open");
    $("#form1choice2").attr('checked', 'checked');

});

$('#form2choice1').on('click',function(){

    $('#2').dialog("close");
    $('#1').dialog("open");
    $("#form2choice1").attr('checked', 'checked');


});

Попробуй это...

Я уже попробовал то, что вы предложили, но, похоже, ничего не работает. = X

p1ux · Answer 2 · 2018-01-26T11-54-00.000Z

установить модальное значение false

$('#CreateBizForm').dialog({
    autoOpen: false,
    closeOnEscape:false,
    draggable:false,
    resizable:false,
    modal:false,    <--- here
    minWidth:400,
    height:'auto',
    show:"slide"

});

Brett · Answer 3 · 2014-01-28T23-14-00.000Z

Кажется, что открытие модалов мешает завершению радиосообщения по умолчанию. Отложите открытие модалов до тех пор, пока не закончится событие клика:

setTimeout(function() {
    $('#2').dialog("open");
}, 1);