So I have a table that is being filled with data from an ajax call. I'm just using append similar to this for filling it:
var table = //something
//loop through ajax response objects
table.append('<tr><td>' + ajaxAnswer[i].part1 + '</td><td>' + ajaxAnswer[i].part2 + '</td></tr>');
After the loop I'm initializing a datatable like so:
table.dataTable(
//set the paging parameters
);
Now what I'd like to do is have a popover happen whenever a row in that table has been clicked. However, the popover will feature some extra data (loaded in by another ajax call). I've got the jquery for capturing the click event, making my call, and assembling all the data, but I can't seem to get the popover to occur correctly. I've attempted adding the syntax of it to each row I append like so:
table.append('<tr class="popover-dismiss" data-toggle="popover"><td>' + ajaxAnswer[i].part1 + '</td><td>' + ajaxAnswer[i].part2 + '</td></tr>');
Along with this bit wrapped in a closure to process the popover (I want the popover to disappear upon a click anywhere outside so I've used the focus element here as per the bootstrap guide here, http://getbootstrap.com/javascript/#popovers):
$('.popover-dismiss').popover({
trigger: 'focus'
});
That didn't seem to work however. It could be that the popover is being hidden underneath my datatable since I didn't see any particular error. So now I need either some other way to add it onto my rows or a way to generate them dynamically. Again, I've left out the jquery that handles my generating event so I can throw it from there if I knew how to instantiate it on the fly. Seems like I'm missing something trivial here. Thanks for any help!
UPDATE:
Twitter Bootstrap Popovers not working for Dynamically Generated Content
I happened upon this post about dynamically generating popovers (finally something relevant after many past googlings) which could be my problem. Will test tomorrow when I get back to work.
This ended up being the answer I needed for future reference (all of this inside the jquery function for handling my click event on the row):
$(row).popover({
trigger: 'focus',
title: 'YourTitleHere',
html: 'true',
content: blah,
placement: 'top'
});
$(row).popover("toggle");
$(row) is my row object that I'm setting the popover on and blah is the content I want in it (in this case some formed up html div, but you can do the same with text by removing the html: 'true' param above).
In my previous attempts, I had used the content tag as required, but I didn't have the last line to actually toggle the popover to on myself. Doing it this way required no addition to the row definitions I'm appending.
Credit to the post I linked in the original post for specifying where the popover handler should be and also to this post (Bootstrap popover content cannot changed dynamically) for the toggle part I was missing to drive it all.
Related
I use kenod UI to create my Web UI. I have a column template like below
var template = "<input id='details-button' type='image' src='images/detail_button.png' ng-click='showDetals(this.dataItem)'/>#: Contact #";
I want to popup a window every time I click the details button, and the popup's position should be at the bottom right of the button which I click. Here's what I do currently
var popup = $("#detailsPopup");
popup.kendoPopup({
anchor: "#details-button",
origin: "bottom right",
});
But it doesn't work. Every time, the popup display at the bottom right of the button in the first row, not the bottom right of the button which I click.
Checking the generated html, all of the buttons' id are same(details-button). So the popup always display related to the first details-button.
Updated:
This is my changed solution, but still doesn't work.
function popupDetails(item) {
detailsGrid.kendoGrid({
columns: ...,
dataSource: item.Details
});
var anchor = "#details-button" + item.id;
var popup = $("#details-popup");
popupp.kendoPopup({
anchor: anchor,
origin: "bottom right",
});
popup.data("kendoPopup").open();
}
Anyone can help?
Using a static ID in a column template will naturally repeat it for each row, so this is not a viable option. You can concatenate the static ID part ("details-button") with the ID value of the Grid dataItem and in this way you will have truly unique detail button IDs.
template: "<input id='details-button#: MyGridItemID #' />"
Then, change the Kendo UI Popup initialization code to use the generated button ID.
Update
The Kendo UI Popup initialization statement cannot use a binding expression (#: ... #), because it is placed outside the Kendo UI column template. Use the dataItem object that is passed to the showDetails function and retrieve and concatenate myId again for the anchor setting.
Update 2
It appears that you are creating a new Kendo UI Popup instance from the same element over and over agan. I recommend you to destroy the old instance (which will also remove its DOM), then append a new <div> to the page and create a new Popup from it.
I am not sure about the popupp part, it may be a copy-paste error or you should be getting a JS error there.
Update 3
On a side note, a similar behavior can be achieved with a single Kendo UI Tooltip instance that is configured in the following way:
the tooltip widget element is the Grid table
there is an appropriate filter set, that points to the detail buttons, e.g. via a CSS class of theirs
showOn is set to "click"
use the content function to set the tooltip content, depending on the current target.
http://docs.telerik.com/kendo-ui/api/javascript/ui/tooltip
I am trying to hide the edit buttons from the table if the user does not have the access. However the problem I am having is that I can't seem to edit the data that I have appended from Firebase. The following code would remove all other buttons with that class on the page, but not the ones appended using the below function.
$(".editBtn").css("display", "none");
var currentGroupUsersRef = new Firebase(FB + "/groupUsers/" + currentGroup);
currentGroupUsersRef.on('child_added', function(snapshot){
$('#groupPage table').append('<tr><td>one</td><td><button class="editBtn">Edit</button></td></tr>');
});
I have tried replicating the problem in jsfiddle but can't replicate it without actually loading it from firebase for some reason.
If you look at your code snippet, it executes like this:
Hide all edit buttons
When new data arrives from Firebase, generate an edit button for it
The fact that your edit button doesn't hide comes from the fact that you dynamically create the button after the code that hides them has completed.
You'll either have to:
use a dynamic selector, which is jQuery's construct that matches dynamically created elements
hide each button as you create it
I'd opt for #2:
$('#groupPage table').append('<tr><td>one</td><td><button style="display: none" class="editBtn">Edit</button></td></tr>');
Try this
$(".editBtn").css("display", "none");
$(document).on('child_added', function(snapshot){
$('#groupPage table').append('<tr><td>one</td><td><button class="editBtn">Edit</button></td></tr>');
});
I am new to jQuery so please go easy, I have a form that will represent an Advanced Search. Users will be able to add rows to refine their specific search.
Each row has 3 elements: A Checkbox & 2 x Select boxes.
As can be seen in the fiddle I am using jquery to clone the row and place the cloned row after the last row.
Everything is working fine except visually I would like the checkbox to use Bootstrap-Switch http://www.bootstrap-switch.org/
And the select boxes to use Selectize https://github.com/brianreavis/selectize.js
Now, when I clone the row with these plugins not active, everything works.
I have NO idea how to re-render or re activate them once a new row is inserted.
Is this something that is plugin specific? Or kind of universal to jquery?
I have read HEAPS of answers on here about similar things but I cannot seem to get it right.
Here is the jquery snippet:
$adSearchForm = $('#adSearchForm');
$adSearchForm.on('click', 'button, input, select, option', function (event) {
console.log("Button Clicked", event)
});
$('#addSearchRow').click(function(event){
$('[data-content=adSearch-3]:first').clone().insertAfter('[data-content=adSearch-3]:last');
// $('.searchByField,.searchOperator').selectize({refreshItems: true});
// $('[data-toggle=switch]').bootstrapSwitch({refreshItems: true});
});
Here is the fiddle, hope its ok. http://jsfiddle.net/CkVQr/6/
Thankyou very much for your help.
Cheers
Plugins change your HTML
There are two major problems you may not be fully aware of with your code:
Whenever you do a .clone() it merely deep clones your DOM element subtree, but not any event handlers bound to cloned elements.
Your .selectize() plugin changes HTML of your form quite considerably, converting input elements to other things. So whenever you clone your already converted select filter row, and subsequently want to run .selectize() on it again, this particular plugin won't find any suitable input elements to convert. Hence it won't work. Everything will just look as it should but won't work.
What can be done?
The main idea is that whenever you clone your search filter row, you have to clone your original HTML and not after it was converted using your plugins.
HTML Templates to the rescue
One of the possibilities is to change you page (and functionality) a bit and put your search filter row in a template and always use that. When you create your first row, you should read the template (and cache it) and add+convert it on your page. When you'd add an additional row, just use the same cached template and add+convert it again.
HTML template
<script id="filterRow" type="text/x-template">
<!-- Your filter rown HTML goes in here -->
</script>
Some Javascript
var cachedTemplate = cachedTemplate || $("#filterRow").html();
...
$('#addSearchRow').click(function(evt) {
var newRow = cachedTemplate.clone(); // clone for reusability
newRow.insertAfter('[data-content=adSearch-3]:last');
newRow.selectize();
...
});
In Typeahead JS I'm trying to add an option that appears at the bottom of the dropdown after the user has started typing. Currently I'm using the 'onOpened' Custom Event to trigger adding some HTML after the 'tt-dropdown-menu' element is initialised.
.on('typeahead:opened', onOpened)
function onOpened($e) {
$('.tt-dropdown-menu').html( "Add Option" );
}
The problem is that the jQuery HTML is added when the dropdown is initialised, as expected, then when the user starts typing the new dataset element with the autocomplete results in is added below that jQuery HTML so the jQuery HTML can never appear at the bottom of the dropdown. You can't append the jQuery HTML to the dataset either as that element doesn't exist when the dropdown is initialised.
Is there an easier way around this? The other Custom Events don't seem to cover this scenario.
If you only have one dataset, you can do as I do: add a footer to the dataset, and add it as a DOM element, not plain HTML string. You can then change it at will (say on any event you wish) and your changes are reflected in the dropdown.
Example:
$('#myinput').typeahead({
// rest of your regular stuff, like 'name', 'remote', etc.
footer: $('#dropdown-footer'),
});
... where dropdown-footer is the ID of a div you have somewhere in your dom. You can then do things like:
$('#dropdown-footer').html('Hello')
Im looking for a way to render an html table as an editable datgrid, with the ability to clone individual rows. I dont need to save any of the changes made, just superficially edit the cells because i then use a jquery plugin to scrape the table as is on screen and save it.
Ive tried jeditable, but its designed for posting the output of its edits to a page, not just superficially making the changes.
Ideally, i could control what types of inputs are displayed onclick based on what column they are on. The table cells are unnamed. If they need to be named, there are a total of 34 columns, so i would need to know how to name those individually.
Thanks in advance.
Jeditable's target can be a function (see the "Submitting to function instead of URL" section of the jeditable homepage) - you could pass an empty handler and use it.
[Edit]
The handler should return a string (that will be displayed on the page)
(taken from the example page)
$('#test').editable(function(value, settings) {
return(value);
}, {
type : 'textarea',
submit : 'OK',
});
It work nicely, I just tried it out.
[/Edit]