Jump to content

Javascript Pop Up Alert


cutielou22

Recommended Posts

I am working with the code from this: https://codepen.io/adventuresinmissions/pen/nrhHF

 

I have made my own slight changes, but I am having a problem. I am getting data from a mysql table. If the page has more than one element (or row) from the table shown it will pop up the popup for each - if hitting "No" or "Cancel". I just want it to show one pop up and go away. Not go to the next pop up/row.

 

Hope that makes sense.

 

The Code I am Using on the Page:

ECHO<<<END
<script>
jQuery(document).ready(function($){
	//open popup
	$('.cd-popup-trigger$count').on('click', function(event){
		event.preventDefault();
		$('.cd-popup').addClass('is-visible');
	});
	
	//close popup
	$('.cd-popup').on('click', function(event){
		if( $(event.currentTarget).is('.cd-popup-close') || $(event.currentTarget).is('.cd-popup') ) {
			event.preventDefault();
			$(this).removeClass('is-visible');
		}
	});
	//close popup when clicking the esc keyboard button
	$(document).keyup(function(event){
    	if(event.which=='27'){
    		$('.cd-popup').removeClass('is-visible');
	    }
    });
});
</script>
<style>
.img-replace {
  /* replace text with an image */
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  color: transparent;
  white-space: nowrap;
}

.cd-popup {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(94, 110, 141, 0.9);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
  transition: opacity 0.3s 0s, visibility 0s 0.3s;
}
.cd-popup.is-visible {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0s;
  transition: opacity 0.3s 0s, visibility 0s 0s;
}

.cd-popup.show_button {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0s;
  transition: opacity 0.3s 0s, visibility 0s 0s;
    display: block;
  height: 60px;
  line-height: 60px;
  text-transform: uppercase;
  color: #FFF;
  -webkit-transition: background-color 0.2s;
  -moz-transition: background-color 0.2s;
  transition: background-color 0.2s;
}

