I have a data-binded list with one of the columns displaying a popover:
<tbody data-bind="foreach: tehTab()">
<tr>
<td data-bind="text: $data.Category"></td>
<td data-bind="text: $data.Name"></td>
<td><button type="button" class="btn" onclick="getInfo(this.id)" data-bind="attr: { id: $data.Id}, text: $data.Value" style="border:none; background-color:white"></button></td>
</tr>
</tbody>
and the getInfo function:
function getInfo(click) {
$('#' + click).popover({
content: 'Dana' + Math.random(),
html: true
});
}
My only problem is that the popover appears on the second click, but I don't know why. Is there something I need to add?
Found the reason :) On the first click my popover is being initialized and on the second one is displayed. The solution for it was:
function getInfo(click) {
$('#' + click).popover({
content: 'Dana',
html: true
});
$('#' + click).popover("show");
}
Got the same issue, when initializing different way. The solution for me was to initialize it like:
$(document).on("page:load ready", function(){
$('body').popover({selector: '.my-popover-class', trigger: 'click'});
})
Further options for popover() are here.
Related
I have this HTML piece of code:
<table class="table" id="table_data">
<tbody>
<tr id="tr_2085">
<td>
<a href="javascript:void(0)" data-id="2085" class="delete">
Delete
</a>
</td>
<td>United States of America</td>
<td>US</td>
<td>Post Warranty Service</td>
<td>14.01</td>
</tr>
</tbody>
</table>
And I am trying to clean (empty) the content of the last td when I click in a .delete link. This is what I am doing:
$('#table_data').on('click', '.delete', function(ev) {
var item_id = $(this).data('id');
var that = $(this);
that.closest('tr td:last').empty();
});
But isn't working since the value remains there. I have tried this too:
that.closest('tr td:last').text('');
that.closest('tr td:last').html('');
But isn't working either. I think the problem is on the selector I am using but I don't know what is the right one, any help? There is a Fiddle setup here for play with.
closest('tr td:last') needs to be closest('tr').find('td:last')
$('#table_data').on('click', '.delete', function(ev) {
ev.preventDefault();
var item_id = $(this).data('id');
$(this).parent().siblings('td').last().html('');
});
Below is the tabular structure for expand & collapse, i have done using table. Now i have used the below script for collapse & expand. But sometime i succeeded in expand & sometime don't.
What i did, when i got response from the api, i call this function :
$timeout(function (){
$scope.initExpandCollapse();
},1000);
$scope.initExpandCollapse = function () {
angular.element(document).on("click", ".table_exp", function(){
var TBODY = angular.element(this).parents(3);
if(TBODY.hasClass("open")){
TBODY.children("tr.expand-table-row").hide();
TBODY.removeClass("open");
return false;
}
TBODY.addClass("open");
TBODY.children("tr.expand-table-row").show();
});
}
If you guys, can help me out for this problem . Thanks.
CSS:
tr.expand-table-row {
display: none;
}
tr.expand-table-row.open {
display: initial;
}
Angular
$scope.expandCollapse = function expandCollapse (item) {
item.open = !item.open
}
HTML
<table>
<tbody>
<tr ng-repeat="item in items track by $index"">
<td ng-click="expandCollapse(item)">++++</td>
<td>
<table>
<tr ng-class="{'open': item.open}" class="expand-table-row open">
<td>{{item.name}}</td>
<td ng-repeat="data in item.options">{{data.name}}</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
You need nested tables so the click marker does not simply vanish with the rest, apart from that the salient point is the ng-class="{'open': item.open}" espression that sets the class open if the property open on item is set.
Try to use window.onload instead of $timeout, or add you script to the end of body tag.
I have a site using Google Maps Api which adds and saves markers. When a saved marker is clicked, it displays an info window which has a Button in it. When this button is clicked, I want it to display a hidden DIV element which contains a Table of the saved marker details.
The JS which contains the InfoWindow is:
var eventContent = $('<div class="event-info">' + '<h4 class="event-name">' + point.name + '</h4><hr>' +
'<span><h5>Date: </h5>' +
'<p class="event-date">' + point.edate + '</p></span>' +
'<p class="event-description">'+ point.description +'</p>' +
'<button id="remove-event" name="remove-event" onclick="showDetails();" class="remove-event btn btn-danger btn-sm" title="View Event">View Event</button>'+
'</div>');
// Display Event details on marker click
google.maps.event.addListener(event_markers[i], "click", function () {
infowindow.setContent(eventContent[0]);
infowindow.open(map, event_markers[i]);
map.setCenter(marker.getPosition());
map.setZoom(10);
});
The HTML DIV I want to display is:
<div class="event-details" id="event-details" style="display: none ">
<h3>Event Details</h3>
<table class="table">
<tr>
<th>Event Name: </th>
<td> Bill Gates</td>
</tr>
<tr>
<th>Event Date: </th>
<td> Bill Gates</td>
</tr>
</table>
<button type="button" class="btn btn-warning btn-sm"><span class="glyphicon glyphicon-remove"></span> Remove Event</button>
</div>
I have tried this, among other similar ideas but no luck.:
function showDetails()
{
if (document.getElementById("event-details").style.display == "none" ) {
document.getElementById("event-details").style.display="";
} else {
document.getElementById("event-details").style.display="none";
}
Your elements do not have an id of "event-details" but a class. Try using getElementsByClassName instead:
document.getElementsByClassName("event-details")[0].style.display = "none"// returns multiple elements so you should select the first (0th) item.
Maybe a better solution would be to add an "id" to your html element:
<div id="event-details" class="event-details" style="display: none ">
This way, your getElementById method should catch the elements you want.
Have you tried giving the div an ID?
maybe why the "getElementById" isn't working.
then:
document.getElementById("eventDetails").style.display="none";
FIXED.
My showDetails function had a syntax error, was missing a closing }
function showDetails()
{
if (document.getElementById("event-details").style.display == "none" ) {
document.getElementById("event-details").style.display="block";
}
else
{
document.getElementById("event-details").style.display="none";
}
}
Please use querySelector as below. Since you already have an id for the element you'd click on, like below:
<button id="remove-event" name="remove-event" class="remove-event btn btn-danger btn-sm" title="View Event">View Event</button>
You may remove the onclick inline event handler and do it the following way.
document.querySelector("#remove-event").addEventListener("click", function() {
var elem = document.querySelector("#event-details");
if (elem.style.display == "none") {
elem.style.display = "block";
} else {
elem.style.display = "none";
}
});
May be try these-
1) Change the div id to other instead of having the class name
2) Here you are checking for 'none', but i think if you are not showing the div anywhere in your code prior calling this code, you can remove the if clause, since that div was already hidden and if clause wouldn't work if its already hidden.
if (document.getElementById("event-details").style.display == "none" ) {
document.getElementById("event-details").style.display="";
}
3) Try to use- instead of
document.getElementById("event-details").style.display="";
to
document.getElementById("event-details").style.display=block;
or
document.getElementById("event-details").show();
I have a dynamically loaded table with the following tr's:
<tr>
<td><span class="active">Task Name</span><br /><span class="icons_small">U</span><span class="contact_name tiny">Contact Name</span><span class="user_number tiny">(111111)</span><span class="icons_small" style="visibility:hidden;">!</span></td>
<td><span class="date_assigned">13/12/2012</span><br /> <div id="progressbar"></div></td>
<td class="icons_small"><span class="flag_task">f</span></td>
<td class="icons_small"><span class="set_reminder">A</span></td>
<td><span class="warning tiny" style="visibility:hidden;">Delete</span></td>
</tr>
Im trying to set the td with the spanclass "flag_task" (3rd td down) to toggleclass an additonal class, but only on the selected td with the spanclass "flag_task, not all instances of that class. This is what im currently using:
<script>
$(document).ajaxSuccess(function () {
$(".flag_task").click(function () {
$(".flag_task").toggleClass("warning");
});
});
</script>
Could someone please clarify how to effect only the selected instance.
Thanks,
Mark
In this section of the code, you're saying "grab all elements with a class of flag_task" instead of just "grab the clicked element."
$(".flag_task").click(function () {
$(".flag_task").toggleClass("warning");
});
So, to fix this issue, you just have to select the element that was clicked on.
This line:
$(".flag_task").toggleClass("warning");
Can be changed to:
$(this).toggleClass("warning");
Check out Understanding the "this" keyword
I have a JavaScript object. And you can see the line:
window.gv.borderiseTDCell(this);
Is tigthly coupled to the window (if gv is not initialised it crashes). However what I really want is to be able to do is:
//bind the click event
jQuery('.highlightableTDCell').click(function () {
borderiseTDCell(this);
});
But that doesn't work. Any ideas what I can do? This is the full lisinng (with tight coupling):
gridview = function () {
//bind the click event
jQuery('.highlightableTDCell').click(function () {
window.gv.borderiseTDCell(this);
});
};
//selecting cell
gridview.prototype.selectCell = function (obj) {
//dostuff to cell
};
And a page...
<table class="EditTable" cellpadding="0" cellspacing="0">
<tr>
<td>
<div style="">0</div>
</td>
<td>
<div style="">0 akudsfsa fdhsad fiasgdf swae</div>
</td>
<td class="highlightableTDCell">
<div>
<input value="0.00"/>
</div>
</td>
</tr>
</table>
It's probably because you're using this when you should be using $(this)
borderiseTDCell($(this));
Also, gridview doesn't seem to be defined:
var gridview = function (){}
Not sure why you'd need a library to outline a table cell. How about creating a class called outlinedCell
.outlinedCell{border:1px solid #f00;}
Then you can add, remove, or toggle this class
//bind the click event
$('.highlightableTDCell').click(function () {
$(this).addClass('outlinedCell');
// or // $(this).removeClass('outlinedCell');
// or // $(this).toggleClass('outlinedCell');
});
LIVE SAMPLE: http://jsfiddle.net/WJp2Z/