Update node from ajax and model popup Drupal 7

I have seen a couple of question-related to “How to edit node in ajax model popup ? and How to edit node while embedding it in ctool”. I have found two way to approach this. I am giving complete code here so it can help others as well.

First Approach

In this implementation, I will open the embedded node in popup using ajax, will save the node and close the popup.

We need to create a custom button to the form.


<?php


$form['actions']['edit'] = array(
  '#type' => 'submit',
  '#value' => t('Edit Embedded Photo'),
  '#ajax' => array(
  'callback' => 'getEditContent',
      'event' => 'click',
  ),
  '#attributes' => array(
    'selected_node_id' => $entity->nid),
  );

// Now we need to create a callback method.


function getEditContent($js = NULL,$form){
// we are checking for Js as well because if JS is not there the flow should not break , it will open page in new URL
  if (!$js) {
      return drupal_goto('node/'.$form['buttons'][2]['#attributes']['selected_node_id'].'/edit/');
    }
    $force_page_reload = FALSE;
    $node = node_load($form['buttons'][2]['#attributes']['selected_node_id']);
    $type_name = node_type_get_name($node);
    $title = t('<em>Edit @type</em> @title', array('@type' => $type_name, '@title' => $node->title));

// implementing hook_node_form here. so when you are using this, replace my_module with your module name.
    my_module_node_form($node, $title, $force_page_reload);
}

// opening node in the popup to edit
// We can do all this code in ajax callback method (above one) but keeping this separate so we can use it somewhere else if needed.

function my_module_node_form($node, $title, $force_page_reload = FALSE) {
  $commands = array();
  ctools_include('node.pages', 'node', '');
  ctools_include('modal');
  ctools_include('ajax');
  $form_state = array(
    'title' => $title,
    'ajax'  => TRUE,
    'build_info' => array(
      'args'  => array($node),
    ),
  );
  variable_set("embedded_photo_node_id",$node->nid);
  form_load_include($form_state, 'inc', 'node', 'node.pages');
  $commands = ctools_modal_form_wrapper($node->type . '_node_form', $form_state);
 
  // add CSS class to Modal-Frame  if we need to provide some extra style 
  $commands[] = ajax_command_invoke('#modalContent', 'addClass', array('custom-module-node', 'custom-module-node-form'));
  print ajax_render($commands);
  exit;

}

?>

By applying above embedded node will open in new pop in edit mode, you can edit this and save this. Once you will click on save button node will get updated but the opened popup will not close. To close this opened popup we need to make one more changes:


<?php

// implementing  hook_node_update()

function my_module_node_update($node){

$updated_node_id = variable_get("embedded_photo_node_id") ?? 0;
if (($updated_node_id !=0) && ($node->nid === $updated_node_id) && ($node->type === 'embedded node type')){
    drupal_add_js(drupal_get_path('module', 'my_module') . '/js/js_utility.js');
    variable_del('embedded_photo_node_id');
}
}
?> 

create a new file with the name ‘js_utility.js’ under your module folder and js folder. so the complete path will be

yourprojectpath/module/contrib/mymodule/js/js_utility.js

Add below code in the js file

(function ($) {
    Drupal.CTools.Modal.dismiss();
})(jQuery);

Clear your Drupal cache and Enjoy!

Second Approach

In this approach, we will not open the node edit form in a popup, instead of popup we will open this in the existing embedded popup.

In the same as first, with ajax callback

<?php
$form['edit'] = array(
   '#type' => 'submit',
   '#value' => t('Edit Embedded Photo'),
   '#ajax' => array(
   'callback' => 'getEditContent',
   'event' => 'click',
           'wrapper'=> 'edit-entity',
   ),
   '#attributes' => array(
   'selected_node_id' => $entity->nid),
);


// Ajax callback

function getEditContent($form){
  $node = node_load($form['edit']['#attributes']['selected_node_id']);
  $type_name = node_type_get_name($node);
//  drupal_set_title(t('<em>Edit @type</em> @title', array('@type' => $type_name, '@title' => $node->title)), PASS_THROUGH);

// Render the form
$form_state = array();
$form_state['build_info']['args'] = array($node);

form_load_include($form_state, 'inc', 'node', 'node.pages');
return drupal_build_form($node->type . '_node_form', $form_state);

}

function mymodule_asaf_form_ajax_commands_alter(&$commands, $form, &$form_state, $form_id) {
  foreach($commands as $key => $command) {
      if ($command['command'] == 'asafRedirect' || 'asafRefresh') {
        unset($commands[$key]);
        break;
      }
    }

}

?>

To make the above solution completely, we need a contributed module Asaf (ajax submit for any form) (https://www.drupal.org/project/asaf) otherwise after form save our popup will get close and will get redirect to the Home page of your application. Setting $form_state[‘redirection’] would not work.

After installing the above module we need to add this form id there. Please see the image.

Leave a Comment.