Ajax1-Just Updating Div
Here
the Older Div data remain Same , but new data is added/Updated with the new Div
Data
ajax1.html
<!DOCTYPE
html>
<p
id="div1"><h2>Let jQuery AJAX Change This Text Iam From OUE
PAGE</h2></p>
</body>
a.html
<!DOCTYPE
html>
<html>
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("a.html #div2");
});
});
</script>
</head>
<body>
<p
id="div1"><h2>Let jQuery AJAX Change This Text Iam From OUE
PAGE</h2></p>
<button>Get
External Content</button>
</body>
</html>
<div
id="div2">THIS Comtent form ajax</div>
HELLO HELLO
Ajax2-Replacing whole Page
Here
the Whole Page will Replace. It gives Clumsy / Inappropriate Web page
ajax2.html
<!DOCTYPE html>
<div
id="div1"><h2>Let jQuery AJAX Change This Text</h2>
<button>Get
External Content</button>
</body>
<!DOCTYPE html>
<html>
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.ajax({url:"a.html #div2",success:function(result){
$("#div1").html(result);
}});
});
});
</script>
</head>
<body>
<div
id="div1"><h2>Let jQuery AJAX Change This Text</h2>
<button>Get
External Content</button>
</div>
</body>
</html>
Ajax3-Just Updating Div – In Struts 2
<!-- AJAX START -->
<script>
<!-- AJAX START -->
<script>
$(document).ready(function(){
$("#nxt").click(function(){
alert('Ajax start');
$("#div1").load("design1.action #gb"); Ã This Div Data Updated with previous one
});
});
</script>
<!-- AJAX END -->
Ajax4-Relacing Whole Page – In Struts
2
<script>
});
<script>
$(document).ready(function(){
$("#nxt").click(function(){
alert('DIV Strtred');
$.ajax({url:"design1.action
#gb", Ã If u put Div It Won’t Workout
success:function(result){
$("#div1").html(result);
}});
});
});
</script>
Ajax5-Relacing Specific DIV – In
Struts 2
<script>
var aa = $("#div1").load("design1.action
#gb"); Ã U have write Separate function for Replacing Specific DIV
$("#div1").html(aa);
<script>
<script>
$(document).ready(function(){
$("#nxt").click(function(){
alert('DIV Strtred');
$.ajax({url:"design1.action
#gb",
success:function(result){
var aa = $("#div1").load("design1.action
#gb"); Ã U have write Separate function for Replacing Specific DIV
$("#div1").html(aa);
}});
});
});
</script>