i use javascript made a function that every time i click button "add one more" button, html page will add another group of html elements, which i need to includes tinymce text area, but I cannot manage to do it.
here is part of my code,
<script>
$(document).ready(function (e) {
var html = '<textarea class="tinymce" name="CCV_product_full_description[]" id="childccv-product-full-description" />';
...
I defined tinymce in another js file and included in this html file, but it not works some how, i need some help :)
in another js file
tinymce.init({
selector:"textarea.tinymce"
});
here is the function for add another group of html elements
$("#add").click(function (e) {
$("#container").append(html);
});
It looks like you are trying to initialize the editor on DOM elements that don't yet exist.
Also, if you are trying to dynamically add several instances of TinyMCE, you need to remove TinyMCE first before you can call it again.
$("#add").on('click', function (e) {
e.preventDefault()
$("#container").append(html);
tinymce.remove()
tinymce.init({
selector:".yourSelectorName"
});
});
Related
Sometimes this script does not work, I am using it in a php file
<script type="text/javascript">
window.onload = function () {
var input = document.body.getElementById("thisActive");
input.focus();
input.select();
}
</script>
here is work
http://cartoon.22web.org/watch/s-watch/index.php
After the page load is complete, the script specifies the link to the page
===========================
But here using multiple pages http://wassim-al-ahmad.22web.org
not selected page selected
Just convert window to document like this:
document.onload = function () {
var input = document.body.getElementById("thisActive");
input.focus();
input.select();
}
JQuery version
$(document).ready(function () {
...
});
You have seen the code and the reason for the priority You are using JavaScript at the beginning of the code and then create a menu to select an item from a database using PHP multiple pages You must use the script at the end of the code
Use PHP to view the data from the database starting with the page order currently displayed. You do not need to use the script you have ever typed in your HTML code.
i had the same problems just you have to change your host if you used free host you must change the host to
I am using TinyMCE and I am trying to output what the user is currently typing to a div below the TinyMCE editor. I want the user to see how there post would look like rendered.
The script I am using is this:
<script type="text/javascript">
$(function () {
$('#tinymce').keyup(function () {
$('#myDIVTag').html('<b>' + $(this).val() + '</b>');
});
});
</script>
I have placed the corresponding div in my begin form in the view:
<div id="myDIVTag">
</div>
However nothing is being rendered as I type.
There is no fiddle, which makes thing harder - but it got pointed out in the comment that TinyMCE editor itself is hidden within <iframe> element. This seems to be the root of the issue.
To be able to access anything within iframe element with JavaScript, we must remember about Cross-Domain Policy. In short - if iframe has src attribute set to another domain, and website under this source doesn't explicitly let us access its contents within iframe - we won't be able to do it, end of the story. More: http://blog.cakemail.com/the-iframe-cross-domain-policy-problem/ .
Luckily, I'm pretty sure it won't be of any problem here - unless TinyMCE within our iframe gets served from another domain.
Given all that, here's the snippet that should do the trick. Please alter selectors for your needs (I pointed them out with comments):
$('iframe') // iframe element
.contents()
.find('textarea') // textarea/other input *within* iframe
.keyup(function () {
$('#myDIVTag').html('<b>' + $(this).val() + '</b>');
});
EDIT:
It got suggested in the comment (thanks #charlietfl!) that the proper way to approach this problem is to use TinyMCE API event, not generic binding to textarea element within iframe. Here's a quick answer taking that into account:
HTML:
<textarea id="tinymce-textarea"></textarea>
<div class="text-mirror"></div>
JS:
tinymce.init({
selector: "#tinymce-textarea",
setup: function (editor) {
editor.on('change', function (e) {
var newVal = tinymce.get('tinymce-textarea').getContent();
$('.text-mirror').html(newVal);
});
}
});
JSFiddle: http://jsfiddle.net/c1zncmt8/1/ .
Basically: we're binding to TinyMCE editor "change" event, and whenever it gets triggered we get value of our input (var newVal = ...) and put it into separate div (.text-mirror).
So I am making a website for radio streams and was told I should use Jquery and AJAX to load the HTML files into a div on button click so that I wouldn't have to make the user load a completely new HTML page for each radio stream. But I am a bit lost since I am new to this language and I am not entirely sure what I am doing wrong.
Currently I have a index.html page that loads each individual div and loads all the available radio stations in an iframe linking to an HTML file. In this HTML file there are around 40 buttons that each have to link to their own radio stream. On a button press I want said stream to load into the 'radio player' div for a smooth transition.
After trying to google the problem I was told to do this with the following JavaScript code:
$(function(){
$(".538").click(function(){
$("#div3").load("/includes/about-info.html");
});
});
Since each button is also showing its own image file, I tried to add class="538 to each image source so the JavaScript knows what is targeted. Unfortunately it doesn't seem to work at all and I have no clue what to do. I tried to do this in a separate index.js file which unfortunately didn't work, so I tried to use the JavaScript code in the HTML file itself, and this didn't seem to do the trick either.
TL/DR: trying to load HTML code in a div when an image button is clicked.
Is there perhaps a tutorial for this available? I tried to search the web but couldn't find anything at all. If anyone is able to help me out with this problem I'd love you forever.
I think what's happening is that you're working with dynamic elements. More importantly you should never use numbers to start off either a class name or id.
Unless you post a bit more code it's hard to figure out exactly what you're wanting to do.
If you work with dynamic html the click event won't work, because well you need do dynamically bind the event listener.
For that you can use
$('#dynamicElement').on('click', function() {
$(this).find('#elementYouWantToLoadInto').load('/includes/about-info.html');
});
The above code works if the element is nested in the button. If it's an external element then use.
$('#dynamicElement').on('click',function() {
$('#elementYouWantToLoadInto').load('/includes/abount-info.html');
});
You mentioned that this language is a bit new to you; If you're open to a bit of refactoring:
Your main page should have 2 sections:
<div id='myButtons'>
<input type='radio' data-url='/includes/about-info.html' />
<...>
</div>
<div id='myContent'></div>
<script>
$(function() { //jquery syntax - waits for the page to load before running
$('#myButtons').on('click', 'input', function() { // jquery: any click from an input inside of myButtons will be caught)
var button = $(this),
url = button.data('url'),
content = $('#myContent');
content.load(url);
});
</script>
Jquery: http://api.jquery.com/
you can try this
$('#myButtons').on('click', 'input', function() {
$.get("about-info.html", function(data) {
$("#div3").html(data);
});
});
or
$(document).ready(function(){
$(function(){
$(".radio538").click(function(){
$("#div3").load("/includes/about-info.html");
});
});
})
$(document).ready(function(){
$('#radio1').on('click',function(){
#('#loadradiohere').load('/includes/about-info.html');
});
});
Try that code in your .js file. I am still working for a similar project man.
Here is the problem. In my php submission page, I have a form with multiple fields including a textarea which is currently using TinyMCE and I also have an option for duplicating existing form. The thing is I can't edit the 2nd editor that was duplicated but the editor appear in textarea place. However I can edit and save 1st editor. I am not sure if its a bug or just me doing something wrong? I tried to update TinyMCE as well but didn't work.. any idea?
function initTinyMCE() {
tinyMCE.init({
mode : "textareas", //mode : "exact", elements : "mytextarea"
theme : "simple"
});
}
initTinyMCE();
$(document).ready( function(){
$('a#addmore').live('click', function(){
//*clone the existing form and inserting form here*
initTinyMCE();
});
$('a#toSubmit').live( 'click', function() {
tinyMCE.triggerSave();
$('.editwork-form').submit();
});
});
I can't seem to get .clone() to work, nothing in the debug console either. However, my working solution is as follows, maybe this helps?
initTinyMCE();
$("#append").live("click", function() {
var ta_count = $("textarea").length;
var elem = document.createElement("textarea");
$(elem).attr("id", ta_count.toString());
$(elem).appendTo("#ta_container");
initTinyMCE();
});
function initTinyMCE() {
tinyMCE.init({
mode: "textareas",
theme: "simple",
theme_advanced_path: false
});
}
Instead of .clone()ing the element, I'm just creating a new textarea and appending it to the container (using the count of all textareas on the page as it's ID to make it unique), then re-calling the tinyMCE initialiser.
Example jsFiddle
Make sure your textareas have different ids, otherwise there won't be a second editor instance! This is a crucial thing when creating tinymce editor instances.
I am using this jquery plugin for called tokeninput it's for autosuggestion when typing:
the code here generates the autosuggestion for the input box:
$("#input-auto").tokenInput("topicGet.php", {
theme: "facebook"
});
but when I try to append the input which uses the #input-auto it does not do the autosuggestion but it works when it's loaded on the page:
the code is here:
$('.topicEdit').live('click', function() {
$('#Qtopics').html('<input type="text" id="input-auto" />');
I'm trying to solve the problem, but I can't find anything, I also tried to put the live click on the .topicEdit, but it's still not working. :)) thanks
Looks like you're probably initializing the autosuggestion BEFORE you add the input into the DOM. You have to remember that jQuery is stupid, and only does things in the order that you tell it. When you initially 'generate' the autosuggestion, if it can't find it in the DOM at that moment, it won't do anything! So, to solve your problem, you'll want to do the generation of the autosuggest after you insert it into the DOM:
$('.topicEdit').live('click', function() {
$('#Qtopics').html('<input type="text" id="input-auto" />');
$("#input-auto").tokenInput("topicGet.php", {
theme: "facebook"
});
});
yay?
Calling tokenInput on page load when input-auto doesn't yet exist is your problem.
$('.topicEdit').live('click', function() {
$('#Qtopics').html('<input type="text" id="input-auto" />');
$("#input-auto").tokenInput("topicGet.php", {
theme: "facebook"
});
});
I'm not exactly sure what the problem is, but try using livequery plugin. You don't need to specify an event to it, just a function which will run for all current and future elements that match the selector.
Example:
$(".something").livequery(function () {
// do something with the element
}