Popup popup box is bound to add data event (detailed step-by-step explanation)-JS Tutorial-php.cn

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

php中世界最好的语言

Release： 2018-04-16 14:12:31

Original

3562 people have browsed it

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),
]

Copy after login

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

<head>
 <meta charset="UTF-8">
 <title>p1页面</title>
</head>
<body>
<h2>p1页面</h2>
<select id="cityChoose">
 <option>上海</option>
 <option>北京</option>
</select>
<input type="button" value="添加" onclick="popupFunc();"/>
<script>
 popupFunc = function () {
  window.open('/p2.html/', 'p2', "status=1, height:300, width:300, toolbar=0, resizeable=1")
  //open(url, name, 窗口参数)，注意name不能重名
 };
 callback = function (city) {
  var opt = document.createElement('option');
  opt.innerText = city;
  opt.setAttribute('selected', 'selected');
  var selEle = document.getElementById('cityChoose');
  selEle.appendChild(opt);
 }
</script>
</body>

Copy after login

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:

<head>
 <meta charset="UTF-8">
 <title>p2页面</title>
</head>
<body>
<h2>p2页面</h2>
<form method="post">
 {% csrf_token %}
 <input type="text" name="city">
 <input type="submit" value="提交">
</form>
</body>

Copy after login

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:

<head>
 <meta charset="UTF-8">
 <title>正在返回</title>
</head>
<body>
<script>
 (function (city) {
  window.opener.callback(city);
  window.close();
 })("{{ city }}")
</script>
</body>

Copy after login

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!