java - AJAX with image button -
i have tried different combinations of input type how able input message without messing image? purpose update table without refreshing page. more specific, when clicked image should update table on side of page. many of tutorial out there saw people use onclick call ajax functions. there example can image button instead of plain button?
for example:
<form name="bakery" action="testmartcontroller" method="post" > <input type="hidden" name="action" value="dairy"> <input type="image" src="<%=request.getcontextpath()%>/css/categories/dairy.jpg" onclick="loadxmldoc"> the table want update is
<div id="refresh"> <table class="righttable" border="1" width="70%"> <tr> <th>photo</th> <th>product , description</th> <th>price</th> <th>orders</th> <th>quantity</th> <th>edit quantity</th> <th>add item </th> </tr> <c:foreach var="b" items="${bakery}"> ... </c:foreach> </table> </div> javascript file
function loadxmldoc() { var xmlhttp; if (window.xmlhttprequest) {// code ie7+, firefox, chrome, opera, safari xmlhttp=new xmlhttprequest(); } else {// code ie6, ie5 xmlhttp=new activexobject("microsoft.xmlhttp"); } xmlhttp.onreadystatechange = function() { if (xmlhttp.readystate == 4 ) { if(xmlhttp.status == 200){ document.getelementbyid("refresh").innerhtml = xmlhttp.responsetext; } else if(xmlhttp.status == 400) { alert('there error 400'); } else { alert('something else other 200 returned'); } } }; xmlhttp.open("post", "bakery.jsp", true); xmlhttp.send(); }
first of want ajax call makes post service , datas , update table.
i suggest learn how use jquery , ajax call.
1- in html define call method. don't use form!
<img src="yourimage.jpg" onclick="getsomedata()"> 2- make post or call service jquery. , data.
function getsomedata(){ var url = "http://url"; $.post(url,{data:data}) .done(function(data){ //this data call result. //do updatetable(data); }) .fail(function(){ console.log('fail'); }); } 3- create gui function change table.
function updatetable(){ //update htmls }
Comments
Post a Comment