Jump to content

How to properly do frontend page creation via AJAX without breaking things like CKeditor?

Marc

By Marc,
in General Support

 Share

Recommended Posts

Marc Sr. Member

Marc

Posted
Posted

I am trying to do frontend page creation via AJAX but when the form is loaded into an element, things like CKeditor and proper image uploading do not work. It seems javascript should be re-initialized on the elements that got added to the DOM after the initial page has loaded, but I don't know how to do this (if that is even what should be done in the first place)?

I got it working fine without AJAX, via a regular template. But when I move the code to a file that is called by AJAX, javascript breaks on the form hence things like CKeditor don't work.

Here's what's in HEAD of the main template:

  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><?php echo $headline; ?></title>
    <link rel="stylesheet" href="<?php echo $config->urls->templates;?>css/foundation.css" />
    <script src="<?php echo $config->urls->templates;?>js/vendor/modernizr.js"></script>

    <!-- Somatonic page edit script -->
    <script>
      <?php
      $jsConfig = $config->js();
      $jsConfig['urls'] = array(
        'root' => $config->urls->root,
        'admin' => $config->urls->admin,
        'modules' => $config->urls->modules,
        'core' => $config->urls->core,
        'files' => $config->urls->files,
        'templates' => $config->urls->templates,
        'adminTemplates' => $config->urls->adminTemplates,
        'adminTemplates' => $config->urls->adminTemplates,
      );
      ?>
      var config = <?php echo json_encode($jsConfig); ?>;
    </script>
    <?php
    //$config->styles->prepend($config->urls->adminTemplates . "styles/main.css?v=2");
    //$config->styles->append($config->urls->adminTemplates . "styles/inputfields.css");
    //$config->styles->append($config->urls->adminTemplates . "styles/ui.css?v=2");
     
    $config->scripts->append($config->urls->JqueryUI . "JqueryUI.js");
    $config->scripts->prepend($config->urls->JqueryCore . "JqueryCore.js");
    $config->scripts->append($config->urls->adminTemplates . "scripts/inputfields.js");
     
    foreach($config->styles->unique() as $file) echo "\n\t<link type='text/css' href='$file' rel='stylesheet' />";
    foreach($config->scripts->unique() as $file) echo "\n\t<script type='text/javascript' src='$file'></script>";
    ?>
    
  </head>

It loads all the necessary script for frontend page creation. And here is the template that does the form processing:

if ($command == "template_selection") {

	// Selected template ID
	$id = htmlspecialchars($_POST['template_id']);

	$page = $pages->get($id);
	$template = $page->template; 

	foreach($template->fields as $field){
	    echo $field->label . ": ";
	    //echo $field->type . "<br/>";
	    echo $page->get($field->name) . "<br/>";
	}

	// make a form
	$form = $modules->get('InputfieldForm');
	$form->method = 'post';
	$form->action = './';

	// add the page's fields to the form
	$form->add($page->getInputfields()); 

	// add a submit button to the form
	$submit = $modules->get('InputfieldSubmit'); 
	$submit->name = 'submit';
	$form->add($submit); 

	// process the form if it was submitted
	if($input->post->submit) {
	    $form->processInput($input->post);
	    $page->save();
	    echo '<p>saved</p>';
	}

	// render the form output
	echo $form->render(); 

	die;
}

This template works properly when not called by AJAX, but, again, when I call it with an AJAX request, the javascripts don't work. Is there any way I can make this work?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...