I'd appreciate any help on this. I have this DataTable with the last column being a button that spans various options such as Edit/Delete/View. Upon clicking that, it should delete the entire row. However, I'm not able to get the currently clicked element.
Here's my code
$('.dropdown-menu a').click(function(e){
console.log($(this).data('value'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td>
<span class="dropdown">
<button id="btnSearchDrop_{{ index }}" type="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="true"
class="btn btn-primary dropdown-toggle dropdown-menu-right"><i
class="ft-settings"></i></button>
<span id='selected' aria-labelledby=btnSearchDrop_{{ index }}" class="dropdown-menu mt-1 dropdown-menu-right">
<i class="ft-edit-2"></i> Edit
<i class="ft-trash-2"></i> Delete
<i class="ft-plus-circle primary"></i> View
</span>
</span>
</td>
This should log the id of tag but it doesn't.
I am not sure which version of jquery you are using but .data() function works in versions 1.4.3 and above. I tested your code here with jquery-3.3.1, which worked fine. Another way to get what you want would be to use .attr() function instead of .data() like:
alert($(this).attr('data-value'));
Related
I have a small question.
Building a system to manage bookings. Now I would like each booking to have its own individual dropdown menu.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
All of my lovely actions
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="?add_booking_queue&id={booking_id}">Add to queue</a>
<span class="dropdown-item" onclick="show_booking_summary({booking_id});">Another action</span>
<a class="dropdown-item" href="?download_pdf&id={booking_id}">Download booking PDF</a>
</div>
</div>
Some code just like this.
But in case I have about 1000 bookings listed in a single screen. This would generate such a load of HTML that it would work against me in loading time. And it would probably increase browser memory usage.
Now I would like to have this dropdown menu to be dynamically added.
For example adding a single button with this feature
<tr>
<td>ticket : 293823098</td>
<td>price : $59,-</td>
<td>name : Donald Trump</td>
<td><i class="fas fa-cog booking-action" data-id="238232"></i></td>
</tr>
Then when clicking on the .booking-action it adds the mentioned above dropdown. Or similar. Not restricted to. Just as a reference. And using the set data-id="238232" / or another tag that contains just this.
My problem is that I seem not to be able to find the code or start required to realise this.
All I am finding are right-click context menu's and that's not what I am after.
I am using the Bootstrap library and when I click the dropdown-toggle class this will show/hide the dropdown as expected (hence why its called toggle).
If I click the the image at the bottom of the HTML snippet this will activate the ng-click angular directive found in the javascript code.
This code simply does a check to see if the dropdown menu is displayed by checking to see if the .dropdown class has a class of 'open'. If not, then it will open the url passed in a new window, otherwise it will remove the 'open' class which hides the dropdown menu.
The issue I have is if I try to click the same .dropdown class to activate the dropdown again it only appears after I click two more times??
I'm obviously not doing the correct way to destroy the dropdown by removing the 'open' class can anyone suggest what I am doing wrong? If i don't click the image (and therefore not activate the ng-click this all works fine), so the issue is related to the doInteractionBodyEvent() and somehow i'm not 'destroying' the dropdown correctly.
// HTML
<div class="dropdown-toggle" type="button" id="dropdown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="material-icons">more_vert</span>
</div>
<div>
<div ng-if="interaction.media[0].image" class="image">
<a ng-click="doInteractionBodyEvent(interaction.media[0].href)">
<img ng-src="{{interaction.media[0].image.replace('amp;','')}}" />
</a>
</div>
</div>
// Javascript Angular Controller
$scope.doInteractionBodyEvent = function(url) {
if (angular.element('.dropdown').hasClass('open')) {
angular.element('.dropdown').removeClass('open');
} else {
$window.open(url, '_blank');
}
}
Remove the data-toggle="dropdown" from the HTML
<div class="dropdown-toggle" type="button" id="dropdown1" aria-haspopup="true" aria-expanded="true">
<span class="material-icons">more_vert</span>
</div>
Using Bootstrap v3.3.7 and jQuery v1.12.4, I am creating a component which activates a HTML popover.
Please see the code below.
Clicking the button activates the popover. However clicking the caret icon within the button does not do anything. Any idea why and how to resolve this?
Click here for the jsfiddle.
<a role="button" class="btn btn-default po" data-poc="#html1">Test 1 <span class="caret"></span></a>
<a role="button" class="btn btn-default po" data-poc="#html2">Test 2 <span class="caret"></span></a>
<div id="html1" class="hide">
<strong>This</strong> is a test!
</div>
<div id="html2" class="hide">
<strong>This</strong> is another test!
</div>
Use this
<a id="po1" class="btn btn-default" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Test <span class="caret"></span></a>
click here
I'm currently working on an ordering system that allows the user to choose a specified vendor from a dropdown-menu and comfirm their selection by clicking a seperate button.
A perfect example would be the Fallout 4 store page, where the "Order"-button is disabled until an item has actually been selected from the dropdown menu. (In my case there is only one dropdown menu).
I've got the following HTML:
<div class="col-md-12">
<div class="productRow">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-5">
<div class="dropdownPositionLeft">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Choose your platform!
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<!-- List of vendors -->
<li><a tabindex="-1">Item I</a></li>
<li><a tabindex="-1">Item II</a></li>
<li><a tabindex="-1">Item III</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-5">
<div class="dropdownPositionRight">
<!-- This is the button that confirms the selection and takes the user to the specified vendor from the dropdown menu -->
Order now!
</div>
</div>
</div>
</div>
And the following javascript that replaces the label of the dropdown-button:
$(".dropdown-menu li a").click(function(){
$(this).parents(".dropdown").find('.btn').html($(this).text() + ' <span class="caret"></span>');
$(this).parents(".dropdown").find('.btn').val($(this).data('value'));}
I want the "Ordner now"-button to be able to receive an external link to a vendor based on the dropdown menu. Meaning I would need to pass a variable to the button from the dropdown menu - So far I haven't managed to succeed in this.
I'm very new to both bootstrap and javascript and was hoping someone here might point me in the right direction as to how I should handle this.
I'm assuming I should be able to store an href-value with the items in the dropdown-menu and pass them on to the order-button when selected, but I've had no luck in trying to figure this out while at the same time not pointing the player directly to the vendor through the dropwdown-menu.
I've also experimented with forms without the desired effect. Obviously I'm doing something wrong, but not sure as to what it is.
Check out the information for using bootstrap buttons here: http://v4-alpha.getbootstrap.com/components/buttons/
I usually take the button and then wrap it in the tag like this:
<button type="button" class="btn btn-primary" disabled>Primary</button>
Notice how I made the button disabled by default, then you can use javascript/jquery to remove the disabled attribute when a certain action is performed on the page.
As far as setting it based on a different box being selected, you can also set the href="" attribute using jquery if you want it to live update without reloading the page, or if you're not worried about the page needing to be reloaded, you could use inside the href quotes.
I want to add a new Button that deletes an editable li item from and UL element, that uses x-editable http://vitalets.github.io/x-editable/index.html library with bootstrap3, the html code is like, which is created dinamically.
<ul id='list'>
<li class='editable'>Editable element 1</li>
<li class='editable'>Editable element 2</li>
<li class='editable'>Editable element 3</li>
</ul>
and the javascript that adds x-editable behavior is:
$('#list .editable').editable();
To add button to the UI of x-editable I've done something like:
$.fn.editableform.buttons = '<button type="submit" class="btn btn-primary btn-sm editable-submit"><i class="glyphicon glyphicon-ok"></i></button>' +
'<button type="button" class="btn btn-default btn-sm editable-cancel"><i class="glyphicon glyphicon-remove"></i></button>'+
'<button type="button" class="btn btn-warning btn-sm editable-remove"><i class="glyphicon glyphicon-trash"></i></button>';
this jsfiddle shows the base work http://jsfiddle.net/fGU58/1/
I tried adding common click handler to the button but apparently the library stops the event to propagate.
Thanks in advance
You can probably try the following:
$(document).delegate(".editable-remove",'click',function(e){
$("#lista .editable-open[data-original-title]").remove();
});
Sometimes when you use a library and DOM elements are added using javascript the event desn't bind to the element, thats why I used delegate, you can use on instead but in this same format.
I noticed that x-editable adds a data-original-title attribute to the element being edited so I used that as a part of the selector.
Here's my FIDDLE