Thursday, December 4th, 2008
No comments

jQuery: A confirmation window

We remain the subject of practical uses jQuery. Today I needed to write a window confirming an operation in the administration panel. The case seems to be simple and can be solved by the subject, forgetting about JavaScript (Confirm) or PHP, but the fun lies in how to do this so as not to cause, and even that was a really decent result?
I will try to present a sample solution to the problem, assuming that the element that we want is accompanied by confirmation by the user, is a link.

First Sample HTML File

We start with a file on which we perform our vile tests: 

  <! DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title> confirmation dialog </ title>
 </ Head>
 <body>
 <p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elite.  Quisque ultrices Orci nisl quis.  Aliquam at dolor.  Sed quam consequat ac leo.  Curabitur Fringilla sodales sem.  Praesent eleifend mauris ac ante aliquet dictum.  Sapien Etiam null, consequat eget, consequat vitae, molestie id, Lectus.  In HAC habitasse platea dictumst.  Aliquam feugiat odio ac Lectus.  Suspendisse egestas nisl varius.  Morbi null.  Pellentesque aliquet interdum felis.  Vestibulum libero luctus euismod.  Suspendisse sodales interdum Enimem.  Pellentesque Orcia.  Nulla massa nunc, eleifend aka, eleifend varius, Cong eget, leo.  Vestibulum ante ipsum primis in faucibus Orci et ultrices posuere luctus cubilia Curae; <br/>
 Aliquet Cras, quis ligula rutrum accumsan, lorem lorem velit dignissim, fermentum dignissim quam ligula at ligula.  Nulla dictum interdum purus.  Aenean odio.  Vestibulum pretium.  Phasellus Enimem Enimem, semper aliquet, tempus ac, rutrum gravida, libero.  Etiam neque odio, blandit NEC, suscipit aka, Pellentesque scelerisque, leo.  In Metus id.  Vivamus rutrum.  Nulla nec velit.  Nisi ut purus, porta at, tincidunt sit amet, scelerisque pulvinar, sem.  Sed adipiscing Risus.  In nisi.  Augustin et al.  Phasellus ullamcorper quis urn tempus dapibus Lacus.  Sed eget est.  Etiam tellus erat, adipiscing NEC, placerat sed, ultricies a, Orci.  Cras ac Lectus.  Curabitur nec lorem NIBH Mattis.  <a href="http://poslinski.net" class="confirm"> Maecenas </ a> aliquet iaculis turpis.
 </ P>
 <div id="confirm"> </ div>
 </ Body>
 </ Html>

Sample text generator Lorem ipsum , went inside a p. Shortly before the closing body tag, put the div # confirm, within which there will be a code from our window to confirm.

Second The presentation layer

Let us focus on our window. In my case, the html code which will be responsible for the entire window, will look as follows: 

  <div id="confirm">
 <div>
 <div>
 <h1> Are you sure you want to delete this item? </ h1>
 <p> <button onClick="location.href='TUTAJ WILL hit the contents of the HREF of LINKU'"> YES </ button> <button> NOT </ button> </ p>
 </ Div> <! - End # confirm div div ->
 </ Div> <! - End # confirm div ->
 </ Div> <! - End # Confirm ->

The code inside the # confirm, is generated by JavaScript. But it is worth considering why it looks just like that and why is at the bottom of the page code?

Let's start with the reasons for including the code at the end. In determining the position: absolute, for # confirm, without z-index parameter, the sequence of objects from position: absolute, it will match the order in which they are generated by the browser. Last compiled, there will be more than a stack of layers with position: absolute, so if for example, will have the same dimensions, mask the layer, which appeared in the code earlier.

