I am a newbie in JQuery and ajax and I would like to know if it is possible to pass a value in a function as parameter and using that value as a name of the button which was clicked and proceed with the logic so to send to servlet to handle. I am trying to not use javascript as it is page driven. So what I have in javascript is below.
function test(buttonId)
{
alert(buttonId);
}
The thing is I have a dynamic table which depends on some data I get from the database and as part of the table are some button which I create as I loop through the data and creating the table simultenously. So in one of the rows of my table I have a button with following:
<table id="error_data">
<tr>
<th>Rank</th>Other Table columns names........</tr>
<% for(int rank=1 ; rank<data.size();
rank++) { %>
<tr>
<td>
<input type="button" id="button<%=rank%>" value="Suspend Email" onclick="test('button<%=rank%>')">
</tr>
<%}%>
</table>
I hope I am not verbose in my question I want to be able to click on some button in one of my rows and only deal with data for that row and not refresh anything besides for that row data only. And I think maybe it possible with combination of ajax and jquery some how as ajax is data driven. Any shed of light is highly appreciated, is it possible to try and achieve what I am trying to do. Thank you in advance.
Related
This isn't working:
My table is generated dynamically using PHP, so each row's edit button has a unique id, and a unique inline jQuery function. That jQuery function will load a jQuery modal dialog for the user to modify the row's data (triggering AJAX to update the database and reload a new tbody into the table with the updated data).
In practice, the button doesn't respond. I've put a simple alert into the function, but it also doesn't work.
(I'm using the $(#...).dialog('open') idiom elsewhere on the same page, and it works well.)
Here is the code:
<tr>
<td>ADT Corporation Common Stock</td>
<td>adt</td>
<td>$31.59</td>
<td>$-0.78</td>
<td>-2.47%</td>
<td>4</td>
<td>FidelityIndividual</td>
<td>4</td>
<td>
<script>
$("#edit199").click(function(e){
alert("in the <script> function"); // doesn't work!
//alert( $("input[name='editfields199']").val() ); // really doesn't work!
e.preventDefault();
$('#the_edit_form').dialog('open'); // should open a nice modal pop-up
});
</script>
// The edit icon that the user can click in order to edit that row/record.
<input type="image" name="editfields199" id="edit199" src="images/gtk_edit.png"
value="ADT Corporation Common Stock^adt^4^FidelityIndividual^199" />
</td>
</tr>
<tr>
....more like the previous one...
<tr>
I've a webapp using hibernate to mysql. The webapp works fine, if my database gets new values they appear instantly on the webapp after refresh of the page. I want to get away from my "refresh-the-whole-page-every-five-seconds" build and have a checkbox that when activated the list in tbody will refresh alone. I've tried autorefresh on the div as well, but yeah, if anyone of you guys know this please help! thank you!
Code block 1 (head):
<script type="text/javascript">
function auto(){setInterval(
function () { $('#doRefresh'). ????
;}, 2000); } </script>
Code block 2 (div 1):
<input type='button' value='UPDATE' class="btn" onclick="auto()"/>
Code block 3 (div 2):
<tbody id="doRefresh">
<c:forEach var="sensor" items="${listSensors}" varStatus="status">
<tr class="listData">
<td>${sensor.fileName}</td>
<td>${sensor.date}</td>
<td>${sensor.time}</td>
<td>${sensor.channel1}</td>
<td>${sensor.channel2}</td>
<td>${sensor.channel3}</td>
<td>${sensor.channel4}</td>
<td>${sensor.channel5}</td>
<td>${sensor.channel6}</td>
<td>${sensor.channel7}</td>
<td>${sensor.channel8}</td>
</tr>
</c:forEach>
</tbody>
I have been to the following pages for inspiration (and more):
1. https://wowjava.wordpress.com/2010/02/06/auto-refreshing-the-content-
without-reloading-page-using-jquery/
2. http://www.sitepoint.com/auto-refresh-div-content-jquery-ajax/
3. http://crunchify.com/how-to-refresh-div-content-without-reloading-page-
using-jquery-and-ajax/
4. http://stackoverflow.com/questions/5987802/refreshing-only-one-div-in-
page-with-just-regular-javascript
Thank you
Since you already have server code that can be used to generate the html you can use the simplest jQuery ajax method which is load().
Method replaces all the html within the selector with new html from server by simply passing in a url.
/* within interval function */
$('#doRefresh').load('path/to/server/script', function(){
/* new html has been inserted, can run any html related code here*/
});
Since the <tbody> doesn't get replaced, only the rows, just send back rows. Otherwise use $('#doRefresh').parent().load(... to keep <tbody>
Reference: load() Docs
I ve written the following for displaying different rows and columns of a DB. and infront of every row, there is a Delete Button.
Onclick of the Delete button should call a set of function/ perform the code written inside Onclick event(check below)..Now what's happening is when the JSP page is loading , its going inside the method. So if there are 3 rows,
it will invoke the method 3 times....HELP ! it should invoke these method only "ON CLICK" of Delete button...
<tbody> <%
int x;
while(rs2.next()){
x=0;
%>
<tr><%
while(x<d)
{
x=x+1;
%>
<td> <%
out.print(rs2.getString(x));%></td>
<% } %>
<td> <input type="button" value="Delete" class="btn" id="DeleteBtn" onclick="<% System.out.print("Delete button"); tableupdateBean.setupdateRow(rs2.getString(x)); tableupdateBean.DeleteRow();%>" /> </td>
</tr>
<% } %>
</tbody>
It looks like your are mixing things between javascript and jsp scriptlet.
onclick is a javascript event that occurs when an element gets clicked, in this case a button. onlick="" should reference a javascript function but in your code sample you have a scriptlet.
Scriptlet are executed when the JSP is invoked, so when the page loads.
onclick is client side event and you can only specify any javascript function which will be called when this event will occur. You can not specify any server side jsp/java function.
You need to construct a delete url with an Unique Id to identify the deletion row from the server side and reload the full page again.
Client Side
<a href="/yoururl?mode=delete&id="+<Unique Id>>Delete Row</a>
Server Side
if("delete".equals(request.getParameter("mode"))
{
String id = request.getParameter("id");
// write code for deletion
}
//redirect to the same page again
If you don't want to reload the full page, then you have to write ajax calls to perform deletion in the server side and use javascript remove the row from the table
I'm building a page with a long table of entries which all include a "Yes" and "No" button in one column, and a dropdown box in another. Each row has an id that corresponds to a field in my database on my server.
I'm having trouble coming up with a good way to send all the data. What I need to be sent is the id, whether the "Yes" or "No" button was pushed, and the value in the dropdown menu if the "Yes" button was clicked.
I'm kind of new to this jQuery stuff so please don't expect me to know things out of context! Here's a sample row of the table:
<table id="check_table">
<tr id="1234">
<td>fdsa<td>
<td class="buttons"><button type="button" value="yes">Yes</button><button type="button" value="no">No</button></td>
<td class="dropdown"><select name="problem_type">
<option value="Thing 1">Thing1</option>
<option value="Thing 2">Thing2</option>
<option value="Thing 3">Thing3</option>
</select></td>
</tr>
... More rows
</table>
Also, on the server-side, I'm using PHP to handle requests and connect to the database. All I want to know here is how I translate the data in the AJAX request to variables in PHP.
You have stumbled on encoding types. No matter what, you are going to recieve your form elements using $_POST. The format you recieve them is totally up to you.
You could recieve each form input as indevidual $_POST paramaters or the entire form as a single object using JSON.
//pagePostedToo.php
$thing1 = $_POST['thing1']; //im a string!
$thing2 = $_POST['thing2']; //im a string!
//pagePostedToo.php
$things = json_decode($_POST['things']); //im an array of things!
$('button').click(function(){
var btnValue = $(this).attr('value');
var optionValue = $('select[name="problem_type"]').val();
$.post({'php_script.php',{
btnValue: btnValue, //phpVariable: jsVariable
optionValue: optionValue
}, function(data){
// perform needed action with reply from php script
});
});
and in php script you will catch thoose with
$button = $_POST['btnValue'];
$option = $_POST['optionValue'];
I had created a checkbox at the server during runtime, and populated it in a table on the webpage, and I would like to make use of it to trigger some JavaScript to handle some functions in the client.
However, I'm not sure of how to trigger the function using a checkbox created in this manner.
I understand that I can trigger the function when I declare a checkbox in this syntax.
asp:CheckBox ID="Checkbox1" runat="server" Onclick="javascript:myfunction()"
However, this checkbox may or may not be required to be created on the webpage, and hence I'm unable to insert this hardcoded on the webpage
Is there any way which I can use to detect the status of this checkbox and trigger my JavaScript in the client? or if I can handle what I need to do at code_behind?
suppose that we are adding CheckBox to td of an table
<table>
<tr>
<td id="td1" runat="server">
</td>
</tr>
</table>
and in the code behind,
CheckBox chkbox = new CheckBox();
chkbox.ID = "CheckBox1";
chkbox.Attributes.Add("onclick", "click_Func(this);");
td1.Controls.Add(chkbox);
and javascript will be look like this ,
<script type="text/javascript">
function click_Func(chkbox) {
alert(chkbox.id);
}
</script>
you can add a script tag on the page like this
<script type="text/javascript">
$('#<%=Checkbox1.ClientID%>').live('changed',function(){
// Do your work here.
});
</script>