.cd-popup-container {
  position: relative;
  width: 90%;
  max-width: 400px;
  margin: 4em auto;
  background: #FFF;
  border-radius: .25em .25em .4em .4em;
  text-align: center;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  -webkit-transform: translateY(-40px);
  -moz-transform: translateY(-40px);
  -ms-transform: translateY(-40px);
  -o-transform: translateY(-40px);
  transform: translateY(-40px);
  /* Force Hardware Acceleration in WebKit */
  -webkit-backface-visibility: hidden;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.cd-popup-container p {
  padding: 3em 1em;
}
.cd-popup-container .cd-buttons:after {
  content: "";
  display: table;
  clear: both;
}
.cd-popup-container .cd-buttons li {
  float: left;
  width: 50%;
  list-style: none;
}
.cd-popup-container .cd-buttons a {
  display: block;
  height: 60px;
  line-height: 60px;
  text-transform: uppercase;
  color: #FFF;
  -webkit-transition: background-color 0.2s;
  -moz-transition: background-color 0.2s;
  transition: background-color 0.2s;
}

.cd-popup-container .cd-buttons li:first-child a {
  background: #fc7169;
  border-radius: 0 0 0 .25em;
}
.no-touch .cd-popup-container .cd-buttons li:first-child a:hover {
  background-color: #fc8982;
}
.cd-popup-container .cd-buttons li:last-child a {
  background: #b6bece;
  border-radius: 0 0 .25em 0;
}
.no-touch .cd-popup-container .cd-buttons li:last-child a:hover {
  background-color: #c5ccd8;
}
.cd-popup-container .cd-popup-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
}
.cd-popup-container .cd-popup-close::before, .cd-popup-container .cd-popup-close::after {
  content: '';
  position: absolute;
  top: 12px;
  width: 14px;
  height: 3px;
  background-color: #8f9cb5;
}
.cd-popup-container .cd-popup-close::before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  left: 8px;
}
.cd-popup-container .cd-popup-close::after {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  right: 8px;
}
.is-visible .cd-popup-container {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
@media only screen and (min-width: 1170px) {
  .cd-popup-container {
    margin: 8em auto;
  }
}
</style>
END;

$stmt = $mysqli->prepare("SELECT state_name FROM states WHERE state_code = ?");
$stmt->bind_param('s', $state_code);
$stmt->execute();
$stmt->store_result();
$stmt->bind_result($state_name);
$stmt->fetch();
$stmt->close();

$stmt2 = $mysqli->prepare("SELECT toll, crime_rate, traffic, population, city, state_code, latitude, longitude, last_updated FROM states_cities WHERE `zip` = ?");
$stmt2->bind_param('i', $zip);
$stmt2->execute();
$stmt2->store_result();
$stmt2->bind_result($toll, $crime_rate, $traffic, $population, $city, $state, $lat_to, $lon_to, $last_updated);
$stmt2->fetch();
$stmt2->close();

echo "<h1>$city, <a href=\"state_details.php?state=$state_code\">$state_name</a></h1>";
	
	if ($rank >= 10) {
		
		$stmt3 = $mysqli->prepare("SELECT latitude, longitude FROM states_cities WHERE zip = ?");
		$stmt3->bind_param('i', $user_zip);
		$stmt3->execute();
		$stmt3->store_result();
		$stmt3->bind_result($lat_from, $lon_from);
		$stmt3->fetch();
		$stmt3->close();
		
		$travel_time = get_distance($lat_to, $lat_from, $lon_to, $lon_from);
		echo "Distance: $travel_time[distance] | Travel Time: $travel_time[time]";
		
	} else {
		
		$travel_time = "";
		
	}
	
if($rank == 20) {
	
if ((!empty($toll))) {
	
	//Add form to EDIT FORM city information
	
} else {
	
	//Add form to ADD FORM city information to site
	
}

}

	if ($rank >= 18) {
		
		echo "<center><a href=\"attractions/index.php?state=$state_code\">Add Attraction</a> | <a href=\"stores/index.php?state=$state_code\">Add Store</a></center>";
		
	}
	
$stmt = $mysqli->prepare("SELECT name, price, free, parking_fee, discount, hours_daily, hours_weekend, address, city, zip, attract_id FROM states_attractions WHERE (city = ? OR zip = ?) AND `state` = ?");
$stmt->bind_param('sis', $city, $zip, $state_code);
$stmt->execute();
$stmt->store_result();
$num_attracts = $stmt->num_rows;
$stmt->bind_result($name, $price, $free, $parking_fee, $discount, $hours_daily, $hours_weekend, $address, $city, $zip, $attract_id);

if ($num_attracts >= 1) {

echo "<h2>Attractions</h2>";

//$count = 0;

while ($stmt->fetch()) {
	
	//$count++;
	
	if ((!empty($parking_fee)) || ($parking_fee != "0.00")) {
		
		$total = $price + $parking_fee;
		$show_fee = " + $$parking_fee ($$total)";
		
	} else {
		
		$show_fee = "";
		
	}
	
	if ($rank >= 18) {
		
		$show_admin = " | <a href=\"attractions/edit.php?id=$attract_id\">EDIT</a> | <a href=\"\" class=\"cd-popup-trigger\"><font color=\"red\">DELETE</font></a>";
		
		echo "
		<div class=\"cd-popup\" role=\"alert\">
			<div class=\"cd-popup-container\">
				<p>Are you sure you want to delete this attraction?</p>
				<ul class=\"cd-buttons\">
					<li><a href=\"attractions/delete.php?id=$attract_id\">Yes</a></li>
					<li><a href=\"#0\" class=\"cd-popup-close\">No</a></li>
				</ul>
				<a href=\"#0\" class=\"cd-popup-close img-replace\">Close</a>
			</div> <!-- cd-popup-container -->
		</div> <!-- cd-popup -->";
		
	} else {
		
		$show_admin = "";
		
	}
	
	if ($rank >= 10) {
		
		$show_user = " | <a href=\"addtotrip.php?id=$attract_id\">ADD TO TRIP</a>";
		
	} else {
		
		$show_user = "";
		
	}
	
	if (!empty($discount)) {$show_discount = " Discount: $discount";} else {$show_discount = "";}
	if ($free == "yes") {$final_price = "FREE";} else {$final_price = "$$price";}
	
	$url_address = urlencode($address);
	$url_city = urlencode($city);
	
	echo "<div class=\"link_desc\">$name<sub>$final_price$show_fee $show_discount | Daily Hours: $hours_daily | Weekend Hours: $hours_weekend | <a href=\"http://maps.google.com/maps?q=$url_address,+$url_city,+$zip\" target=\"_blank\">$address, $city, $zip</a>$show_user$show_admin</sub></div>";
	
}

}

$stmt->close();

Link to comment
Share on other sites

It also automatically chooses the last one no matter which one is picked from the list to delete.

 

It also does not actually delete a selection if added. It goes right to the next one. (THIS HOWEVER DID WORK BEFORE) <<For when choosing "Yes".

Link to comment
Share on other sites

(Aside: your code should start with <?php )

You will probably get some comments like "don't just d'load scripts from the 'Net without understanding what they do."

That might be decent advice, but let's try. I'm not sure that the problem is entirely clear. Let's start with:
 

If the page has more than one element (or row) from the table shown it will pop up the popup for each - if hitting 'No' or 'Cancel'. I just want it to show one pop up and go away. Not go to the next pop up/row

 


If PHP is substituting "$count" with a value in the JavaScript at the top, it seems a little strange that jQuery is then setting ALL the elements with class "cd-popup" to "is-visible". However, the PHP at the bottom isn't setting any such variable:
 

$show_admin = " | <a href=\"attractions/edit.php?id=$attract_id\">EDIT</a> | <a href=\"\" class=\"cd-popup-trigger\"><font color=\"red\">DELETE</font></a>";

There's nothing there but "cd-popup-trigger" ...

So, one question is:  Does the JavaScript at the top include an additional value here?

 

 

$('.cd-popup-trigger$count').on('click', function(event){
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.