I'm actually trying to create a listener with a click function in javascript to create redirections inside a table.
document.body.addEventListener('click', evt => {
const link = evt.target.closest('td.loader');
if (!link) return;
evt.preventDefault();
window.location.href = link.href;
});
<table>
<tr>
<td class="loader" data-href="http://www.google.com">
Google
</td>
</tr>
</table>
Don't understand what is missing...help please!
A couple of syntax errors in yours, try this:
let tableLink = document.querySelector('td.loader');
tableLink.addEventListener('click', evt => {
const link = tableLink.getAttribute('data-href');
evt.preventDefault();
window.location.href = link;
});
<table>
<tr>
<td class="loader" data-href="http://www.google.com">
Google
</td>
</tr>
</table>
If there are more than one you can leverage a loop and hit it via an element parameter:
let tableLinks = document.querySelectorAll('td.loader');
tableLinks.forEach((el) => {
el.addEventListener('click', evt => {
const link = el.getAttribute('data-href');
evt.preventDefault();
window.location.href = link;
});
})
<table>
<tr>
<td class="loader" data-href="http://www.google.com">
Google
</td>
<td class="loader" data-href="http://www.facebook.com">
Facebook
</td>
<td class="loader" data-href="http://www.youtube.com">
Youtube
</td>
</tr>
</table>
You did a slight mistake here. Links must be in anchor tag. Then only browsers can identify it as a link. So I changed your HTML as below now it's working fine.
<table>
<tr>
<td class="loader">
Google
</td>
</tr>
</table>
So, to be clear, I didn't find a 100% good solution with javascript. The best I can do is to put a div inside each cell of the table, set with height and width 100% like this:
<table>
<tr>
<td class="loader">
<a href="google.com">
<div style="height:100%;width:100%;">
</a>
Google
</td>
</tr>
</table>
Then, I can use this javascript:
document.body.addEventListener('click', evt => {
const link = evt.target.closest('td.loader a');
if (!link) return;
evt.preventDefault();
document.body.innerHTML = '<h3 style="color:red">loading link</h3>';
const href = $(this).find("a").attr("href");
window.location = href;
});
In facts, it works because I I can use the html link and also the javascript listener. But it's not perfect, due to the css (impossible to have a full cell clickable if some cells are composed with different numbers of lines).
But it's not bad!
At the end, I've realized that semantic ui (I'm using this css framework for this application) purpose a class .selectable who do all the job for me.
Perfect result and less javascript code so I've choosen this solution.
Just in case someone has the same problem, Bootstrap has the same property.
Related
I want to get a data from listing and retrieve to popup.. when I use getElementById, it will only get a single id from another input. not from listing that i want.. so, I've come an idea to use array.. but I don't know how.. I'm using Java Play Framework
here is my code..
display.html
<script>
function openModifySchedule(staffId) {
if (!checkRequiredField()) {
alert("There Is Error(s) In The Form. Please Fix It Before Proceed.");
return;
}
var staffId = document.getElementById("staffId").value;
if (staffId == "") {
alert("Please Select Doctor Before Proceed");
return;
}
var url = "/DoctorSchedules/modifySchedulePopup?staffId=" + staffId;
mywindow = window.open(url,"mywindow","location=no,resizable=1,width=700,height=650,menubar=no,center=yes");
mywindow.moveTo(420,100);
}
</script>
<input type="hidden" id="staffId" name="staffDetails.staffId" value="${staffDetails?.staffId}">
<tbody>
#{list items:staffScheduleList , as:'stffSchedule'}
<tr id="list" align="center">
<td></td>
<td id="scheduleDate">${stffSchedule.scheduleDate}</td>
<td id="staffId"><a onClick="openModifySchedule()" href="#">${stffSchedule.staffId}</a></td>
<td id="staffName">${stffSchedule.staffName}</td>
<td id="deptName">${stffSchedule.deptName}</td>
<td></td>
<td></td>
<td></td>
<td id="contactNo">${stffSchedule.contactNo}</td>
</tr>
#{/list}
</tbody>
here is the function in controller..
display.java
public static void modifySchedulePopup(String staffId){
StaffDetails staffDetails = StaffDetails.find("byStaffId", staffId).first();
StaffSchedule staffSchedules = StaffSchedule.find("byStaffId", staffId).first();
renderTemplate("DoctorSchedules/doctorScheduleModifyPopup.html", staffDetails,staffSchedules);
}
hope someone can explain.
In the DOM, no two elements may have the same id attribute. Since all of the "td" elements in your table have id="staffId", getElementById() is free to return any one of them.
Since Play! comes with JQuery, you might was well use that instead of straight JavaScript (it's much easier). Briefly, you attach the same "click" event handler to all of the links and the click event handler knows which element was being clicked.
Here's simple snippet that demonstrates this:
<script>
$(function() {
$(".staff-id").click(function() { // attach the click event handler
var staffId = $(this).text();
alert(staffId); // open your new window here
});
});
</script>
#{list items:staffScheduleList, as:'stffSchedule'}
<tr id="list" align="center">
<td></td>
<td>${stffSchedule.scheduleDate}</td>
<td><a class="staff-id" href="#">${stffSchedule.staffId}</a></td>
<td>${stffSchedule.staffName}</td>
<td>${stffSchedule.deptName}</td>
<td></td>
<td></td>
<td></td>
<td id="contactNo">${stffSchedule.contactNo}</td>
</tr>
#{/list}
I have written a code where i need to trigger a functionality when mouse is over to specific elements.
Its working fine for below code for all static
$("table td").on("mouseenter",function(){
console.log("mouse entered")
});
but for all dynamic <td class="editcolumn">XYZ</td> event is not triggering even if i use below code
$("table td").on("mouseenter",".editcolumn",function(){
console.log("mouse entered")
});
Any idea how to make it work. I'm using jQuery 1.11
I know I just commented, but I figured I would show you an example:
HTML:
<table id="tablee" cellspacing="0">
<thead>
<tr class="tablehead">
<th>This</th>
<th>is</th>
<th>a</th>
<th>table</th>
<th>header</th>
<th>and</th>
<th>stuff</th>
<th>though</th>
</tr>
</thead>
<tr class="append">
<td class="edit-column">asdf</td>
<td class="edit-column">qwer</td>
<td class="edit-column">zxcv</td>
<td class="edit-column">rtyu</td>
<td class="edit-column">tyui</td>
<td class="edit-column">dfgh</td>
<td class="edit-column">dfgh</td>
<td class="edit-column">wert</td>
</tr>
<!-- ... -->
</table>
<br/>
<br/>
<input type="button" class="add-column" value="Add Column" />
Javascript:
$(function() {
$('.add-column').click(function() {
$('.append').append("<td class='edit-column'>iueo</td>");
$('.tablehead').append("<th>Mo columns</th>");
});
/* vvv - this */
$("#tablee").on('mouseenter', '.edit-column', function() {
/* ^^^ should be children or a child of this */
$(this).css('background-color', 'yellow');
});
});
Here is a fiddle
This question's answer gives a much better explanation of delegated events.
I too faced a similar problem for dynamic elements that are added or removed. In such situations you can create dynamic elements with event-handlers attached to their attributes i.e. in your case you can put the desired operations in a function which gets called by your attribute event handlers:
It should be something like this:
Javascript:
function whenMouseEnters() {
// perform some operations
}
Html:
<td onmouseenter="whenMouseEnters()">
If table is aviable on DOM load you can write delgated event for the td with class editColumn like this:
$("table").on("mouseenter",".editcolumn",function(){
console.log("mouse entered")
});
My task here is to retrieve a HTML tag with the blockquote code below. I'd tried it by my method but it didn't work and I've changed another way even it wouldn't be the best way as I thought.
My first attempt and it didn't work:
search_title_temp_1 = $(search_title).closest("tbody").closest("tr").closest("tbody");
search_title_temp_2 = $(search_title_temp_1).find("tr").eq(1);
search_title_temp_2.hide();
This worked with what I need:
search_title_temp_1 = $(search_title).closest("tbody").closest("tr").closest("tbody");
search_title_temp_2 = $(search_title_temp_1).find(".noindex").closest("tr");
search_title_temp_2.hide();
Please let me know:
What's wrong with my first attempt?
If you have other solutions to shorten my last code, please let me know about that and any
suggestions would be appreciated.
Demo
HTML:
<table>
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td title="Electric Consumption for May 2013" id="WebPartTitleWPQ3" class="ms-WPHeaderTd">
<h3 style="text-align:justify;" class="ms-standardheader ms-WPTitle"><a accesskey="W" href="/Lists/ElectricWaterConsumption"><nobr>
<span>Electric Consumption for May 2013</span><span id="WebPartCaptionWPQ3"></span>
</nobr></a></h3>
</td>
<td>123</td>
<td>123</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="" valign="top">
<div width="100%" class="noindex ms-wpContentDivSpace">123</div>
</td>
</tr>
</tbody>
</table>
Javascript:
$("document").ready(function () {
var title = "Electric Consumption for May 2013";
var get_title = $(".ms-WPHeaderTd span");
for (i = 0; i < get_title.length; i++) {
//alert(get_title.eq([i]).text());
var search_title = get_title.eq([i]);
if (search_title.text() == title) {
alert(search_title.text());
search_title_temp_1 = $(search_title).closest("tbody").closest("tr").closest("tbody");
search_title_temp_2 = $(search_title_temp_1).find(".noindex").closest("tr");
search_title_temp_2.hide();
}
}
});
What's wrong with my first attempt?
The problem with your first attempt is that find("tr") gets all tr descendants, not only children. Then find("tr").eq(1) is not what you want.
Use this instead:
$(search_title_temp_1).children("tr").eq(1);
If you have other solutions to shorten my last code, please let me
know about that and any suggestions would be appreciated.
You can ask suggestions about working codes in https://codereview.stackexchange.com/
I wouldn't create variables (if you do, declare them with var!):
$(search_title)
.closest("tbody").closest("tr").closest("tbody")
.children("tr")
.eq(1)
.hide();
I have jQuery to add a some content to a page:
$('#upper').on("click",'a',function(e){
e.preventDefault();
var url = $(this).attr('href');
if (!$(this).hasClass('new')) {
$('#lower').load(url);
}
});
It works fine but the added content includes some links. I.e.:
<table class="report">
<tr>
<td class="report">
PG010000001
</td>
<td class="report">società </td>
<td class="report">LSSF Consulting SRL</td>
<td class="report">
PF010000002
</td>
<td class="report">IC - Intestatario di un credito</td>
</tr>
</table>
First time I click on the href nothing happens. Second time it works fine . Looks like I miss something in the code I have posted to focus the added content. Any advice? Will try to create a fiddle in the meanwhile (never done before...)
Thanks in advance!
My application has a list of indicators, each with its help button. Clicking on each button, brings up a ToolTipDialog with definition for each respectively. The way I have written the code (below), the content does not get refreshed when the user clicks on another help button within the list after having clicked the first one. I have not been able to figure out how to change the "content" dynamically. Any help will be appreciated:
HTML:
<div dojoType="dijit.layout.ContentPane" id="group1" title="Population projection" selected="true">
<table id="popIndTable">
<tr id="someID">
<td><input data-dojo-type="dijit.form.RadioButton" class="checkInd" id="checkCBR" name="checkInd" /></td>
<td id="indCBR">Crude Birth Rate</td>
<td id="infoCBR"><img id="imgCBR" src="Images/help_icon2.png" width="16px" onClick="showToolTipDialog(this,this.id);" /></td>
</tr>
<tr>
<td><input data-dojo-type="dijit.form.RadioButton" class="checkInd" id="checkTest1" name="checkInd" /></td>
<td id="indTest1">Test 1</td>
<td id="infoTest1"><img id="imgTest1" src="Images/help_icon2.png" width="16px" onClick="showToolTipDialog(this,this.id);" /></td>
</tr>
<tr>
<td><input data-dojo-type="dijit.form.RadioButton" class="checkInd" id="checkTest2" name="checkInd" /></td>
<td id="indTest2">Test 2</td>
<td id="infoTest2"><img id="imgTest2" src="Images/help_icon2.png" width="16px" onClick="showToolTipDialog(this,this.id);" /></td>
</tr>
</table>
</div>
JavaScript:
function showToolTipDialog(node,infoId){
var infoText;
var infoElem = dojo.byId(infoId).parentNode.id;
if (infoElem == "infoCBR"){
infoText = "This is the text container for CBR";
}
else if (infoElem == "infoTest1"){
infoText = "This is the text container for Test1";
}
if (!tooltipDialog) {
tooltipDialog = new dijit.TooltipDialog({
content: infoText,
style: "width:200px;height:auto;",
autofocus: !dojo.isIE, // NOTE: turning focus ON in IE causes errors when reopening the dialog
refocus: !dojo.isIE
});
dijit.popup.open({ popup: tooltipDialog, around: node});
tooltipDialog.opened_ = true;
}
else {
if (tooltipDialog.opened_) {
dijit.popup.close(tooltipDialog);
tooltipDialog.opened_ = false;
}
else {
dijit.popup.open({popup: tooltipDialog, around: node});
tooltipDialog.opened_ = true;
}
}
}
I believe the preferred way to change the value of a dojo widget programatically is to use the .set() method. ie:
this.myTooltipDialog.set("content", newContent);
Rather than:
this.myTooltip.content = newContent;
It looks like you never reset the content of your tooltipDialog. You create it once, but once it's created (new dijit.TooltipDialog({...})) it remains static.
I don't know the Dojo API. But can you just set the content value directly? Perhaps immediately after your first else:
tooltipDialog.content = infoText;
This is just a guess, but if Dojo's API is simple enough, that might do the trick.
If not, you might have to remove your if (!tooltipDialog) { check.
If your content is not too complicate, I suggestion you create a new TooltipDialog every call and clear it when blur, like
var dlgDiv = dojo.create("div");
var dlg = new dijit.TooltipDialog({
content: dlgDiv,
onBlur: function () {
popup.close(this);
this.destroyRecursive();
}
});
// you can create any content within dlgDiv at here dynamicly
dojo.popup.open({
around: yourArondNode ,
orient: ["below", "before", "after", "above"],
popup: dlg
});
dlg.focus();