dhtmlxCombo帮助wordpress

时间:2015-11-02 20:03:19

标签: javascript wordpress combobox dhtmlx

编辑:我发现了我的问题的解决方案。以下答案

我试图在我的wordpress安装上实现一个ComboBox,但由于某种原因我无法让它工作。

这是我到目前为止所做的:

  • 从下载dhtmlx(整个套件) dhtmlx.com/docs/download.shtml
  • - 将代码库,外观和源文件复制到我的服务器(example.com)

添加了一个函数    我的childtheme的function.php文件(主题X)(写了绝对链接    供参考)

add_action('wp_head','add_combobox_header');
function add_combobox_header() {
    echo'
    <script src="http://example.com/dhtmlx/codebase/dhtmlx.js"></script>
    <link rel="stylesheet" type="text/css" href="http://example.com/dhtmlx/skins/web/dhtmlx.css"/>
<script async>
        var myCombo, myCombo2;
        function doOnLoad() {
            myCombo = new dhtmlXCombo("combo_zone", "combo", 230);
            myCombo.load("http://example.com/dhtmlx/combo_group.php?mode=state");
            myCombo.enableFilteringMode(true);
            //
            myCombo2 = new dhtmlXCombo("combo_zone2", "combo2", 230);
            myCombo2.enableFilteringMode(true);
            myCombo2.disable();
            //
            myCombo.attachEvent("onChange", function(value){
                myCombo2.clearAll();
                myCombo2.setComboValue(null);
                myCombo2.setComboText("");
                if (value == null) {
                    myCombo2.disable();
                } else {
                    myCombo2.enable();
                    myCombo2.load("http://example.com/dhtmlx/region/region_country.xml");
                }
            });
        }
    </script>

';
}

4)在原始内容模块上复制了以下代码(有数千个插件用于此。如果您觉得更合适,也可以直接在子主题上添加此代码):

<div onload="doOnLoad();">
    <h3>Select state</h3>
    <div id="combo_zone" style="width:230px;"></div>
    <br>
    <h3>Select city</h3>
    <div id="combo_zone2" style="width:230px;"></div>
</div>

但我得到了这个结果: Screenshot

我可以看到一切但是组合框我不知道我做错了什么(我在error_log上或在使用firefox或chrome检查元素时没有出现任何错误)。

我已经尝试了一切,但我总是得到相同的结果所以在这一点上我只能希望你们中的一些人指出我正确的方向或者至少告诉我我做错了什么因为我已经用完了想法。

P.s:我也尝试为它构建一个短代码,得到相同的结果。 这只是我试过的最后一个代码,实际上是官方网站上显示的示例的复制粘贴:Grouping Combo - dhtmlXCombo

2 个答案:

答案 0 :(得分:0)

<div onload="doOnLoad();">

div没有onload事件,在dhtmlx演示中它附加到body元素。您可以尝试以下代码:

dhtmlxEvent(window, function(){
var myCombo = new dhtmlXCombo("combo_zone", "combo", 230);
...
})

答案 1 :(得分:0)

经过大量的阅读和尝试,我设法解决了这个问题!我想与社区分享我的解决方案。

在开始我的解决方案之前,我想告诉你我使用的第一个代码是如何组合组合的示例代码,你可以在the official library site中找到它

让我们开始吧:

1)我将标题添加到主题的标记中。为此我转到:root / wp-content / themes / your-theme(使用ftp),然后编辑 functions.php 文件添加此功能:

//-----ADD HEADERS FOR COMBOBOX ---------------
add_action('wp_head','add_combobox_header');
function add_combobox_header() {
    wp_enqueue_style('dhtmlx', 'http://facilecitta.it/dhtmlx/codebase/dhtmlxcombo_dhx_web.css');
    wp_enqueue_style('dhtmlx', 'http://facilecitta.it/dhtmlx/codebase/dhtmlx.css');
    wp_enqueue_script( 'dhtmlxjs', 'http://facilecitta.it/dhtmlx/codebase/dhtmlx.js','', '', true );
}

注意: dhtmlxcombo_dhx_web.css只是组合框的一个皮肤,所以你可以为默认皮肤设置dhtmlx.css,或者为网络应用程序提供更好的dhtmlxcombo_dhx_web.css (我在这里仅为参考目的而添加 您不需要同时

2)然后我在标签之前添加了原始代码的脚本(参见上面的链接),这样就不会干扰网站的加载。

//-----SCRIPT FOR COMBOBOX-----------------
add_action('wp_footer', 'combobox_js_code_after_body');
function combobox_js_code_after_body() { 
?>
<script>

  var myCombo, myCombo2;
  function doOnLoad() {
    myCombo = new dhtmlXCombo("combo_zone", "combo", 230);
    myCombo.load("http://your-site.com/dhtmlx/options.xml");
    myCombo.enableFilteringMode(true);
    //
    myCombo2 = new dhtmlXCombo("combo_zone2", "combo2", 230);
    myCombo2.enableFilteringMode(true);
    myCombo2.disable();
    //
    myCombo.attachEvent("onChange", function(value){
      myCombo2.clearAll();
      myCombo2.setComboValue(null);
      myCombo2.setComboText("");
      if (value == null) {
        myCombo2.disable();
      } else {
        myCombo2.enable();
        myCombo2.load("http://your-site.com/dhtmlx/options2.xml");
      }
    });
  }
</script>
<?php 
}

3)我现在想添加&#34; onload&#34;属性到我的主题的body标签,所以我去了我的主题目录,编辑了header.php(在我的例子中)并更改了这段代码:

<body <?php body_class(); ?>>

进入这个:

<body <?php body_class(); ?> onload="doOnLoad();">

然后在我的主题的原始内容模块中添加了剩余的代码:

<h3>Select state</h3>
    <div class="combo_info">California for example</div>
    <div id="combo_zone" style="width:230px;"></div>
    <br>
    <h3>Select city</h3>
    <div id="combo_zone2" style="width:230px;"></div>

和VOILA!现在我在我的网站上有一个很好的组合框= D

注意:我要感谢themeco的工作人员,他们给了我有用的信息,帮助我找到解决问题的正确方法!