Question

So I am very new to using jQuery and I have a script that updates posts on a page when load more is clicked. It works fine in Chrome and Firefox but nothing happens in IE. Does anyone know why?

jQuery Script

function get(){
$("#acomment").empty().html('<img src="design/ajax-loader.gif" />');
$.post('loadmore.php', {id: document.form.id.value, number: counter, kind: document.form.kind.value},
    function(output){
        $('#acomment').html(output).show();
        counter+=5;
        $(document).ready(function() {
        $('html, body').animate({ scrollTop: $('#scrollspot').offset().top }, 1000);
        });
    });

}

The script for the button that calls the function:

<form name="form" id="form" style='margin-top:10px'>
 <input type="hidden" name="kind" value="<?php echo $kind; ?>" />
 <input type="hidden" name="id" value="<?php echo $name; ?>" />
 <input type="button" value="Load More"  onClick="get()" style='width:35%' />

Why wouldn’t it be working? I’ve trouble shooted a bit and the problem isn’t concerned with the loadmore.php page

Example:
http://www.redarcadegames.com/topic/256

Answer 1

try changing this:

$.post('loadmore.php', {id: document.form.id.value, number: counter, kind: document.form.kind.value},

to:

$.post(
    'loadmore.php',
    {
        id: $("#form input[name='id']").val(),
        number: counter, 
        kind: $("#form input[name='kind']").val()
    },

and remove :

$(document).ready(function() {

so your whole code is:

function get(){
    $("#acomment").empty().html('<img src="design/ajax-loader.gif" />');
    $.post(
        'loadmore.php',
        {
            id: $("#form input[name='id']").val(),
            number: counter, 
            kind: $("#form input[name='kind']").val()
        },
        function(output){
            $('#acomment').html(output).show();
            counter+=5;
            $('html, body').animate({ scrollTop: $('#scrollspot').offset().top }, 1000);
        }
    );
};