从下拉列表中打开模式以添加客户端 [英] Opening modal from dropdown list to add client

问题描述

昨天链接到我以前的文章，内容涉及如何使选择器的值更改我的javascript的行为，我在打开模式窗口时遇到了麻烦.

Linked to my prior post yesterday on how to have a value of a selector change the behaviour of my javascript, I run into trouble opening a modal window.

这个想法是，如果从第一个下拉列表中选择添加客户端"，而不是用项目"动态填充第二个下拉列表，则会弹出一个模式窗口，以允许用户添加客户端.

The idea is that if "add client" is selected from the first dropdown list, instead of dynamically populating the second dropdown list with "projects", a modal window pops-up to allow the user to add a client.

我有index3.php:

I have index3.php:

<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);

include 'dbconnect.php';
?>

<script type="text/javascript" src="scripts/jquery-3.1.1.min.js"></script>
<script type="text/javascript">

function fetch_select(val)
{   
  if (val != "add_client")
  {
    $.ajax({
     type: 'post',
     url: 'fetch_data.php',
     data: {
       get_option:val
     },
     success: function (response) {
      document.getElementById("projects").innerHTML=response; 
     } 
    });
  }
  else
  {
    //code to open modal below
    success: function overlay() {
    el = document.getElementById("overlay");
    el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
    }
    //code to open modal above
  }
}
</script>

<?php
echo "<table>";
echo "<form action='index3.php method='post'>";
echo "<tr>";
echo "<td>";
    echo "<select name='client' id='client' onchange='fetch_select(this.value);'>"; 
    echo "<option>Name of Firm</option>"; 
    $select = mysqli_query($Verbinding,"SELECT client FROM clients GROUP by client");
    while ($row = mysqli_fetch_array($select)) 
        {
        echo '<option value="'.$row['client'].'">'.$row['client'].'</option>';
        }
    echo "<option value='add_client'>Add Client</option>";
    echo "</select>";
echo "</td>";
echo "<td>";
    echo "<select name='project' id='projects'>";
    echo "<option>Select Project</option>";             
    echo "</select>";
echo "</td>";
echo "</tr>";
echo "</table>";
echo "</form>";

echo "<div id='overlay'>";
    echo "<div>";
    echo "<p>Content of modal window.</p>";
    echo "</div>";
echo "</div>";

?>

样式表modal.css可以工作，并且通过dbconnect.php包含在内，并且包含:

The stylesheet modal.css works and is included through dbconnect.php and contains:

modal.css

modal.css

#overlay {
     visibility: hidden;
     position: absolute;
     left: 0px;
     top: 0px;
     width:100%;
     height:100%;
     text-align:center;
     z-index: 1000;
}

#overlay div {
     width:300px;
     margin: 100px auto;
     background-color: #fff;
     border:1px solid #000;
     padding:15px;
     text-align:center;
}

希望任何人都能提供帮助，谢谢保罗，并致以亲切的问候

Hope anyone can help, thanks and with kind regards, Paul

推荐答案

success: function overlay() {
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}

什么也没做.您已经将ajax调用的成功"回调(定义了一个选项，其中包含稍后运行的功能)与常规的日常代码混淆了.

is not doing anything. You've confused the "success" callback of the ajax call (which defines an option, containing a function to run later) with regular everyday code.

假设模态的ID定义为覆盖"，则可以执行以下操作:

Assuming your modal has its id defined as "overlay", then you can just do:

else
{
  //code to open modal below
  el = document.getElementById("overlay");
  el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
  //code to open modal above
}

这篇关于从下拉列表中打开模式以添加客户端的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！