WordPress窗口小部件缺少jQuery

时间:2013-04-20 作者:user31806

我有live score网站,它不是基于wordpress的,我为纯php网站构建了一个小部件,但现在我想向wordpress用户提供这个小部件。问题是,当我尝试这个小部件时,我出现了三个错误,老实说,我不是wordpress专家,所以我希望在这里得到帮助。这是我的用户链接:

<div id="widget-container" class="my_widget" name=\'15\' width="800px"></div>
<script src="http://skormix.com/mywidget/widget.js" type="text/javascript"></script>
下面是错误:

未捕获引用错误:$未定义未捕获引用错误:jQuery未定义未捕获类型错误:无法调用未定义的方法“ajax”,这是我的小部件代码的一部分:

(function() {

// Localize jQuery variable
var jQuery;

/******** Load jQuery if not present *********/
if (window.jQuery === undefined || window.jQuery.fn.jquery !== \'1.8.3\') {
    var script_tag = document.createElement(\'script\');
    script_tag.setAttribute("type","text/javascript");
    script_tag.setAttribute("src",
        "http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js");
    var script_tag1 = document.createElement(\'script\');
    script_tag1.setAttribute("type","text/javascript");
    script_tag1.setAttribute("src",
        "http://localhost/aaa/include-js/jquery_timer.js");

    if (script_tag.readyState) {
      script_tag.onreadystatechange = function () { // For old versions of IE
          if (this.readyState == \'complete\' || this.readyState == \'loaded\') {
              scriptLoadHandler();
          }
      };
    } else { // Other browsers
      script_tag.onload = scriptLoadHandler;
    }
    // Try to find the head, otherwise default to the documentElement
    (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
    (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag1);
} else {
    // The jQuery version on the window is the one we want to use
    jQuery = window.jQuery;
    main();
}

/******** Called once jQuery has loaded ******/
function scriptLoadHandler() {
    // Restore $ and window.jQuery to their previous values and store the
    // new jQuery in our local jQuery variable
    jQuery = window.jQuery.noConflict(true);
    // Call our main function
    main(); 
}

/******** Our main function ********/
function main() {
    jQuery(document).ready(function($) {
    /******* Load CSS *******/
    var css_link = $("<link>", { 
            rel: "stylesheet", 
            type: "text/css", 
            href: "http://localhost/aaa/widget/blue.css"
        });
        css_link.appendTo(\'head\');
        var txt;
        txt=\'<div id="wrapper">\';
        txt=txt+\'<ul class="tabs">\';
        txt=txt+\'<li id="fixtures_tab"><a href="#fixtures">Hepsi</a></li>\';
        txt=txt+\'<li id="live_tab"><a href="#live">Canlı</a></li>\';
        txt=txt+\'<li id="finished_tab"><a href="#finished">Bitmiş</a></li>\';
        txt=txt+\'<li id="program_tab"><a href="#program">Başlamamış</a></li>\';
        txt=txt+\'<li id="postpond_tab"><a href="#postpond">Ertelenen</a></li>\';
        txt=txt+\'<li id="selected_tab"><a id="f" href="#fav">Oyunlarım (0)</a></li>\';
        txt=txt+\'</ul>\';
        txt=txt+\'<div class="tab-container">\';
        txt=txt+\'<div id="fixtures" class="tab-content"><script type="text/javascript">get_All_Today_Matches();</script></div>\';
        txt=txt+\'<div id="live" class="tab-content"><script type="text/javascript"></script></div>\';
        txt=txt+\'<div id="finished" class="tab-content"><script type="text/javascript"></script></div>\';
        txt=txt+\'<div id="program" class="tab-content"><script type="text/javascript"></script></div>\';
        txt=txt+\'<div id="postpond" class="tab-content"><script type="text/javascript"></script></div>\';
        txt=txt+\'<div id="fav" class="tab-content"><script type="text/javascript"></script></div>\';
        txt=txt+\'</div>\';
        txt=txt+\'</div>\';
        $(\'#widget-container\').html(txt);
    });
}
})(); // We call our anonymous function immediately
对于第三个错误,我使用了如下ajax请求:

function get_All_Today_Matches()//this function used to get all the matches of today for all countries & comptions (live, finished, program) on the main page
{
    $.ajax({//ajax function to get the xml data (faster)
    type: "POST",//we use POST method beacuse we should send a \'home\' to the proxy page to get the right xml url
    url: "http://localhost/aaa/proxy.php",//proxy page
    data : {country : \'home\'},//parameters
    dataType: "xml",//returned data type
    success: parseToday//the function on success
 });
}
编辑:4。未捕获的TypeError:对象[对象对象]的属性“$”不是函数

1 个回复
SO网友:Ralf912

您的前两个问题:$jQuery 未定义。$ 只是的别名jQuery. 您的前两个问题是相同的,但名称不同。

我认为您没有在functions.php. 我认为您只需将代码放在模板文件中,并期望它能够正常工作。这基本上就是问题所在。

当您请求jQuery时,它不会被加载。jQuery通常加载在页脚中,这意味着after 您尝试访问jQuery。我们可以用排队的JavaScript很容易地解决这个问题

add_action( \'init\', \'enqueue_skormix_widget_js\', 20 );

function enqueue_skormix_widget_js() {
  wp_enqueue_script(
    \'skormix-widget\',
    \'http://skormix.com/mywidget/widget.js\',
    array( \'jquery\' ),
    false,
    true
  );
}
将这行代码放入functions.php 并移除<script> 模板中的标记。该函数将挂接在init 钩子(一个非常早期的钩子)并将您的脚本和依赖项排队jquery 并将其加载到页脚中。

依赖项告诉WordPress加载脚本after 将加载Dependencity(或dependencies)。在这种情况下,它将在jQuery加载后加载。

现在我们解决了两个问题。jquery 这是alias$ 已定义。

让我们仔细看看你的最后一个问题:有些东西不是未定义的函数。当然,如果$ 没有定义,不能调用它的方法。在我们定义之后$ propper将脚本排入队列,$ 不再是未定义的。

一个简单的RTFM 问题

结束

相关推荐

AJAX在侧边栏中循环以加载帖子标题/类别

我有一个显示20篇最新帖子的侧边栏,我真正想做的是将该循环轴化,因此底部有一个加载更多的按钮。问题是,这是一个相当复杂的循环,让WordPress与Ajax一起正常工作并不是儿戏。我对jQuery相当熟悉,但对于复杂的服务器端内容,我不是专家。我已经读了几天关于Ajax和WordPress的书,但我无法让任何东西正常工作,或者根本无法正常工作。我试过这个:How can I fetch loop of post titles via AJAX? 但它不起作用,给了我一个服务器错误。这是我的小圈套即使我只知