如果自动完成开始,datatable.js将停止工作

时间:2013-09-10 18:50:30

标签: jquery-ui jquery

我写过 1)使用datatable.js显示数据的脚本
2)自动完成方法

  1. PortletDraggable.init();
  2. FormFileUpload.init();
  3. EducationalQualification.init();
  4. WorkExperience.init();
  5. Supervisions.init();
  6. Awards.init();
  7. Publication.init();
  8. 所有这些都是数据表方法正常工作。但是当我添加jquery.auto-complete.js脚本引用时,这些方法停止工作并且自动完成开始工作。

    问题出在哪里,请建议。

    <script>
    
        $('.date-picker').datepicker({
            format: 'mm/dd/yyyy'
        });
    
    
        //  var oTable = null;
    
        jQuery(document).ready(function () {
            App.init();
            PortletDraggable.init();
            FormFileUpload.init();
            EducationalQualification.init();
            WorkExperience.init();
            Supervisions.init();
            Awards.init();
            Publication.init();
        });
    
            var tmpMem = 0; var tmpAward = 0; var tmpPub = 0;
            // Js For Autocomplete
            $('input[name=SearchUser]').autocomplete({
    
                source: function (request, response) {
                    tmpMem = 0; tmpAward = 0; tmpPub = 0;
                    $.ajax({
                        type: 'GET',
                        url: '@Url.Action("SearchUser", "Profile")',
                        data: { FirstName: $("#SearchUser").val() },
                        //  url: "/Profile/SearchUser?FirstName=" + $("#SearchUser").val(),
                        contentType: "application/json; charset=utf-8",
                        //       dataType: "json",
                        beforeSend: function () {
                            // code to show loading image
                            //$(".ui-content").css("opacity", "0.4");
                            //$("#imgLoader").attr("style", "display:block");
                            //var df = document.getElementById('imgLoader');
                            //df.style.position = 'absolute';
                            //var wd = ($(window).width() / 2) - 45;
                            //var hg = ($(window).height() / 2) - 60;
                            //df.style.left = wd + "px";
                            //df.style.top = hg + "px";
                        },
                        complete: function () {
                             //hide loading image
                            $(".ui-content").css("opacity", "1.0");
                            $("#imgLoader").attr("style", "display:none");
                        },
                        success: function (data) {
                               alert(data.data[0].Fname);
                            response($.map(data.data, function (item) {
                                return {
                                    Sn: item.Sn, Fname: item.Fname, Mname: item.Uname, Lname: item.Lname, Title: item.Title,
                                    Image: item.Image, Organization: item.Organization, JobTitle: item.JobTitle,
                                    Awardname: item.Awardname, AwardYear: item.AwardYear, Pubname: item.Pubname, Pubtype: item.Pubtype, TabType: item.TabType
                                }
                            }))
                        }
                    })
                },
                select: function (event, ui) {
                    //var domainURL = $("#domainurl").val();
                    //window.location = domainURL + "/home/NeighborProfile?id=" + ui.item.id;
                    // alert(ui.item.Sn);
                }
            }).data("autocomplete")._renderItem = function (ul, item) {
                //     alert(item);="
    
                if (item.TabType == "member") {
                    if (tmpMem == 0) {
                        tmpMem = 1;
                        return $("<li  class='SearchUserLi'></li>").data("item.autocomplete", item).append(
    
                       "<a href='  ' class='SearchUserLink'>" +
                           "<img  src='" + item.Image + "' alt='" + item.Fname + "' class='SearchUserImg'>" +
                           "<span class='searchUserLight'>" +
                                 item.Title + ". " + item.Fname +
                                 "<span style=' font-weight: bold;color:black'>" + "  " + item.Organization + "</span>" +
                           "</span>" +
                           "<span style='  font-size : 10px; color: #3B5998;'>" + item.JobTitle + "</span>" +
                       "</a>"
                       ).prepend("<span class='SearchUsercategory'> Members  </span>").appendTo(ul);
                    }
                    return $("<li   class='SearchUserLi'></li>").data("item.autocomplete", item).append(
                          "<hr class='SearchUserHr'>" +
                        "<a href='  ' class='SearchUserLink'>" +
                            "<img  src='" + item.Image + "' alt='" + item.Fname + "' class='SearchUserImg'>" +
                            "<span class='searchUserLight'>" +
                                  item.Title + ". " + item.Fname +
                                  "<span style=' font-weight: bold;color:black'>" + "  " + item.Organization + "</span>" +
                            "</span>" +
                            "<span style='  font-size : 10px; color: #3B5998;'>" + item.JobTitle + "</span>" +
                        "</a>"
                        ).appendTo(ul);
                }
                else if (item.TabType == "award") {
                    if (tmpAward == 0) {
                        tmpAward = 1;
                        return $("<li style='padding:0px!important;height:80px'></li>").data("item.autocomplete", item).append(
    
                       "<a href='  ' class='SearchUserLink'>" +
                           "<img  src='" + item.Image + "' alt='" + item.Fname + "' class='SearchUserImg'>" +
                           "<span class='searchUserLight'>" +
                                 item.Title + ". " + item.Fname +
                                 "<span style=' font-weight: bold;color:black'>" + "  " + item.Organization + "</span>" +
                           "</span>" +
                           "<span style='  font-size : 10px; color: #3B5998;'>" + "  " + item.Awardname + "(" + item.AwardYear + ")" + "</span>" +
                       "</a>"
                       ).prepend("<span class='SearchUsercategory'> Awards  </span>").appendTo(ul)
                    }
                    return $("<li style='padding:0px!important;height:80px'></li>").data("item.autocomplete", item).append(
                         "<hr class='SearchUserHr'>" +
                        "<a href='  ' class='SearchUserLink'>" +
                            "<img  src='" + item.Image + "' alt='" + item.Fname + "' class='SearchUserImg'>" +
                            "<span class='searchUserLight'>" +
                                  item.Title + ". " + item.Fname +
                                  "<span style=' font-weight: bold;color:black'>" + "  " + item.Organization + "</span>" +
                            "</span>" +
                            "<span style='  font-size : 10px; color: #3B5998;'>" + "  " + item.Awardname + "(" + item.AwardYear + ")" + "</span>" +
                        "</a>"
                        ).appendTo(ul);
    
                }
                else if (item.TabType == "publications") {
                    if (tmpPub == 0) {
                        tmpPub = 1;
                        return $("<li style='padding:0px!important;height:80px'></li>").data("item.autocomplete", item).append(
    
                       "<a href='  ' class='SearchUserLink'>" +
                           "<img  src='" + item.Image + "' alt='" + item.Fname + "' class='SearchUserImg'>" +
                           "<span class='searchUserLight'>" +
                                 item.Title + ". " + item.Fname +
                                 "<span style=' font-weight: bold;color:black'>" + "  " + item.Organization + "</span>" +
                           "</span>" +
                           "<span style='  font-size : 10px; color: #3B5998;'>" + "  " + item.Pubname + "," + item.Pubtype + "</span>" +
                       "</a>"
                       ).prepend("<span class='SearchUsercategory'> Publications  </span>").appendTo(ul)
                    }
                    return $("<li style='padding:0px!important;height:80px'></li>").data("item.autocomplete", item).append(
                          "<hr class='SearchUserHr'>" +
                        "<a href='  ' class='SearchUserLink'>" +
                            "<img  src='" + item.Image + "' alt='" + item.Fname + "' class='SearchUserImg'>" +
                            "<span class='searchUserLight'>" +
                                  item.Title + ". " + item.Fname +
                                  "<span style=' font-weight: bold;color:black'>" + "  " + item.Organization + "</span>" +
                            "</span>" +
                            "<span style='  font-size : 10px; color: #3B5998;'>" + "  " + item.Pubname + "," + item.Pubtype + "</span>" +
                        "</a>"
                        ).appendTo(ul);
    
                }
            };
    
    
    
    </script>
    

