Jquery change onclick function name - javascript

My question is! I am copying content from one table to another table and when I am doing this I need the function name to change to talentselect instead of driverselect which is attached to each table row. I still need to keep the variable values to parse. Just wondering if anyone can help me with this. I know that I should be binding the events to the elements with Jquery and not using OnClick but for now I need a solution to achieve this with the OnClicks.
Many Thanks!
The copying of the table
<table id="driverselectiontable" cellspacing="0">
<tr class="chosen" onclick="return driverselect(this, value, value);">
<td>driver</td></tr>
<tr class="odd" onclick="return driverselect(this, value, value);">
<td>driver</td></tr>
<tr class="even" onclick="return driverselect(this, value, value);">
<td>driver</td></tr>
<tr class="chosen" onclick="return driverselect(this, value, value);">
<td>driver</td></tr>
<tr class="even" onclick="return driverselect(this, value, value);">
<td>driver</td></tr>
</table>
<table id="talentselectiontable" cellspacing="0">
</table>
$("#talentselectiontable").html($("#driverselectiontable .chosen").clone(true).attr("class","odd"));
So basically I am copying all of the table rows that have the class named "chosen" but upon doing so I need to change the function call name to "talentselect". But each row in the table has different parameters being parsed which is allocated with PHP.
I have tried this piece of code but it is not working still
$("#talentselectiontable tr").attr("onclick").replace("driverselect", "talentselect");