Why does confirm the inside, we placed two times a div? To clarify this point is, just read the section in your css code that you place inside the head section: 

  <style type="text/css">
 <! -
 * {Margin: 0px, padding: 0px;}
 body {margin: 10px;}
 p {width: 600px; margin: 0 auto; line-height: 25px;}

 / * CONFIRM * /
 # Confirm {display: none; position: absolute; height: 100%; width: 100%; background: # 000; top: 0; left: 0;}
 # Confirm {height: expression (((&& window.Enumerable window.Enumerable.max) [document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight]. Max (): document.documentElement.scrollHeight) + 'px'); width: expression (((&& window.Enumerable window.Enumerable.max) [document.body.scrollWidth, document.documentElement.scrollWidth, document.body.offsetWidth, document. documentElement.clientHeight]. max (): document.documentElement.scrollWidth) + 'px');}
 # Confirm [id] {position: fixed;}
 # Confirm div {padding: 10px; margin-top: 200px;}
 # Confirm div div {background: # 900c0c; width: 500px; margin: 0 auto; border: 1px solid # CCC; overflow: hidden;}
 # Confirm div div h1 {font-size: 18px; color: # FFF;}
 # Confirm div div p {padding: 20px;}
 ->
 </ Style>

# Defines here confirm the background that will "cover" the entire page. The second line, (the one with a strange height and width), it is necessary in the case of Internet Explorer. # Confirm [id] is comprehensible only to modern browsers, and this was the plan to the background of our window was the size of 100% to 100% and runs throughout the time with the site (for IE is calculated in each case based on the current width and height of the window).

The first div is necessary to center the 2nd and to take a distance from the top window on the margin-top. The second div already provides our window to confirm that can be centered, as it is inside a block element with width: 100% (standard value for an element with display: block - which is a div)

Third Time for jQuery

It remains for us to react to clicks on the link that appears at the end of the block P, which put lorem ipsum'a: 

  <a href="http://poslinski.net" class="confirm"> Maecenas </ a>

In our case, all links with class confirm, will react to the script. You could apply our acknowledgment to all links, for removing a value from the database.

