同一页面上的jQuery重新加载功能导致错误

Question

I'm making a search bar with a select box and an input field. 我正在制作一个带有选择框和输入字段的搜索栏。 The input field uses the jQuery predictive search. 输入字段使用jQuery预测搜索。 The select box has 2 options; 选择框有2个选项； Location and Archive, the Location is default. 位置和存档，位置是默认设置。 When the Archive is selected it replaces the input field with the jQuery datepicker function and another input field to replace the one that was removed. 选择存档后，它将用jQuery datepicker函数替换输入字段，并用另一个输入字段替换已删除的输入字段。

Now, all this works fine when you select each of the options once. 现在，当您一次选择每个选项时，所有这些工作正常。 If you go back and select one of the options again it stops functioning and generates an error in the console. 如果返回并再次选择其中一个选项，它将停止运行并在控制台中生成错误。

Uncaught TypeError: $ is not a function 未捕获的TypeError：$不是函数

... when Archive is selected again, and... ...当再次选择存档时，...

Uncaught TypeError: Cannot read property 'noConflict' of undefined 未捕获的TypeError：无法读取未定义的属性'noConflict'

... when Location is selected again. ...当再次选择位置时。

I actually have another similar search bar on another site that works just fine. 实际上，我在另一个网站上也有一个类似的搜索栏，效果很好。 It's just on this site there is an old jQuery version loaded at the end of the page that I can't touch. 只是在此站点上，我无法触摸页面末尾加载的旧jQuery版本。

So basically how do I resolve these errors/conflicts if the user selects the same option more than once? 因此，如果用户多次选择同一选项，那么基本上如何解决这些错误/冲突？

Search bar file: 搜索栏文件：

<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>

File containing the replacement code: 包含替换代码的文件：

<?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")
    );
?>

Any help appreciated. 任何帮助表示赞赏。

Answer 1

Well, I fixed it. 好吧，我修好了。 Not proud of how I did it, but if it works... it works. 我不为自己的工作方式感到骄傲，但是如果它有效……它就会起作用。

Basically all I did was load jQuery again when the replacement code is called. 基本上，我所做的就是在调用替换代码时再次加载jQuery。

All I did was add: 我所做的就是添加：

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

The new replacement code: 新的替换代码：

<?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")
    );
?>

I was hoping for a better solution, and if you have one I would still like to hear it. 我希望有一个更好的解决方案，如果您有解决方案，我仍然希望听到。 I'll wait a couple of days before I mark my answer as the correct one. 我将等几天，然后再将答案标记为正确答案。

同一页面上的jQuery重新加载功能导致错误

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-02-11 23:09:53

同一页面上的jQuery重新加载功能导致错误

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-02-11 23:09:53

解决方案1
0 已采纳 2016-02-11 23:09:53