Hi everyone,

I know this is a subject that is kinda old but I just kind find the right answer for the problem I have. I am building a module where the user can view his profile and can change which ever data that he likes. I managed to build the module as follows: The following line calls the function "change_first_name()" in the jscript when the user presses "edit":

$rows[] = array('First name: '. '<div id="user-name-id">'."$profile_2_name[0]".'</div>' .' '. '<button class="special-button" onclick="change_first_name()">edit</button>'
);

the jscript:

function change_first_name() {
(
function ($) {
$(document).ready(function(){
$('<div>First name:<input id="new_name" input type="text" style="user-name" <div>').dialog({
modal: true,
minHeight: 5,
width: 300,                      
  buttons: {
 'Ok': function() {
       
var update_new_name = $(new_name);

$.ajax({       
             url:"http://localhost/drupal/change_first_name_url",

   type: "GET",
   data: { new_user_name: update_new_name.val() }, 
   dataType : "text",
  success:  $('#user-name-id').html(update_new_name.val());
          $(this).dialog('close');
})
     },
    }
   });
  });
}
)(jQuery);
}

When the function "change_first_name()" runs it calls the URL "change_first_name_url" then the "change_first_name" function is called:

function mymodule_menu() {
 $items = array();
    $items['change_first_name_url'] = array(
      'title' => 'Change first name',
      'page callback' => 'change_first_name',
      'access callback' => TRUE,
    );
}

function change_first_name() {
$update_user_name = $_GET['new_user_name'];
$query = db_query("UPDATE field_data_field_name SET field_name_value = '$update_user_name' WHERE entity_id = '3'");
}

The module does what it is supposed to do, but I also need to replace the old name by the new name. And I've accomplished that by:

success:  $('#user-name-id').html(update_new_name.val());

The only problem is that it does the name changing only once, and I need to refresh the page again before the name chnages again. What could be the problem ? Thank you very much in advance.

Comments

Jaypan’s picture

Try this:

function change_first_name() {
  $('<div>First name:<input id="new_name" input type="text" style="user-name" <div>').dialog({
    modal: true,
    minHeight: 5,
    width: 300,                      
    buttons: {
      'Ok': function() {
        var update_new_name = $(new_name);

        $.ajax({       
          url:"http://localhost/drupal/change_first_name_url",
          type: "GET",
          data: { new_user_name: update_new_name.val() }, 
          dataType : "text",
          success:  $('#user-name-id').html(update_new_name.val());
          $(this).dialog('close');
        });
      }
    }
  });
}(jQuery));
hemant_gautam’s picture

Hi,

I would suggest you to use Drupal ajax instead JQuery ajax to change the content of the Div. You can achieve the same by using this.
Here are some of the important links related to Drupal Ajax -

http://www.codesidekick.com/blog/ajax-commands-drupal-7

https://www.drupal.org/docs/7/api/javascript-api/simple-drupal-ajax-load-with-jquery-and-delivery-callback

https://api.drupal.org/api/drupal/includes%21ajax.inc/group/ajax/7.x

http://www.seanbuscay.com/ajax-reader-demo/

Please let me know if more detailed explanation for this.

Amjad_dokhan’s picture

Hi,

Thanks guys for the reply, but Jaypan when I apply your suggestions, the script stops working completely. And I have been researching for 2 days on how to use Drupal AJAX frame work (as advised by hemant_gautam) , and that did not work either.

The examples module calls the AJAX function from a hook_menu. In my case I built this function:

function ajax_html($form, $form_state) {
  $text = 'test';
  $commands = array();
  $commands[] = ajax_command_html('#user-name-id', $text);
  return array('#type' => 'ajax', '#commands' => $commands);
}

and then called the function here:

function change_first_name() {
$update_user_name = $_GET['new_user_name'];
$query = db_query("UPDATE field_data_field_name SET field_name_value = '$update_user_name' WHERE entity_id = '3'");
return ajax_html;
 }

and that did not work either. As a matter of fact, I tried many other things but nothing worked ! Could you please tell me whats the correct way to do what I need to do ?

Many regards