javascript - reload a div without reloading the whole page using ajaxjquery - Stack Overflow

admin管理员组

文章数量:1324844

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.

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.

• javascript
• jquery
• html
• ajax
• jsp

Share Improve this question Follow edited Jul 16, 2014 at 10:11 javaLearner asked Jul 16, 2014 at 6:17 javaLearnerjavaLearner 1711 gold badge22 silver badges99 bronze badges 6

• you need to use iframes! – Amin Jafari Commented Jul 16, 2014 at 6:19
• 'WORKING FIDDLE WILL BE ANSWERED'. You want someone to make a fiddle for you, right? – Yury Tarabanko Commented Jul 16, 2014 at 6:21
• 1 { return true; alert(str1); } looks very nice – Regent Commented Jul 16, 2014 at 6:23
• @Yury Tarabanko, yes you are right. Can you do that Please. – javaLearner Commented Jul 16, 2014 at 6:25
• When you use window.location.href + '#codeRefer' you are actually loading the entire page within the div. You just need to load the contents of #codeRefer inside the div. Try $('#codeRefer').html() – user1741851 Commented Jul 16, 2014 at 6:30

 |  Show 1 more ment

4 Answers 4

Sorted by: Reset to default 1

You can try move all the script out of #codeRefer and make an empty() call before loading 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:

<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:

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/L7wgU/1/

This is possible in this way only:

Create a pgae say ajax.html

<!-- ajax.html -->
<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>

Then use this code in main html file say index.html

<div id="codeRefer">

</div>
<input type="button" value="REFRESH" onclick="refer()">
<script language="javascript">
    function refer() {
        $('#codeRefer').load('ajax.html#codeRefer');
    }
    refer();
</script>

Try this:

function refer(ev) {
    $(ev.target).hide(); //hide the input button if want remove try .remove()
    var $currentCodeRefer = $("#codeRefer");
    $currentCodeRefer.ajax({
        url: window.location.href
    })
    .success(function(html) {
        var $newCodeRefer = $(html).find("#codeRefer");
        $newCodeRefer.empty().html($currentCodeRefer.html());
    });

//To receive the event data maybe need something like this:
$("buttonIDorClass").on("click", function(ev){refer(ev)});

Is not the better way, but is your need, i remend have another ajax like the answer before, or have a javascript rendering and send json data and render in client side.

Hey you can use Ajax Form Submit and After submit clear the fields.

本文标签： javascriptreload a div without reloading the whole page using ajaxjqueryStack Overflow