既存のブログ投稿を編集するためのフォームを作成しました。フォームは最初は非表示になっており、「投稿を作成」を選択するとフォームが空白になり、「投稿を編集」をクリックすると、Ajaxを使用して投稿情報が読み込まれ、空白が埋められます。問題は、2つの要素を切り替えると、毎回一部の要素がクリアされず、置き換えられないということです。以下は、私のJSスクリプトです:jQuery .val()または.attr()が正しく機能しない
<!-- Hidden Create/Edit form -->
<div id="news-form" title="" style="display: none;">
<div id="js_news_message" style="display: none;"></div>
<form id="news" class="form" action="{URL}/admin/blog" method="post">
<input type="hidden" name="action" value="">
<input type="hidden" name="id" value="">
<p>
<label for="title">Blog Title</label>
<input id="title" name="title" class="required" type="text" value="" />
</p>
<div>
<label for="body">Blog Body</label>
<textarea id="body" name="body" class="tinymce" rows="50" cols="40"></textarea>
</div>
<div class="clear"></div>
<p>
<a class="button red" id="reset-form" href="javascript:void(0);">Reset Changes</a>
<input id="submit" type="submit" class="button" style="width: 150px; text-align: center; margin: 10px; float: right;" value="Submit">
</p>
</form>
</div>
<script src="{TEMPLATE_URL}/js/mylibs/jquery.form.js"></script>
<script type="text/javascript">
$("#create").click(function() {
// Reset form elements
$("input[name=action]").val('create');
$("input[name=title]").val('');
$("textarea[name=body]").val('');
// Show form, and hide any previous messages
$('#js_news_message').attr('style', 'display: none;');
$('#news').attr('style', '');
$('#news-form').attr('title', 'Create News Post');
$('#news-form').dialog({ modal: true, height: 600, width: 750 });
// ============================================
// Editing News
$(".edit").live('click', function(){
var news_id = $(this).attr('name');
//alert(news_id);
// Get our post
$.post("{BASE_URL}/admin/news", { action : 'getpost', id : news_id },
function(result){
if(result !== 0)
{
var obj = jQuery.parseJSON(result);
// Reset form elements
$("input[name=action]").val('edit');
$("input[name=id]").val(news_id);
$("input[name=title]").val(obj.title);
$("textarea[name=body]").val(obj.body);
// Show form, and hide any previous messages
$('#js_news_message').attr('style', 'display: none;');
$('#news').attr('style', '');
$('#news-form').attr('title', 'Edit News Post');
$('#news-form').dialog({ modal: true, height: 600, width: 750 });
それは完全なJSではありませんが、あなたはアイデアを得る。ユーザーがブログ投稿の横にある「編集」ボタンを押すと、jQuery Modalが表示され、編集するように投稿情報が設定されています。「作成」をクリックすると、再び空白が表示されます形。
また何らかの理由で、編集と作成の間でスワップするときにすべてがリセットされることがあります。誰にでもアイデアはありますか?
あなたは試したことがありフィドルをクリアjavascriptコンソールを使用して関数をステップ実行しますか? (FireBug、Chromeデベロッパーツールなど)クリック機能の最初の要素に停止点を作成し、実際に何が起こるかを確認するだけです。 –
私はファイヤーバグを持っていますが、私は実際にPOSTとエラーを表示するだけでそれを使用する方法を知っていません。どちらのbtwでもFirebugにエラーはありません – Wilson212