hook_menu to run a function

Dear everyone,

I am building a module in which I added a page to view user profiles, so that user can check their own profile and can change whatever data they need from there. Here are the important parts of the module:

<?php

function user_profiles_block_info() {
  $blocks['myblock'] = array(
   'info' => t('User Profile: Personal Information Block'),
   );
  return $blocks;
}

function user_profiles_block_view($delta = '') {

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

// Add js

drupal_add_js('sites/all/modules/user_profile/script.js');
drupal_add_library('system','ui.dialog');

// Add CSS

drupal_add_css('sites/all/modules/user_profile/user_profile.css');

// Retrieve Name from 'field_data_field_name'
$query_name = db_select('field_data_field_name', 'n')           
            ->condition('n.entity_type', 'profile2')
            ->fields('n', array ( 'field_name_value' ))     
            ->execute();

$user_name  = array_keys($query_name ->fetchAllKeyed(0, 0));  

$rows = array();
$header = array(t('Personal Information'));

$rows[] = array('First name: '. "$user_name[0]". ' '. '<button class="special-button" onclick="script_function()">edit</button>'
);

$block['content'] = theme('table', array('header' => $header, 'rows' => $rows));
return $block;
}

function change_first_name() {
$change= db_query("UPDATE field_data_field_name
SET field_name_value = 'new name' WHERE entity_id = '3'");
}

There is a button when pressed a JQuery UI dialog pops up and asks the user to enter the new name. The code for the JQuery script is:


function script_function() {
(

function ($) {
  
$(document).ready(function(){

$('<div>First name:<input type="text" style="user-name" name="user-name"<div>').dialog({

modal: true,
minHeight: 5,
width: 300,                      
  
buttons: {
 'Ok': function() {
       
    $.ajax({
       url:"change_first_name_url",
       data: {},
       type: "GET",
       dataType : "text",
           })
               $(this).dialog('close');
     },
    }
   });
  });
}

)(jQuery);

}

There is a hook_menu function so that when the user presses “Ok” on the dialog box, the hook_menu function “update_profile_menu()” will call the function “change_first_name” and it will update the database entry. I learned this method from Jaypan, and it did work on another module but for some reason when I press “Ok” on the Dialog box the function”change_first_name” never gets called. What could it be that I’m doing wrong? Any help is highly appreciated. Thank you very much in advance.

Drupal version: 


Source: https://www.drupal.org/taxonomy/term/4/feed