I am experimenting with javascript Modules. I can manage to retrieve modal content and display this in a reveal modal but when I want to close the modal I get a javascript error message and the modal does not close.
Here is the javascript code:
var Order = (function (window, document, $){
var Order = function(_id){
this.id = _id;
};
Order.prototype = {
id:null,
constructor: Order,
test: function(){
alert(this.id);
},
displayOrder: function(){
$.get("/orders/dialog_vieworder/"+this.id, function(data){
var modal = $("#content").append('<div data-reveal />').attr('class', 'reveal-modal').html(data);
modal.foundation('reveal', 'open');
});
}
};
return Order;
})(window, document, jQuery);
$(function(){
o1 = new Order(60000);
o1.displayOrder();
});
Here is the error message:
Uncaught TypeError: Cannot read property 'bg_class' of undefined
Help is very much appreciated
Either upgrade your foundation version, or change this...
If you have foundation.reveal.js
find this line
var settings = $('[data-reveal].open').data('reveal-init'),
bg_clicked = $(e.target)[0] === $('.' + settings.bg_class)[0];
and change the second line to this
bg_clicked = $(e.target)[0] === $('.' + ( settings ? settings.bg_class : null))[0];
If you have a minified version then do a search for bg_class
There should only be two. Find the line that will somewhat resemble this
i=e(t.target)[0]===e("." + r.bg_class)[0];
Then change it to this
i=e(t.target)[0]===e("." + (r?r.bg_class:null))[0];
You should be good to go.
Here is the issue on github
Foundation Github bug
Related
Hi i get a JS error in my browser inspector. But i dont understand whats wrong with my Jquery code. And why he consider this variable as undefined ... Could someone help me ?
The code works well; but i would prefer to remove the error:
Uncaught TypeError: varposlist is undefined
This is my js code:
$(function(){
var pane = $('.scroll-pane');
pane.jScrollPane({
});
var api = pane.data('jsp');
if(typeof localStorage!='undefined') {
//Get var from local storage
var menu = sessionStorage.getItem("menu");
var yposistock_rule = sessionStorage.getItem("yposistock_rule");
//Check menu view mode
if(menu == "arbo") {
// defined top from a#on anchor
var varposchapter = $('a#on_menuchapter').offset();
//add - 285 to put at same level than title
var vartop1 = varposchapter.top -285 -yposistock_rule;
if(scrollauto_rule == "oui") {
sessionStorage.removeItem("yposistock_rule");
};
api.scrollTo(0, vartop1);
return false;
}
else{
// defined top from a#on anchor
var varposlist = $('a#on_menulist').offset();
//add - 285 to put at same level than title
var vartop2 = varposlist.top -285 -yposistock_rule;
if(scrollauto_rule == "oui") {
sessionStorage.removeItem("yposistock_rule");
};
api.scrollTo(0, vartop2);
return false;
}
}
});
Any idea ? Thanks a lot.
The only thing I can think of is this line:
$('a#on_menulist').offset();
The # selects the element with the same ID. Unless you have an element with id=on_menulist, this code cannot find the id which then cannot find the offset.
I have a problem with Visual Composer, I have build a website, now I want to change the images of the homepage, but when I click the edit button to edit the image, I can select the image from the media gallery, but I can not save the image in Visual Composer to display it on my website.
My console throws this when I click the edit button of a image:
Uncaught TypeError: Cannot read property 'call' of undefined backend.min.js:2
The code at backend.min.js:2, unminified:
initDependency: function () {
var callDependencies = {};
_.each(this.mapped_params, function (param) {
if (_.isObject(param) && _.isObject(param.dependency)) {
var rules = param.dependency;
if (_.isString(param.dependency.element)) {
var $masters, $slave;
$masters = $("[name=" + param.dependency.element + "].wpb_vc_param_value", this.$content), $slave = $("[name= " + param.param_name + "].wpb_vc_param_value", this.$content), _.each($masters, function (master) {
var $master, name;
$master = $(master), name = $master.attr("name"), _.isArray(this.dependent_elements[$master.attr("name")]) || (this.dependent_elements[$master.attr("name")] = []), this.dependent_elements[$master.attr("name")].push($slave), !$master.data("dependentSet") && $master.attr("data-dependent-set", "true") && $master.bind("keyup change", this.hookDependent), callDependencies[name] || (callDependencies[name] = $master)
}, this)
}
_.isString(rules.callback) && window[rules.callback].call(this)
}
}, this), this.doCheckTabs = !1, _.each(callDependencies, function (obj) {
this.hookDependent({currentTarget: obj})
}, this), this.doCheckTabs = !0, this.checkTabs(), callDependencies = null
},
After researching the window variable, I know that the window[rules.callback] is undefined, it does not exist. The rules index is not visible in 'console.log(window)'.
I am using WordPress 4.6.1 and Visual Composer 4.12.1 with the WooPress theme, it worked very well.
Who can help me, please?
From backend.min.js I remove this part of code:
_.isString(rules.callback)&&window[rules.callback].call(this)
You may search this part of the code and delete it.
It's the only workaround.
The following code gives the alert and shows in the console, but it doesn't call the function - why could this be?
$('.eventSliderClass').on("swipe",function(event){
infoRectClick();
console.log('swiped!');
alert("Swiped!");
});
var infoRectClick = function() {
eventSlider.attr('display', '');
eventSliderContent.animate({'transform' : 't0,0'}, 250);
};
Also is there any reason why I can't seem to retrieve the id from a var and had to create a class?
I have created a custom plugin inside of tinyMCE 4. It pops up a modal window and displays images in a said directory. You pick the image, then it adds it to the content and closes the popup. I have it inserting the image into the content, but I can't seem to close the popup. I've tried many different ways and none of them work.
One of the errors I get is:
Uncaught TypeError: Cannot read property 'win' of undefined
That's happening with the current code which follows:
Plugin:
tinymce.PluginManager.add('imageuploads', function(editor, url) {
// Add a button that opens a window
editor.addButton('imageuploads', {
text: 'Insert Image',
icon: false,
onclick: function() {
// Open window
editor.windowManager.open({
title: "Insert Uploaded Image",
url: 'insertimage.php',
width: 700,
height: 600,
inline: true,
close_previous: "yes"
});
}
});
});
Plugin File:
$(document).ready(function(){
$('#submit-image-url').bind('click', function(){
var image_url = $('.image_choice:checked').val();
var insert_url = '<img src="/editor/uploads/' + image_url + '">';
parent.tinymce.activeEditor.selection.setContent(insert_url);
parent.tinymce.activeEditor.windowManager.close(this);
});
});
There is some HTML before that, but all it is is the images listed out with a radio input to determine which one is selected. Inserting works, but I can't seem to close the popup.
Any help would be greatly appreciated! Thanks!
The errors are coming from tinymce.js on line #22746, so the close() method is getting called. It just can't see the popup for some reason.
I fixed it with the following:
var ed = parent.tinymce.editors[0];
ed.windowManager.windows[0].close();
So, now my jQuery code looks like this:
$('.image_choice').bind('click', function(){
var image_url = $('.image_choice:checked').val();
var insert_url = '<img src="/editor/uploads/' + image_url + '">';
parent.tinymce.activeEditor.selection.setContent(insert_url);
var ed = parent.tinymce.editors[0];
ed.windowManager.windows[0].close();
});
I hope this helps someone that runs into the same problem. This one puzzled me for a few days now.
You can use this code, if your page has more than two TinyMCE editors:
tinymce.activeEditor.windowManager.close();
I used it for TinyMCE 4.
I was fighting with this for while too. I tried to implement TinyMCE 4: http://www.roxyfileman.com/ for MVC.
Changing this code helps me: win.tinyMCE.activeEditor.windowManager.close(); / win.tinyMCE.activeEditor.windowManager.windows[1].close();
In my case when I selected file, wrong popup get closed. Maybe it helps to someone ;)
try to use thi code `
<script type="text/javascript">
var parentWin = (!window.frameElement && window.dialogArguments) || opener || parent || top;
$(function() {
$('img').click(function(e){
e.preventDefault();
imgSrc = $(this).attr('src');
imgAlt = $(this).attr('alt');
divInput = $("input#"+parentWin.inputSrc,parent.document).parent().attr('id');
divInputSplit = divInput.split("_");
divTitle = "mce_"+(parseInt(divInputSplit[1],10) +1);
$("input#"+parentWin.inputSrc,parent.document).val(imgSrc);
$("input#"+divTitle,parent.document).val(imgAlt);
$(".mce-close",parent.document).last().trigger("click");
});
});
</script>
or visit tinymce4 file browser `
I have the following code:
// Load the widgets onto the canvas
function loadWidget(widgetNum) {
var objWidget = document.createElement("object");
objWidget.type = "text/html";
objWidget.data = "widgets/" + widgets[widgetNum].type + "." + widgets[widgetNum].ext + parent.debugURL // location of widget
objWidget.className = "widget";
var widgetName = "objWidget" + widgetNum;
objWidget.id = widgetName;
objWidget.addEventListener("load", widgetLoaded, false);
document.getElementById("widgetContainer").appendChild(objWidget); // Add object to dashboard canvas
return widgetName;
}
// finish widget setup once the widget is loaded
function widgetLoaded(e) {
var loadObj = e.currentTarget;
loadObj.style.setAttribute("display", "none"); // wait until fully customized before displaying
.....
at the last line I get an undefined is not a function error in Chrome (latest) but no errors in IE11. In Chrome if I put a breakpoint on the line I can inspect loadObj and its style, so it must exist, and the eventlistener wouldn't fire if the object is undefined. No jQuery.
So not sure what to do with this error in Chrome. Any tips?