I can't see the actual HTML of your table, so this may be slightly incorrect, but should get you started.
$("#talentselectiontable tr").attr("onclick", "return talentselect(this, value, value);");
This whole problem would actually be a lot easier if you used event handlers rather than inline onclick attributes. You could then use the jQuery live() function (see http://api.jquery.com/live/) that would mean that JQuery would take care of changing the function for you. Your solution would look something like this:
$("#driverselectiontable tr").live('click', driverselect);
$("#talentselectiontable tr").live('click', talentselect);
And then whatever code to ensure that your cloning code gets called.
Edit: In response to the comment, it looks like this is what you're after:
var clickval = $("#talentselectiontable tr").attr("onclick");
$("#talentselectiontable tr").attr("onclick", clickval.replace('driverselect', 'talentselect'));
That should get you going.
With a view to better JavaScript practice however, I would recommend another approach entirely. Rather than storing your parameter values in the 'onclick' attribute, store them in a data attribute. So your HTML would look something like this:
<table id="driverselectiontable" cellspacing="0">
<tr class="chosen" data-myparam1="value" data-myparam2="value"><td>driver</td></tr>
And so on. You can then use JQuery to parse the values:
function driverselect() {
var row = $(this),
param1 = row.attr('data-myparam1'),
param2 = row.attr('data-myparam2');
// rest of the code goes here
}
Your markup will be cleaner, and you can use the live() jQuery functionality as described above.

Related

how to save input field instead localstorage on table?

I have a table that localstorage value is saved and displayed in the th.
I want to write a function that will delete the text of the localstorage and open input field on click. I tried something like this:
<html>
<body>
<table style="float: right ; padding-left: 10px;" id="table">
<tr>
<th id="hello" style="padding-left:24px; text-align: center;" class="button" id="0"><input id="inside" name="inside" type="text" ></th>
</table>
<button onclick="again();">again</button>
<script>
function again() {
document.getElementById("hello").innerHTML=input;}
</script>
</body>
</html>
but it doesn't work. Can somebode explain what is the mistake? thank you very much!
Your function again() is setting the innerHTML of the th to the value of a variable called input (that does not exist).
You have to extract the value of the input field and write that (string) as the innerHTML of the head. Try this:
function again(){
const tableHeaderElement = document.getElementById("hello");
const userEnteredData = tableHeaderElement.getElementsByTagName('input')[0].value;
tableHeaderElement.innerHTML = userEnteredData;
}
the second statement is retrieving an HTMLCollection of input tags inside the header. Your HTMLcollection will only have one member but must be referenced by index, like an array, hence [0]. Obviously .value extracts the value property of that element, which is the text entered by your user.
Depending on use, there may be security concerns about adding user-entered data into an html element as, if they entered script tags and valid javascript, they might be able to do things you don't want them to. It is usual to either screen user-entered data, 'sanitise it', to remove active code, or, easier but soon to be deprecated, escape data before writing it to an html element.

call innerHTML based on a condition from jsp code in spring mvc

I am trying to find a way to have the document.getElementById("1").innerHTML to get triggered based on a condition coming from jsp code.
For example I have the following jsp code on the jsp page,
<table border="1">
<c:forEach items="${elements}" var="element">
<tr>
<td>${element.elementNumber}<br /> ${element.isReserved}
</td>
</tr>
</c:forEach>
</table>
Based on "element.isReserved", I need to change an element (supposedly using .innerHTML)in html. The element in html looks like the following. I have several of these elements.
<div class="col-xs-2">
<div class="o-btn">
<a id="1" onClick="myFunction(this);">1</a>
</div>
<div class="clearfix"></div>
</div>
As shown above, it is displayed as a button with value "1". I want to change the value to "X" based on a condition. I can do this directly with js,
<script>
function myFunction(elmnt) {}
function isReserved() {
return 'X';
}
document.getElementById("1").innerHTML = isReserved();
</script>
But I need to make it dependent on the output from spring or the jsp code shown above. My desired output is that the "1" displayed on the button will change to a "X" when the element.isReserved() (inside the jsp code) evaluates to true. Since I have several of the button elements, I need to check for every button if element.isReserved() evaluates to true.
I was able to make it work. I found this article very helpful.
After understanding (and accepting reality) how JSP works with html, I had to slightly restructure my program.
From spring mvc, I added my variables to the model,
model.addAttribute("element1", 1);
On the jsp page I checked the variables with javascript,
if("${element1}" == 1) {
document.getElementById("1").innerHTML = 'X';
document.getElementById("1").style.color = 'red';
}
Probably there are better solutions, but for a newbie like me, it works great!
The article I mentioned above is indeed a good and important read for new comers.

How to pass parameters from dynamic table to the event handler without inline javascript hanlder

As I heard, I should avoid using inline javascript handler on html. e.g. onclick = "FUNCTION_NAME".
If I have a table that is generated dynamically, Each row has a button for its own.
If I don't use incline Javascript function, how can I pass some parameters from the table to the event handler?
Maybe passing the data from the table cell is not very hard. What if some data is not shown on the table cell (for security reason), for example, a secret ID number that is used internally within the application and is not supposed to exposure on the html (Setting it in the invisible cell in the table is not safe because people who knows html can still inspect it). How can we pass those data that is not shown on the table from dynamic table to event handler in this case?
If we use inline click attribute, i.e. onclick="javascript_function(parameter_1, parameter_2)" on each row, that's fairly easy to pass any data I want, and I do not need to show those kinds of secure data on the html in order to pass it.
If you use jQuery, I would recommand
<table class="with-val">
<td data-val="17">17 points</td>
</table>
and
$('.with-val').on('click', 'td', function() {
var val = $(this).data('val');
console.log(val) //17
});
This way (with the on(eventType, selector, handler) signature), you don't have to reset the events if rows are deleted or added,
and the markup is much lighter (and it is considred best practice, as you add only one event handler for the whole table).
Giving markup
<td class="val" data-val="17">17 points</td>
you can get value from binding like this:
$('.val').on('click', function() {
var val = $(this).data('val');
console.log(val) //17
});
For this:
Setting it in the invisible cell in the table is not safe because
people who knows html can still inspect it
You must not send secure data in any way to frontend. User can stop your code with breakpoints, debug or anything else, and get this data even when it is not visible in html. In addition this data will be visible in responses for the requests that browser send
You can use click event to call a function, that does the task of getting the value of any paramater you wish.
Hope this helps.
<td><button id="btn">Click me</button></td>
<td><input type="hidden" id="secret_id"></td>
$("#btn").click(function(){
var id = $("#secret_id").val();
alert(id);
});
This is a possible solution:
HTML:
<table border="1">
<thead>
<tr>
<th>HEAD1</th>
<th>HEAD2</th>
<th>HEAD3</th>
</tr>
</thead>
<tr>
<td class="hiddenField">row1 col1</td>
<td>row1 col2</td>
<td><button class="seeHidden">btn1</button></td>
</tr>
<tr>
<td class="hiddenField">row2 col1</td>
<td>row2 col2</td>
<td><button class="seeHidden">btn2</button></td>
</tr>
</table>
CSS:
th:nth-child(1), td:nth-child(1){
display: none;
}
jQuery:
$(".seeHidden").click(function(){
var hiddenField = $(this).parent()
.siblings("td.hiddenField")
.html();
alert(hiddenField);
});
Check this link jsfiddle to see a working example.
Hope it's useful!

Javascript Manipulation on included DOM element

Basically what I am doing is dynamically loading external HTML files depending on a drop-down selection in classic ASP. It's an old system for someone I work for, so there's not really many choices I have except to figure this out. The included HTML is only a table of data such as this;
<table cellspacing="0" cellpadding="0" style="vertical-align:top; width:100%; ">
<tr style="line-height:14px;" >
<td width="150"><b style="color:#888888;">Symbol<b></td>
<td ><b style="color:#888888;">Security</b></td>
<td width="150" style="text-align:right;"><b style="color:#888888;">Amount</b></td>
<td width="150" style="text-align:right;"><b style="color:#888888;">Mkt Value</b> </td>
<td width="150" style="text-align:right;"><b style="color:#888888;">Est.Next Date</b></td>
</tr>
<tr style="line-height:14px; background-color: #f0f0e8;">
<td>QPRMQ</td>
<td>BANK DEPOSIT SWEEP PRGRAM FDIC ELIGIBLE</td>
<td style="text-align:right;">100.00%</td>
<td style="text-align:right;">$191.77</td>
<td style="text-align:right;" id="NextSWPDate">11/15/2010</td>
</tr>
</table>
I want to run a function on the TD element with the ID of "NextSWPDate", but since this is "included" html I just receive the error of;
Unable to set value of the property 'innerHTML': object is null or undefined
My function is just generic right now trying to do any manipulation on the object I can, after I get that set, I can write the real logic quickly and easily.
function SetNextSWPDate(){
document.getElementById("NextSWPDate").innerHTML = "this is a test";
}
Thank you,
NickG
Your tag mentioned jQuery, so I hope a jQuery solution is acceptable. A standard $("#NextSWPDate").text("whatever"); worked just fine for me. http://jsfiddle.net/pCx9K/
In case of included HTML or generated HTML, you might want to wait with executing javascript until the DOM is fully loaded.
To do so, try using the window.onload of javascript or the $(document).ready function of jQuery.
The property is read/write for all objects except the following, for
which it is read-only: COL, COLGROUP, FRAMESET, HEAD, HTML, STYLE,
TABLE, TBODY, TFOOT, THEAD, TITLE, TR.
Colin's work-around (setting innerText on the td instead of innerHTML on the tr)
is a good one in your case. If your needs become more complex, you'll have to
resort to The Table Object Model.
Source from Why is document.getElementById('tableId').innerHTML not working in IE8?
Refer http://msdn.microsoft.com/en-us/library/ms533899%28v=vs.85%29.aspx
Ok, so you must implement a callback function to your jQuery.load function : $("#yourDiv").load("youExternalFile",function(){//your stuff here ... }); see api.jquery.com/load/#callback-function – mguimard 3 hours ago

Passing IDs of table rows

I am new to JavaScript and not long ago I ask the following question:
I have a normal HTML table where each row has its own id. What I want to achieve is that each time I click a link in a row the id for that row should be stored in a variable and later passed to a function. Let's say I click row#1 then id#1 should be passed and so on... How can I achieve this?
I got a very good answer. This example works in jsFiddle
http://jsfiddle.net/andrewwhitaker/9HEQk/
But if I copy the JavaScript and the table exactly like it is into a HTML file the whole thing just doesn't work and I can't find the answer. Could someone help me again please?
Thank you very much!
If all you need is the row id so why not using a simple code like this:
HTML:
<table id="table-one">
<tr id="row-one">
<td>one</td>
</tr>
<tr id="row-two">
<td>two</td>
</tr>
</table>
JS:
var lastRowId = -1;
function saveRow( id )
{
lastRowId = id;
}
Maybe I didn't fully understand what you asked?
Rotem

Categories

Resources