Help with jquery function to check database before opening twitter bootstrap modal

JavaScript
1

I have a twitter bootstrap modal(popup) that opens and allows user to take a survey. Currently when they vote I store their ip address and also check it before a vote is added to the database. If they have already voted I just don’t store it in the db.

For usability issues I would like to check if they have voted (check db for their ip address) before opening the modal (popup) with the survey.

I have the beginning parts of my jquery function that triggers an alert when they click the div, when you close the alert the modal(popup) triggers and they can vote. I’m not sure how to make it so the modal only opens if the php file returns false (they have not voted).

Or maybe their is a better way i’m not thinking about. I thought about having php echo back a specific modal depending on whether than can vote or not but I’m not sure how that would work.

Also I can never figure out the jquery syntax to go to a php file and then return something.
Here is my js:


 $(document).ready(function () {

      $("#voted").click(function() {
        
        alert("Sorry. Only one vote allowed per person.");

      });

  });

Here is my php that checks the the db for a matching ip address. I’m not sure if I should echo a specific html modal or just false and somehow restrict the modal from opening on the client side.:


<?php
session_start();
require_once 'app_config.php';
require_once 'database_connection.php';
require_once 'clean_up.php';



$ip=$_SERVER['REMOTE_ADDR'];
//echo 'IP Address: '.$ip.'<br><br>';

// check check voted table for current user
// ie. has the user already voted
$query = 'Select * from voted where ip = "'.$ip.'";';
$result = mysql_query($query);
$num_rows = mysql_num_rows($result);

// if the user has already voted
if ($num_rows > 0){
	
	// user has already voted
	// do something maybe return true?
	// or somehow show a modal that says you have already voted
}
else{
	
    //  user has not voted before.
	//  let them vote
	// maybe return false
	// or display voting modal
}

Here is the html section with the trigger for the modal (#vote) and for the query (id=‘voted’)


<div class='span6 center' id='voted'>
   <a href="#vote" data-toggle="modal" style='text-decoration:none;' onClick="_gaq.push(['_trackEvent', 'vote', 'vote page', 'clicked', 1, false]);"> 
        <h1 class='red' style='line-height:.75em;'>VOTE</h1> 
        <img width='450px' src="img/vote_w_btn.jpg" class="img-polaroid">
    </a> 
</div><!-- close span6 -->

here is the modal:


<div id="vote" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
  </div>
  
  <div class="modal-body">
        <form id='form' class="" action="scripts/proc_form1.php" method="post" name=""> 
             // survey is here
  </div>

  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button type='submit' class="btn btn-success vote_btn">Submit Your Anonymous Vote</button>                
  </div>

  </form>
</div>

(note- eventually I will add functionality for storing a cookie and also checking that but I just want to get this part working first before beginning that)

2

This is where you bring in Ajax. An example of what you might use in your jquery is

$('#voted').click(function(e) {		e.preventDefault();


		$.ajax('check-voted.php', {
			success: function(data){
				if(data == 1)
				{
					$('#vote').show().html('Thank you but you have already voted'); // This will show the modal box with the text instead of the form
				} else {
					$('#vote').show(); // You will need to change this to how your modal box is displayed (and above)
				}
			}
		});
	});

In your check-voted.php script, use what you have and just return 1 or 0 to the ajax call


if (numrows > 0) {
  return 1;
}
else {
  return 0;
}

This isn’t tested and I am not an expert but have used ajax in my development so hope this will at least lead you in the right direction.

3

Thanks a lot. So would the entire modal go inside of the html function:


.html('

<div id="vote" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
  </div>
  
  <div class="modal-body">
        <form id='form' class="" action="scripts/proc_form1.php" method="post" name=""> 
             // survey is here
  </div>

  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button type='submit' class="btn btn-success vote_btn">Submit Your Anonymous Vote</button>                
  </div>

  </form>


');