个人中心
gpt4 book ai didi

javascript - 同一页面上的 jQuery 重新加载函数导致错误

转载 作者：行者123 更新时间：2023-12-01 05:33:42 25 4
gpt4 key购买 nike

我正在制作一个带有选择框和输入字段的搜索栏。输入字段使用 jQuery 预测搜索。选择框有 2 个选项；位置和存档，位置为默认值。选择存档后，它会用 jQuery 日期选择器函数替换输入字段，并用另一个输入字段替换已删除的输入字段。

现在，当您选择每个选项一次时，所有这些都可以正常工作。如果您返回并再次选择其中一个选项，它将停止运行并在控制台中生成错误。

Uncaught TypeError: $ is not a function

...当再次选择存档时，并且...

Uncaught TypeError: Cannot read property 'noConflict' of undefined

...再次选择位置时。

实际上，我在另一个网站上有另一个类似的搜索栏，效果很好。只是在这个网站上，页面末尾加载了一个旧的 jQuery 版本，我无法触及。

那么，如果用户多次选择同一选项，我该如何解决这些错误/冲突？

搜索栏文件:

<html>
<head>
<meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="http://www.example.com/css/foundation3.css">

  <script src="http://www.example.com/javascripts/modernizr.foundation.js"></script>

    </head>
<body>  


<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">


<form id="form1" name="form1" method="post" action="http://www.example.com/search/" >

<div class="row">  
<div class="two columns" style="padding: 0;">
    <select name="drop_list_menu" id="drop_list_menu" class="drop">
        <option value="1">Location</option>
        <option value="2">Archive</option>
    </select>
</div>

<span id="result_menu">
<div class="eight columns" style="padding: 0;">

        <input type="text" name="search" id="search" size="35" style="height: 37px; max-width: 250px; display: inline;" placeholder="Example: New York, NY"/>

</div>  

<div class="two columns" style="padding: 0;">
    <input type="submit" name="submit" id="submit" value="Search" class="button" style="width: 120px;" />
</div>  

</span>

</div>  

</form>



 <script>

jQuery( document ).ready(function( $ ) {

        var n;
        var u;
        var username = '<?php echo $user_name_global;?>';
        var tab = '1';



            // if user chooses an option from the select box...
             $(".drop").change(function (e) {
            var SelectId = "#"+e.target.id
            //alert(SelectId);

                //var element = document.getElementsByClassName('drop').id;
                //var changedElement = this;
        var i = SelectId.split('menu_')[1];
        var sbox_menu = '#sbox_menu';
        var result_menu = '#result_menu';

        var slot = i;
        //alert(result_menu);


                // get selected value from selectbox with id #drop_list
                var selectedDepartment = $(this).val();
                //alert(selectedDepartment);    

                $.ajax({

                    url: "http://www.example.com/search/get_dept_search.php",
                    data: "q="+selectedDepartment,
                    dataType: "json",

                    // if successful
                    success: function (response, textStatus, jqXHR) {

                            var list = $("#result_menu");

                            $.each(response.teacherNames, function (i, val) {
                                $(result_menu).html(val);
                            });

                    }});

            });



                    var availableTags = "http://www.example.com/search/get_pred_results.php";

                      $( "#search" ).autocomplete({
                        source: availableTags,
                        select: function (event, ui) {
                                window.location = ui.item.url;
                                }
                      });
                    //predsearch.stopPropagation();


        });

    </script>

  <script src="http://www.example.com/javascripts/foundation.min.js"></script>

  <!-- Initialize JS Plugins -->
  <script src="http://www.example.com/javascripts/app.js"></script>
</body>
</html>

包含替换代码的文件:

<?php

$q = $_GET["q"];

if(stripos($q, '1') !== FALSE)
{
$y = array();
$y[] = '<script>
jQuery.noConflict();
jQuery(document).ready(function($){
  $(function() {
    var availableTags = "http://www.example.com/search/get_pred_results.php";

                      $( "#search" ).autocomplete({
                        source: availableTags,
                        select: function (event, ui) {
                                window.location = ui.item.url;
                                }
                      });   
});
});
  </script>
 <div class="six columns" style="padding: 0;">
    <input  type="text" id="search" name="search"/>
    <input type="hidden" name="search_url"  id="search_url">
    </div>
  <div class="two columns" style="padding: 0;">
    <input type="submit" value="Search" class="button tiny" style="height: 3.4em;">
    </div>';
}

