Sweetalert overridden by bootstrap alert/confrim message box in yii2 - javascript

Problem (see title)
Yii2: Replace default confirmation message used by Gridview with Sweet alert
describes the initial problem and the fix that used to work. Now the fix no longer works. Something has changed in either bootstrap or kartik yii2-dialog that makes the work around for sweetalert in yii2 no longer a working workaround. :-)
The js/yii_overrides.js is loaded in, but the function are not used by yii’s event handler.
The javascript functions for ‘confirm’ that is used by the yii event handler points to yii2-dialog (kartik).
This can be found by running console.log(window.yii); when the document is ready.
Question: How does one disable kartik-v/yii2-dialog?
(the packages is required in composer by yii2-detail-view, yii2-grid and yii2-tree-manager (all kartik versions) as revealed by composer why kartik-v/yii2-dialog)
Perhaps disabling yii2-dialog is not the best solution to the problem, input is more than welcome. :-)
System:
Yii2-advanced app
PHP Version 7.2.11
Yii Version 2.0.17-dev
sweetalert Version 1.1.3
kartik-v/yii2-dialog Version 1.05
Tried:
Yii2: Replace default confirmation message used by Gridview with Sweet alert
When yii\bootstrap\BootstrapPluginAsset’ => [‘js’=>[]], is added to bundles in assetManager in components in (common\config\main.php)
The result is the desired sweetalert alert message, but then bootstrap modal and other things from bootstrap stop working.
If that line is not added then only the bootstrap alert message box comes up, and not the sweetalert message box.
(the line used above was taken from the following stackoverflow:
Yii2 disable Bootstrap Js, JQuery and CSS
)
Thank you for your time. Any help or pointers would be greatly appreciated.

in frontend bootstrap.php:
\Yii::$container->set('kartik\dialog\Dialog', ['overrideYiiConfirm' => false]);
it is a global override.

Related

Bootstrap 4 / Popper.js interfering with Autosuggestions

I have a feature that does address verification with smartystreets api I am also using a template with bootstrap4 / popper.js and jquery of course.
If you click both links, you will see the behavior. It will either break the address verification plugin or the design, but I cant figure out how to make them both work together.
The difference between the two is that one has class="form-control" whereas the other one does not. Something with the form-control class is triggering the behavior. The broken design link shows error in the console and aborts whatever process causes "display:none" to be added so the address suggestions work.
If I dont trigger that error, the address verification plugin removes the "display:none" but its immediately followed by something else in bootstrap or popper.js interfering and changing it back to display:none giving it just a blinking effect.
If anyone could take a closer look and point me in the right general direction.
if anyone else is using a template that contains autofill.js in the sourcemap of the material-design-bootstrap.js above just comment out this portion of the script as I mentioned above and it will work. Its a hack, not really an answer but it didnt seem to affect any other functionality as far as I could tell.

Kendo Drop Down List Widget breaks when filter property set

I have a kendo drop down list tied to a remote data source. I've followed the documentation and configured virtualization and the remote data source is working as intended, but if the Filter option is set at all, bluring out of the open drop down throws an error in JS, and selecting anything throws an error in JS. The only way to close the list is clicking on the close arrow in the drop down widget.
Below are screens of the errors i'm seeing in the console. 'Add' of undefined occurs when selecting an item:
'Attr' of undefined occurs when clicking outside of the drop down list to blur and close.
I'm at a loss here. Any addition of the filter option causes these errors. I've isolated that as the issue by systematically removing every possible option and the only thing that seems to prevent the errors from occurring is the filter option:
#(Html.Kendo().DropDownList()
.Name("MyDropDown")
.DataTextField("MyText")
.DataValueField("Id")
.Filter(FilterType.Contains) //<--This guy right here
...
..more code..
...
)
I've tried it in just JavaScript, I've tried it using the kendo ASP.NET MVC wrappers and the .ToClientTemplate option. I've tried it just using the MVC wrappers alone. I must be missing something but alas I do not see it.
EDIT: The issue seems to be happening in the close handler in kendo.all.js:
_closeHandler: function (e) {
if (this.trigger(CLOSE)) {
e.preventDefault();
} else {
this._focused.attr('aria-expanded', false);
this.ul.attr('aria-hidden', true);
}
},
When it goes to set the aria-expanded to false on close, the _focused property is undefined. This happens before the close event, as I tried to hook into close to see if there is something in there I can manually correct. Is there any reason why this script isn't working? Am I missing a file? Everything appears to be configured correctly, but nevertheless, the widget is broken.
Edit #2: I thought maybe there was something wrong with the kendo libs, or some mismatch between libraries, or that this was possibly a bug in an older version, so I udpated my kendo libraries and the mvc wrapper to the newest version (2018.1.117) and the exact same issue is still happening. I thought maybe there was a mismatch in jquery version somehow that was causing the issue, but according to the documentation, version 2018.1.117 requires jQuery version 1.12.4, which i'm using. Just updated all the libraries and dependencies and i'm still getting the error.
In setting up an isolated test of the issue, I stumbled on to a line in a 3rd party script that was hijacking jQuery.fn.focus, which apparently had some serious side effects. Removing this line in the 3rd party script appeared to fix the issue entirely.
Try .Filter("contains"), might do the trick.

Override a stock BootStrap javascript function

I'm generating a bootstrap modal using the following plugin which loads a form into a modal dynamically.
https://nakupanda.github.io/bootstrap3-dialog/
BootstrapDialog.show({
message: $('<div></div>').load('remote.html')
});
This page then loads another modal which is google reCaptcha control. This control has a button which becomes unresponsive.
I've figured that I need to override a function that natively comes in bootstrap as mentioned in this link Problems with new Google reCAPTCHA in IE when inside modal or dialog
This single line of code should do the overriding.
$.fn.modal.Constructor.prototype.enforceFocus = function () { };
It shouldn't be that difficult but I have spent almost 2 hours trying to figure out why my function isn't overriding the original BS function?
Also, if I put the above line of code in bootstrap.js file, then the override works. Anywhere else, it doesn't.
The code works in Firefox and Chrome, but fails in IE which is out of context but the fix is for IE.
Any help is much appreciated.

Facebook Comment Box Disappears in Accordian

I have two examples of Facebook comment box failing to load when an accordian is collapsed and reloaded. One HTML/JavaScript basic and the other in a Wordpress site via Visual Composer - this problem also occurs in numerous other accordions
HTML Example - http://iknowdigital.co.uk/htmlexample/
Wordpress Via Visual Composer http://thesingingmajor.co.uk/test-comment-box-martin/
I have contacted Facebook Support and Visual Composer support and neither can help out.
here are the replies
From VC
Hi Martin, The issue is not with the iframe, but the js that facebook comments use to render. It is not able to re-initialize itself when it is displayed as hidden and hence the issue occur. You can see that when you add nay iframe, it works fine without any issue. It is the js from the comments which is restricting it. As mentioned previously, it will require some custom js code to re-initialize this loading when the closed (hidden) accordion is opened. Kindly check.
From Facebook
Hi Martin,The issue here is the way the library is working. If you debug the code you'll see the plugin does not disappear, the issue is that the library is changing the width of the iframe that contains the plugin to 0 and you cannot see the comments plugin. In order to avoid this situation you will have to manually change the width value again and you'll see the comment plugin is still there. I'm going to close this bug as "By design" as this is not an issue in our side.
I'm not a javascript programmer, so am really at a loss here. Can anyone chip in with some advice here?
Thanks Martin

Bootstrap Modal does not open on click

I have a problem with the bootstrap modal function.
I try to open a modal when clicking on a button. In Bootply everything works fine, but in my document it's not working and I can't see why.
I try to use the modal in the portfolio section of this page
Here is my code snippet on bootply which is perfectly working...
Any Ideas???
If you take a look in for example Chrome's DevTools console you'll notice an error message like:
Uncaught Error: Bootstrap's JavaScript requires jQuery version 1.9.1
or higher
this either means that jQuery isn't loaded or that Bootstrap's JavaScript is loaded before jQuery.
If you take a look in your head section you'll see that the latter is the case. Make sure that js/jquery-1.11.1.min.js occurs before js/bootstrap.min.js.
P.S. it might be that the modal still doesn't work after these changes, but you need to fix this first.

Categories

Resources