2016-08-07 15 views
4

こんにちはこれは私がしたいことです。私はユーザーがリンクをクリックした後、警告ボックスを表示したい。私のリンクは別のPHPページに送られますが、リンクが見つかったページに再び戻ってきます。どうすればこれを達成できますか?誰かが私にそれを行う方法のアイデアを与えることができますか?リンクがクリックされた後、警告ボックスを表示するには

これは私が試したものの、動作していないものです。

<?php 

function fsa() { 
    echo '<div class="alert alert-success alert-dismissable" id="success-alert">'; 
    echo '<strong>Successfully posted!</strong>'; 
    echo '</div>'; 
} 


<a class='btn btn-info left-margin' href="dbf-import.php" onclick="fsa()">Import Database</a> 
+2

あなたはJavaScriptからPHPの関数を実行しようとしている!!!! ?? – Iceman

+0

はイベント 'onclick'はjavascriptですか?申し訳ありません本当に初心者です。私の神ハハ。 – nethken

+0

phpはservr側に、jsはクライアント側でレンダリングされます。それでは、ウルの意図は何ですか?クリックが行われたときに警告が欲しい、それは? – Iceman

答えて

2

これは、ボタンをクリックしたときに破棄可能な警告ボックスを表示する例です。

$(document).ready(function() { 
 
    $('.activater').click(function() { 
 
    $('.alert').show() 
 
    }) 
 
});
.alert { 
 
    display: none; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
 
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<body> 
 
    <div class="container"> 
 
    <h2>Dismissal Alert Messages</h2> 
 
    <button class="activater">Send Message</button> 
 
    <a class="activater">SHOW MESSAGE</a> 
 
    <div class="alert alert-success alert-dismissable"> 
 
     <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button> 
 
     Success! message sent successfully. 
 
    </div> 
 

 
    </div> 
 
</body>

+0

私はそれを表示する前にそれを隠すことができますか?私はそれを試みたが、警告ボックスはすでに示されている。リンクやボタンをクリックした後に表示したい。 – nethken

+0

@nethkenそれを実行すると、警告が表示されるのは、 – Iceman

+0

の後にのみ表示されます。どのようにリンクに適用できますか? – nethken

2

PHPはHTMLとJSを生成するために使用されます。両方ともPHPファイルに入れることができますが、PHPとJSの違いを理解する必要があります。 fsa()と呼ばれた関数は、クライアント側(クライアントマシン上とページのロード後)を実行するため、JS関数です。 HTMLタグのonclickパラメータには、JS関数がフックされている必要があります。この方法で<a>タグをクリックすると、fsa()が実行され、そのボックスがそのページに表示されます。

// this is JS, you need <script> tags !!! 
<script> 
function fsa() { 
    // define a new variable 
    var box = ''; 
    // add the HTML inside the JS variable 
    box += '<div class="alert alert-success alert-dismissable" id="success-alert">'; 
    box += '<strong>Successfully posted!</strong>'; 
    box += '</div>'; 

    // append the HTML contained inside box to the body 
    document.querySelector('body').innerHTML += box; 
} 
</script> 

<a class='btn btn-info left-margin' onclick="fsa()">Import Database</a> 

あなたは、クライアントのページをリロードせずにデータを保存したい場合は、@Icemanが言ったように、すべてのこの

<script type="text/javascript"> 
function Alert() { 
var answer = confirm ("Successfully posted!Please click on OK to continue.") 
if (answer) 
window.location="http://www.yoursite.com"; 
} 
</script> 

<a href="javascript:Alert();">click me</a> 
+0

ありがとうございました。あなたの努力のためにありがとう:) – nethken

1

を使用することもできます。あなたはあるがPHPでjavascript関数を実行しようとするので、すべてを削除することから始めます。あなただけのユーザーがリンクをクリックしたとき、あなたは単にあなたが人は側を離れたくない場合は、単に世話をするべきである、href='#'を入れ、また

<script> function fsa(){ 
    alert("Your alert message"); 
} 
</script> 

を追加することができますalertboxを取得したい場合それの。

+0

もう一つの方法をありがとう。あなたの努力のためにありがとう:) – nethken

1

ファーストをお試しくださいAJAX

+0

もう一つの方法をありがとう。あなたの努力のためにありがとう:) – nethken

2

あなたは代わりに警告ボックスのブートストラップモーダルを通してそれを達成することができます。あなたはあなたの必要に応じてそれを設計することができます。

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
click on this link : 
 
    <!-- Trigger the modal with a button --> 
 
    <span data-toggle="modal" data-target="#myModal">www.google.com</span> 
 

 
    <!-- Modal --> 
 
    <div class="modal fade" id="myModal" role="dialog"> 
 
    <div class="modal-dialog"> 
 
    
 
     <!-- Modal content--> 
 
     <div class="modal-content"> 
 
     <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
      <h4 class="modal-title">Modal Header</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
      <p>Alert Box. Click 'OK' to go to www.google.com</p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
      <button type="button" class="btn btn-default" onClick="document.location.href='www.google.com'">Go</button> 
 
     </div> 
 
     </div> 
 
     
 
    </div> 
 
    </div> 
 
    
 
</div> 
 

 
</body> 
 
</html>

関連する問題