admin管理员组文章数量:1323731
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.
Share
Improve this question
edited Jul 16, 2014 at 10:11
javaLearner
asked Jul 16, 2014 at 6:17
javaLearnerjavaLearner
171 gold badge2 silver badges9 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
4 Answers
Reset to default 1You 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
版权声明:本文标题:javascript - reload a div without reloading the whole page using ajaxjquery - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742122408a2421779.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论