Home > Article > Web Front-end > About the Popup pop-up box adding data implementation method

About the Popup pop-up box adding data implementation method

小云云Original: 2018-01-02 09:59:362037browse

This article mainly introduces in detail the simple implementation method of adding data to the Popup pop-up box. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

Logic

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

Implementation

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, &#39;p1.html&#39;)

def p2(request):
 if request.method == &#39;GET&#39;:
  return render(request, &#39;p2.html&#39;)

 elif request.method == &#39;POST&#39;:
  city = request.POST.get(&#39;city&#39;)
  print(&#39;执行数据保存操作...&#39;)
  return render(request, &#39;popup.html&#39;,{&#39;city&#39;:city})

urlpatterns = [
 url(r&#39;^p1.html/&#39;, p1),
 url(r&#39;^p2.html/&#39;, p2),
]

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(&#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>
</body>

Instructions:

1. Click the Add button to execute popupFunc: access '/p2.html/' and open the page p2.html in a new window
2. Define the callback function callback: It receives a parameter city, dynamically adds it to the drop-down option and sets it to the 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>

Note: The action=url parameter of the form form is not specified here. After the user enters the data , submitted to the current address by default, that is, '/p2.html/', submitted to 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>

Explanation:

The JS self-executing function is defined here: it calls the callback function in the window that opens the pop-up window (i.e. in P1 callback), and pass in user input data as parameters; close itself.
If the p2 view returns an 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

Rendering:

Related recommendations:

How to use JQuery to write a login pop-up box

jQuery pop-up page box and the file that implements the pop-up box Detailed explanation of upload function code

The above is the detailed content of About the Popup pop-up box adding data implementation method. For more information, please follow other related articles on the PHP Chinese website!

JavaScript django jquery html 回调函数 JS 对象 bom

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JavaScript self-executing functions and jQuery extension methodsNext article：JavaScript self-executing functions and jQuery extension methods

See more

About the Popup pop-up box adding data implementation method

Related articles