In my vue project Iam using bootstrap vue datatable.Row-clicked, row-dblclicked events works fine in my b-table, but row-contextmenu event doesn't work.Is there anything else to do to get it fine???
here's a very simple JSFiddle which hopefully shows how you can use the row-contextmenu event in a Bootstrap-Vue <b-table>:
https://jsfiddle.net/adlaws/84onvtam/
There's not much to it, as you can see. Basically your table definition looks like this:
<b-table
:items="items"
#row-contextmenu="handleContextMenuEvent">
</b-table>
...and the JavaScript handler function (in the methods section) looks like this:
handleContextMenuEvent(item, index, event)
{
// stop browser context menu from appearing
event.preventDefault();
// log the selected item to the console
console.log(item);
}
In the JSFiddle you should see console logging output each time you right-click an item.
I hope that helps!
On user-registration confirmation I want to show a simple popup. For the moment, in order to simplify I'm happy to show an "Hello World".
This is the template file, views/templates/hook/registrationConfirm.tpl
<div id="idname" class="block">
<h1 class="title_block">HelloWorld</h1>
</div>
In my custom module I have this hook (which I know is being triggered doing debug):
public function hookActionCustomerAccountAdd($params) {
return $this->display(__FILE__, 'registrationConfirm.tpl');
}
It doesn't show anything (I also tried inspect the source code of the rendered page, but I dind't find the "HelloWorld")
Hooks starting by "Action" react to an action but do not display anything, but those starting with "Display" do.
You should also react to the hook displayCustomerAccount
public function hookActionCustomerAccountAdd() {
$this->is_new_account = true;
}
public function hookDisplayCustomerAccount()
{
if ($this->is_new_account) {
return $this->display(__FILE__, 'registrationConfirm.tpl');
}
}
I tried the solution posted by #shagshag but for some reason it doesn't work for me. So I share my solution (it's not pretty, nor efficient I think, but it seem to work for me): in the hookActionCustomerAccountAdd I save on a custom table (newCustomersTmp) email and customer id, because these are the data I need after, in the display Hook. Then in the hookDisplayCustomerAccount I check if an user with the current email ($this->context->customer->email) already exists in my table: if so I retrieve the data, do the actions I need with them and delete the row in the table.
i'm using the modal example from the bootstrap 3 docs. the modal works. however i need to access the show.bs.modal event when it fires. for now i'm just trying:
$('#myModal').on('show.bs.modal', function () {
alert('hi')
})
Nothing happens, the event does not fire. What am I doing wrong??? This doesn't make sense to me.
use this:
$(document).on('show.bs.modal','#myModal', function () {
alert('hi');
})
Make sure you put your on('shown.bs.modal') before instantiating the modal to pop up
$("#myModal").on("shown.bs.modal", function () {
alert('Hi');
});
$("#myModal").modal('show'); //This can also be $("#myModal").modal({ show: true });
or
$("#myModal").on("shown.bs.modal", function () {
alert('Hi');
}).modal('show');
To focus on a field, it is better to use the shown.bs.modal in stead of show.bs.modal but maybe for other reasons you want to hide something the the background or set something right before the modal starts showing, use the show.bs.modal function.
Wrap your function in $(document).ready(function() { }), or more simply, $(function() {. In CoffeeScript, this would look like
$ ->
$('#myModal').on 'show.bs.modal', (event)->
Without it, the JavaScript is executing before the document loads, and #myModal is not part of the DOM yet. Here is the Bootstrap reference.
$(document).on('shown.bs.modal','.modal', function () {
/// TODO EVENTS
});
Try this
$('#myModal').on('shown.bs.modal', function () {
alert('hi');
});
Using shown instead of show also make sure you have your semi colons at the end of your function and alert.
Add this:
$(document).ready(function(){
$(document).on('shown.bs.modal','.modal', function () {
// DO EVENTS
});
});
Similar thing happened to me and I have solved using setTimeout.
Bootstrap is using the following timeout to complete showing:
c.TRANSITION_DURATION=300,c.BACKDROP_TRANSITION_DURATION=150,
So using more than 300 must work and for me 200 is working:
$('#myModal').on('show.bs.modal', function (e) {
setTimeout(function(){
//Do something if necessary
}, 300);
})
In my case, I was missing the .modal-dialog div
Doesn't fire event: shown.bs.modal
<div id="loadingModal" class="modal fade">
<p>Loading...</p>
</div>
Does fire event: shown.bs.modal
<div id="loadingModal" class="modal fade">
<div class="modal-dialog">
<p>Loading...</p>
</div>
</div>
I had the same issue with bootstrap4.
The solution was to add it inside the jQuery document ready() function:
$(document).ready(function() {
$('#myModal').on('show.bs.modal', function () {
alert('hi')
})
}
This happens when code might been executed before and it's not showing up so you can add timeout() for it tp fire.
$(document).on('shown.bs.modal', function (event) {
setTimeout(function(){
alert("Hi");
},1000);
});
I had a similar but different problem and still unable to work when I use $('#myModal'). I was able to get it working when I use $(window).
My other problem is that I found that the show event would not fire if I stored my modal div html content in a javascript variable like.
var content="<div id='myModal' ...";
$(content).modal();
$(window).on('show.bs.modal', function (e) {
alert('show test');
});
the event never fired because it didn't occur
my fix was to include the divs in the html body
<body>
<div id='myModal'>
...
</div>
<script>
$('#myModal).modal();
$(window).on('show.bs.modal', function (e) {
alert('show test');
});
</script>
</body>
Remember to put the script after the call of "js/bootstrap", not before.
Had the same issue. For me it was that i loaded jquery twice in this order:
Loaded jQuery
Loaded Bootstrap
Loaded jQuery again
When jQuery was loaded the second time it somehow broke the references to bootstrap and the modal opened but the on('shown.bs..') method never fired.
Ensure that you are loading jQuery before you use Bootstrap. Sounds basic, but I was having issues catching these modal events and turns out the error was not with my code but that I was loading Bootstrap before jQuery.
Sometimes this doesn't work if:
1) you have an error in the java script code before your line with $('#myModal').on('show.bs.modal'...). To troubleshoot put an alert message before the line to see if it comes up when you load the page. To resolve eliminate JSs above to see which one is the problem
2) Another problem is if you load up the JS in wrong order. For example you can have the $('#myModal').on('show.bs.modal'...) part before you actually load JQuery.js. In that case your call will be ignored, so first in the HTML (view page source to be sure) check if the script link to JQuery is above your modal onShow call, otherwise it will be ignored. To troubleshoot put an alert inside the on show an one before. If you see the one before and not the one inside the onShow function it is clear that the function cannot execute. If the spelling is right more than likely your call to JQuery.js is not made or it is made after the onShow part
Make sure that you really use the bootstrap jquery modal and not another jquery modal.
Wasted way too much time on this...
In my case the problem was how travelsize comment.. The order of imports between bootstrap.js and jquery. Because I'am using the template Metronic and doesn't check before
i used jQuery's event delegation /bubbling... that worked for me. See below:
$(document).on('click', '#btnSubmit', function () {
alert('hi loo');
})
very good info too: https://learn.jquery.com/events/event-delegation/
The popular solution to put a setTimeout could work in some case, but is a terrible solution. I was myself using it amongst wraping it in $(document).ready() off course (but it never helped), but I was never able to have a reliable solution. Some browser/system take more time than other, and sometime 1000ms was not enough. And I was tired searching why the $(document).ready() wasn't helping, so :
I took a different approach.
I make the subscription to modal events when I need to use the modal for the first time.
Open my modal
and on the JS side :
function ShowModal() {
InitModalEventsOnce();
$('#MyModal').modal('show');
}
var InitModalEventsIsDone = false; // Flag to keep track of the subscribtion
function InitModalEventsOnce() {
if (!InitModalEventsIsDone) {
InitModalEventsIsDone = true;
$('#MyModal').on('shown.bs.modal', function () {
// something
})
$('#MyModal').on('hidden.bs.modal', function (e) {
// something
});
}
}
And that's it! The only reliable solution I found.
Try like this.
let mymodal=$('#myModal');
mymodal.on('show.bs.modal', function ()
{
alert('hi')
});
Below are the granular details:
show.bs.modal works while model dialog loading
shown.bs.modal worked to do any thing after loading. post rendering
I am trying to integrate yui editor in a cakephp form
the editor is attached to the textarea, I tried the handleSubmit option and it didn't work, so I went trying manual. so- I've attached a listener to the onsubmit, which is working.. or not.
Editor initialization ( a copy-paste from yui site, only element named changed):
(function() {
//Setup some private variables
var Dom = YAHOO.util.Dom,
Event = YAHOO.util.Event;
//The SimpleEditor config
var myConfig = {
height: '300px',
width: '99%',
focusAtStart: true
};
//Now let's load the SimpleEditor..
var myEditor = new YAHOO.widget.SimpleEditor('ArticleContent', myConfig);
myEditor.render();
})();
Initialization works fine (I assume) since the editor now holds the real content of that record field.
The onsubmit listener function:
function setTextArea()
{
alert('s');
var dd = myEditor.saveHTML();
alert('d');
return false;
}
The first alert is working, so the event is handled.
However, the second alert never happens. the form - somehow - is submitted before it.
and, the content is not saved.
further checks shows that ANY call to myEditor [even alert(myEditor)] is submitting the form...
anyone? help? i
just a guess, but is any code in the 'saveHTML' function calling something that clashes with cakephp functions?
if this is the problem, you may be able to get around it by modifying the yui code function names (hacky i know, but unless there is some way to use a custom namespace for it i think you'd be stuck with it)
The best solution was to use tinyMCE....
The CollapsiblePanelExtender seems primarily designed to collapse/expand things in response to user mouse events. Is there also a good way to get the extender to collapse/expand things in response to client-side javascript?
In my particular case, I have a number of CollapsiblePanelExtenders (and their corresponding Panels) on a page, and I'm wondering if I could implement an "expand all panels" button by doing something like this strictly on the client side:
for each CollapsiblePanelExtender on this page, call somethingOrOther(extender)
I can implement this logic server-side instead if I did a full postback, but my page takes a long time to load, and so this doesn't seem like it would provide a very slick user experience. Thus I am interested in doing expand/collapse client-side.
It seems like this isn't a use case the AJAX Control Toolkit people had in mind, but I thought I'd check.
Write the following code in the OnClick event of Image/button
<asp:Image ID="img1" runat="server" OnClick="ExpandCollapse()"/>
function ExpandCollapse() {
$find("collapsibleBehavior1").set_Collapsed(true);
$find("collapsibleBehavior2").set_Collapsed(true);
}
Hope this helps!
I have a partly working solution now.
I followed Ian's suggestion and looked through the toolkit source. In CollapsiblePanelBehavior.debug.js, you can that expandPanel() is apparently intended as part of the public interface for the behavior. There's also a get_Collapsed(). The key to accessing these behaviors in javascript seems to be setting the BehaviorID property on your CollapsiblePanelExtender tags in ASP.NET.
I modified the repeater on my page so that the BehaviorIDs are predictible, along these lines:
<ajaxToolkit:CollapsiblePanelExtender
BehaviorID="<%#'collapsebehavior'+DataBinder.Eval(Container.DataItem,'id')%>"
ID="CollapsiblePanelExtender" runat="server" />
This results with behaviors named collapsebehavior1, collapsebehavior2, collapsebehavior3, etc..
With this done, I'm able to expand all the collapsible panels on the client as follows:
function expandAll() {
var i = 0;
while (true) {
i++;
var name = 'collapsebehavior' + i;
var theBehavior = $find(name);
if (theBehavior) {
var isCollapsed = theBehavior.get_Collapsed();
if (isCollapsed) {
theBehavior.expandPanel();
}
} else {
// No more more panels to examine
break;
}
}
}
I'm sure using $find in a loop like that is really inefficient, but that's what I have so far.
Also, it doesn't work on Firefox for some reason. (On FF only the first element expands, and then there's a Javascript error inside the Control Toolkit code.)
This will all seem extremely ugly to all you javascript pros. Maybe I'll clean things up later, or you can help me out.
You can also just toggle the panels to switch between collapsed/expanded states:
function toggle() {
var MenuCollapser = $find("name");
MenuCollapser.togglePanel();
}