Please help me on how to get the content of the froala editor. Just to display it on the console would be enough. Here is my code:
Template.myTemplate.events({
'click': function (event) {
var self = this;
return function (e, editor) {
var newHTML = editor.html.get();
console.log(newHTML);
}
}
});
I can not seem to display the content of the editor even in the console when I click the button. Thank you.
If you're not using the older version here is a working code:
Template.myTemplate.events({
'click': function (e) {
var html = $('.selector').editable('getHTML', true, true);
});
});
based on https://www.froala.com/wysiwyg-editor/docs/methods#getHTML
If you're using the v2.0 $('.selector').froalaEditor('html.get', true);
the .selector is where you initialize your froala editor, If you can show how you do that I can adjust it to it.
Related
I am looking for function for WooCommerce which change meta title text in non-active tab. Anybody know how can I do it? I find this JS code but it does not work in themes function.php file:
$(function() {
var message = "Don't forget us";
var original;
$(window).focus(function() {
if (original) {
document.title = original;
}
}).blur(function() {
var title = $('title').text();
if (title != message) {
original = title;
}
document.title = message;
});
});
The following goes into functions.php
add_action('wp_head', function () {
?>
<script>
(function () {
var message = "Don't forget us"
var original
jQuery(window).on("focus", function () {
if (original) {
document.title = original
}
}).on("blur", function () {
var title = jQuery("title").text()
if (title != message) {
original = title
}
document.title = message
})
})()
</script>
<?php
});
You can put that script into a tag <script></script> in the footer.php file wich should be located in your theme (don't forget to actually duplicate this file inside your child theme)
EDIT: Also make sur to have JQuery in your frontend
I am trying to load the carousel (swiper slider) inside some tabs in Elementor WordPress. The carousel works fine before clicking on tabs, but whenever I click on tabs, the carousel shows but does not "slide".
I have seen few questions regarding this topic and tried their solutions, but no luck.
Right now, I am trying this code in (child-theme/function.php) which is giving me an error:
Error -> "Uncaught TypeError: Cannot read property 'params' of undefined"
add_action('wp_footer', 'swiperCarousel', 9999999999);
function swiperCarousel() {
?>
<script>
var refreshSliders = function(){
jQuery( ".swiper-container" ).each(function( index ) {
swiperInstance = jQuery(this).data('swiper');
swiperInstance.params.observer = true;
swiperInstance.params.observeParents = true;
swiperInstance.update();
});
}
window.onload = function()
{
console.log('Document loaded');
jQuery("#aws-carousel-switcher").on("click", function(){
console.log('Tab has been clicked');
var $this = jQuery(this);
refreshSliders();
jQuery('html,body').animate({
scrollTop: $this.offset().top - 220
}, 500);
});
}
</script>
<?php
}
The error is being generated from this line:
swiperInstance.params.observer = true;
this will work for you.
jQuery(".swiper-container li").click(function(){
setTimeout(function(){ window.dispatchEvent(new Event('resize')); }, 1000);
})
select your respective tab selector.
I have made a contact form using "Gravity Form", in which I used image uploader. Now I want to display preview of image to user which is uploading. Is there anyway to achieve this?
Sorry, Late Answer
<script>
jQuery('#imgview').hide();
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
jQuery('#imgview').show();
reader.onload = function (e) {
jQuery('#imgview>img').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
// your File input id "#input_1_2"
jQuery(document).on("change","#input_1_2", function(){
readURL(this);
});
</script>
html block
<div id="imgview"><img src=""></div>
I am trying to create a extension in Firefox using sdk addon. What i want to do is to call an iframe inside a panel.
I have already created the extension for chrome and now i am trying to do it for firefox.
I have a facebook login in the iframe. Once i click on the sign in button the iframe just goes blank. If I log in before hand then also the extension doesnt work. It is as if it can't access the session.
Here is the code of my main.js file.
var { ToggleButton } = require('sdk/ui/button/toggle');
var panels = require("sdk/panel");
var data = require("sdk/self").data;
var {Cc, Ci} = require("chrome");
var tabs = require("sdk/tabs");
var title=tabs.activeTab.title;
var button = ToggleButton({
id: "my-button",
label: "my button",
icon: {
"16": "./logo1.png",
"32": "./logo1.png",
"64": "./logo1.png"
},
onChange: handleChange
});
var panel = panels.Panel({
width:450,
height:400,
contentURL: data.url("popup.html"),
onHide: handleHide
});
function handleChange(state) {
if (state.checked) {
panel.show({
position: button
});
}
}
function handleHide() {
button.state('window', {checked: false});
}
here is the code of my main javascript file that calls the iframe
$(document).ready(function() {
document.body.style.display = 'block';
var ur='xyz';
var frame = document.createElement('iframe');
var frame_url = 'https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/page-mod';
frame.setAttribute('width', '100%');
frame.setAttribute('height', '100%');
// frame.setAttribute('margin', '-10%');
frame.setAttribute('frameborder', 'none');
frame.setAttribute('id', 'rtmframe');
$('body').height(450).width(400);
frame.setAttribute('src', frame_url);
document.body.appendChild(frame);
$('iframe#rtmframe').load(function() {
$('#loadImg').hide();
});
});
This is not the actual link i am trying to open. Can anyone suggest what i can do differently. or point me to github code that might be doing the same thing.
Right now, the autocomplete box works just fine when I click on the location, but when I press down, highlight the location that I want to go to, and press enter, it simply goes back to the home location of the map. Any insights on this? I call this function in initialize(). I'm lost as to what I possibly did wrong. Is this just a google api bug? If so, any insights as to how to work around it?
function setupAutoComplete() {
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-90, -180),
new google.maps.LatLng(90, 180));
var input = document.getElementById('placeSearch');
var options = {
bounds: defaultBounds,
types: ['(regions)']
};
autocomplete = new google.maps.places.Autocomplete(input, options);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
alert('hi');
removeAllOverlays();
var place = autocomplete.getPlace();
var mapCenter = place.geometry.location;
var colLat = mapCenter.lat() - (halfPoints)*latSeparation;
var colLng = mapCenter.lng() - (halfPoints)*lngSeparation;
var tempStart = new google.maps.LatLng(colLat, colLng);
map.setCenter(mapCenter);
pointArray[0][0] = tempStart;
reService();
mapSearch();
drawBounds();
});
}
Thanks so much!
I guess the input#placeSearch is placed inside a <form>.
You submit the form when you press [ENTER].
You may either remove the surrounding form or cancel the submission by adding:
onsubmit="return false"
...to the form-element.
I just hit this issue and went with the following, as I do want to submit the form at a later stage. This code is from google groups.
var input = document.getElementById('create-location');
var options = {
//types: ['(cities)'],
};
autocomplete = new google.maps.places.Autocomplete(input, options);
google.maps.event.addDomListener(input, 'keydown', function(e) {
if (e.keyCode == 13)
{
if (e.preventDefault)
{
e.preventDefault();
}
else
{
// Since the google event handler framework does not handle early IE versions, we have to do it by our self. :-(
e.cancelBubble = true;
e.returnValue = false;
}
}
});