I am trying to create a text-area that gets dynamically loaded and automatically a TinyMCE editor gets applied.
In spite of the many topics covering this subjects and even some tutorials I do not seem to get it working.
I am possibly overlooking a very small item but if I only knew what..
The situation
Current install : TinyMCE 4.x + jQuery v1.10.1
A HTML page that loads a textarea through an AJAX call.
The I try to initialize the TinyMCE editor on the text-area.
There it fails.
FireBug error console tells me : ReferenceError: tinyMCE is not defined
But it has been defined. I even tried to set absolute paths.
<title>jQuery test file</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script src="//code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://domein1.nl/serene2/workspace/TinyMCE/tinymce_4.2.5_dev/tinymce/js/tinymce/classes/jquery.tinymce.js"></script>
<script type="text/javascript">
$(function() {
$('.EditorField').tinymce({
script_url: 'http://domein1.nl/serene2/workspace/TinyMCE/tinymce_4.2.5_dev/tinymce/js/tinymce/tinymce.jquery.min.js'
});
});
</script>
<script type="text/javascript">
jQuery(document).ready(function() {
$.get("test.php", function( EditorHTML ) {
$("#EditorSection").html( EditorHTML );
tinyMCE.execCommand('mceAddEditor', false, '.EditorField');
});
});
</script>
The HTML form code I use :
<form method="post" action="result.php">
<div>
<div id="EditorSection">
</div>
<br />
<input type="submit" name="save" value="Submit" />
<input type="reset" name="reset" value="Reset" />
</div>
</form>
And probably also very important the code loaded by AJAX :
<textarea name="TextArea1" cols="20" rows="2" class="EditorField" id="WysyWig" style="background-color: red; width: 100%; height: 700px;">
Dynamically loaded text-area content
I tried multiple options here:
tinyMCE.execCommand('mceFocus', false, '.EditorField');
tinyMCE.execCommand('mceAddEditor', true, '.EditorField');
Or directly by the ID itself. shouldn't make a difference
tinyMCE.execCommand('mceAddControl', false, '#WysyWig');
I hope someone sees what I am overlooking.
Replace your script tags by one :
<script type="text/javascript">
jQuery(document).ready(function() {
$.get("test.php", function( EditorHTML ) {
$("#EditorSection")
.html( EditorHTML )
.find('.EditorField')
.tinymce({
script_url: 'http://domein1.nl/serene2/workspace/TinyMCE/tinymce_4.2.5_dev/tinymce/js/tinymce/tinymce.jquery.min.js'
});
tinyMCE.execCommand('mceAddEditor', false, '.EditorField');
});
});
</script>
Basically, you'll wait the Ajax response, and once it is in your DOM then you will initialize tinyMCE.
Related
I have a simple request for you brainies today. What i am trying to do is to activate a pop-up inside PHP tags. I have tested to see if the pop-up works by itself, and it does. My problem is the button, i have used the same setup elsewhere, but this time no cigar. I have also tried echoing the button inside the PHP tags but nothing happens.
My code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="Lib\JqueryUIcss.css">
<script src="Lib\Jquerylib.js"></script>
<script src="Lib\JqueryUI.js"></script>
</head>
<body>
<button type=" button" class="LeButton"> Clicky Clicky!</button>
<?php
if(isset($_POST['LeButton'])){
echo'<script> $(function() { $( "#dialog" ).dialog(); }); </script>';
echo'<div id="dialog" title="Basic dialog">';
echo'<p>Image:</p>'; </div>';}
?>
</body>
</html>
I tried specifying it as a function aswell and added onclick() to the button to call that function, nothing happend either. Mind that this is the first time i am ever using Javascript/jQuery.
I (kindly) lauched a bit about the echo <script> part.
Allow me to write you a piece of code, with explanation and documentation:
HTML button:
<button type="button" id="LeButton" class="LeButton"> Clicky Clicky! </button>
&
<div id="dialog" title="Basic dialog" style="visibility:hidden"><p>Image:</p> <img src="http://placehold.it/50x50" alt="Placeholder Image" /></div>
Explanation:
Your button needs an id value. Which is called 'LeButton' in this example.
Documentation:
https://www.w3schools.com/tags/att_id.asp
jQuery part:
<script>
jQuery(document).ready(function() {
/**
* #version 1.0.0.
*
* Do magic on button click 'LeButton'
*/
$("#LeButton").click(function() {
$("#dialog").css("visibility", 'visible'); // make the div visible.
$("#dialog").dialog(); // Post here your code on forexample poping up your modal.
});
});
</script>
Explanation:
Your tag can be placed on the bottom of your page. Your browser will 'read' the whole page. By saying '(document).ready', your script will be executed once the page has been red by your browser.
For the '.click' part it's a jQuery function you can use. So which
means: once id attribute 'LeButton' (#) is clicked, jQuery will
execute a function, which will alert text in this case.
Documentation:
https://api.jquery.com/click/
Note: Make sure you have jQuery included/enabled.
Link:
https://jquery.com/download/
Note from Simon Jensen:
You should elaborate that the Class-attribute is for styling and the
Id-attribute can be for whatever code or identifying purposes and are
unique. Therefore should people be careful with styling with the
Id-attribute as things might conflict at some point. The ID-attribute
is used to interact with the "#LeButton" attribute.
The PHP can't be run from the client. If you want the dialog to be shown onclick of the button, you must send the element before it's clicked, at the moment when it is sent to the client. You should have the dialog element hidden until the user clicks the button. It could be something like:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="Lib\JqueryUIcss.css">
<script src="Lib\Jquerylib.js"></script>
<script src="Lib\JqueryUI.js"></script>
</head>
<body>
<button type=" button" class="LeButton" onclick="$('#dialog').dialog()"> Clicky Clicky!</button>
<div id="dialog" title="Basic dialog" style="display:none">
<p>Image:</p>
</div>
</body>
</html>
You could also change the onclick attribute to a script in the head like this:
<script>
$(function() {
$(".LeButton").click(function() {
$('#dialog').dialog();
});
});
</script>
I recommend you to change the class of the button for an id, and then using #LeButton instead of .LeButton
You can handle this on the client-side without the need to use PHP to do so you need to give your button a unique identifier so whenever the button is clicked you can open the dialog using a simple evenlisener like so:
var dialog = $( "#dialog-form" ).dialog({
autoOpen: false,
height: 400,
width: 350,
modal: true,
close: function() {
// do stuff here whenever you close your dialog
}
});
document.getElementById('my-button').addEventListener('click', function () {
dialog.dialog('open');
});
#dialog-form {
background-color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<button type=" button" id="my-button" class="LeButton"> Clicky Clicky!</button>
<div id="dialog-form">
Name: <input><br/>
Password: <input type="passowrd">
</div>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="Lib\JqueryUIcss.css">
<script src="Lib\Jquerylib.js"></script>
<script src="Lib\JqueryUI.js"></script>
</head>
<body>
<form action="index.php" method="POST" enctype="multipart/form-data">
<input type="hidden" name="LeButton" value="an_arbitraty_value">
<input type="submit" class="LeButton">
</form>
<?php
if(isset($_POST['LeButton'])){
echo'<div id="dialog" title="Basic dialog">';
echo'<p>Image:</p></div>';
}
?>
</body>
</html>
When you load the html page $_POST['LeButton'] is not set. Therefore the intended dialog box wil not be generated in the page. In order to have $_POST['LeButton'] set, you should pass it to the html page first, hence the form I added.
Alternatively you could go for a full javascript solution like so:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
.hidden { display: none }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<button type=" button" class="LeButton" onclick="showDialog();">
Clicky Clicky!
</button>
<div id="dialog" title="Basic dialog" class="hidden">
<p>
This is the default dialog which is useful for displaying information.
The dialog window can be moved, resized and closed with the 'x' icon.
</p>
</div>
<script>
function showDialog() {
$( "#dialog" ).dialog();
};
</script>
</body>
</html>
I want to display a dialog box by clicking on the button in my JSP page.
Here is my code :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=10">
<meta charset="utf-8">
</head>
<body>
<form action="/HabilitationFaite" method="POST">
...
...
<div class="text-center">
<button type="submit" class="btn btn-default btn-lg" onclick="alerte_habilitation('Test!')">Envoyer</button>
</div>
</form>
</div>
<script type="text/javascript">
function alerte_habilitation( msg ){
var popup = $("<div></div>");
$(popup).append('<img src="img/bigWarning.png"
class="dialog-image">');
$(popup).append('<span class="dialog-msg">'+msg+'</span>');
var popupConf = {
autoOpen : true,
resizable : false,
draggable : false,
width : 500,
title : "Attention",
modal : true,
buttons : {
"OK": function () {
$(this).dialog("close");
}
}
};
$(popup).dialog( popupConf );
}
</script>
</body>
</html>
This code does not display the dialog box and i don't find a solution.
Thanks for your answers.
Finally, like as he said EduardVoid, i forget to include some jquery/bootstrap :
<script src="/js/lib/jquery-1.11.3.min.js"></script>
<script src="/js/lib/bootstrap.min.js"></script>
<script src="/js/lib/jquery-ui.js"></script>
You can use the Bootstrap Popover.
Bootstrap has many things ready for you, because if you write stuff on your own you might come up with problems already solved in popular libraries/frameworks. If you do not want to load the whole framework, bootstrap lets you load only the modules you need.
https://getbootstrap.com/docs/4.0/components/popovers/
I'm loading a reCaptcha using ajax. One of the lines in there from what gets returned from the other pages is the line below, and that line wont get loaded into my div when I use $(.cap).html(callBack);
This is the line
<script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6LcXq-oSAAAAAOgwSIew_xq6xkv1QUxrZbRcMz6n"></script>
Is this something that jQuery disallows? Or am I doing something wrong? How can I solve this? How can I get jquery returned from another page, into my <div>?
What I'm testing with, is simple:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>No Tile</title>
<script type="text/javascript" src="http://localhost/site/scripts/jQuery.js"></script>
<style type="text/css">
.user {
cursor: pointer;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
//$(".user").live("click",function() {
$(".user").click(function() {
data = "id=Hello"
$.ajax({
type:"GET",
url:"demo.php",
data:data,
dataType:"html",
beforeSend:function(html){
},
success: function(callBack){
$(".cap").html(callBack);
console.log(callBack);
},
error: function(page_data){
},
});
});
});
</script>
</head>
<body>
<div id="container">
<div class="cap">Hello</div>
<span class="user">Add User</span>
</div>
</body>
</html>
This is the line returned from the other page that wont get loaded into the div.
<script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6LcXq-oSAAAAAOgwSIew_xq6xkv1QUxrZbRcMz6n"></script>
The entire data returned
<script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6LcXq-oSAAAAAOgwSIew_xq6xkv1QUxrZbRcMz6n"></script>
<noscript>
<iframe src="http://www.google.com/recaptcha/api/noscript?k=6LcXq-oSAAAAAOgwSIew_xq6xkv1QUxrZbRcMz6n" height="300" width="500" frameborder="0"></iframe><br/>
<textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
<input type="hidden" name="recaptcha_response_field" value="manual_challenge"/>
</noscript>
It is not possible to return "script" tags, even in a string format. This is because of the way javascript works. You could however let your demo.php script return json. You should look that up yourself, but I don't believe there is another way to do this easily.
(well, worse practice, you could just return a string and parse the values out of it but ...). Anyway, if you assume you return a json object in the following format, you could just copy paste the rest in your success function and alter the object name to 'callback' ...
var json = {
type: "text/javascript",
scriptSrc: "http://www.google.com/recaptcha/api/challenge?k=6LcXq-oSAAAAAOgwSIew_xq6xkv1QUxrZbRcMz6n",
id: "theFrame",
iframeSrc: 'http://www.google.com/recaptcha/api/noscript?k=6LcXq-oSAAAAAOgwSIew_xq6xkv1QUxrZbRcMz6n'
};
var script = document.createElement('script');
script.type = json.type;
script.src = json.scriptSrc;
$('<iframe>', {
src: json.iframeSrc,
id: json.id,
frameborder: 0,
height: 300,
width: 500
}).appendTo('.cap');
jsFiddle: http://jsfiddle.net/vT3Ug/1/
It actually is possible to render javascript tags. e.g. html5 boilertemplate uses it to see if it should load jQuery local or from CDN.
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
As you can see if you inject script tags you need to escape the closing script tag <\/script>.
On the other hand, you can't do this
<noscript>
<iframe src="http://www.google.com/recaptcha/api/noscript?k=6LcXq-oSAAAAAOgwSIew_xq6xkv1QUxrZbRcMz6n" height="300" width="500" frameborder="0"></iframe><br/>
<textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
<input type="hidden" name="recaptcha_response_field" value="manual_challenge"/>
</noscript>
simply because you do not own the iframe source, your iframe won't get rendered.
But you could do something like this:
callBack = callBack.replace('</script','<\/script')
.replace('<noscript>','')
.replace('</noscript>','');
$('body').append(callback);
My HTML file:
<html>
<head>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>
Login
</title>
</head>
<body>
<div class=loginForm>
<p>Worker-ID:<input type=text id=workerID name=workerID /></p>
<p>Password:<input type=password id=workerPassword name=workerPassword /></p>
<input type=submit id=submitLogin name=submitLogin value="Log in"/>
</div>
</body>
</html>
My scripts.js:
$('#workerID').keyup(function() {
alert('key up');
);
It doesn't work at all. I tried everything space,one letter, numbers. The alert doesn't show up. Where is the mistake?
Apart from a typo around your missing }, when your script.js file runs (in the <head> section), the rest of your document does not exist. The easiest way to work around this is to wrap your script in a document ready handler, eg
jQuery(function($) {
$('#workerID').on('keyup', function() {
alert('key up');
});
});
Alternatively, you could move your script to the bottom of the document, eg
<script src="js/scripts.js"></script>
</body>
</html>
or use event delegation which allows you to bind events to a parent element (or the document), eg
$(document).on('keyup', '#workerID', function() {
alert('key up');
});
You're missing the curly bracket to close the function:
$('#workerID').keyup(function() {
alert('key up');
});
Errors like these are usually seen in the browser's JavaScript console.
in HTML
inser id, name,vale in " "
<div class="loginForm">
<p>Worker-ID:<input type="text" id="workerID" name="workerID" /></p>
<p>Password:<input type="password" id="workerPassword" name="workerPassword" /></p>
<input type="submit" id="submitLogin" name="submitLogin" value="Log in"/>
</div>
in js
$('#workerID').keyup(function() {
alert('key up');} // here you forget "}"
);
demo
Syntax is wrong see here
$( document ).ready(function() {
$( "#workerID" ).keyup(function() {
.....................
});
});
change ); to });
Ok, I saw this tutorial http://css-tricks.com/dynamic-page-replacing-content/, pretty cool actually!
My problem is as flows, I have a page that not only has contents but also specific javascript content, and css. Is there a way to load those files dynamically, would It be correct? What if I have a hard coded on the page, how would I load that css/js script?
Thanks in advance.
[Edit]
Some code:
<html>
<head>
<script type="text/javascript" src="..."></script>
<script type="text/javascript">
$(document).ready(
alert('the document has finished loading!!');
// do form validation and send
)
</script>
</head>
<body>
Please Full the necesary (*) Fields
<form method="post" action="testing.php" id="test" name="test">
(*)<input type="text" name="fullname" />
<input type="submit" value="Send" />
</form>
</body>
</html>
Let's say I wanna load that page dynamicaly and load the validation and related javascript placed on header. Should load files readeing the headers? how can I know which one had been already loaded?
Thanks for the answers!
"I guess he means hard-coded, static. – Utkanos" - Edited
You can change the CSS stylesheet dynamicly by changing the href attribute.
Javascript can also be loaded dynamicly by loading the script self into the div or by writing the script src to it.
Here an simple example:
CSS 1:
body {
background: black;
color: #333;
}
CSS 2:
body {
background: red;
color: white;
}
HTML:
<html>
<head>
<title>Test page</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<link href="/includes/css/test1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>TEST!!!!!</h1>
<div id="code"></div>
<input type="button" id="but" value="click!" />
<script>
var css = 1;
$('#but').click(function() {
if(css == 1) {
css = 2;
} else {
css = 1;
}
$('link').attr('href', '/includes/css/test' + css + '.css');
//test();
test2();
});
function test2() {
$('#code').html("<script>alert(\"It works!!!\");<\/script>");
//Or parse the src
//$('#code').html("<script src=\"js/your_js_file.js"><\/script>")
}
</script>
</body>
</html>
So it's posible to load CSS and Js into your page after the page is loaded.
Hope this helps!