doutidi5037 2015-11-07 14:56
浏览 49
已采纳

Javascript在动态表加载中断

I am implementing the javascript widget found on addtocalendar.com. Their code example is posted below. Everything works when I place it on a page normally. However I want the calendar widget button to show up on a dynamic table returned from ajax (Step 3 in the sample code). When I do that it breaks. The calendar button does not show up in the rows of a dynamic table (which is what I need).

What change do I need to make to the sample code such that the calendar widget button will show up on a dynamic created table returned from ajax?

I do not get an error in the console. The button simply does not show up.

    <html>
    <head>
        <!-- 1. Include style -->
        <link href="http://addtocalendar.com/atc/1.5/atc-style-blue.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <!-- 2. Include script -->
        <script type="text/javascript">(function () {
        if (window.addtocalendar)if(typeof window.addtocalendar.start == "function")return;
        if (window.ifaddtocalendar == undefined) { window.ifaddtocalendar = 1;
            var d = document, s = d.createElement('script'), g = 'getElementsByTagName';
            s.type = 'text/javascript';s.charset = 'UTF-8';s.async = true;
            s.src = ('https:' == window.location.protocol ? 'https' : 'http')+'://addtocalendar.com/atc/1.5/atc.min.js';
            var h = d[g]('body')[0];h.appendChild(s); }})();
</script>

<!-- 3. Place event data -->
<span class="addtocalendar atc-style-blue">
    <var class="atc_event">
        <var class="atc_date_start">2015-05-04 12:00:00</var>
        <var class="atc_date_end">2015-05-04 18:00:00</var>
        <var class="atc_timezone">Europe/London</var>
        <var class="atc_title">Star Wars Day Party</var>
        <var class="atc_description">May the force be with you</var>
        <var class="atc_location">Tatooine</var>
        <var class="atc_organizer">Luke Skywalker</var>
        <var class="atc_organizer_email">luke@starwars.com</var>
    </var>
</span>
  • 写回答

1条回答 默认 最新

  • dou4121 2015-11-07 16:43
    关注

    Maybe you can add the Javascript in the callback. Then when you return a dynamic table, that Javascript will run and add the buttons.

    Not sure how you will implement the dynamic table, but maybe you can work with this example:

    // Adjusted code

    <html>
<head>
    <link href="http://addtocalendar.com/atc/1.5/atc-style-blue.css" rel="stylesheet" type="text/css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $.ajax({
                url: 'test.html',
                success: function (data) {
                    $("body").html(data);
                    (function () {
                        if (window.addtocalendar)if (typeof window.addtocalendar.start == "function")return;
                        if (window.ifaddtocalendar == undefined) {
                            window.ifaddtocalendar = 1;
                            var d = document, s = d.createElement('script'), g = 'getElementsByTagName';
                            s.type = 'text/javascript';
                            s.charset = 'UTF-8';
                            s.async = true;
                            s.src = ('https:' == window.location.protocol ? 'https' : 'http') + '://addtocalendar.com/atc/1.5/atc.min.js';
                            var h = d[g]('body')[0];
                            h.appendChild(s);
                        }
                    })();
                }
            });
        });
    </script>
</head>
<body></body>
</html>

    // Example dynamic table test.html

    <table>
    <tr>
        <td>A</td>
        <td>
            <span class="addtocalendar atc-style-blue">
                <var class="atc_event">
                    <var class="atc_date_start">2015-05-04 12:00:00</var>
                    <var class="atc_date_end">2015-05-04 18:00:00</var>
                    <var class="atc_timezone">Europe/London</var>
                    <var class="atc_title">Star Wars Day Party</var>
                    <var class="atc_description">May the force be with you</var>
                    <var class="atc_location">Tatooine</var>
                    <var class="atc_organizer">Luke Skywalker</var>
                    <var class="atc_organizer_email">luke@starwars.com</var>
                </var>
            </span>
        </td>
    </tr>
    <tr>
        <td>B</td>
        <td>
            <span class="addtocalendar atc-style-blue">
                <var class="atc_event">
                    <var class="atc_date_start">2015-05-04 13:00:00</var>
                    <var class="atc_date_end">2015-05-04 19:00:00</var>
                    <var class="atc_timezone">Europe/London</var>
                    <var class="atc_title">Foo</var>
                    <var class="atc_description">Bar</var>
                    <var class="atc_location">London</var>
                    <var class="atc_organizer">Foobar</var>
                    <var class="atc_organizer_email">foo@bar.com</var>
                </var>
            </span>
        </td>
    </tr>
</table>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥15 banner广告展示设置多少时间不怎么会消耗用户价值
  • ¥16 mybatis的代理对象无法通过@Autowired装填
  • ¥15 可见光定位matlab仿真
  • ¥15 arduino 四自由度机械臂
  • ¥15 wordpress 产品图片 GIF 没法显示
  • ¥15 求三国群英传pl国战时间的修改方法
  • ¥15 matlab代码代写，需写出详细代码，代价私
  • ¥15 ROS系统搭建请教（跨境电商用途）
  • ¥15 AIC3204的示例代码有吗，想用AIC3204测量血氧，找不到相关的代码。
  • ¥20 CST怎么把天线放在座椅环境中并仿真