jQuery追加 <div> 基于视口和浏览器调整大小的ajax刷新

Question

Hi a jQuery newbie question. 嗨，jQuery新手问题。 I am trying to add different sidebars based on browser view-port. 我试图基于浏览器的视口添加不同的侧边栏。

Here is my script: 这是我的脚本：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Viewport Test</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
function reloadPage(width) {
    width = parseInt(width);

    if (width > 1440) {
        $('#aside').load('widepage.php');
    } else if (width >= 1024 && width <= 1440) {
        $('#aside').load('narrowpage.php');
    } 
}

$(function() {
   reloadPage($(this).width());
   $(window).resize(function() {
       reloadPage($(this).width());
   });
});
</script>
</head>

<body>
<div id="wrapper">

    <!-- Here I want to append the external php Script -->

    <div id="content"></div>
</div>
</body>
</html>

What i need to do is : 我需要做的是：

Ajax load these sidebars while rest of the page continues loading. Ajax加载这些侧边栏，而页面的其余部分继续加载。
I do not want to load them into a div but APPEND them before <div id="content"></div> 我不想将它们加载到一个div但在此之前它们附加 <div id="content"></div>
I want the php scripts in various files to be appended and not the output. 我希望将各种文件中的php脚本附加到而不是输出中。
On browser resize, only the appended part should reload. 在调整浏览器大小时，仅应重新加载附加的部分。

My Question: 我的问题：

Am I doing the right way? 我做对了吗？ If not what is the correct way. 如果没有，正确的方法是什么。 Please explain with code illustrations as I am totally new to JavaScript. 请使用代码插图进行解释，因为我是JavaScript的新手。

Answer 1

It seems to me that your main goal is to have 3 different sized sidebars. 在我看来，您的主要目标是拥有3个不同大小的侧边栏。 I am under the impression you still want them BEFORE the content div. 我的印象是您仍希望它们在内容div之前。 You will need to put a in the location you want the sidebar to appear. 您将需要在侧边栏显示的位置放置一个。 Otherwise, there is no good way to flush the current sidebar and load the new one. 否则，没有好的方法可以刷新当前侧边栏并加载新的侧边栏。

I believe to accomplish what you are trying to do, you need to have some knowledge of the currently loaded sidebar, and only change it if the page has been resized into a different category. 我相信要完成您要执行的操作，您需要了解当前已加载的侧边栏，并且仅在页面已被调整为其他类别的情况下才进行更改。 For this example, we'll assume the first sidebar is for 0-1023 pixel windows, medium is 1024-1599, and wide is 1600+. 对于此示例，我们假设第一个侧边栏用于0-1023像素窗口，中值为1024-1599，宽为1600+。

$(document).ready(function() {
var curwidth, script, prevclass, newclass;

function reloadBars(width) {
    width = parseInt(width, 10);
    newclass = ""

    if (width < 801 && (curwidth == -1 || curwidth > 800)) {
        newclass = 'bar-0';
        bar = '800.php';
    } else if ((width > 800 && width < 1201) && (curwidth < 800 || curwidth > 1201)) {
        newclass = 'bar-1';
        bar = '1000.php';
    } else if ((width > 1200 && width < 1601) && (curwidth < 1200 || curwidth > 1601)) {
        newclass = 'bar-2';
        bar = '1200.php';
    } else if (width > 1600 && curwidth < 1600) {
        newclass = 'bar-3';
        bar = '1600.php';
    } else {
        return;
    }

    $.ajax({
        type: "POST",
        url: bar,
        data: {},
        success: 
        function(response) {

            $('#aside').html(response);
            $('#aside').addClass(newclass);
            $("#aside").removeClass(prevclass);
            prevclass = newclass;
        },
        error: function(e) {
            alert("UH OH! Error!");
        }
    });
    curwidth = width;
}
prevclass = ""
curwidth = -1;
reloadBars($(this).width());

   $(window).resize(function() {
       reloadBars($(this).width());
   });
});

Answer 2

2) Jquery has a .before() function for inserting before elements: http://api.jquery.com/before/ 2）jQuery具有一个.before（）函数，用于在元素之前插入： http ://api.jquery.com/before/

sidebar = "<p>This is the sidebar</p>"
$("#content").before(sidebar)

3) PHP will be executed by an AJAX request (which jQuery makes easy) 3）PHP将由AJAX请求执行（jQuery使之变得容易）

function reloadPage(width) {
    var script

    width = parseInt(width)

    if(width < 1024)
        return
    else if(width < 1440)
        script = 'narrowpage.php'
    else
        script = 'widepage.php'

    $.ajax({
        type: "POST",
        url: script,
        data: {},
        success: function (response) {
            //check to make sure data is OK

            $('#content').before(response)
        },
        error: function (ts) {
            alert("Uh Oh! AJAX failed!")

        }
    })
}

You may have a scope issue if the reloadPage function is outside $(function() { }), but otherwise the function should work as you want. 如果reloadPage函数在$（function（）{}）之外，则可能会遇到范围问题，但否则该函数应可以按需工作。

With the 'type', you can do a GET or POST request just like a form submission. 使用“类型”，您可以像提交表单一样执行GET或POST请求。

echo $_POST["foo"];

would echo 'bar', which would then be appended before the content div. 将回显“ bar”，然后将其附加到内容div之前。

jQuery追加 <div> 基于视口和浏览器调整大小的ajax刷新

问题描述

2 个解决方案

解决方案1
1 已采纳 2013-07-01 22:19:29

解决方案2
0 2013-07-01 20:17:36

jQuery追加 <div> 基于视口和浏览器调整大小的ajax刷新

问题描述

2 个解决方案

解决方案1 1 已采纳 2013-07-01 22:19:29

解决方案2 0 2013-07-01 20:17:36

解决方案1
1 已采纳 2013-07-01 22:19:29

解决方案2
0 2013-07-01 20:17:36