Develop Reference

How do I add an Iframe Block in Grapejs?

I want to let my users add Iframe-Content to their page that they create via GrapeJS.
For this I want to add an IFrame-Block to the GrapeJS editor, but I'm struggling to get it to work. Can anybody help?
There is this SO answer, but it only works for an older version of grapejs.
There is this plugin, but it also doesn't work for the current version
There should be a FrameComponent, but If I define a block with type "iframe", I get 'TypeError: m.render is not a function'

This was solved in the newest version
https://github.com/artf/grapesjs/releases/tag/v0.20.1
Thank you!

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.

Algolia and WordPress search page suddenly not working, console showing "Uncaught typeError"

I built a search page with WordPress & Algolia Search, and it's been working fine for a few months, but suddenly, I am getting the following error:
Uncaught TypeError: Cannot read property 'matchedWords' of undefined
The facet filters are no longer working and the search results are not being displayed.
Page in question is: https://habyts.com/activities-for-kids
I can't pinpoint anything having changed since it stopped working, so I don't really know how to fix this error.
The Algolia WordPress plugin has been updated a few days ago to 2.3.0, but I loaded the search page a few times after the update and it was working, it's only a day or so after the update that it broke and started showing the console error.
Please help!
Thanks in advance.

The Uncaught TypeError: Cannot read property 'matchedWords' of undefined error is raised because there is a field that no longer is present in your Algolia index.
From version 1.x to 2.x of the plugin, there have beens some changes and we have already seen this error once.
To solve it, you need to manually delete all the indices from your Algolia dashboard, and then trigger re-indexing of all the indices from the admin of the Algolia plugin.
In case you also did customize the autocomplete/search page template, you would need to make sure the fields used in those are still available in the data sent to Algolia.

I deleted all my Algolia Indices, and reindexed everything required, and reverted back to my old instantsearch hit template, which indeed worked again, with search highlighting working again.
One thing doesn't work though. I was previously using data.images.medium to display thumbnails of each search result. For some reason this no longer works, as in no image is displayed. There are no console errors present and I can't figure out what's changed.
I can get data.images.thumbnail working to display a thumbnail with each search result. I want however to grab a higher resolution image, which I was previously able to do using data.images.medium...
Any ideas?

I found out the answer from this post - https://discourse.algolia.com/t/image-size-on-instantsearch-page/1593/2
Since version 2.x, all image sizes are not returned with each search since it incurs performance issues.
To return custom image sizes other than thumbnails this code needs to be added to a plugin / functions file.
add_filter('algolia_post_images_sizes', function($sizes) {
$sizes[] = 'medium';
return $sizes;
});
Once this code has been added to functions or your own custom plugin file, you'll need to reindex everything and then your chosen custom image sizes should start to work.
Hopefully this is helpful.

Critical Error: Object doesn't support this property or method addeventlistener

actually I have a really weird problem, that I have been trying to solve for two weeks.
to begin with, I am using sharePoint 2010. we created two dashboards that fetch information from lists and then display them in a graphical form, simply the javaScript script using AJAX get the list and then use the information. its worth mentioning that I am using Jquery
here is a picture of what I am talking about:
lets say this is dashboard1
is working like a charm in all browser even internet explorer
the problem is with another dashboard, dashboard2,
the problem with dashboard2 is that, a jquery problem as I copied from the console:
Critical Error: Object doesn't support this property or method addeventlistener
to get what I mean, the navigation bars on the right get its html from the list that I fetch and I use jquery and bootstrab for collapse , this is how the not working page looks like:
the navigation bar doesn't get its items, the graphs don't load
I have tried this fix but it didn't work.
what I suspected is that, this problem is related to sharePoint somehow,let me tell you what else I have tried, I made another copy of the index.html which is the main index page for dashboard1 the working dashboard, and I called it test.html which has exactly the same code, its supposed to work right ? because this is just a copy of the index.html that is working in internet explorer and all browsers, but surprisingly it didn't work and I got the same error that I got when I run the other index2.html the one for the other dashboard (dashboard2).
what can cause this problem? and fixes can I try? Its nothing related to the code ( I can share the code if you want) but its a bug related to sharepoint or Microsoft explorer or both !
Critical Error: Object doesn't support this property or method addeventlistener

Opera: trouble with adding 'list' attribute

Today I've decided to add html5 datalist to certain input via user script. Here's the code. The problem is that list attribute isn't added. If I change it to anything different from list, like lst - it's there.
Is that supposed to be so? Is such behaviour set by specification or by browser?

OK, I did some research on this.
Spec says that input.list returns related datalist object, not the attribute value. So you should use setAttribute('list','edit-subject-themes') on input, which works fine. Seems like it was jQuery issue.
With problem solved, I'll sure use that technique in user JavaScript a lot :)