Bootstrap+jfinal Exit System Pop-up Confirmation box implementation method _javascript skills

This article shares the jfinal and Bootstrap logout operation, which is designed to introduce how to eject the logout confirmation box through a label, and then send the exit request to jfinal and then refresh the page. The main difficulty lies in the following two points:

1. If through the content of a label pop-up login confirmation box;

2. How to refresh the corresponding pop-up page through a label.

First, front-end technology

1. Build a Label

Copy Code code as follows:

<a href= "${ctx}/mem/logout" target= "Ajaxtodo" callback= "Ajaxdone" Are you sure you want to quit? "Id=" User_login_out "style=" padding:0 6px; > Exit </a>

Note:
1. target= "Ajaxtodo" to specify a tag to initiate the request via Ajax.
2. callback= "Ajaxdone", specify a label callback function
3. atitle= "Are you sure you want to quit?" ", specify confirmation information

2. Initialize a tag Ajax event

function Initui (_box) {
 var $p = $ (_box | | document);

 Dwz.ajax.js
 if ($.fn.ajaxtodo) {
 $ ("A[target=ajaxtodo]", $p). Ajaxtodo ();
 }

Note:
1. Execute the Initui method after the page is loaded, so that target is Ajaxtodo's a label has the specified Ajaxtodo method.

Ajax Requests for 3.a tags

function Ajaxtodo (URL, callback) {
 var $callback = callback;
 if (!$.isfunction ($callback)) {
 $callback = eval (' + callback + ');
 }
 var forwardurl = window.location.href;
 if (Url.indexof ("?")!=-1) {
 URL + "&forwardurl=" + Forwardurl;
 } else {
 url = "? forwardurl=" + forw Ardurl;
 }
 $.ajax ({
 type: ' POST ',
 url:url,
 dataType: "JSON",
 Cache:false,
 success: $callback,
 Error:YUNM.ajaxError
 });

Attention:
1. Forwardurl log out of the page

4. Add Ajaxtodo method to jquery Object

$.fn.extend ({
 ajaxtodo:function () {return
 This.each (function () {
 var $this = $ (this);
 $this. Click (Function (event) {
 var url = unescape ($this. attr ("href")). Replacetmbyid ($ (event.target). Parents (". Unitbox:first "));
 Yunm.debug (URL);
 if (!url.isfinishedtm ()) {
  $.showerr ($this. attr ("warn"));
  return false;
 }
 var title = $this. attr ("Atitle");
 if (title) {
  $.showconfirm (title, function () {
  Ajaxtodo (URL, $this. attr ("callback"));
 {
  Ajaxtodo (URL, $this. attr ("callback"));
 }
 Event.preventdefault ();});
 };

5. Callback function

function Ajaxdone (JSON) {
 yunm.ajaxdone (JSON);
 if (json[yunm.keys.statuscode] = = YUNM.statusCode.ok | | json[yunm.keys.statuscode] = = YUNM.statusCode.info) {
 // If the back page is specified, make a switch
 if (json.forwardurl) {
 location.href = Json.forwardurl
 }
}}

6. Pop-up Weebox Confirmation box

$.showconfirm = function (str, FUNCOK, funcclose) {
 var okfunc = function () {
 $.weeboxs.close ("Yunm_confirm_box" );
 Funcok.call ();
 };
 $.weeboxs.open (str, {
 boxid: ' Yunm_confirm_box ',
 contentType: ' text ',
 showbutton:true,
 Showcancel:true,
 showok:true,
 title: ' Confirmation ',
 width:280,
 type: ' Wee ',
 onopen:function () C16/>init_ui_button ();
 },
 onclose:funcclose,
 onok:okfunc
 });
function Init_ui_button () {
 $ ("button.ui-button[init!= ' init ')"). each (function (i, O) {
 $ (o). attr ("Init", " Init "); To prevent duplicate initialization of
 $ (o). Ui_button ();}
 );

Second, jfinal technology

 public void Logout () {
 if (getsession (). getattribute ("username")!= null) {
 //clear session
 getsession (). RemoveAttribute ("username");
 }
 Ajaxdonesuccess ("Log out of success!") ");
 Renderjson ();
}

Add Logout method.

Effect:

If you want to further study, you can click here to learn, and then attach 3 wonderful topics:

Bootstrap Learning Course

Bootstrap Practical Course

Bootstrap Plugin Usage Tutorial

The above is the entire content of this article, I hope everyone to implement bootstrap+jfinal exit system pop-up confirmation box, I hope you like this article, thank you for your reading.