Ajax page load without reload

时间:2013-12-11 作者:madmanali93

我正在编写一个脚本来加载我的页面而不刷新。除了一件事之外,它正在按我想要的方式工作。我的测试场地是http://dev.dog-company.com . 现在只有home About us和FAQ可以使用脚本。

主页上有一个通过插件加载的滑块(在主页上单击主页)。当我通过AJAX加载它时,我的脚本并没有按照预期的方式加载它。我不知道为什么。有人能解释一下为什么它不起作用吗?

$(\'document\').ready(function() {
$(\'a[rel="load"]\').click(function(e){
    e.preventDefault();
    var link = $(this).attr("href");
    if(link!=window.location){
                window.history.pushState({path:link},\'\',link);
    }
    $(\'#slider-wrapper\').slideUp().empty();
    $(\'#content\').wrap(\'<div id="wrap-overlay"></div>\');
    $.ajax({
    //ajax setting
        type: \'POST\',
        url: link,
        dataType: \'html\',
        success : function(data, text, xhr){
            //parse data
            var response = $("<div>").html(data);

            var parser = new DOMParser();
            var preParse = data.match(/<head[^>]*>[\\s\\S]*<\\/head>/gi);
            var headHTML = parser.parseFromString(preParse, "text/html");
            var head = $(headHTML).find(\'head\').html();
            var slider = response.find(\'#slider-wrapper\').html();
            var content = response.find(\'#content\').html();
            var footer = response.find(\'#wp-footer\').html();

            //Post data
            $(\'#content\').empty().append(content);
            $(\'head\').empty().append(head);
            if(slider != null){
                if($("#slider-wrapper").length == 0){
                    $(\'#content\').insertBefore(\'<section id="slider-wrapper"></section>\');
                }
                $("#slider-wrapper").empty().append(slider);
            }
            $("#content").empty().append(content);
            return false;
        }})
        if($(\'#slider-wrapper\').length > 0){
            $(\'#slider-wrapper\').slideDown();
        }
    });
});
任何帮助都将不胜感激,

1 个回复
SO网友:Subharanjan

你可以re-initialize all the scripts 再次在AJAX内部取得成功。

// Fetch the scripts
scripts = \'\';
if ( scripts.length ) scripts.detach();
scripts = response.find(\'script\');

// Add the scripts
scripts.each(function(){
        var script = jQuery(this), 
            scriptText = script.html(), 
            scriptNode = document.createElement(\'script\');
        try {
                // doesn\'t work on ie...
                scriptNode.appendChild(document.createTextNode(scriptText));
                contentNode.appendChild(scriptNode);
        } catch(e) {
                // IE has funky script nodes
                scriptNode.text = scriptText;
                contentNode.appendChild(scriptNode);
        }
        if(jQuery(this).attr(\'src\') != null) {
                scriptNode.setAttribute(\'src\', (jQuery(this).attr(\'src\')));
        }
});

结束

相关推荐

通过AJAX再次运行当前查询,但更改了变量

我有一个自定义查询$query. 输入基于表单输入。查询已经在一个页面上运行了,但在此之后,我想在不重新加载页面的情况下再次运行它,使用AJAX(当用户选择选项卡(引导)时)也是如此。问题是我需要更改查询变量posts_per_page 到-1.选择选项卡时执行操作的代码为:$(\'#myTab\').on(\'shown\', function () { // Do stuff here }) 现在在这个功能中,我可以jQuery.ajax( { &#x