Solved

Yes / No Confirmation Box for ASP.NET Web Pages?

Posted on 2013-10-30
8
1,827 Views
Last Modified: 2013-11-09
Yes / No Confirmation Box for ASP.NET Web Pages?

Hi Experts,

I’ve been spending a few hours looking for a Javascript equivalent of a Yes / No confirmation box solution (much like the link below), to no avail.
http://www.w3schools.com/js/tryit.asp?filename=tryjs_confirm

Apparently, most of the solutions I’ve found only works in Web Forms. Some of them utilize a postback solution, which isn’t for Web Pages.  

So I was wondering if there was a quick and easy Web Pages solution?

Thanks!
0
Comment
Question by:nvs_victor
  • 3
  • 3
  • 2
8 Comments
 
LVL 1

Expert Comment

by:mathew_s
ID: 39613144
You can use the following javascript library. Refer to it in your page.
http://dev.sencha.com/deploy/ext-4.0.0/examples/message-box/msg-box.js

Check this link out that uses the library.
http://dev.sencha.com/deploy/ext-4.0.0/examples/message-box/msg-box.html
The first is yes/no javascript dialog using the library.
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 39613417
Here is some sample code that demonstrates the principle
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function() {
    // Catch the open click
    $('a.popup').click(function(e){
	    // prevent <a> from doing its usual thing and browsing away from page.
        e.preventDefault();
		// What popup do we want to show (can support more than one this way)
        var id = $(this).attr('href');
		// Work out where to put it - left is half the width of the doc less half the width of the popup
        var left = ($(document).width() - $(id).width()) >> 1;
		// Same with top - use the >> to divide by 2 because old school
        var top = ($(document).height() - $(id).height()) >> 1;
		// create a clone of our template, show it set the metrics to position it add a class to show it is on screen and remove the id so we don't have dupes
        var popup = $(id).clone().show().css({left: left + 'px', top: top + 'px'}).addClass('popped').attr('id','');
		// create an overlay to make our popup modal
        var overlay = $('<div/>').addClass('overlay').css({height: $(document).height() + 'px'});
		
		// finally add to the body
        $('body').prepend(overlay).append(popup);
    });
    
	// Dynamic click handler for close button -  remove the layers we created in open
    $('body').on('click','.close', function(e) {
        e.preventDefault();
        $('.overlay').remove();
        $('.popped').remove();
    });
});
</script>
<style type="text/css">
.overlay {
    position: absolute;
    left: 0;
    top: 0;
    background: #000;
    opacity: .95;
    z-index: 1;
    width: 100%;
}
.popup-box {
    position: absolute;
    z-index: 100;
    display: none;
}
#popup {
    width: 300px;
    height: 150px;
    border: 2px solid #ef092a;
    background: #fff;
}
</style>
</head>
<body>
<a href="#popup" class="popup">Click to open popup</a>
<div id="popup" class="popup-box" >
Put what you want in here
<a href="#" class="close">This link closes the popup</a>
</div>    
</body>
</html>

Open in new window

0
 
LVL 1

Assisted Solution

by:mathew_s
mathew_s earned 150 total points
ID: 39613477
In the case I have above, you will need to purchase the Sencha Ext JS framework I believe but can do a lot of cool things with it.
http://www.sencha.com/products/extjs/examples/

If you want to just write some code, the following will not give you a yes/no but an OK, cancel and it is javascript.

<html>
<head>
<script type="text/javascript">
<!--
function confirmation() {
	var answer = confirm("OK to leave site?")
	if (answer){
		alert("Bye bye!")
		window.location = "http://www.google.com/";
	}
	else{
		alert("Thanks for sticking around!")
	}
}
//-->
</script>
</head>
<body>
<form>
<input type="button" onclick="confirmation()" value="Click here">
</form>
</body>
</html>

Open in new window

0
 

Author Comment

by:nvs_victor
ID: 39615089
Hi mathew_s and julianH,

thank you for helping!

Unfortunately, this won't help... Javascript is client-side... ASP.NET is server side. If I were to use Javascript to capture the what the user pressed, I'll need to capture the input and send it to ASP to process it. Javascript cannot help.

If I'm not mistaken, this is the process:

HTML Request -->  Server --> ASP Processing --> create HTML page with Javascript inside --> Sends HTML page to original requester.

As you can see, Javascript is at the end of the processing list... it's one direction only.  Sure, I can prompt the user with Javascript, but Javascript cannot tell ASP what button the client pressed.

The only solution with Javascript is if I send the input back to the server, but that's complicated.
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 51

Accepted Solution

by:
Julian Hansen earned 350 total points
ID: 39616143
And the alternative is ....?

You can't do it in ASP.

If you need to send something back to the server you will need to AJAX it.

Using JQuery you would use the .ajax or .post function to call a server side script with the result of the user request.

Unless I missed the point of your question entirely what you are wanting to do - process the input entirely with ASP is not possible. ASP completes its processing before the browser displays anything to the user - it then goes away and is not invoked again until another call to a script is made.

Am I understanding you correctly?
0
 

Assisted Solution

by:nvs_victor
nvs_victor earned 0 total points
ID: 39622488
Hi  julianH,

So yes, you understood my question completely. And you clarified something I was missing.

"process the input entirely with ASP is not possible. ASP completes its processing before the browser displays anything to the user - it then goes away and is not invoked again until another call to a script is made."

Yes, same reason as why Javascript can't be used.

"Using JQuery you would use the .ajax or .post function to call a server side script with the result of the user request."
Sounds like a good alternative.

However, I found a simple method:
Thanks to your clarification, I found that I can use Javascript and display a confirmation box, and based on the response,  do a page re-direct to the same page, and pass values into the URL, and that way, I can handle the input in ASP. Works very well… thank God for a good workaround : )

Also, I apologize for my question being ambiguous and misleading; I see how I could have worded better.

Thanks guys and thanks julianH!
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 39623437
You are welcome - thanks for the points.
0
 

Author Closing Comment

by:nvs_victor
ID: 39635457
Experts helped me think of a workable solution using javascript.
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
getting id from database 5 24
What .NET website keeps me current? 9 31
Problem to page 4 26
Different Delete Messages 7 17
I was asked about the differences between classic ASP and ASP.NET, so let me put them down here, for reference: Let's make the introductions... Classic ASP was launched by Microsoft in 1998 and dynamically generate web pages upon user interact…
It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now