php - 如何在.php文件中正确使用jquery？ WP-Admin仅显示html

Question

I have a wordpress installation where I am currently trying to create a formular where after sending the formular I process the data and save it into a mysql DB. 我有一个wordpress安装，我正在尝试创建一个公式，在发送公式之后，我处理数据并将其保存到mysql DB中。

To achieve this I have created a new .php file which I included in the "function.php" of my theme because i want to add the whole formular/process with a shortcode. 为了实现这一点，我创建了一个新的.php文件，我将其包含在我的主题的“function.php”中，因为我想用短代码添加整个formular / process。

The .php file currently contains this (Simplified): .php文件当前包含此（简体）：

function FNC_Add_New_Record ()
{
    $options = "<option value='unselected'>- Select one -</option>"
        . "<option value='option1'>Option 1</option>"
        . "<option value='option2'>Option 2</option>";

    echo "<br>";
    echo "<form id='form1' method='post'>";
    echo "<div style='text-align: center;'>";
    echo "<font size=5>Selection 1</font><br>";
    echo "<input type='text' name='textfield1' placeholder='Insert caption here'><br>";
    echo "<select id='selection1'>" . $options . "</select>";
    echo "<select id='selection2'><option value='unselected'>- No option1 selected -</option></select>";
    echo "<br><br>";
    echo "</div>";

    echo "</form>";
    echo "<br>";
}
add_shortcode('FNC_Add_New_Record','FNC_Add_New_Record');

Because the selection 2 depends on what is selected with the selection 1 I added jquery to the end of the .php file: 因为选择2取决于使用选择1选择的内容，所以我将jquery添加到.php文件的末尾：

?><!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type = "text/javascript" language = "javascript">

$(document).ready(function () {
    $("#selection1").change(function () {
        var val = $(this).val();
        if (val == "option1") {
            $("#selection2").html("<option value='none'>None</option><option value='option2'>Option 2</option>");
        } else if (val == "option2") {
            $("#selection2").html("<option value='none'>None</option><option value='option2'>Option 2</option>");
        } else if (val == "unselected") {
            $("#selection2").html("<option value='unselected'>- No option1 selected -</option>");
        }
    });
});
</script>

So, there is probably a lot I have done wrong but this was the only way I was able to get it working. 所以，可能有很多我做错了，但这是我能够让它工作的唯一方法。 Yes I have searched here and on a lot other sides for proper solutions which tell me to add it to the function.php of the theme and do it with "enqueue". 是的，我已经在这里和其他很多方面搜索了正确的解决方案，告诉我将它添加到主题的function.php中并使用“enqueue”执行。 I have tried all of the possible suggest functions and code snippets but nothing worked. 我已经尝试了所有可能的建议功能和代码片段，但没有任何效果。

The issue what I have with this solution is that it renders the wp-admin of my wordpress installation useless because it just shows the code which I have added to the .php file as html. 我对这个解决方案的问题在于它使我的wordpress安装的wp-admin无用，因为它只是显示我作为html添加到.php文件中的代码。

what I get on my site accessing wp-admin: 我在我的网站上访问wp-admin的内容： 我得到了什么

Also i'd like to note that using the tag "<!DOCTYPE html>" is a solution to another problem I have when adding jquery but i have no idea if it's the correct solution. 另外我想注意使用标签"<!DOCTYPE html>"是我在添加jquery时遇到的另一个问题的解决方案，但我不知道它是否是正确的解决方案。 If I remove this tag the main navigation of my website, instead of being like 15px in height suddenly has a height of almost a whole full HD screen. 如果我删除这个标签我的网站的主导航，而不是像15px的高度突然有几乎整个高清屏幕的高度。

Answer 1

Wordpress function.php also includes all JS files, make use of wp_enqueue_scripts to queue up your scripts. Wordpress function.php还包括所有JS文件，利用wp_enqueue_scripts对脚本进行排队。

function my_scripts_loader() {
    wp_enqueue_script('myjquerylib-js', get_template_directory_uri() . '/assets/js/myjquerylib.js');

}
add_action('wp_enqueue_scripts', 'my_scripts_loader');

php - 如何在.php文件中正确使用jquery？ WP-Admin仅显示html

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-06-07 11:41:40

php - 如何在.php文件中正确使用jquery？ WP-Admin仅显示html

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-06-07 11:41:40

解决方案1
0 已采纳 2016-06-07 11:41:40