what will this do?

[techuse]

document.getElementById('util_overview').innerHTML = "";

[nukefusion]

Attempt to find an HTML element on the page with an id value of "util_overview" and set the content between the tags to an empty string.

For example, say you had an HTML page with this:

<div id="util_overview">
    <div id="some_other_div">
        This is some random text
    </div>
</div>
 

What you'd end up with, would be this:

<div id="util_overview"></div>
 

[gits]

this wipes out the nodes that the node with the id='util_overview' would contain ...

kind regards

PS: ahh ... one second late :)

[techuse]

@nukefusion
how can i refresh a particular div?

[nukefusion]

If you want to change the contents of a particular div, the code you posted will do the job. Just assign some new, valid HTML to the innerHTML property instead of an empty string.

Of course, you'll need a way of initiating the change, such as wiring up your JS function to an event.

[techuse]

@nukefusion

/* -------------------------- */
/* INSERT VACATION */
/* -------------------------- */
/* Required: var nocache is a random number to add to request. This value solve an Internet Explorer cache issue */
 
 
 nocache = 0;
 progress_bar = new Image();
progress_bar.src = '../HRManagement/images/ajax-loader.gif';
 
 
function success_handler(o) {
  replace_html('leaveinserting', o.responseText);
        }
 
        function failure_handler(o) {
            replace_html('leaveinserting', 'Server or your connection is death');
        }
           function replace_html(id, leaveinserting) {
        document.getElementById(id).innerHTML = leaveinserting;
        }
        function show_progressbar(leaveinserting) {
replace_html(leaveinserting, '<img src="/HRManagement/images/ajax-loader.gif" border="0" alt="Loading, please wait..." />');
        }
function insert(Divid,emp,req,type,start,end,total,clr) {
 
 
    alert("Inside the script");
    alert("progressbar");
    show_progressbar('leaveinserting');
 
    alert("DivID :"+Divid)
    alert("emp :"+emp)
    alert("req  :"+req)
    alert("type :"+type)
    alert("start :"+start)
    alert("end :"+end)
    alert("total :"+total)
    alert("clr:"+ clr)
 
 
 
var Divid = Divid;
var emp  = emp;
var req  = req;
var type = type;
var start = start;
var end = end;
var total = total;
var sta = "E";
 
 
//document.getElementById('leaveinserting').innerHTML = "Just a Second... ";
 
nocache = Math.random();
alert("nocache="+nocache)
 
//alert("progressbar");
//show_progressbar('inserting');
//var callback = { success:success_handler,    failure:failure_handler, timeout: 10000 };
 
searchReq.open('get','leaveinsert.jsp?EMPLOYEE_LEAVE.EMPLOYEE_ID='+emp+'&EMPLOYEE_LEAVE.REQUEST_DATE='+req+'&EMPLOYEE_LEAVE.LEAVE_TYPE='+type+'&EMPLOYEE_LEAVE.START_DATE='+start+'&EMPLOYEE_LEAVE.END_DATE='+end+'&EMPLOYEE_LEAVE.TOTAL_DAYS='+total+'&EMPLOYEE_LEAVE.STATUS='+sta+'&mode=insert');
//searchReq.open('get','employeeleaveoverview.jsp?EMPLOYEE_LEAVE.EMPLOYEE_ID='+emp+'&EMPLOYEE_LEAVE.REQUEST_DATE='+req+'&EMPLOYEE_LEAVE.LEAVE_TYPE='+type+'&EMPLOYEE_LEAVE.START_DATE='+start+'&EMPLOYEE_LEAVE.END_DATE='+end+'&EMPLOYEE_LEAVE.TOTAL_DAYS='+total+'&EMPLOYEE_LEAVE.STATUS='+sta+'&mode=insert');
 
 
searchReq.onreadystatechange = insertleaveReply;
searchReq.send(null);
//form.reset();
}
 
function insertleaveReply() {
if(searchReq.readyState == 4){
var response = searchReq.responseText;
 
 
// else if login is ok show a message: "Site added+ site URL".
document.getElementById('leaveinserting').innerHTML = 'Inserted'+response;
document.getElementById('clearing').innerHTML = "";
alert("Response"+ responseText);
document.getElementById('leaveinserting').innerHTML = responseText;
}
 
}

[techuse]

@nukefusion
i have the two div in a same page.first div having list.second div having inserting ethod.after inserting the recod have to refresh the first div. how to refresh the first div?

[nukefusion]

Well, presumably, within your second div you will have some sort of input field and a button. You could wire up a JS function to the buttons click event and using it add the input field content to your first div. Using the getElementById method you could do something like this for example:

HTML:

<div id="div1">
 
</div>
<div id="div2">
    <textarea name="data" rows="3"></textarea>
    <input type="button" value="Add to div1" onclick="addToDiv1()" />
</div>
 

javascript:

<script type="text/javascript">
    function addToDiv1() {
        var div1 = document.getElementById("div1");
        div1.innerHTML = document.getElementById("data").value; 
    }
</script>
 

I haven't got time to test this code right now but the prinicipal is there. If I've understood your question properly then you can easily adapt this to achieve the result you're after.

Hope this helps.

[techuse]

I have a jsp page in which ther r 2 divs.

In the first one ,there is a list which gives the records inserted from the second div.

In the 2nd div,there r some textboxes.I got the value thr document.getElementbId
method and inserting the values thr ajax script.

On successful insertion of data into the table,the first div should be refreshed
showing recent added records and the second div data should be cleared or reset.

can give me any suggestion in solving the problem.Document1.txt


*****hereby attached the ajax script for inserting the values.

[nukefusion]

Without the associated html it's hard to see how this all links up.

If you doing some work using AJAX you can add any code to refresh the div in the callback method (success_handler). It looks like you've already got it setup to do something like this as it's already updating the "leaveinserting" div with the return value anyway.

I'm not quite sure what part of your process isn't working... it looks like all the ingredients are there.