使用jQuery ajax通过使用json或html文件自动刷新/更新表

Question

所以@SOF,

我一直试图让我的学习成绩,结果的网页中,预计成绩......等有自动更新功能,以使页上的数据刷新时新的数据通过使用来通过jquery与ajax藏汉作为有"单查看"为课程.

我的主要问题是我无法获得任何形式的ajax刷新/加载正常工作,我可以在json或单个html文件中生成我的输出,为了我的目的,我认为json会更好,但我不确定.

我的网页左上角有一个导航助手,这是一个下拉菜单,通过"搜索"找到的列表填充<a id="CLASS1" optionname="CLASS 1"></a>,可以在表格中找到,但是如果需要,我可以在表格外填充这个需要.

我非常希望能够如此,我们必须修改下拉在这个例子中一共有8种选择,包括- Select Class -,Class 1,Class 2,Class 3,Class 4,Class 5,All Updating,All Non-Updating

全部更新

• 此选项将所有类加载到一个html可查看页面中,并每30秒更新一个类(我说每个类可能会在一小时内更新,其他一些类可能会在不同的时间更新),因此需要进行比较和如果不同然后更新？

所有非更新

• 此选项将所有类加载到一个html可查看页面中,但除非用户单击其他类(使用下拉列表)然后单击返回,否则不会更新...

1级,2级,3级......等(单个装载/单个视图)

• 此选项会将单个类的数据加载到html可查看页面中,并且每30秒更新一次该特定类,在上一篇帖子中,一个名为的用户Gaby aka G. Petrioli提供了一个非常接近我需要的示例,但该成员从未回复过我:http://jsfiddle.net/u7UkS/4/

---

链接到所有数据

HTML - http://pastebin.com/raw.php?i=0PNQGMmn

CSS - http://pastebin.com/raw.php?i=4H5GHv15

JSON - http://pastebin.com/raw.php?i=xk860dBN

单一类页面 - http://pastebin.com/raw.php?i=HvpaVhG6

JSFiddle - http://jsfiddle.net/kHtuQ | http://jsfiddle.net/kHtuQ/show

某些成员的一些ajax示例的上一篇文章:Anchor Cycler/Dropdown定期导入学校班级数据

---

下面是一个示例,大致显示每个"班级" Note Class = School Class中的内容

Super Slimed Down Table示例:

<table id="gradient-style">
    <tbody>
        <thead>
            <tr>
                <th scope="col"><a id="CLASS1" optionname="CLASS 1"></a>Class</th>
            </tr>
        </thead>
        <tr><td>Class 1</td></tr>
    </tbody>
    <tfoot>
            <tr>
                <th class="alt" colspan="34" scope="col"><a id="KEY"></a><img class="headimager" src="http://placehold.it/250x50"/></th>
            </tr>
            <tr>
                <td colspan="34"><em><b>Data</b> - Test</em></td>
            </tr>
    </tfoot>
</table>

如果有人可以提供帮助,我们将非常感激,如果你能够发表评论,请这样做,我可以继续学习.

谢谢
丹尼斯S.

Answer 1

使用ajax非常简单,
我建议你使用HTML数据类型,因为你的容器中有一个表,
这里有一个api文档=> http://api.jquery.com/jQuery.ajax/
这里是一个小提琴我为你做的=> http://jsfiddle.net/sijav/kHtuQ/19/或http://fiddle.jshell.net/sijav/kHtuQ/19/show/

我把ajax代码放在一个名为updateClass的函数中(url )哪个url代表要获取的url,它将使用HTML get =>附加容器

function updateClass(url){
    $.ajax({
        url: url,
        dataType: "HTML",
        error: function(msg){
            alert(msg.statusText);
            return msg;
        },
        success: function(html){
            $("#container").html(html);
        }
    });
}

我添加了一个刷新整个容器类的refreshClass,=>

function refreshClass(){
            updateClass("http://fiddle.jshell.net/sijav/mQB5E/5/show/"); //update the class
}

并将更改选择器更改为以下代码=>

var classUpdateI; //stands for our interval updating class
$(".class-selector").on("change",function(){
    if (classUpdateI!=null)clearInterval(classUpdateI); //If the selector changed clear the interval so the container won't be update on it's own
    if(this.value == "")
        return; // if the value is null don't do anything
    else if(this.value == "allclassnup"){
        refreshClass(); //if the value is allclassnup which is stands for All Non-Updating just refresh the whole class 
    }
    else if(this.value == "allclassup"){
        refreshClass(); //if the value is allclassup which is stands for All Updating refresh the whole class and set an interval for thirty second (look for 30*1000)
        classUpdateI = setInterval(refreshClass,30*1000);
    }
    else //else then it's a simple class value, just simply update the current class
        updateClass(this.value);
})

希望它有所帮助;)
编辑:编辑所以它可以获得大表(不生成它!)并且所有更新将在30秒的间隔内更新
AnotherEDIT:信不信由你我已经完成了你的所有问题!
工作时间:http://jsfiddle.net/sijav/kHtuQ/39/或http://fiddle.jshell.net/sijav/kHtuQ/39/show/
1因为它只是为最后一个html完成,因为新的我们应该再做一次!所以把整个$('tr').click()函数放到另一个函数中,并在必要时调用它.
- 你想让它完全发挥作用吗？它有点复杂但它可以适用于代码的一些变化!我要告诉你的是,好的,我们应该将当前类的类选择器更改为cookie,然后我们可以在刷新或重新加载页面并放入必要的选定类等时读取它...
但是在这里的代码设计中,我做了让它工作,
首先我创建了一个全局变量,FirstTimeInit = true;只是为了确定我们是否第一次加载页面,第二次我把for循环使页面加载时突出显示一个叫做的函数selectSelectedClass,为什么？因为我们需要多次调用它,第三我添加了一些if语句以确定我们是否可以读取cookie然后更改突出显示的内容和当前类,这里是代码:

