I have a select.php page where the user selects a value from the dropdown. On selection the ajax code runs and information from ajax.php gets populated on the "display" div of the select.php page. Some of the information coming from ajax.php is in the form of textarea. But it gets displayed just as textarea, and not as tinymce editor. Even though I have called it in the head section of my page.
<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
<script>
tinymce.init({
selector: 'textarea'
});
</script>
My problem is very similar to this: How do I initialize TinyMCE on a ajax loaded textarea in 4.x?
But I am not understanding the solution. Please help.
you can get data after that set data on tiny
success: function (data) {tinyMCE.get(data).getContent().replace('\'', "\’");},
Your call to tinymce.init() only acts on items in the DOM at the time the init() function is run. If you are adding additional <textarea> fields to the page later you need to run tinymce.init() after you add those elements to the DOM.
You can include a call to tinymce.init() in the same block of code that injects the <textarea> into the page directly after you inject the <textarea>.
Related
I am using CKEditor with CKEDITOR.disableAutoInline = true.
I then call inlineAll() to inline all contenteditables.
Immediately, after, I am getting data out of the editor:
CKEDITOR.inlineAll();
var editor = ... //get the editor instance
console.log(editor.getData());
The problem is that CKEDITOR changes the markup, and the one I get using getData() is before the change.
This is what the content markup looks like:
<p>testaaatest testbbbtest</p>
<p>test asdf</p>
link
<p>test</p>
link
<p>test</p>
CKEDITOR modifies the markup so that the <a>s are in their own paragraphs:
<p>testaaatest testbbbtest</p>
<p>test asdf</p>
<p>link</p>
<p>test</p>
<p>link</p>
<p>test</p>
The problem is that the markup I receive using getData() is the one before the modification.
What can I do to ensure that CKEditor is ready and the markup from getData() is the most up to date markup?
There's editor.status property and editor#instanceReady event. When the event is fired, the status is changed to 'ready'. Before that editor may return cached editable element's innerHTML instead of processed data.
So if you want to be sure that you get real data, then you need to check status and wait for instance to be ready if it isn't yet.
We have done a site, that loads content into a div, using ajax. My question is, within that ajax page, can I initiate a new page to load onclick in the existing pages place.
So as it stands on my index page I have:
<section id="mycontent">
</section>
Onclick of a element my content gets loaded into the above section. Like so:
<span class="link_wrap" data-link="prices"><span class="link_title">Our Prices</span</span>
So on click of the above, our js pulls in the relevant page: prices.php
In the JS I have:
case 'prices' :
myFunctionAjax('prices.php', function () {
_self._focustitle();
});
break;
So what I would like to do is, in say the prices.php page have a link to say deals.php
That onclick, similar to above, loads IN PLACE of prices.php content the new content from deals.php.
Any suggestions ?
I haven't explained this well.
But what i mean is, if I have an ajax script that loads the content of a page in a DIV element, through the function 'loadpage('whatever.php');, instead of going around manually doing this to all links, is there a way of having a script that automatically makes all regular links load through that ajax function?
Like on Facebook, your profile loads through ajax, yet if you look at their code, they just have a regular link to the profile.
Cheers!
Sure, you can do it with jQuery.
This script goes through the document, finds every anchor element and binds an event handler to the click event of each. When the anchor element is clicked, the event handler finds the href attribute and loads that page into #targetDiv (you can call this div whatever you want, of course).
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function() {
$("#targetDiv").load(($(this).attr("href") + " body");
return false;
});
});
</script>
...
<!-- In your document body, this is the div you'd load the pages into. -->
<div id="targetDiv"></div>
You can use JQuery for this (if I understand your question right).
First you can make the function loadpage() as follows:
function loadpage(divId, url) {
$('#' + divId).load(url);
return false;
}
.load() isn't supported by all browsers though. If you want to do this without .load() then you can check out .get(). For more info on .load(), take a look at http://docs.jquery.com/Ajax/load
I'm assuming it would go something like this:
$(document).ready(function(){
$("a").click(function(){
$("body").load($(this).attr("href") + " body");
return false;
});
});
This would make all <a> tags on the page call a function that downloads a HTML document from the href attribute of the tag, strip out it's body tag, and replace the contents of the current page's body tag with the contents of the new body tag. This way, it's easier to work this with no JavaScript, as well as integrate it into an existing site.
To use it, you place this into a <script> tag in the head of your main page, or in an external JS file.
Please note, however, that this code only updates the contents of the <body> tag, the head (including the title tag) remains untouched. You may need to add extra code to update things like this.
Simple and Nice. Check this out:
Bjax
Usage:
<script src="bjax.min.js" type="text/javascript"></script>
<link href="bjax.min.css" rel="stylesheet" type="text/css" />
Finally, include this in the HEAD of your html:
$('a').bjax();
For more settings, checkout demo here:
Bjax Demo
I have a website with two pages. A and B. When you click on a link in page A, it will uses the Prototype Ajax.Updater() to load the link page (page B) into a div on the page (Page A).
When page B loads into page A, the sIFR replacements are not working and the tag inner text is not even showing.
I have tried doing a sIFR.redraw() when the page has loaded into the div, with no success.
When i view page B in the browser by itself, it works perfectly.
Is it possible to insert HTML into a DIV tag on a page using AJAX and have the sIFR display properly?
I would imagine that you probably need to re-initialise sIFR within the onComplete callback of Ajax.Updater
This is the way I ended up doing this
new Ajax.Updater('content', url, {
onComplete:function(){
sIFR.replace(font, {
selector: '#content h2'
});
}
});
You could put this snippet in your html code:
<script type="text/javascript">
function pageLoad(sender, args) {
sIFR.replace(font, { selector: '#content h2' });
}
</script>
It will run the sIFR replacements each time the page reloads. This is on normal PostBack and Ajax postbacks. Make sure you have included a ScriptManager instance on your page.
mathijsuitmegen:
Your solution worked perfectly on an application I'm using where the ScriptManager was already in use.
Infact, The function was simply slotted into my sifr-config.js file and worked perfectly meaning my HTML wasn't cluttered.
I thought this was pretty straight forward but I don't get the same results as the tutorials I read. I have a button on an html page that calls a function in script tags. I also have a reference to the prototype.js file which I haven't even begun to implement yet. If I leave that reference in the page, my function call does not work from the button's onclick event. Below is what is called from the button onclick event.
callIt = function(){
alert('It worked!');
}
</script>
A couple of things: first, make sure your HTML is valid. Run it through the validator at http://validator.wc.org.
Next, once you're sure that your page is valid, add the prototype.js library as the first script reference on the page:
<script type="text/javascript" src="prototype.js"></script>
Notice that I didn't close it like this <script ... /> Script blocks need to have an explicit closing tag (at least in XHTML 1.0 Transitional)
Now, to answer your question, I'm really not sure what you're asking, but if you wanted to attach the callIt method to the onclick handler of your button using Prototype, then do this:
Event.observe(window, 'load', function() {
Event.observe('button_id', 'click', callIt);
});
Put this in script tags in the element of the page, below the prototype script reference. This will execute when the DOM is loaded & the button exists on the page.
Hope this helps.
That worked. I'm just puzzled why none of the examples I have been working from have done this.
Thanks!