I am trying to trigger click() function on a button in onNext event.
{
element: "#action_header",
title: "Saving to database",
content: "After you declare the result .. ",
placement: "left",
onNext: function() {
$('.dropdown-toggle').click();
}
},
{
element: "#slideshow",
title: "Settings",
content: "Click on the Settings icon... ",
placement: "left",
// delay: 200,
// onShow: function() {
// $('.dropdown-toggle').click();
// }
},
But this will only highlight the button and show the `next step modal` elsewhere instead of specified element.
Here's the html:
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-cog"></i></button>
<ul class="dropdown-menu" role="menu">
<li class="active"><a id="detail_view" href="javascript:;">Detail View</a></li>
<li><a id="slideshow" href="javascript:;" onclick="adminSlideshowRedirect();">Slideshow</a></li>
</ul>
</div>
When I trigger $('.dropdown-toggle').click() from the console, the button is being clicked properly.
What am I doing wrong here?
The issue is your dropdown is being clicked, but it is toggled again, due to onBlur toggle of your dropdown. You need to remove onBlur toggle and it will work fine.
Related
I have a table that the last column is a div where I have three options (View, Edit and delete). This sub menu is always hidden, but when I click in the options button that is the last column of my table, the array that I use to control what is showing is updated to true (it should be showing), but nothing happened in my page.
Here is my HTML code
<td class="kt-datatable__cell">
<span style="overflow: visible; position: relative; width: 197px;">
<center>
<div class="dropdown">
<a data-toggle="dropdown" class="btn btn-sm btn-clean btn-icon btn-icon-md" #click="toggleHover(index)"
v-bind:class="{'show': hover[index]}">
<i class="flaticon2-shield"></i>
</a>
<div v-bind:class="{'show': hover[index]}" class="dropdown-menu">
And here is my method that I call using #click
methods: {
toggleHover(index) {
this.hover[index] = !this.hover[index];
}
If I set true for a random position right after I get the data from the server, it shows, but when I try to change this by clicking, nothing happens.
It's a reactivity caveat, so you should do :
methods: {
toggleHover(index) {
this.$set(this.hover,index , !this.hover[index]);
}
I've been trying to work with a reload button that will load the datatable data, but whenever i press the button, the table is not reloading or not loading the new content.
Here's my code for Datatable
var table = $('#m_table_1').dataTable({
responsive: true,
searchDelay: 500,
processing: true,
serverSide: true,
ajax: 'http://digitalbulletinboard.xyz/bulletin/sample.php?getLostTable',
columns: [
{data: 'id'},
{data: 'title'},
{data: 'description'},
{data: 'Actions'},
],
columnDefs: [
{
targets: -1,
title: 'Actions',
orderable: false,
render: function(data, type, full, meta) {
console.log(data);
return `
<span class="dropdown">
<a href="#" class="btn m-btn m-btn--hover-brand m-btn--icon m-btn--icon-only m-btn--pill" data-toggle="dropdown" aria-expanded="true">
<i class="la la-ellipsis-h"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#"><i class="la la-edit"></i> Edit Details</a>
<a class="dropdown-item" href="#"><i class="la la-leaf"></i> Update Status</a>
<a class="dropdown-item" href="#"><i class="la la-print"></i> Generate Report</a>
</div>
</span>
<button type="button" class="m-portlet__nav-link btn m-btn m-btn--hover-brand m-btn--icon m-btn--icon-only m-btn--pill" title="View" id="reload">
<i class="la la-edit"></i>
</button>`;
},
}
],
});
And when clicking the reload button, I use this one
$("#reload").click(function () {
console.log("Reload");
table.api().ajax.reload(null, false);
});
Whenever i click the reload button. Nothing happens. is there a way to fix this? or something that I have done wrong?
I already tried but still nothing happens
$('#m_table_1').dataTable().api().ajax.reload();
Edit 1:
Changed the reload to
table.ajax.processing(null, false);
and got stuck to this one.
You didn't mention the version of DataTable you used. But for many cases situation you can try this one:
table.ajax.reload( null, false );
at least it works for latest version of DataTable.
Referenced from here: https://datatables.net/reference/api/ajax.reload()
I have the following inline styles for a dropdown menu list. I do not know how to make it in to 'click' using jQuery.
<button class="btn btn-primary mw" data-toggle="dropdown"><span class="caret">Subject</span></button>
<div class="dropdown-menu">
<a class="dropdown-item Business" onclick="selectBusiness()"> Business</a>
<a class="dropdown-item ICT" onclick="selectICT()"> ICT</a>
<a class="dropdown-item Arts" onclick="selectArts()"> Arts</a>
</div>
More information:
I tried to do this following code for a button and it's working fine. But as I said I do not know how to make it work for a dropdown menu.
var btn = document.querySelector("button.selectAll");
btn.addEventListener("click", selectAll);
....
Your input would be greatly appreciated!
If you want to use jQuery, you can add listener to the classes of each <a> inside your dropdown.
$(".Business").on('click', function() {
//selectBusiness() or your code here
});
$(".Arts").on('click', function() {
//selectarts() or your code here
});
$(".ICT").on('click', function() {
//selectICT() or your code here
});
Another solution would be to add a single listener for all your dropdown-items and then checking the content of the selected one.
$(".dropdown-item").on('click', function() {
switch ($(this).text()) {
case "Business":
selectBusiness();
break;
}
});
I created a "more" button at the bottom left of my site to display a menu.
When you click on the button, the + becomes x
I want that when you click + the click and scroll will be disabled on the page.
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdown-menu-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="fa-4x">
<span class="fa-layers fa-fw">
<i class="fas fa-circle"></i>
<i class="fa-inverse fas fa-plus" data-fa-transform="shrink-6"></i>
</span>
</div>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdown-menu-action">
<li><i class="fas fa-id-card fa-lg"></i> Créer mon profil</li>
</ul>
</div>
Here is my style sheet
.overlay-is-navbar-collapse {
overflow: hidden;
pointer-events: none;
}
Here is my JS file :
(function ($) {
$('#dropdown-menu-action').on('show.bs.dropdown', function () {
$('body').addClass('overlay-is-navbar-collapse');
});
$('#dropdown-menu-action').on('hide.bs.dropdown', function () {
$('body').removeClass('overlay-is-navbar-collapse');
});
})(window.jQuery);
UPDATE
The following code does not work. If I click outside, the menu closes but the class remains on body.
$('#dropdown-menu-action').on('click', () => {
$('body').toggleClass('overlay-is-navbar-collapse');
});
I have tried the following code, but it does not work :
$('#dropdown-menu-action').on('shown.bs.dropdown', function () {
$('body').addClass('overlay-is-navbar-collapse');
});
$('#dropdown-menu-action').on('hidden.bs.dropdown', function () {
$('body').removeClass('overlay-is-navbar-collapse');
});
In your JavaScript file, Add a click handler to toggle the body class name overlay-is-navbar-collapse
(function ($) {
$('#dropdown-menu-action').on('click', () => {
$('body').toggleClass('overlay-is-navbar-collapse');
});
})(window.jQuery);
And remove pointer-events: none from your CSS file, or you won't be able to click on the button again, once you have added the class name overlay-is-navbar-collapse.
.overlay-is-navbar-collapse {
overflow: hidden;
}
You could add a class to the body to disable scroll or edit the style directly on whatever axis you want, or all axis. body.class { overflow-y: hidden; }
I'm starting to think that this may not even be possible, but I'm trying to automate a backend management task for myself here by allowing multiple emails to be initiated at once.
I have a table with users. The last column of the table has a drop-down button with mailto links that initiate various emails to the user for that row. The column also has a checkbox next to the button. Here's a simplified snippet:
<table>
<tr>
<td>
User
</td>
<td>
<div class="btn-group individual-btn">
<a class="btn btn-default dropdown-toggle" href="#" data-toggle="dropdown">
Email User
<ul class="dropdown-menu">
<li>
<a class="no-open" href="mailto:user?subject=why&body=etc">
Why didn't you open?
</a>
<a class="no-open" href="mailto:user?subject=why&body=etc">
Why didn't you click?
</a>
<a class="no-open" href="mailto:user?subject=why&body=etc">
Why didn't you pay?
</a>
</ul>
</div>
<input type="checkbox" class="selected-row">
</td>
</tr>
<tr>
rinse and repeat...
At the end of the table I have a button with the same set of actions but the idea for this button is that clicking it will open an email for every selected user (as indicated by the checkbox).
<div class="btn-group master-btn">
<a class="btn btn-default dropdown-toggle" href="#" data-toggle="dropdown">
Email All Checked Users
<ul class="dropdown-menu">
<li class="email-items">
<a class="no-open" href="#">
Why didn't you open?
</a>
<a class="no-open" href="#">
Why didn't you click?
</a>
<a class="no-open" href="#">
Why didn't you pay?
</a>
</ul>
</div>
I thought the js might be this easy:
$(".master-btn .email-items a").click(function(e){
linkClass = "a." + $(this).attr("class").trim()
$(".selected-row:checked").prev(".individual-btn").find(linkClass)[0].click();
e.preventDefault();
});
But that only opened an email for the first selected row. So, I thought, well maybe the dom needs space between these clicks, so I'll iterate over each and put a delay in to simulate clicks; but same result: only the first selected row is emailed:
$(".master-btn .email-items a").click(function(e){
linkClass = "a." + $(this).attr("class").trim()
$(".selected-row:checked").each(function(i){
var self = this
setTimeout(function(){
$(self).prev(".individual-btn").find(linkClass)[0].click();
}, 2000*i);
});
e.preventDefault();
});
Any thoughts? Will the browser even allow this?
Working example: https://jsfiddle.net/gaboom/h81qov5g/
$("#send").on("click", function(event) {
event.preventDefault();
$("#iframes").empty();
$("#links a").each(function() {
setTimeout($.proxy(function() {
var popup = window.open($(this).attr("href"))
setTimeout($.proxy(function() {
this.close();
}, popup), 100);
}, this), 100)
})
})
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a id="send" href="#">CLICK TO SEND</a>
<div id="links" class="hidden">
John
Sarah
John
Sarah
John
Sarah
</div>
I think this is the fix:
$(".selected-row:checked").prev(".individual-btn").find(linkClass).each(function() {
$(this)[0].click();
});
When you use [0] on a jQuery object, it only returns the first DOM element in the collection, equivalent to .get(0). If you want an array of all DOM elements, you would have to use .get() (with no arguments it returns all the elements).