Jump to content

Javascript Pop Up Alert

cutielou22

By cutielou22
in Javascript Help

 Share

Recommended Posts

cutielou22 Regular Member

cutielou22

Posted
Posted

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
https://forums.phpfreaks.com/topic/307180-javascript-pop-up-alert/
Share on other sites
cutielou22 Regular Member

cutielou22

Posted
  • Author
Posted (edited)

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".

Edited by cutielou22
dalecosp Advanced Member

dalecosp

Posted
Posted (edited)

(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){
Edited by dalecosp
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • 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.