if(stripos($q, '2') !== FALSE)
{
$y = array();
$y[] = '<script>
jQuery.noConflict(true);
(function( $ ) {
  $(function() {
    $( "#datepicker" ).datepicker();

    var availableTags = "http://www.example.com/search/get_pred_results.php";

                      $( "#search" ).autocomplete({
                        source: availableTags,
                        select: function (event, ui) {
                                window.location = ui.item.url;
                                }
                      });
     });
})(jQuery);
  </script>
  <div class="six columns" style="padding: 0;">
  <div class="four columns" style="padding: 0;"><input type="hidden" name="search_url" id="search_url"><input type="text" id="datepicker" name="datepicker" placeholder="Pick a date"></div><div class="eight columns" style="padding: 0;"><input  type="text" id="search" name="search"/ placeholder="Choose a location"></div>
  </div>
  <div class="two columns" style="padding: 0;">
    <input type="submit" value="Search" class="button tiny " style="height: 3.3em;">
    </div>
  ';
}

 print json_encode(array(
            "teacherNames" => $y,
            "anotherReturnValue" => "just a demo how to return more stuff")
    );
?>

感谢任何帮助。

最佳答案

嗯，我修好了。我并不为自己的做法感到自豪，但如果它有效……它就有效。

基本上我所做的就是在调用替换代码时再次加载 jQuery。

我所做的只是添加:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

新的替换代码:

<?php

$q = $_GET["q"];

if(stripos($q, '1') !== FALSE)
{
$y = array();
$y[] = '
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>
jQuery.noConflict();
jQuery(document).ready(function($){
  $(function() {
    var availableTags = "http://www.friendlyforecast.com/search/get_pred_results.php";

                      $( "#search" ).autocomplete({
                        source: availableTags,
                        select: function (event, ui) {
                                window.location = ui.item.url;
                                }
                      });   
});
});
  </script>
 <div class="six columns" style="padding: 0;">
    <input  type="text" id="search" name="search"/>
    <input type="hidden" name="search_url"  id="search_url">
    </div>
  <div class="two columns" style="padding: 0;">
    <input type="submit" value="Search" class="button tiny" style="height: 3.4em;">
    </div>';
}

if(stripos($q, '2') !== FALSE)
{
$y = array();
$y[] = '<script>
jQuery.noConflict(true);
(function( $ ) {
  $(function() {
    $( "#datepicker" ).datepicker();

    var availableTags = "http://www.friendlyforecast.com/search/get_pred_results.php";

                      $( "#search" ).autocomplete({
                        source: availableTags,
                        select: function (event, ui) {
                                window.location = ui.item.url;
                                }
                      });
     });
})(jQuery);
  </script>
  <div class="six columns" style="padding: 0;">
  <div class="four columns" style="padding: 0;"><input type="hidden" name="search_url" id="search_url"><input type="text" id="datepicker" name="datepicker" placeholder="Pick a date"></div><div class="eight columns" style="padding: 0;"><input  type="text" id="search" name="search"/ placeholder="Choose a location or publication"></div>
  </div>
  <div class="two columns" style="padding: 0;">
    <input type="submit" value="Search" class="button tiny " style="height: 3.3em;">
    </div>
  ';
}

 print json_encode(array(
            "teacherNames" => $y,
            "anotherReturnValue" => "just a demo how to return more stuff")
    );
?>

我希望有一个更好的解决方案，如果你有一个，我仍然想听听。我会等几天，然后再将我的答案标记为正确答案。

关于javascript - 同一页面上的 jQuery 重新加载函数导致错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35324973/

25 4 0
文章推荐： jquery - 如何使用 JSPM 填充 jQuery 插件？
文章推荐： Liferay - 在 javascript 中获取本地化名称
文章推荐： prolog - 如何编写程序来查找完全封闭的瓷砖？
文章推荐： opengrok - 使用 opengrok 搜索历史记录
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com