5

Hello this is what i want to do. I want to show the alert box after the user click the link. My link is directed to another php page but it will come back again to the page where the link is found. How can i achieve this? Can someone give me ideas on how to do it?

this is what i tried but not working.

<?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>
Ivan
  • 34,531
  • 8
  • 55
  • 100
nethken
  • 1,072
  • 7
  • 24
  • 40
  • 3
    are you trying to run php function from javascript!!!!?? – Iceman Aug 07 '16 at 12:44
  • is the event `onclick` is javascript? Sorry im really a newbie. My god haha. – nethken Aug 07 '16 at 12:46
  • php is rendered on the servr side and js at the client side. so what is ur intention. you want an alert when the click is made, thats it? – Iceman Aug 07 '16 at 12:48
  • Even if done in JavaScript, this "alert" is going to show for a fraction of a second as the next page is loaded. What "success" are you indicating with this alert? Nothing has actually successfully happened when this happens. Maybe the `dbf-import.php` page should be showing the alert after it actually successfully performs an operation? – David Aug 07 '16 at 12:51
  • @nethken i've no clue what is ur intention but based on ur upper comment I think you want to show an bootstrap alert with a click. check my working snippet answer below. Is that it? – Iceman Aug 07 '16 at 12:53

5 Answers5

3

This is an example to show the dissmissable alert box when clicking on a button.

$(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>
Iceman
  • 6,035
  • 2
  • 23
  • 34
2

PHP is used to generate the HTML and JS. You can have both in a PHP file but you need to see the difference between PHP and JS. The function you've called fsa() is a JS function because it will run client side (on the client machine and after page has been loaded). The onclick param in the HTML tag needs to have a JS function hooked. This way when you click on your <a> tag, fsa() will be fired and the box will show up on the page.

// 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>

If you wish to save the data without reloading the client's page, you may want to use AJAX

Graham
  • 7,431
  • 18
  • 59
  • 84
Ivan
  • 34,531
  • 8
  • 55
  • 100
2

You can achieve it through Bootstrap modal instead of alert box. You can design it as according to your need.

<!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>
piku
  • 29
  • 2
1

Try this

<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>
jophab
  • 5,356
  • 14
  • 41
  • 60
1

First of all, like @Iceman said: You are trying to run a javascript function in php, so start by deleting all that. If you just want the user to get an alertbox when clicking on a link, you can simply add

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

Also, if you don't want the person to leave the side, just put href='#', that should take care of it.

RPaul
  • 66
  • 7