こんにちは、ブートストラップ モーダルでフォームを送信しようとしています。このモーダルは、href クリック イベントに基づいて開きます。この a href タグは、Jquery を使用した ajax 呼び出しで動的に生成されます。
ブートストラップ モーダルを呼び出す a href タグの形式は次のとおりです。
'<a id="addvideo" data-toggle="modal" data-title="'+field.title+'" data-id="'+field.video_id+'" data-desc="'+field.description+'" data-channelname="'+field.channel_name+'" data-yudate="'+field.created_date+'" href="#form-content">'+field.title+'</a>'
私が呼び出しているモーダルを以下に示します。
<div id="form-content" class="modal hide fade in" style="display: none;">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Add Video</h3>
</div>
<div class="modal-body">
<form name="addvideo" class="form-horizontal" action="#" id="addchannelvideo">
<div class="control-group">
<label class="control-label" for="videotitle">Title</label>
<div class="controls">
<input type="text" id="videotitle" name="videotitle">
</div>
</div>
<div class="control-group">
<label class="control-label" for="videoid">Video ID</label>
<div class="controls">
<input type="text" id="videoid" name="videoid">
</div>
</div>
<div class="control-group">
<label class="control-label" for="videodesc">Description</label>
<div class="controls">
<textarea id="videodesc" name="videodesc"></textarea>
</div>
</div>
<div class="control-group">
<label class="control-label" for="channelname">Channel</label>
<div class="controls">
<input type="text" id="channelname" name="channelname">
</div>
</div>
<div class="control-group">
<label class="control-label" for="actors">Actors</label>
<div class="controls">
<input type="text" id="actors" name="actors">
</div>
</div>
<div class="control-group">
<label class="control-label" for="directors">Directors</label>
<div class="controls">
<input type="text" id="directors" name="directors">
</div>
</div>
<div class="control-group">
<label class="control-label" for="producers">Producers</label>
<div class="controls">
<input type="text" id="producers" name="producers">
</div>
</div>
<div class="control-group">
<label class="control-label" for="musicians">Music Directors</label>
<div class="controls">
<input type="text" id="musicians" name="musicians">
</div>
</div>
<div class="control-group">
<label class="control-label" for="cast">Cast</label>
<div class="controls">
<input type="text" id="cast" name="cast">
</div>
</div>
<div class="control-group">
<label class="control-label" for="yudate">Youtube Uploaded Date</label>
<div class="controls">
<input type="text" id="yudate" name="yudate">
</div>
</div>
<div class="control-group">
<label class="control-label" for="cudate">CMS Uploaded Date</label>
<div class="controls">
<input type="text" id="cudate" name="cudate">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox" id="orderno">Priority video
</label>
<label class="checkbox">
<input type="checkbox" id="hidevideo">Hide in Mobile App
</label>
<button class="btn btn-success" id="submit"><i class="icon-white icon-ok"></i> Submit</button>
<button class="btn btn-inverse"><i class="icon-white icon-circle-arrow-left"></i> Cancel</button>
</div>
</div>
</form>
</div>
</div>
クリックに基づいてモーダルを呼び出すには、以下の JavaScript コードを使用しています。このコードでは、以下のように Jquery を使用してモーダルでテキスト ボックスの値を設定することにより、モーダルにデータを渡しています。
$(document).on("click", "#addvideo", function () {
var videoid = $(this).data('id');
var videotitle = $(this).data('title');
var videodesc = $(this).data('desc');
var channelname = $(this).data('channelname');
var yudate = $(this).data('yudate');
$(".modal-body #videoid").val( videoid );
$(".modal-body #videotitle").val( videotitle );
$(".modal-body #videodesc").val( videodesc );
$(".modal-body #channelname").val( channelname );
$(".modal-body #yudate").val( yudate );
});
Ajax呼び出し機能は1以下です。
$(document).ready(function(e) {
$('input#submit').click(function() {
var title = $('#videotitle').val();
var videoid = $('#videoid').val();
var description = $('#videodesc').val();
var channel = $('#channelname').val();
var actors = $('#actors').val();
var directors = $('#directors').val();
var producers = $('#producers').val();
var musicians = $('#musicians').val();
var cast = $('#cast').val();
var yudate = $('#yudate').val();
var orderno = 0;
if($("#orderno").is(':checked'))
{
var orderno = 1;
}
var hidevideo = 0;
if($("#hidevideo").is(':checked'))
{
var hidevideo = 1;
}
var postdata = "title="+title+"&videoid="+videoid+"&description="+description+"&channel="+channel+"&actors="+actors+"&directors="+directors+"&producers="+producers+"&musicians="+musicians+"&cast="+cast+"&orderno="+orderno+"&hidevideo="+hidevideo+"&yudate="+yudate;
$.ajax({
type: 'POST',
url: 'addvideo.php',
data: "title="+title+"&videoid="+videoid+"&description="+description+"&channel="+channel+"&actors="+actors+"&directors="+directors+"&producers="+producers+"&musicians="+musicians+"&cast="+cast+"&orderno="+orderno+"&hidevideo="+hidevideo+"&yudate="+yudate,
datatype:'json',
success: function(response) {
$("#form-content").modal('hide');
alert(response);
},error: function(){
alert("video categorization failed");
}
});
});
});
これで、モーダルが正常に読み込まれ、href タグをクリックしてモーダルが読み込まれると、割り当てられたテキスト ボックスに値が表示されます。しかし、送信をクリックした後、同じphp URLにリダイレクトされ、すべてのパラメーターがクエリパラメーターとして追加され、奇妙なことに、モーダルを2回目に開いてajax呼び出しを送信しようとすると機能します。