問題:
JQueryを使用して、リンク属性の値をPHP/SQLクエリに転送したいと思います。
HTMLコード:
<a data-toggle="modal" href="#myModal" id="1"><i class="pull-right icon-eye-open"></i>HTML</a>
PHPコード:
<div id="myModal" class="modal hide fade">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>Title</h3>
</div>
<div class="modal-body">
<?php
$query = "SELECT * FROM table WHERE id = ID FROM JQUERY HERE";
$result = mysql_query($query) or die ('Error (' . mysql_errno() . ') ' . mysql_error());
?>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-info" data-dismiss="modal" >Close</a>
</div>
</div>
シナリオ:
ユーザーがdata-toggle = "modal"を持つlink-elementをクリックすると、jQueryはid-attributeの値(この場合は1)を取得してSQL-queryに送信し、SQLクエリがのように見える:
$query = "SELECT * FROM table WHERE id = 1";
jQueryコード:
$("a[data-toggle=modal]").click(function(){
var essay_id = $(this).attr('id');
//Find $essay set it to essay_id in PHP
//Alternatively create a $_SESSION['EID'] here
});
質問:
JQueryを使用してPHPで変数($ essay)を設定するにはどうすればよいですか?または、jQueryを介してPHPでセッション変数を作成するにはどうすればよいですか?
これが解決策です、
<a href="#" id="1" class="Push">click</a>
このように、モーダルボディでdivを使用します
<div class="modal-body">
<div class="something" style="display:none;">
// here you can show your output dynamically
</div>
</div>
ここで、ajaxを呼び出してデータを.something
に配置します。jqueryajaxの詳細については、 http://api.jquery.com/jQuery.ajax/ を確認してください。
$(function(){
$('.Push').click(function(){
var essay_id = $(this).attr('id');
$.ajax({
type : 'post',
url : 'your_url.php', // in here you should put your query
data : 'post_id='+ essay_id, // here you pass your id via ajax .
// in php you should use $_POST['post_id'] to get this value
success : function(r)
{
// now you can show output in your modal
$('#mymodal').show(); // put your modal id
$('.something').show().html(r);
}
});
});
});
最終解決
HTMLコード:
<div id="myModal" class="modal hide fade">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>Title</h3>
</div>
<div class="modal-body">
<div id="modalContent" style="display:none;">
</div>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-info" data-dismiss="modal" >Close</a>
</div>
</div>
jQueryコード:
$("a[data-toggle=modal]").click(function()
{
var essay_id = $(this).attr('id');
$.ajax({
cache: false,
type: 'POST',
url: 'backend.php',
data: 'EID='+essay_id,
success: function(data)
{
$('#myModal').show();
$('#modalContent').show().html(data);
}
});
});