JS Custom callback function _javascript technique

Source: Internet
Author: User
Tags button type

Background analysis

First look at a paragraph of JS code, the main implementation of the time to add the first through the asynchronous request to determine whether there is, if it does not exist, in the add operation:

function Add (url,data) {
  var isexited = isexited (data); 
  if (!isexited) {
    addrequest (URL, data); 
  }
}

When I add a data, I first of all by judging whether there is in the database (of course, if the front and back of the complete separation, should not be the front-end business logic to judge, the front-end should only be used to show data), first of all, isexited () request is the AJAX request implementation, this is asynchronous, it is clear, The interface is likely to perform the following function (usually Yes) when the result is not returned, so that the value of isexited is undefined, which is clearly not desired, and if a similar function can be implemented using a callback function, a case is described below.

Process is as follows

The foreground JSP interface is as follows:

<%@ page language= "java" contenttype= "text/html; Charset=utf-8 "pageencoding=" UTF-8 "%> <%@ taglib prefix=" C "uri=" Http://java.sun.com/jsp/jstl/core "%> < head> <meta charset= "Utf-8" > <meta http-equiv= "x-ua-compatible" content= "Ie=edge" > <meta name= "Vie Wport "content=" Width=device-width, initial-scale=1 "> <title>js callback function Case </title> <!--Bootstrap-- > <link href= "<c:url value= '/lib/bootstrap/css/bootstrap.min.css '/>" rel= "stylesheet" > <script typ E= "Text/javascript" >/** * Delete request/function Supplierdelete (element) {var id = element.parent
      node.parentnode.cells[0].innerhtml;
    Modaldeleterequest (' ${pagecontext.request.contextpath}/oms/supplier/remove/', id); </script> 
<script type= "Text/javascript" >

    /**
     * Delete request
    /function Supplierdelete (element) {
      var id = element.parentnode.parentnode.cells[0].innerhtml;
      Modaldeleterequest (' ${pagecontext.request.contextpath}/oms/supplier/remove/', id);
    }
  </script>

This is where you delete the button when you click it. But I want to pop up a confirmation delete dialog box, if after the selection is confirmed, then call the specific Delete method, and here is a reference to a modal box (bootstrap frame), mainly for display pop-up information, the code is as follows:

<%@ page language= "java" pageencoding= "UTF-8"%> <%@ taglib prefix= "C" uri= "Http://java.sun.com/jsp/jstl/core "%> <!--modal box (Modal)--> <div class=" Modal fade "id=" Modal-result "tabindex="-1 "role=" dialog "Aria-labelle Dby= "Mymodallabel" aria-hidden= "true" > <div class= "Modal-dialog" > <div class= "modal-content" > & Lt;div class= "Modal-header" > <button type= "button" class= "Close" data-dismiss= "modal" Aria-hidde
        N= "true" >x</button> 

The

Below is today's protagonist:

/** * Delete requested action * @param URL Delete request URL * @param ID/function modaldeleterequest (URL, id) {confirmisdelete URL
, ID, deleterequest); /** * callback function * @param URL * @param id/function deleterequest (URL, id) {$.get (url + ID, function (re) called after delete warning box confirmation
    Sult) {$ ("#modal-add-result-text"). Text (result.msg);
  $ ("#modal-result"). Modal (' show ');
}, "JSON"); /** * Pop-up dialog to confirm whether to delete * @param url delete request URL * @param ID delete Request ID * @param callback callback function, the function that needs to be callback at the last time */function Co Nfirmisdelete (URL, id, callback) {var Confirmdeletedialog = $ (' <div class= ' modal fade ' ><div class= ' Modal-dialo
    G "> ' + ' <div class=" modal-content "><div class=" Modal-header "><button type=" button "class=" Close " + ' data-dismiss= ' modal ' aria-hidden= ' true ' >x</button> ' + ' 

Here to write a picture description
Here to write a picture description

Above because the code is more, look at a simple frame below:

/**
 * Callback function test Method
 * * 
 @param callback
 * Callback method/
function Testcallback (callback) {
  alert (' Come in! ');
  Callback ();
}

/**
 * The function called the callback functions */function
A () {
  alert (' a ');
}

/**
 * Start test method
 /
function Start () {
  testcallback (a);
}

Back to the end of the callback, I hope to help you learn, small series also on the JS custom callback function has a more in-depth understanding.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.