reload a div without reloading the whole page using ajax/jquery

I'm doing a project which needs to be refreshed when user finish the form which is in the same page. Here is the code:

我正在做一个项目,当用户完成同一页面中的表单时需要刷新。这是代码:

page1.jsp

 <div id="codeRefer">
    <input type="" type="text" name="numcode" id="numcode" value="42988715">
    <script language="javascript">
        var a = Math.ceil(Math.random() * 9) + '';
        var b = Math.ceil(Math.random() * 9) + '';
        var c = Math.ceil(Math.random() * 9) + '';
        var d = Math.ceil(Math.random() * 9) + '';
        var e = Math.ceil(Math.random() * 9) + '';
        var f = Math.ceil(Math.random() * 9) + '';
        var g = Math.ceil(Math.random() * 9) + '';
        var h = Math.ceil(Math.random() * 9) + '';
        var code = a + b + c + d + e + f + g + h;
        document.getElementById("numcode").value = code;

        function ValidCaptcha() {
            var str1 = removeSpaces(document.getElementById('numcode').value);
            var str2 = removeSpaces(document.getElementById('txtInput').value);
            if (str1 == str2) {
                return true;
                alert(str1);
            } else {
                return false;
            }
        }

        function removeSpaces(string) {
            return string.split(' ').join('');
        }
    </script>
</div>
<input type="button" value="REFRESH" onClick="javascript:refer()">
<script language="javascript">
    function refer() {
        $('#codeRefer').load(window.location.href + '#codeRefer');
    }
</script>

Here what I'm getting is when ever I click the refresh the textbox value gets refreshed but, I'm getting another same 'refresh' button at the bottom of the first refresh button. I don't know why an another button appears. Thankyou guys!

这里我得到的是,当我点击刷新文本框值被刷新但是,我在第一个刷新按钮底部得到另一个相同的“刷新”按钮。我不知道为什么会出现另一个按钮。感谢你们!

I think there is a bug in my code.
Which keeps repeating the whole content whenever I press the REFRESH button.
HELP me with this guys GURU'S.

4 个解决方案

#1

You can try move all the script out of #codeRefer and make an empty() call before loading html.

您可以尝试将所有脚本移出#codeRefer并在加载html之前进行空()调用。

Like this:

$('#codeRefer').empty().load(window.location.href + '#codeRefer');

Edit: if you just want to refresh the div, I would suggest you to put what you want to load as a template and just load html from that template. Example:

编辑:如果您只想刷新div,我建议您将要加载的内容作为模板加载,然后从该模板加载html。例:

<script type="text/template" id="refresh-template">
  <input type="" type="text" name="numcode" id="numcode" value="42988715">
</script>

and your javascript randomized number generation in your handler:

和你的javascript随机数生成在你的处理程序中:

function refer() {
    $('#codeRefer').empty().load(window.location.href + '#refresh-template');
    // OR if you are just loading from the same page. just use .html() might be better
    // $('#codeRefer').html($('#refresh-template').html());

    var a = Math.ceil(Math.random() * 9) + '';
    var b = Math.ceil(Math.random() * 9) + '';
    var c = Math.ceil(Math.random() * 9) + '';
    var d = Math.ceil(Math.random() * 9) + '';
    var e = Math.ceil(Math.random() * 9) + '';
    var f = Math.ceil(Math.random() * 9) + '';
    var g = Math.ceil(Math.random() * 9) + '';
    var h = Math.ceil(Math.random() * 9) + '';
    var code = a + b + c + d + e + f + g + h;
    document.getElementById("numcode").value = code;

}

http://jsfiddle.net/L7wgU/1/

4 个解决方案

#1

更多相关文章

随机推荐