Link to home
Start Free TrialLog in
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
Avatar of Julian Matz
Julian Matz
Flag of Ireland image

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

Avatar of Abrasax7
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>
@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']}";
            
?>
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

@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
Avatar of Julian Matz
Julian Matz
Flag of Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial