Avatar of Abrasax7
Abrasax7
 asked on

TinyMCE Ajax autoload html content

Hello guys, thanks in advance for your help.

For a email programm I am currently working on I am using TinyMCE to show templates (stored in MySQL database) that have been saved in advance. I currently have a dropdownlist for these templates which is generated like so:

=================drop down list====================

$r2 = mysqli_query ($dbc, 'SELECT * FROM templates ORDER BY template_title');
            while ($row2 = mysqli_fetch_array ($r2, MYSQLI_NUM)) {
                  if ($row2[0] == $row['user_id']) {
                        echo "<option value=\"$row2[0]\" selected=\"selected\">$row2[1]</option>\n";
                  } else {
                        echo "<option value=\"$row2[0]\">$row2[1]</option>\n";
                  }
            }

=================/drop down list====================

what I want is that whenever I chose a template from the dropdown list the content is autopopulated into the tinymce textarea. The following link shows this concept
http://www.tinymce.com/tryit/ajax_load_save.php

I can retrieve the template content from my database like so:

=================Template content====================

      $query = "SELECT template_title, template_content FROM templates WHERE template_id={$_GET['id']}";
      if ($r = mysqli_query($dbc, $query)) { // Run the query.
      
            $row = mysqli_fetch_array($r); // Retrieve the information.


$row['template_content']

=================/Template content====================

In the link I posted above they use the function

function ajaxLoad() {
        var ed = tinyMCE.get('content');

        // Do you ajax call here, window.setTimeout fakes ajax call
        ed.setProgressState(1); // Show progress
        window.setTimeout(function() {
                ed.setProgressState(0); // Hide progress
                ed.setContent('HTML content that got passed from server.');
        }, 2000);
}

to load the content, and have a load button "<a href="javascript:;" onclick="ajaxLoad();return false;"><span>Load</span></a>"

How can I make this work with a dropdownlist that works with my database


thankyou
PHPAJAXJavaScript

Avatar of undefined
Last Comment
Julian Matz

8/22/2022 - Mon
Julian Matz

Hi!

You could use the following on your drop-down:

<select name="template" onchange="ajaxLoad( this.value() );>
     <option value=".....">.....</option>
</select>

Open in new window


Then modify this function to make your ajax call based on the template that was selected.

function ajaxLoad(template) {
        var ed = tinyMCE.get('content');

        // Do you ajax call here, window.setTimeout fakes ajax call
        // ....
}

Open in new window


You could use something like this for your ajax call:

$.get( "ajax.php", "{id:template}", function(data) { alert(data); }, "html" );

Open in new window

Abrasax7

ASKER
@julianmatz

Thankyou for your reply :)

I think I understand the logic in the code. but please elaborate on the following:

what does "$.get( "ajax.php", "{id:template}", function(data) { alert(data); }, "html" );" do? what does it retrieve? the ID?

What I would need is the template id to be retrieved so that i can query "SELECT template_title, template_content FROM templates WHERE template_id={$_GET['id']}" to get template_content.

So this is what I did. I changed the drop down list to what you said. Then added the textarea below it which should show the template content once I change the option in the drop down list above.

          <select name="template" onchange="ajaxLoad( this.value() );">
            <?php
$r2 = mysqli_query ($dbc, 'SELECT * FROM templates ORDER BY template_title');
            while ($row2 = mysqli_fetch_array ($r2, MYSQLI_NUM)) {
                  if ($row2[0] == $row['user_id']) {
                        echo "<option value=\"$row2[0]\" selected=\"selected\">$row2[1]</option>\n";
                  } else {
                        echo "<option value=\"$row2[0]\">$row2[1]</option>\n";
                  }
            }
mysqli_free_result($r2);
?>
          </select></span><br /><br />
          <textarea name="content" class="mceAdvanced" ><?php print "$row2['template_content']"; ?></textarea>
Abrasax7

ASKER
@julianmatz

does the ajax call send the ID to ajax.php. and if so how could I retrieve the ID there. what i tried is adding this to the ajax.php

<?php

require_once ('../config/mysqli_connect.inc.php');

$query = "SELECT template_title, template_content FROM templates WHERE template_id={$_GET['id']}";
$r = mysqli_query($dbc, $query)) // Run the query.
      
            $row = mysqli_fetch_array($r); // Retrieve the information.
            
            print "{$row2['template_content']}";
            
?>
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
Julian Matz

Hi!

Have a look at this link.
http://www.netlink.ie/temp/EE/ajax.php

You can view the source code to see the javascript and HTML I used to make this.

When the option in the select box is changed, it passes the value (ID) of the selected option to the javascript. The javascript function then makes an ajax call to ajax.php, sending the ID to the PHP script. The PHP script would be responsible for making the database query.

There were actually a couple of mistakes in the code I gave you initially. Sorry about that. This is fixed on the linked page above.

One change I'd make to your ajax.php is this:

<?php

$id = isset( $_GET['id'] ) ? (int)$_GET['id'] : NULL;

if ( empty( $id ) ) die( '<p>Error: no template selected.</p>' );

require_once ('../config/mysqli_connect.inc.php');

$query = "SELECT template_title, template_content FROM templates WHERE template_id='$id'";

$r = mysqli_query($dbc, $query)) // Run the query.
      
            $row = mysqli_fetch_array($r); // Retrieve the information.
            
            print "{$row2['template_content']}";
            
?> 

Open in new window

Abrasax7

ASKER
@julianmatz
thankyou very much for your post.

I quickly got it to work without the tinymce part. The hard part was getting it to show up in the Tinymce textarea. it seems that whenever the ajax call is made the javascript part in the head which triggers the tinymce enabled textarea is ignored. so after hours of fiddling about i did this:

The following is an external file which is called in your function function

ajaxLoad(template) {
        //var ed = tinyMCE.get('content');

        $.get( "get_templates.php", { id: template }, function(data) { $('.result').html(data); }, "html" );
};
======================== get_templates.php =============================

<script type="text/javascript">
tinyMCE.init({
        mode : "textareas",
        theme : "simple",
        editor_selector : "mceSimple"
});

tinyMCE.init({
        mode : "textareas",
        theme : "advanced",
        editor_selector : "mceAdvanced"
});
</script>
<?php

if (isset ($_GET['id'])) {

require_once ('../config/mysqli_connect.inc.php');

$query = "SELECT template_title, template_content FROM templates WHERE template_id={$_GET['id']}";

$r = mysqli_query($dbc, $query); // Run the query.
     
            $row = mysqli_fetch_array($r); // Retrieve the information.
           
           print "<textarea class=\"mceAdvanced\" cols=\"85\" rows=\"25\">".$row['template_content']."</textarea>";

}

 
?>
 
======================== /get_templates.php =============================

basically if I only had the <script... tags in the head it wouldnt work and just show a normal textarea. I had to add another set of script tags in the external file for it to work

then i had to use <span class="result"></span> to spawn the textarea below my drop down list, if i tried to use <textarea class="result"></textarea> it wouldnt work either.

Well now it works.. but maybe you see the problem and have a better way of solving it? also I am extremly grateful for your help.. it looks awesome ;D
ASKER CERTIFIED SOLUTION
Julian Matz

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question