普通网友 2013-04-04 11:40
浏览 25

Ajax加载脚本不起作用

hi guy still having problems.. so though re write the question. got my external pages into a div on my index page.. great.. but cant seem to get java scripts to work.. i can get them to work once using this.. 

     <script>
        $.ajax({
        url: "pages/index.php",
        dataType: "html",
        success: function(html) {
          var target = $('.fademe');
        var targetHeight = target.outerHeight();
        $(document).scroll(function(e){
            var scrollPercent = (targetHeight - window.scrollY) / targetHeight;
            if(scrollPercent >= 0){
                target.css('opacity', scrollPercent);
            }
        }); 
        }
    });
</script>

but when i go to different page and come back it doesnt work... i put my scripts at the bottom of the main index page

<script>
    $.ajax({
        url: "pages/index.php",
        dataType: "html",
        success: function(html) {
            $('#st-accordion').accordion();
        };
    });

</script>

<script>
       $.ajax({
        url: "pages/index.php",
        dataType: "html",
        success: function(html) {
            $('#st-accordion2').accordion();
        }
    });

</script>


<script>
    $(function () {
        $.scrollUp();
    });
</script>

<!-- Fade Top Panel  -->
<script>
        $.ajax({
        url: "pages/index.php",
        dataType: "html",
        success: function(html) {
          var target = $('.fademe');
        var targetHeight = target.outerHeight();
        $(document).scroll(function(e){
            var scrollPercent = (targetHeight - window.scrollY) / targetHeight;
            if(scrollPercent >= 0){
                target.css('opacity', scrollPercent);
            }
        }); 
        }
    });
</script>

<script> 

    $ajax({
        url: "pages/index.php"
        dataType: "html",
        success: function(html) {
             $('#submit').click(function(){
            $.post("send.php", $("#mycontactform").serialize(),  function(data) {   });
                 $('#success').html('Message sent!');
                 $('#success').hide(2000);


                    $('#name1').val('');
                    $('#telephone').val('');
                    $('#email').val('');
                    $('#message').val('');

            });
        }


    });




</script>

<!-- Viberating Icons -->


<script>

    $(function() {
        var interval = 10;
        var duration= 1000;
        var shake= 3;
        var selector = $('.viberate'); /* Your own container ID*/
        $(selector).each(function(){
            var elem = this;
            var vibrateIndex;
            var timeoutIndex;
            $(this).hover( /* The button ID */
                function(){ 
                    vibrateIndex = setInterval(function(){
                      vibrate(elem); 
                    }, interval, 0);
                    timeoutIndex = setTimeout(function() 
                   {clearInterval(vibrateIndex)},1000);
                },
                function(){
                clearInterval(vibrateIndex);
                clearTimeout(timeoutIndex); 
                }
            );
        })

            var vibrate = function(elem){
                $(elem).stop(true,false)
                .css({position: 'relative', 
                left: Math.round(Math.random() * shake) - ((shake + 1) / 2) +'px', 
                top: Math.round(Math.random() * shake) - ((shake + 1) / 2) +'px'
            });
                        }
                    });

</script>
  • 写回答

1条回答 默认 最新

  • weixin_33714884 2013-04-04 12:10
    关注

    Better to load JS/CSS at first and then load only information that dynamic.

    In this case you will have cached JS/CSS and small response. It means better performance.

    And of course DO NOT load <html><head>...</head> part. Every page has only one <html> tag and yours already has one. If you load it you need to strip it. It means you'll do unnecessary work and ajax will work slower.

    If you using AJAX you need to load only data you need. Less garbage - faster response.

    UPDATE

    Try this:

    <script>



    function init(){

        // Accodion 1 & 2 -->
        $('#st-accordion').accordion();

       $('#st-accordion2').accordion();


        //Scroll Up -->

        $.scrollUp();


        // Fade Top Panel  -->

    var target = $('.fademe');
        var targetHeight = target.outerHeight();
        $(document).scroll(function(e){
            var scrollPercent = (targetHeight - window.scrollY) / targetHeight;
            if(scrollPercent >= 0){
                target.css('opacity', scrollPercent);
            }
        }); 


      // Contact Form Send -->

      $('#submit').click(function(){
            $.post("send.php", $("#mycontactform").serialize(),  function(data) {   });
                 $('#success').html('Message sent!');
                 $('#success').hide(2000);


                    $('#name1').val('');
                    $('#telephone').val('');
                    $('#email').val('');
                    $('#message').val('');

            });


// Viberating Icons -->

      var interval = 10;
        var duration= 1000;
        var shake= 3;
        var selector = $('.viberate'); /* Your own container ID*/
        $(selector).each(function(){
            var elem = this;
            var vibrateIndex;
            var timeoutIndex;
            $(this).hover( /* The button ID */
                function(){ 
                    vibrateIndex = setInterval(function(){
                      vibrate(elem); 
                    }, interval, 0);
                    timeoutIndex = setTimeout(function(){clearInterval(vibrateIndex)},1000);
                },
                function(){
                clearInterval(vibrateIndex);
                clearTimeout(timeoutIndex); 
                }
            );
        })

            var vibrate = function(elem){
                $(elem).stop(true,false)
                .css({position: 'relative', 
                left: Math.round(Math.random() * shake) - ((shake + 1) / 2) +'px', 
                top: Math.round(Math.random() * shake) - ((shake + 1) / 2) +'px'
            });
         }


    $("#posts").masonry({
        itemSelector: '.post',
        isAnimated: true,
        columnWidth: function(containerWidth) {

        var width = $(window).width();
        var col = 300;


        if (width < 1200 && width >= 980) {
            col = 240;
            } else if (width < 980 && width >= 768) {
                col = 186;
            }

            return col;
            }
            });

    }

</script>

    I put all JS in one init() function. Now after your ajax is loaded call that function.

    And check syntax I maybe lost some brackets.

    评论

报告相同问题？

悬赏问题

  • ¥15 如何在scanpy上做差异基因和通路富集？
  • ¥20 关于#硬件工程#的问题，请各位专家解答！
  • ¥15 关于#matlab#的问题：期望的系统闭环传递函数为G(s)=wn^2/s^2+2¢wn+wn^2阻尼系数¢=0.707，使系统具有较小的超调量
  • ¥15 FLUENT如何实现在堆积颗粒的上表面加载高斯热源
  • ¥30 截图中的mathematics程序转换成matlab
  • ¥15 动力学代码报错，维度不匹配
  • ¥15 Power query添加列问题
  • ¥50 Kubernetes&Fission&Eleasticsearch
  • ¥15 報錯：Person is not mapped，如何解決？
  • ¥15 c++头文件不能识别CDialog