ポップアップウィンドウに値のフォームdbを渡す方法

Question

をクリックすると、hrefのタグを使用してポップアップウィンドウに値を渡したいと思います。jsで値を渡す方法を隠しレイヤーにdbを取得します。

タグコード

<a 'href=index.php?id=3'></a> 

隠れ層

<div class='wrap'> 
<div class='content'> 
<h2>Well Hello!</h2> 
<p> 
<? if (isset($_GET['id'])){   
$id = $_GET['id']; 
echo $id ;} ?> 
</p> 
</div> 
</div> 

JSコード

$('a').on('click', function(){ 
$('.wrap, a').toggleClass('active'); 
    return false; 
}); 

Answer 1

あなたはこれにjavascriptの方法を実行したい場合は、この例を参照してください。

$(document).ready(function() { 
 

 
    $('a.toggle-wrap').on('click', function(e) { 
 
    e.preventDefault(); // prevent default behaviour of the link that would reload the page 
 
    $('.wrap, a.toggle-wrap').removeClass('active'); // remove class active on every link clicking 
 
    var target_id = $(this).attr("data-id"); //get the desired id from link 
 
    var wrap_element = $('.wrap[data-target=' + target_id + '] p'); 
 
    var link_element = $('a[data-id=' + target_id + ']'); 
 
    link_element.toggleClass('active'); 
 
    $.ajax({ 
 
     type: "GET", 
 
     url: "someOtherScriptThatOnlyOutputsResults.php", 
 
     data: "id="+target_id, 
 
     success: function(resultData) { 
 
     wrap_element.html(resultData).toggleClass('active'); // only toggle desired ids 
 
     }, error: function() { 
 
     wrap_element.html('Could not load data').toggleClass('active'); 
 
     } 
 
    }); 
 

 
    }); 
 

 
});

.wrap { 
 
    display: none; 
 
} 
 

 
.wrap.active { 
 
    display: block; 
 
} 
 

 
a { 
 
    color: green; 
 
} 
 

 
a.active { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<a class="toggle-wrap" data-id="3">Link 3</a> 
 
<a class="toggle-wrap" data-id="4">Link 4</a> 
 

 
<div class="wrap" data-target="3"> 
 
    <div class="content"> 
 
    <h2>Well Hello content 3!</h2> 
 
    <p>Your db content related to id 3 from database, using php. 
 
    </p> 
 
    </div> 
 
</div> 
 

 
<div class="wrap" data-target="4"> 
 
    <div class="content"> 
 
    <h2>Well Hello content 4!</h2> 
 
    <p>Your db content related to id 4 from database, using php. 
 
    </p> 
 
    </div> 
 
</div>

隠しラップ（S）とリンク（複数可）に識別子を追加したもので動作します。 jsスニペットに表示されているクエリを使用すると、特定のHTMLタグをターゲットにすることができます。 CSS表示を使用して、ラップタグを非表示にして表示します。

データを取得して返すためにsomeOtherScriptThatOnlyOutputsResults.php新しいPHPファイルを作成します。

<?php 
if(isset($_GET['id'])) { 

    $pdo = new PDO('mysql:host=someHost;dbname=someDatabase', 'someUser', 'somePass'); 
    $statement = $pdo->prepare("SELECT columnWithContent FROM yourContentTable WHERE id = ?"); 
    $statement->execute(array($_GET['id'])); 
    $row = $statement->fetch(); 
    $content = $row['columnWithContent']; 
    echo $content; 

} 
?>