我使用Fancybox编辑实体而不重新加载整个页面。但是在通过ajax加载表单内容后,我无法编辑输入字段。如果我点击其中一个输入,我会立即失去焦点。 显示fancybox的代码非常简单:
<a class="lightbox fancybox.ajax" href="/app_dev.php/devices/517781e3e707a00217000033/edit">Bearbeiten</a>
和javascript(提交表单尚未实现)
$(document).ready(function() {
$(".lightbox").fancybox({
minWidth : 300,
minHeight : 150,
openEffect : 'none',
closeEffect : 'none'
});
});
通过ajax返回的内容:
<form class="lightbox" action="/app_dev.php/devices/517781e3e707a00217000033/edit" method="POST">
<fieldset id="device">
<p>
<label for="device_name" class="required"> device.name </label>
<input type="text" id="device_name" name="device[name]" required="required" value="VW BUS">
</p>
<p>
<label for="device_type" class="required"> device.type </label>
<select id="device_type" name="device[type]" required="required">
<option value="0">FME 2100</option>
<option value="1">FME 2200</option>
<option value="2">FME 3200</option>
</select>
</p>
<p>
<label for="device_number" class="required"> device.number </label>
<input type="text" id="device_number" name="device[number]" required="required" value="+43xxxxxxxxx">
</p>
<p>
<label for="device_imei" class="required"> device.imei </label>
<input type="text" id="device_imei" name="device[imei]" required="required" value="xxxxxxxxxxxx">
</p>
<input type="hidden" id="device__token" name="device[_token]" value="xxxxxxxxxxxxxxx">
</fieldset>
<input type="submit" value="form.save">
</form>
如上所述,我立刻失去了对输入字段的关注。选择正在......
我正在使用fancybox 2.1.4和jquery 1.9.1
答案 0 :(得分:0)
您可以使用这个小提琴并根据语法进行更改:http://jsfiddle.net/UYHxc/2/
$.fancybox.open('#divFancyBoxTest',{
// prevents closing when clicking INSIDE fancybox
openEffect : 'none',
closeEffect : 'none',
closeBtn : false,
helpers : {
overlay : {closeClick: false} // prevents closing when clicking OUTSIDE fancybox
}
});
$('#addbtn').click(function(){
$(".input_add").toggle(); //add input box
});
&#13;
<div id="divFancyBoxTest">
<div style=" font-size: 14px; font-weight: bold; text-align: center; margin-bottom: 17px;">Click the link in the email we have sent to</div>
<div style="text-align:center; margin-bottom: 17px;"><a href="logout" style="color: #00A8EC;text-decoration: underline; font-weight: bold; padding: 4px; border-radius: 10px; margin-top: 10px;margin-left: 0px !important;">logout</a></div>
<div style=" font-size: 14px; font-weight: bold; text-align: center;margin-bottom: 17px;">to complete your registration.</div>
<div style=" font-size: 14px; text-align: center;margin-bottom: 17px;"><span style="color: #00A8EC; font-weight: bold;padding-left: 5px;padding-right: 5px;">
<a style="color: #00A8EC;text-decoration: underline; font-weight: bold; padding: 4px; border-radius: 10px; margin-top: 10px;margin-left: 0px !important;" id="resendemail">Resend confirmation email </a>
<span style="color:#000;">|</span>
<a style="color: #00A8EC;text-decoration: underline; font-weight: bold; padding: 4px; border-radius: 10px; margin-top: 10px;margin-left: 0px !important;" id="addbtn">Change email address</a>
<div class="input_add" style="margin-top: 30px;display: none;">
<input type="text" name="email" style="padding-top: 4px !important;" >
<button style="background-color: #00A8EC;height: 30px;box-shadow: none;border: 1px solid #00A8EC;color: #fff;">Submit</button>
</div>
</span>
</div>
</div>
<input type="text" id="something" value="test" />
</div>
&#13;