Setcontent of tinymce from external file - javascript

How can I load a specific html template inside my TinyMCE editor?
I saw this code but it doesnt work in me;
$.get("hello.html", tinyMCE.activeEditor.setContent);
and then I tried this code so that it will automatically load;
$(window).load(function(){
$.get("../../../../app/views/tools/prooftemplate.phtml", tinyMCE.activeEditor.setContent);
});
but it doesnt work.

Try this:-
You need to pass along the data to a callback function then use that data in the function as I've done. Data from the file is then passed to "d" so we update tinyMCE with the newly loaded data.
$(window).load(function(){
$.get("../../../../app/views/tools/prooftemplate.phtml", function(d){
tinyMCE.activeEditor.setContent(d);
});
});

Related

Alternative to hide/show content with JS?

is there a better way to replace this kind of js function by simply collapse/toggle a div and show/hide its content?
$(function() {
$('#destselect').change(function(){
$('.dest').hide();
$('#' + $(this).val()).show();
});
});
The reason this is happening is because your js file is called on the head of your page.
Because of this, when you document.getElementsByClassName('collapsible');, colls result in an empty array, as your elements in body are not yet created.
You could either create a separate js file and add it at the end of your body (in that way you make sure your colls are created when your javascript is executed), or just wrap your code on a DOMContentLoaded event listener that will trigger your code once the document has completely loaded.
My guess would be that you are loading your script before browser finishes loading dom conetent and so when it runs the elements it is trying to add event listeners to, don't yet exist.
Try wrapping all you javascript in that file in this:
document.addEventListener("DOMContentLoaded", function(event) {
// all your code goes here
});
The above makes sure that your script is run after loading all elements on the page.
You could add a script tag to the header of your HTML file, this will import the JS file into your current page as follows
<script src="File1.js" type="text/javascript"></script>
Then call the function either in onclick in a button or in another script (usually at the bottom) of your page. Something like this:
<body>
...
<script type="text/javascript">
functionFromFile1()
</script>
</body>
Seems like your script is not executing properly due to a missing variable.
In this script https://www.argentina-fly.com/js/scripts.js
Naves variable in function UpdateDetailsDestination() is not defined.
I think you should resolve this first and then check your further code is working on not.
Please take a look into Console when running page. You'll see all JavaScript related errors there.

Change div content after loading it with ajax load method

index.html page :
I am loading the new.html page using ajax load method and then tried to change the content of the div#rr but it did not work!
any solution ?
why your code $('#rr').html('modfied'); is not working because you are calling the change before jquery ajax.load() method is able to load the content from your new.html and as result your id #rr is not found. So, instead of calling the modify code after the load statement call the modifying statement in your load()'s complete()
as:
$('#btn').on('click', function () {
$('.container').load('new.html', function () {
$('#rr').html('modfied');
});
});
and please go through the jquery documentation for more info on how to use the functions Jquery Documentation for Load() funciton.
Try to call the function inside the ajax call function.
$('.container').load('new.html',function(){
$('#rr').html('modified')
});
next time please do not put image for code.

Is this right way to call php file using jquery?

I am trying to call the php file onclick of button ,
i tried using ajax but many of them said not to use for downloading the file.
here is my code.
jQuery(document).ready(function($){
console.log("plugin script loaded3");
$('#csv').click(function()
{
alert("csv");
document.location.href = "/wp-content/plugins/est_collaboration/php/export_csv.php";
});
});
Even tried using $get but its not getting downloaded.
when i click the button it has to call php file which download csv format.
You can simply try this
Download
Change your jquery startup to simply:
$(function() {
$('#csv').click(function() {
alert("csv");
});
});
Alternatively, to download a "file", you can add it as the href to an anchor link, eg:
<a id='downloadlink' href='/wp-content/plugins/est_collaboration/php/export_csv.p‌​hp'>csv</a>
if you need to add parameters, you can change the href via jquery, eg:
$("#downloadlink")
.prop("href", "/wp-content/plugins/est_collaboration/php/export_csv.p‌​hp?param1=" + param1value);
Alternatively (again), it could be that you are adding the "#csv" button dynamically, after jquery startup has run, in which case you need event delegation. See this question for more info: Event binding on dynamically created elements?

jQuery UI not working with imported XML data, Only with raw HTML

I am creating a document that fetches its data from an XML doc and displays it. I wanted to apply a simple jQuery UI accordion to it to make it neater to navigate but there seems to be some conflict with the the data being external. When I copy and paste the source in a separate document it works fine.
Here is the doc with XML: http://brettlewis.me/assets/experiments/xanimals/xmltest.html
Here is the doc with raw HTML: http://brettlewis.me/assets/experiments/xanimals/test.html
I thought using HEAD.JS would help by forcing the script to initialize after the XML was loaded, but that didn't do anything.
$('#animals').accordion();
is being called before the DOM is finished being populated with the external data.
Delete this:
head.ready("script", function() {
$( "#animal" ).accordion();
});
and
, function() { $( "#animal" ).accordion();
from the first head.ready call.
Then add it in your callback after you are done building the DOM.
If you need to update the data at any point first destroy the current accordion and then rebuild it:
$('#animal').accordion('destroy');
$('#animal').accordion();

document.ready and ExecuteOrDelayScriptLoaded

I have a dilemma - my javascript code needs to be executed when the DOM is ready. However, at the same time I need to be able to hook up to the load event of another script. So hypothetically speaking I need something like this:
ExecuteOrDelayUntilScriptLoaded(getData, "sp.js");
function getData() {
(document.ready(function() {
//my code to get data from sharepoint list.
}));
}
Only the latter does not seem to work.
Please suggest!
Why not to do it like this?
$(document).ready(function() {
ExecuteOrDelayUntilScriptLoaded(function getData(){
//your code to get data from sharepoint list.
}, "sp.js");
});
Try
$(document).ready(function() {
$.getScript('sp.js', function() {
//your code to get data from sharepoint list.
});
});
For even more control over script loading, try a script loader like the simple and lightweight yepnope.js or the more complex LABjs.
If you are using jQuery, MooTools, or any other library - there is a standard function you can hook into, which checks if the DOM and your assets are loaded.
For example, in jQuery:
http://api.jquery.com/ready/

Categories

Resources