I'm trying to use formio and a 3-rd party framework formio-export but I'm having trouble getting started.
The author provided a sample of the framework on his github page. Demo can be found here.
I've tried to recreate a simple demo using HTML/JS.
I was able to create the form, load a submission on demand, but I'm unable to get the print functionality working. When I press the print button, I get the error:
Uncaught ReferenceError: FormioExport is not defined
at HTMLButtonElement. (:47:21)
at HTMLButtonElement.dispatch (index.js:3)
at HTMLButtonElement.elemData.handle (index.js:3)
A fiddle for your convenience.
I would expect the formio-export to 'just work' once the script tag is added but maybe it requires some additonal configs?
You can't use it in the browser directly. You must use node in order to import the module
import FormioExport from 'formio-export';
and then use
npm run build
to make a browser bundle (as explained in the github page).
I've created a new Foundation 5 project through bash, with foundation new my-project. When I open the index.html file in Chrome an Uncaught TypeError: a.indexOf is not a function error is shown in the console, originating in jquery.min.js:4.
I created the project following the steps on the foundation site, but I can't seem to get rid of this error. Foundation and jQuery look like they are included and linked up correctly in the index.html file, and the linked app.js file is including $(document).foundation();
Does anyone know what is causing this error? and what a solution might be?
This error might be caused by the jQuery event-aliases like .load(), .unload() or .error() that all are deprecated since jQuery 1.8. Lookup for these aliases in your code and replace them with the .on() method instead. For example, replace the following deprecated excerpt:
$(window).load(function(){...});
with the following:
$(window).on('load', function(){ ...});
Please add below jQuery Migrate Plugin
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.4.1.min.js"></script>
This error is often caused by incompatible jQuery versions. I encountered the same error with a foundation 6 repository. My repository was using jQuery 3, but foundation requires an earlier version. I then changed it and it worked.
If you look at the version of jQuery required by the foundation 5 dependencies it states "jquery": "~2.1.0".
Can you confirm that you are loading the correct version of jQuery?
I hope this helps.
I faced this issue too. I was using jquery.poptrox.min.js for image popping and zooming and I received an error which said:
“Uncaught TypeError: a.indexOf is not a function” error.
This is because indexOf was not supported in 3.3.1/jquery.min.js so a simple fix to this is to change it to an old version 2.1.0/jquery.min.js.
This fixed it for me.
One of the possible reasons is when you load jQuery TWICE ,like:
<script src='..../jquery.js'></script>
....
....
....
....
....
<script src='......./jquery.js'></script>
So, check your source code and remove duplicate jQuery load.
I'm using jQuery 3.3.1 and I received the same error, in my case, the URL was an Object vs a string.
What happened was, that I took URL = window.location - which returned an object. Once I've changed it into window.location.href - it worked w/o the e.indexOf error.
It's seems to be funny but no one take consideration of the following.
Discover if you are having a library that requires an old version of jQuery. If you can't discover the version, You can do it commenting and uncommenting every script line until you find it.
Open the library and find the author.
Search in google for an update of the library. 90% you will find it.
Update the reference of your obsolete library that requires and old version of jQuery.
IN ANY CASE NEVER DOWNGRADE YOUR JQUERY VERSION
I solved this by installing the correct version of Jquery that my project required using npm
I'm trying to get loadIntoLocation working, but I keep get the error message,
Property 'loadIntoLocation' does not exist on type 'DynamicComponentLoader'.
I've looked at other examples and used plunker and it works there, but I can't seem to get it working locally. I grep'd the Angular2 core and could not find any mention of a loadIntoLocation function.
How do I find out what version of angular2 I'm using? Can I upgrade? I just used npm install to deploy my environment.
That was removed a while ago as far as I remember. DynamicComponentLoader is deprecated anyway. Use ViewContainerRef.createComponent() instead.
For a full example see Angular 2 dynamic tabs with user-click chosen components
My visual composer plugin doesn't work. It stuck on the loading page. And it gives an error "TypeError: .template(...).trim is not a function"
Error is on this line of code:
this.$controls = $(.template(template, data, vc.template_options).trim()).addClass('vc_controls');
Please help me to fix this out.
Here is the error which I get:
If you are unable to solve this error by upgrading or downgrading your theme or plugin, you could at least make the below changes.
1. Open the following two files:
wp-content\plugins\js_composer\assets\js\frontend_editor\frontend_editor.js
wp-content\plugins\js_composer\assets\js\frontend_editor\custom_views.js
2. Replace
this.$controls = $( _.template( template, data, vc.template_options ).trim() ).addClass( 'vc_controls' );
with
this.$controls = $( ( "vc.template_options" ).trim() ).addClass( 'vc_controls' );
This will surely work.
Solution Goto file /wp-content/plugins/js_composer_salient/assets/js/dist/backend.min.js around line 4045:
======> Replace the code
html2element: function(html) {
var $template, attributes = {},
template = html;
$template = $(template(this.model.toJSON()).trim()), _.each($template.get(0).attributes, function(attr) {
attributes[attr.name] = attr.value
}), this.$el.attr(attributes).html($template.html()), this.setContent(), this.renderContent()
},
Upgrade to Visual Composer version 4.11.2+
Note Wordpress 4.5 compatibility was fixed on 13th April:
https://wpbakery.atlassian.net/wiki/display/VC/Release+Notes
You should try to fix this by up/downgrading your theme/plugin. But if you, like me, can't solve it this way and just need to do a quick hack to get past this particular problem, the following worked for me.
Edit the following two files:
wp-content\plugins\js_composer\assets\js\frontend_editor\frontend_editor.js
wp-content\plugins\js_composer\assets\js\frontend_editor\custom_views.js
Change a single line in each of them, adding (). Change:
this.$controls = $( _.template( template, data, vc.template_options ).trim() ).addClass( 'vc_controls' );
to:
this.$controls = $( _.template( template, data, vc.template_options )().trim() ).addClass( 'vc_controls' );
As Shady sherif said at Maulik's suggestion, this is what I've changed in 2 places at frontend-editor.min.js and it worked!! Thanks to you both!
Change this:
this.$controls=$(_.template(template,data,_.extend({},vc.template_options,{ evaluate:/\{#([\s\S]+?)#}/g})).trim()).addClass("vc_controls");
With this:
this.$controls=$(("vc.template_options").trim()).addClass("vc_controls");
UPDATE:
in current updates none of this is needed just replace the plugin
I had problem with WPBakery Page Builder in version 6.0.2.
Wordpress: Version 5.2.1
ERROR: Uncaught TypeError: window.vc.frame_window.jQuery is not a function at window.vc.ShortcodesBuilder.buildFromContent (frontend-editor.min.js? Ver = 6.0.2: 10)
at Object.vc.build (frontend-editor.min.js? ver = 6.0.2: 10)
at frontend-editor.min.js? ver = 6.0.2: 10
I was reluctant to upgrade, as there might be a bug. (But it is a fact that an update is bug fix)
Since the update to version 6.0.3 was not successful.
Solution:
Mine was restoring the backup of the whole site.
Tip: Never forget Backup.
This article suggests rolling back your worpress version prior to 4.5. http://forums.artbees.net/t/urgent-wordpress-4-5-broken-vc-backend-editor-workaround-fix-in-comments/2734
This is where you can find older versions of wp to install https://wordpress.org/download/release-archive/30
I haven't tried this myself just a suggestion.
If this is still a problem for you I solved this same error I was getting by manually updating my theme through ftp. I downloaded the latest version of the theme because automatic updates were not working. I kept wordpress version 4.5. Here are the steps I took as follows.
I renamed the theme example x-updating once uploaded named the current theme x-previous then changed x-updating to x and deleted x-previous.
I updated js_composer the same way as step 1. Uploaded latest version of js_composer which was bundled with the theme. This is updated in plugins outside the theme. At this point you should be able to update visual composer from the wp dashboard if it hasn't already.
This got vc working again but left me with some weird errors happening in vc_templates vc_column.php file. I had to manually comment out the trouble code to get the errors to go away.
These 3 steps are a little nerve racking if you are not familiar with uploading files directly to your public_html root directory of your website. Some themes may offer support and do the ftp uploading for you if you provide them with ftp username password.
One more thing to do is clear your cache for your website. In chrome you can clear your cache by going to chrome://settings/cookies enter website.com in the search bar and click remove all clearing all locally stored data for your website. Manual updating themes and plugins is recommended only if auto updates aren't possible then you do the above. For my theme and this same exact error in question I followed these really well-done steps https://community.theme.co/kb/updating-your-theme-and-plugins/. However this will be different depending which theme you have. And if you would rather roll back your wp version you can follow my original suggestion. But for me I like to have everything new and up-to-date.
One more important note if you do have this theme then I had to delete x-shortcodes plugin from plugins direcotry of my website because my updated theme uses cornerstone instead of x-shortcodes to process important shortcodes to make vc work properly. Another thing to know is none of your data should be harmed while uploading plugins and themes all the data/content is stored safely in your data-base not in your theme.
I tried the following solutions:
maulik`s (but there was no such files on my plugin folder - frontend_editor.js and custom_views.js, just a "vendors" folder on "/wp-content/plugins/js_composer/assets/js/frontend_editor"),
Amritosh pandey`s solution (does not work even after cache & history cleaning),
Berein`s solution (does not work too).
I solved the problem by using a Amritoshpandey's solution:
https://gist.github.com/levantoan/519bb0d42c9f7bd6c4d78ef1686bb848
("The following code has completely corrected my problems, I can load the page, add, clone, remove, etc")
The Amritoshpandey's code should be pasted in /wp-content/plugins/js_composer/assets/js/dist/backend.min.js instead of:
render:function(){var $shortcode_template_el=$("#vc_shortcode-template-"+this.model.get("shortcode"));if($shortcode_template_el.is("script"))this.html2element(_.template($shortcode_template_el.html(),this.model.toJSON(),vc.templateOptions["default"]));else{var params=this.model.get("params");$.ajax({type:"POST",url:window.ajaxurl,data:{action:"wpb_get_element_backend_html",data_element:this.model.get("shortcode"),data_width:_.isUndefined(params.width)?"1/1":params.width,_vcnonce:window.vcAdminNonce},dataType:"html",context:this}).done(function(html){this.html2element(html)})}return this.model.view=this,this.$controls_buttons=this.$el.find(".vc_controls > :first"),this},
If you have Visual Composer 4.9, just replace these 2 files from archive
- frontend-editor.min.js
- backend.min.js
path: /wp-content/plugins/js_composer/assets/js/dist
Don't forget to make a backup of your files.
https://yadi.sk/d/JH4cbtnH3UoU3F
click "download add"
(tested with VC 4.9 & WP 4.9.5)
I used version 4.10 and upload the file assets/js/frontend-editor.min.js to the same file in 4.12 version.
Note: I keep my version and update only this file. I things this issues risen after update my php version, but i dont sure about that.
That`s work fine.
I get this file here: https://www.downloadfreethemes.io/visual-composer-v5-0-1-page-builder-for-wordpress/
I have theme license.
Replacing file
> wp-content\plugins\js_composer\assets\js\frontend_editor\frontend_editor.js
> wp-content\plugins\js_composer\assets\js\frontend_editor\custom_views.js
is not a solution, you can download cracked version and resolve it:
https://www86.zippyshare.com/v/fguQVId6/file.html
1.Please Deactivate the plugin
2.Delete all the files from plugin folder (js_composer folder)
3.Download the Latest Version of Visual Composer
4.Add new Plugin --> and select the downloaded plugin -->Upload --->Activate
I have a Cisco JS library designed to work using JQuery 1.4.2 and I'm using latest 2.X version of JQuery on the UI page I'm developing.
Cisco Library
I'm using Jabberwerx.js file from the above library link.
The library works fine if the JQuery loaded is of 1.4 but fails to work with later versions of JQuery. If I use old version of Jquery my UI based on bootstrap doesn't work. I tried to use noConflict() but then I can not edit the entire library which is very huge. There are lots of webservice calls and functions on the library so upgrading it is very painstaking.
Is it possible to use a particular version of JQuery on this JS file and the rest of the application can use the latest version of JQuery?
The library has this code on it. Can we change this to make it work using old version of JQ.
(function(window)
{ var jQuery=function(selector,context)
{
return new jQuery.fn.init(selector,context);
},
_jQuery=window.jQuery,
_$=window.$,
}
I'm not looking at using different versions of JQuery on the same page but I'm trying to limit the usage of one version of JQuery to one of the JS files.
When you use different version of jquery then your code conflicts. So there may appear obvious errors.
To fix it, you need to use $.noConflict() passing a boolean parameter true.
jQuery.noConflict(true);
//removes jquery itself and allows you to work with different version of jquery
Example:
<script src="jquery-version-1.0"></script>
<script>//code for v-1</script>
<script>jQuery.noConflict(true);//remove jquery</script>
<script src="jquery-version-2.0"></script><!--use another version-->
<script>//code for v-2</script>
In addition to what Bhojendra Nepal's answer, You can also check the version of jQuery through the following Code :
var jq_version = $().jquery;
console.log(jq_version);
/* gives the version number like 1.7.1. So may be you can write an if condition around the version number. For e.g :*/
if(jq_version == '1.7.1'){
//do something for ver 1.7.1
}
There are even more ways to Check the version of jQuery. But I'm not sure if that would help much with the CISCO library you are using.