if(readCookie("CurrentClass")) //if we can read coockie
    $(".class-selector").val(readCookie("CurrentClass")).change(); //change it's value to current cookie and trigger the change function
else{ // else
    selectSelectedClass(); //select those which was highlighted before
    trClick(); //make things clickable
    FirstTimeInit = false; //and turn of the first time init
}

在选择器值更改=>上添加一个创建cookie createCookie("CurrentClass",$(".class-selector").val(),1);
,最后改变获取Ajax的成功

        success: function(html){
            $("#container").html(html + '<a id="KEY"></a>'); //the html container changer with adding extra id , I'll explain it later it's for your second question
            if(FirstTimeInit){ //if it is First Time then
                selectSelectedClass(); //highlight which was highlighted after put the correct html
                FirstTimeInit = false; // turn of the first time init
            }
            else //else
                for (var i=0;i<($("table").children().length);i++){
                    if(readCookie(i))
                        eraseCookie(i); //erase every cookie that has been before because the table is now changed and we're going on another table so old cookie won't matter
                }
            trClick(); //make things selectable!
        }

另外,为了使它无bug,我已经将refreshClass改为firstinit,当所选类是全部或者它是null时,因为那时我们有所有类并且需要那些cookie!所以这是代码:

function refreshClass(){
    if(readCookie("CurrentClass")=="allclassnup"||readCookie("CurrentClass")=="allclassup"||readCookie("CurrentClass")==null)
        FirstTimeInit = true;
    updateClass("http://fiddle.jshell.net/sijav/mQB5E/5/show/");
}

2 <a id="TOP"></a>必须在容器之前,<a id="KEY"></a>必须在将html放在容器上之后在容器的末端生成.所以$("#container").html(html + '<a id="KEY"></a>');

3 Next和Previous按钮专为非ajax之前的设计而设计,现在需要一个不同的解决方案!例如,请参阅这些简单的代码

$("#PreviousClass").click(function(){//on prev click
    $(".class-selector").val($(".class-selector option:selected").prev().val()).change() //change the value to the prev on and trigger the change
});

$("#NextClass").click(function () {//on next click
    $(".class-selector").val($(".class-selector option:selected").next().val()).change() //change the value to the prev on and trigger the change
});

4是你有可能你应该更改你的密钥和下来这些代码,你很高兴=>

currentClass=0;
$("a.TOPJS").click(function () {
    if(currentClass>0){
        currentClass--
        scrollToAnchor('CLASS'+currentClass);
    }
});

$("a.KEYJS").click(function () {
    if($("a[id='CLASS" + currentClass + "']")[0]!=undefined){
        currentClass++
        scrollToAnchor('CLASS'+currentClass);
    }
    else
        scrollToAnchor('CLASSMAX');
});

Godd Luck

另一个请求编辑:(希望这将是最后一个!)
工作小提琴:http://jsfiddle.net/sijav/kHtuQ/42/或http://fiddle.jshell.net/sijav/kHtuQ/42/show/
好吧因为你不喜欢更新类刷新到其中的一个我删除了它,并且更好的我添加了一些代码来在cookie中使用类,因为cookie不是树有某种条件,类正在从类选择器的最后一个字符读取,所以请确保在最后一个字符处有类号 - > - Class number ***5***类数字5将被读取为类选择器!
编辑:优化课程接下来和上一页http://jsfiddle.net/sijav/kHtuQ/46/
编辑:根据要求的评论,
这就是我想告诉你的,有时候演示会在jsfiddle.net上展示,有时候它显示在fiddle.jshell.net上,这些是不同的域,你不能从不同的域获取HTML.
1)您可能只将函数放入Interval或只是创建另一个函数并按照这样的方式调用它=>

classUpdateI = setInterval(function(){updateClass(this.value,parseInt(a.charAt(a.length-1),10));},30*1000);

2)失踪？!我找不到你的第二个问题了!
3)好吧,... trclick需要改变... to =>

function trClick(tIndex){ //tIndex would be classnumber from now on
    if (tIndex == -1){ //if it is all updating or all non updating
        $("tr").click(function(){ //do the previous do
            $(this).toggleClass('selected').siblings().removeClass('selected');
            if(readCookie($(this).parent().index("tbody"))){
                if(readCookie($(this).parent().index("tbody"))==$(this).index())
                    eraseCookie($(this).parent().index("tbody"));
                else{
                    eraseCookie($(this).parent().index("tbody"));
                    createCookie($(this).parent().index("tbody"),$(this).index(),1);
                }
            }
            else
                createCookie($(this).parent().index("tbody"),$(this).index(),1);
        });
    }
    else{ //else
        $("tr").click(function(){ //on click
            $(this).toggleClass('selected').siblings().removeClass('selected');//do the toggle like before
            if(readCookie(tIndex)){ //if you can read the CLASS cookie, not the current index of table because our table has only one row
                if(readCookie(tIndex)==$(this).index()) //as before if we selecting it again
                    eraseCookie(tIndex); //just erase the cookie
                else{ //else
                    eraseCookie(tIndex); //select the new one
                    createCookie(tIndex,$(this).index(),1);
                }
            }
            else
                createCookie(tIndex,$(this).index(),1); //else if we can't read it, just make it!
        });
    }
}

当我们在Ajax上成功调用它时,我们应该用classNumber => trClick(classNumber);
最后一个工作小提琴 调用它: http : //jsfiddle.net/sijav/kHtuQ/53/或http://fiddle.jshell.net/sijav/kHtuQ/53 /节目/

祝好运