Popup popup box is bound to add data event (detailed step-by-step explanation)

This time I will bring you the Popup pop-up box binding to add data events (detailed step-by-step explanation). What are the precautions for Popup pop-up box binding to add data events. The following is a practical case, let’s take a look. take a look.

logic

A set of data is displayed in window P1, and an add button is provided.
Click the button, and a new browser window P2 will pop up. After adding a piece of data and submitting it, window P2 will automatically close
Newly added data is dynamically added to the window and was selected in P1
Required knowledge: JS BOM window object; JS self-executing function

accomplish

The following is a simple implementation in Django. Because it is relatively simple, routing and views are written together.

1. Routing and view part

from django.conf.urls import url
from django.shortcuts import render
def p1(request):
 return render(request, 'p1.html')
def p2(request):
 if request.method == 'GET':
  return render(request, 'p2.html')
 elif request.method == 'POST':
  city = request.POST.get('city')
  print('执行数据保存操作...')
  return render(request, 'popup.html',{'city':city})
urlpatterns = [
 url(r'^p1.html/', p1),
 url(r'^p2.html/', p2),
]

2. Access view p1 and return to page p1.html:

 <meta>
 <title>p1页面</title>


<h2 id="p-页面">p1页面</h2>
<select>
 <option>上海</option>
 <option>北京</option>
</select>
<input>
<script>
 popupFunc = function () {
  window.open(&#39;/p2.html/&#39;, &#39;p2&#39;, "status=1, height:300, width:300, toolbar=0, resizeable=1")
  //open(url, name, 窗口参数)，注意name不能重名
 };
 callback = function (city) {
  var opt = document.createElement(&#39;option&#39;);
  opt.innerText = city;
  opt.setAttribute(&#39;selected&#39;, &#39;selected&#39;);
  var selEle = document.getElementById(&#39;cityChoose&#39;);
  selEle.appendChild(opt);
 }
</script>

illustrate:

1. Click the Add button and execute popupFunc: visit '/p2.html/' and open the page p2.html in a new window
2. Define callback functioncallback: it receives a parameter city, Dynamically add it to the dropdown option and set it to selected state.

3. p2.html is displayed in the pop-up window as follows:

 <meta>
 <title>p2页面</title>


<h2 id="p-页面">p2页面</h2>

 {% csrf_token %}    

Note: The action=url parameter of the form form is not specified here. After the user enters the data, it will be submitted to the current address by default, that is, '/p2.html/', and submitted to the view p2

4. After view p2 receives the submitted data, it passes in the template and returns the page popup.html:

 <meta>
 <title>正在返回</title>


<script>
 (function (city) {
  window.opener.callback(city);
  window.close();
 })("{{ city }}")
</script>

illustrate:

• The JS self-executing function is defined here: it calls the callback function in the window that opens the pop-up window (that is, the callback in P1), and passes in the user input data as a parameter; it closes itself.

• If the p2 view returns error message, it can also be displayed in popup.html (omitted).

• For self-executing functions, please refer to JavaScript Self-executing functions and jQuery extension methods

I believe you have read this article You have mastered the case method. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

How to use JS self-executing functions and jQuery extensions

Detailed explanation of using Require to call js

Detailed explanation of the steps for setting header information in the vue-resource interceptor

The above is the detailed content of Popup popup box is bound to add data event (detailed step-by-step explanation). For more information, please follow other related articles on the PHP Chinese website!