3 个答案:

答案 0 :(得分:0)

包含jQuery之后,立即在脚本标记中添加以下内容。希望这能解决你的问题。

jQuery.noConflict();

答案 1 :(得分:0)

我不确定你的日期选择器或自动完成功能是如何工作的。当DOM可能没有准备好时,它们都在向DOM元素添加功能。尝试这样的事情:

<script>

    var initFields = function() {

        //Date Picker
        $('.date-picker').datepicker({
            format: 'mm/dd/yyyy'
        });

        //Autocomplete
        var tmpMem = 0; var tmpAward = 0; var tmpPub = 0;
        // Js For Autocomplete
        $('input[name=SearchUser]').autocomplete({

            source: function (request, response) {
                tmpMem = 0; tmpAward = 0; tmpPub = 0;
                $.ajax({
                    type: 'GET',
                    url: '@Url.Action("SearchUser", "Profile")',
                    data: { FirstName: $("#SearchUser").val() },
                    //  url: "/Profile/SearchUser?FirstName=" + $("#SearchUser").val(),
                    contentType: "application/json; charset=utf-8",
                    //       dataType: "json",
                    beforeSend: function () {
                        // code to show loading image
                        //$(".ui-content").css("opacity", "0.4");
                        //$("#imgLoader").attr("style", "display:block");
                        //var df = document.getElementById('imgLoader');
                        //df.style.position = 'absolute';
                        //var wd = ($(window).width() / 2) - 45;
                        //var hg = ($(window).height() / 2) - 60;
                        //df.style.left = wd + "px";
                        //df.style.top = hg + "px";
                    },
                    complete: function () {
                         //hide loading image
                        $(".ui-content").css("opacity", "1.0");
                        $("#imgLoader").attr("style", "display:none");
                    },
                    success: function (data) {
                           alert(data.data[0].Fname);
                        response($.map(data.data, function (item) {
                            return {
                                Sn: item.Sn, Fname: item.Fname, Mname: item.Uname, Lname: item.Lname, Title: item.Title,
                                Image: item.Image, Organization: item.Organization, JobTitle: item.JobTitle,
                                Awardname: item.Awardname, AwardYear: item.AwardYear, Pubname: item.Pubname, Pubtype: item.Pubtype, TabType: item.TabType
                            }
                        }))
                    }
                })
            },
            select: function (event, ui) {
                //var domainURL = $("#domainurl").val();
                //window.location = domainURL + "/home/NeighborProfile?id=" + ui.item.id;
                // alert(ui.item.Sn);
            }
        }).data("autocomplete")._renderItem = function (ul, item) {
            //     alert(item);="

            if (item.TabType == "member") {
                if (tmpMem == 0) {
                    tmpMem = 1;
                    return $("<li  class='SearchUserLi'></li>").data("item.autocomplete", item).append(

                   "<a href='  ' class='SearchUserLink'>" +
                       "<img  src='" + item.Image + "' alt='" + item.Fname + "' class='SearchUserImg'>" +
                       "<span class='searchUserLight'>" +
                             item.Title + ". " + item.Fname +
                             "<span style=' font-weight: bold;color:black'>" + "  " + item.Organization + "</span>" +
                       "</span>" +
                       "<span style='  font-size : 10px; color: #3B5998;'>" + item.JobTitle + "</span>" +
                   "</a>"
                   ).prepend("<span class='SearchUsercategory'> Members  </span>").appendTo(ul);
                }
                return $("<li   class='SearchUserLi'></li>").data("item.autocomplete", item).append(
                      "<hr class='SearchUserHr'>" +
                    "<a href='  ' class='SearchUserLink'>" +
                        "<img  src='" + item.Image + "' alt='" + item.Fname + "' class='SearchUserImg'>" +
                        "<span class='searchUserLight'>" +
                              item.Title + ". " + item.Fname +
                              "<span style=' font-weight: bold;color:black'>" + "  " + item.Organization + "</span>" +
                        "</span>" +
                        "<span style='  font-size : 10px; color: #3B5998;'>" + item.JobTitle + "</span>" +
                    "</a>"
                    ).appendTo(ul);
            }
            else if (item.TabType == "award") {
                if (tmpAward == 0) {
                    tmpAward = 1;
                    return $("<li style='padding:0px!important;height:80px'></li>").data("item.autocomplete", item).append(

                   "<a href='  ' class='SearchUserLink'>" +
                       "<img  src='" + item.Image + "' alt='" + item.Fname + "' class='SearchUserImg'>" +
                       "<span class='searchUserLight'>" +
                             item.Title + ". " + item.Fname +
                             "<span style=' font-weight: bold;color:black'>" + "  " + item.Organization + "</span>" +
                       "</span>" +
                       "<span style='  font-size : 10px; color: #3B5998;'>" + "  " + item.Awardname + "(" + item.AwardYear + ")" + "</span>" +
                   "</a>"
                   ).prepend("<span class='SearchUsercategory'> Awards  </span>").appendTo(ul)
                }
                return $("<li style='padding:0px!important;height:80px'></li>").data("item.autocomplete", item).append(
                     "<hr class='SearchUserHr'>" +
                    "<a href='  ' class='SearchUserLink'>" +
                        "<img  src='" + item.Image + "' alt='" + item.Fname + "' class='SearchUserImg'>" +
                        "<span class='searchUserLight'>" +
                              item.Title + ". " + item.Fname +
                              "<span style=' font-weight: bold;color:black'>" + "  " + item.Organization + "</span>" +
                        "</span>" +
                        "<span style='  font-size : 10px; color: #3B5998;'>" + "  " + item.Awardname + "(" + item.AwardYear + ")" + "</span>" +
                    "</a>"
                    ).appendTo(ul);

            }
            else if (item.TabType == "publications") {
                if (tmpPub == 0) {
                    tmpPub = 1;
                    return $("<li style='padding:0px!important;height:80px'></li>").data("item.autocomplete", item).append(

                   "<a href='  ' class='SearchUserLink'>" +
                       "<img  src='" + item.Image + "' alt='" + item.Fname + "' class='SearchUserImg'>" +
                       "<span class='searchUserLight'>" +
                             item.Title + ". " + item.Fname +
                             "<span style=' font-weight: bold;color:black'>" + "  " + item.Organization + "</span>" +
                       "</span>" +
                       "<span style='  font-size : 10px; color: #3B5998;'>" + "  " + item.Pubname + "," + item.Pubtype + "</span>" +
                   "</a>"
                   ).prepend("<span class='SearchUsercategory'> Publications  </span>").appendTo(ul)
                }
                return $("<li style='padding:0px!important;height:80px'></li>").data("item.autocomplete", item).append(
                      "<hr class='SearchUserHr'>" +
                    "<a href='  ' class='SearchUserLink'>" +
                        "<img  src='" + item.Image + "' alt='" + item.Fname + "' class='SearchUserImg'>" +
                        "<span class='searchUserLight'>" +
                              item.Title + ". " + item.Fname +
                              "<span style=' font-weight: bold;color:black'>" + "  " + item.Organization + "</span>" +
                        "</span>" +
                        "<span style='  font-size : 10px; color: #3B5998;'>" + "  " + item.Pubname + "," + item.Pubtype + "</span>" +
                    "</a>"
                    ).appendTo(ul);

            }
        };


    };
    //  var oTable = null;

    jQuery(document).ready(function () {
        App.init();
        PortletDraggable.init();
        FormFileUpload.init();
        EducationalQualification.init();
        WorkExperience.init();
        Supervisions.init();
        Awards.init();
        Publication.init();
        initFields();
    });   

</script>

如果这不起作用,那么您可能需要检查所包含的所有JavaScript文件以确保它们的所有版本都兼容,并且没有两个定义相同的函数/对象。

答案 2 :(得分:0)

不是添加单个自动完成脚本引用,只需添加jquery.ui完整的bundle脚本引用。我有类似的问题,但在添加jquery.ui并删除自动完成脚本后,一切都开始正常工作。希望它有所帮助