It requires JavaScript code that is placed on the bottom of the page: 

  src="jquery.js" <script type="text/javascript"> </ script>
 <script type="text/javascript">
 $ (Document). Ready (function () {
 $ (". Confirm"). Click (function () {
 $ ("# Confirm")
 . Css ({opacity: 0.95})
 . FadeIn ()
 . Html ('<div> <div> <h1> Redirect </ h1> <p <button onClick = \ "location.href = \'' + $ (this). Attr (" href ") +' \ '\ "> Yes </ button> <button> NOT </ button> </ p> </ div> </ div>');
 return false;
 });
 $ ("# Confirm"). Click (function () {$ (this). FadeOut ();});
 });
 </ Script>

The first line load jQuery.

Then, the main branch of our code $ (document). Ready, activate your code, after a page loads.

We respond to clicking on the element with the class confirm, causing in this case a series of methods on the element with id = confirm. To begin, add a transparency (but still an element is set to display: none), then using the method fadeIn, jQuery seamlessly moves from display: none to opacity: 0.95 (in our case). Finally, inside the element of # confirm, load the html code of our two divami, which is placed inside the h1 header button and two buttons. As you probably, have noticed one of them, plus they are declared onClick event, which will react to a positive user confirmation, przekierowywując him to the place that showed clicked link.

Why return false at the end of this block of code? To the browser, we do not redirect automatically, by clicking on the link, our function must return false, otherwise it will redirect and windows will be confirming the threads.

If you click anywhere else than in the button of "YES", use event FadeOut (), the block will disappear seamlessly with our confirmation, which realizes $ ("# confirm"). Click (...).

The whole written code should look something like this: 

  <! DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title> confirmation dialog </ title>
 <style type="text/css">
 <! -
 * {Margin: 0px, padding: 0px;}
 body {margin: 10px;}
 p {width: 600px; margin: 0 auto; line-height: 25px;}

 / * CONFIRM * /
 # Confirm {display: none; position: absolute; height: 100%; width: 100%; background: # 000; top: 0; left: 0;}
 # Confirm {height: expression (((&& window.Enumerable window.Enumerable.max) [document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight]. Max (): document.documentElement.scrollHeight) + 'px'); width: expression (((&& window.Enumerable window.Enumerable.max) [document.body.scrollWidth, document.documentElement.scrollWidth, document.body.offsetWidth, document. documentElement.clientHeight]. max (): document.documentElement.scrollWidth) + 'px');}
 # Confirm [id] {position: fixed;}
 # Confirm div {padding: 10px; margin-top: 200px;}
 # Confirm div div {background: # 900c0c; width: 500px; margin: 0 auto; border: 1px solid # CCC; overflow: hidden;}
 # Confirm div div h1 {font-size: 18px; color: # FFF;}
 # Confirm div div p {padding: 20px;}
 ->
 </ Style>
 </ Head>
 <body>
 <p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elite.  Quisque ultrices Orci nisl quis.  Aliquam at dolor.  Sed quam consequat ac leo.  Curabitur Fringilla sodales sem.  Praesent eleifend mauris ac ante aliquet dictum.  Sapien Etiam null, consequat eget, consequat vitae, molestie id, Lectus.  In HAC habitasse platea dictumst.  Aliquam feugiat odio ac Lectus.  Suspendisse egestas nisl varius.  Morbi null.  Pellentesque aliquet interdum felis.  Vestibulum libero luctus euismod.  Suspendisse sodales interdum Enimem.  Pellentesque Orcia.  Nulla massa nunc, eleifend aka, eleifend varius, Cong eget, leo.  Vestibulum ante ipsum primis in faucibus Orci et ultrices posuere luctus cubilia Curae; <br/>
 Aliquet Cras, quis ligula rutrum accumsan, lorem lorem velit dignissim, fermentum dignissim quam ligula at ligula.  Nulla dictum interdum purus.  Aenean odio.  Vestibulum pretium.  Phasellus Enimem Enimem, semper aliquet, tempus ac, rutrum gravida, libero.  Etiam neque odio, blandit NEC, suscipit aka, Pellentesque scelerisque, leo.  In Metus id.  Vivamus rutrum.  Nulla nec velit.  Nisi ut purus, porta at, tincidunt sit amet, scelerisque pulvinar, sem.  Sed adipiscing Risus.  In nisi.  Augustin et al.  Phasellus ullamcorper quis urn tempus dapibus Lacus.  Sed eget est.  Etiam tellus erat, adipiscing NEC, placerat sed, ultricies a, Orci.  Cras ac Lectus.  Curabitur nec lorem NIBH Mattis.  <a href="http://poslinski.net" class="confirm"> Maecenas </ a> aliquet iaculis turpis.
 </ P>
 <div id="confirm"> </ div>
 src="jquery.js" <script type="text/javascript"> </ script>
 <script type="text/javascript">
 $ (Document). Ready (function () {
 $ (". Confirm"). Click (function () {
 $ ("# Confirm")
 . Css ({opacity: 0.95})
 . FadeIn ()
 . Html ('<div> <div> <h1> Redirect </ h1> <p <button onClick = \ "location.href = \'' + $ (this). Attr (" href ") +' \ '\ "> Yes </ button> <button> NOT </ button> </ p> </ div> </ div>');
 return false;
 });
 $ ("# Confirm"). Click (function () {$ (this). FadeOut ();});
 });
 </ Script>
 </ Body>
 </ Html>

Summary

Working example, you can see here .

This sample solution does not require all the possibilities. We can extend the code so as to affect the confirmation form, you would then send the form control, which also can be made ​​from within jQuery. You can also, on the basis of the above code to create a plugin for jQuery. Feel free to discuss in the comments to this post.

Be Sociable, Share!

Related entries

Categories: jquery
Tags: , , , ,
«
»
You can follow any responses to this entry through the feed RSS 2.0 . You can also write your own comments , or to link to this post on your page.
    • Obraz CAPTCHY
    Refresh Image
    *

    Spam Protection by WP-SpamFree