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>');
});
Related
Using jQuery UI Accordion to create dropdowns for a filter list.
http://89.151.89.43/uk/trade-essentials-column-radiators-1.html#usestorage
Inside the Header there is also a clear button (You need to select an option for it to appear) The CMS is generating this automatically, unfortunately it doesn't function because it's inside the H4 tag surrounding it.
You will see an onclick function on the clear-button, I would like to keep the button where it is but just allow it to function.
To recreate:
Go to the above link
Select an option on the left
Clear button should appear
Try click the 'Clear' button
The accordion should then close
What I want:
The function contained in the 'onclick' to clear all checkboxes that are under that header
Without seeing the source code, I can't give you an exact answer, but in general you want to do something like this:
$("#clear-button").click(function(event){
event.stopPropagation();
event.preventDefault();
log("clicked!");
});
Looking at your example page, there seems to be a lot code missing.
I would suggest something like:
$(".clear-button").on("click", function(event) {
event.preventDefault();
$(this).parent().parent().find(":checked").prop("checked", false);
});
When the button is clicked, after being generated dynamically, you will want to find the input elements that are within the parent div element. Since the button is within the h4, you have to find that parent div.
An example, not working, since I cannot find the OnFilter() function code. You could assign the click callback when the button is added instead of using the .on().
https://jsfiddle.net/Twisty/o4L504ya/
See the following Plunker:
https://plnkr.co/edit/gLFw26zoJeaM5qtPjCFg?p=preview
I have an element <sc-chart type="approved"></sc-chart> that hooks into the scChart directive to add a chart to the page (I've omitted that part of the code since that's not pertinent to this issue). After adding the chart I then want to create a group of buttons next to the chart populated with the names array (this array will not be static, it will be the result of a service call, so I can't hardcode the buttons).
I'm able to add the buttons okay and make them clickable. I'm even able to highlight them when they're selected. However, I'm having a hard time figuring out how/when to remove the "active" CSS class, when I've clicked away from the button. It may be something pretty simple I'm missing.
just add removeClass() function:
btn.on('click', {name: i}, function(event) {
$('.pill-btn').removeClass('active');
$(this).addClass('active');
alert(event.data.name);
});
plunker: https://plnkr.co/edit/6Nj4beNuJf1plZmPAs0z?p=preview
So my scenario goes like this:
I have 3 kind on item to show in div. There are three buttons on top of div and when user click any of the button items corresponding to that items are shown.
Items comes from backend and I am getting all the items loaded on page load as I also need them some where else also within same context.
Currently I am following show hide approach for the same .What I want to know is can there be any other approach that can be better then this in terms of code optimisation. User can also edit /add./remove item?
Here is my fiddle
$(document).ready(function(){
console.log($('.toggleItems'));
$('.toggleItems').click(function(){
$('.containers').hide();
var identifier = $(this).data('identifier');
console.log(identifier);
$('#'+identifier).show();
});
})
First order by items then use accordion jquery
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.
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();
...
});