I've been trying to add AJAX buttons for a while. I am able to do it on forms, like this:
function hook_form_alter(&$form, &$form_state, $form_id) {
$form['suspend'] = array(
'#type' => 'button',
'#name' => 'foo',
'#value' => t('bar'),
'#ajax' => array('callback' => '_foo_bar'),
);
return $form;
}
working fine. However I cannot get it to work on user profiles or non-forms, like this:
function hook_user_view_alter(&$build) {
$build['suspend'] = array(
'#type' => 'button',
'#name' => 'foo',
'#value' => t('bar'),
'#ajax' => array('callback' => '_foo_bar'),
);
return $build;
}
Are there simple ways of doing this? I use blocks & views on this site and would rather not have to install Panels if possible (:
Thanks!
If it's not inside a form, wrap it into a form:
function example_suspend_form($form, &$form_state) {
$form['suspend'] = array(
'#type' => 'button',
'#name' => 'foo',
'#value' => t('bar'),
'#ajax' => array('callback' => '_foo_bar'),
);
return $form;
}
function example_user_view_alter(&$build) {
$build['example_suspend_form'] = drupal_get_form('example_suspend_form');
}
Related
I have a form with one field and a submit button with ajax submission option like following -
public function buildForm(array $form, FormStateInterface $form_state, $id = 0)
{
$form['fieldset']['message'] = array(
'#type' => 'textfield',
'#default_value' => "",
'#required' => true,
'#attributes' => array(
'placeholder' => t('write here'),
),
);
$form['actions']['submit'] = array(
'#type' => 'submit',
'#value' => $this->t('Send'),
'#attributes' => array(
'class' => array(
),
),
'#ajax' => [
'callback' => [$this, 'Ajaxsubmit'],
'event' => 'click']
);
return $form;
}
The ajax function is following -
public function Ajaxsubmit(array $form, FormStateInterface $form_state)
{
$user = \Drupal\user\Entity\User::load(\Drupal::currentUser()->id());
$db_values = [
"message" => $form_state->getValue("message"),
"date_create" => date("Y-m-d H:i:s"),
];
$save = DbStorage::Insert($db_values);
//$('#mychat_form input').val("");
//$form_state->setValue('content', NULL);
$response = new AjaxResponse();
if ($form_state->hasAnyErrors() || !$save) {
$response->addCommand(new AlertCommand('something wrong!'));
} else {
$message = DbStorage::Get(["id" => $save]);
$send_id = $message->send_id;
$build = [
'#theme' => "chat_view",
'#message' => $message,
'#sender' => $send_id,
'#current_user' => true
];
$ans_text = render($build);
$response->addCommand(new AppendCommand('#mychat', $ans_text));
}
return $response;
}
Here form data submission is working fine. But input data is not cleared after submission. I tried to clear it from my javascript using -
$('#my_form input').val("");
But the problem is my javascript file is called every 3 seconds and the form input is also cleared in every 3 seconds. this is problematic for users. Is there any other way to clear the form input after the ajax submission ? Can i do anything inside Ajaxsubmit function ?
You can use InvokeCommand for doing it.
For e.g: to clear an input value $('#my_form input').val(""); in ajax response
use Drupal\Core\Ajax\HtmlCommand;
use Drupal\Core\Ajax\InvokeCommand;
use Drupal\Core\Ajax\AppendCommand;
:
$form['fieldset']['message'] = array(
'#type' => 'textfield',
'#default_value' => "",
'#required' => true,
'#attributes' => array(
'placeholder' => t('write here'),
'class' => ['custom-class'],
),
);
In Ajax function
:
$build = [
'#theme' => "chat_view",
'#message' => $message,
'#sender' => $send_id,
'#current_user' => true
];
$response->addCommand(new AppendCommand('#mychat', $build));
$response->addCommand(new InvokeCommand('.custom-class', 'val', ['']));
Is it possible in drupal7 to insert a photo in fieldset form?
I have a start interface that contains two buttons leading to two athors interfaces and I would like to insert a photo above the two buttons
function my_module_start_form($form, &$form_state) {
$form['start']['image'] = array(
'#type' => 'fieldset',
'#title' => t('image'),
// is it possible some how to insert a photo in this form?
);
$form['start']['next'] = array(
'#type' => 'submit',
'#value' => t('Create charts')
);
$form['start']['examples'] = array(
'#type' => 'submit',
'#value' => t('See charts examples')
);
return $form;
}
I would simply nest a "markup" type form element with the image (assuming that it's a static image that doesn't change with user input): https://api.drupal.org/api/drupal/developer!topics!forms_api_reference.html/7#markup
Something like this should work:
function my_module_start_form($form, &$form_state) {
$image_options = array(
'path' => 'path/to/img.jpg',
'alt' => 'Test alt',
'title' => 'Test title',
'width' => '50%',
'height' => '50%',
'attributes' => array('class' => 'some-img', 'id' => 'my-img'),
);
$image = theme('image', $image_options);
$form['start']['image'] = array(
'#markup' => $image,
);
ETC...
I'm assuming the ['start'] form element is one fieldset, and you'll have another fieldset for the other grouping that includes an image and some form elements.
I have created a .module file which includes a form and an ajax call back. Here is a simple code of the .module file:
function form_registration_form($form, &$form_state) {
$form['registration']['email'] = array(
'#type' => 'textfield',
'#required' => TRUE,
'#size' => 44,
'#maxlength' => '80',
'#attributes'=> array('placeholder' => 'Email','data-email'=>'','data-min-chars'=>'5'),
);
$form['registration']['password'] = array(
'#type' => 'password',
'#required' => TRUE,
'#size' => 44,
'#maxlength' => '80',
'#attributes'=> array('placeholder' => 'Password'),
);
$form['registration']['submit'] = array(
'#value' => 'SIGN IN',
'#type' => 'submit',
'#submit' => array('form_registration_handler'),
);
return $form;
}
and in the function form_registration_handler I create a session (name it test).
Here is the ajax menu call back function:
function mymodule_menu() {
$items['ajax/innerAction'] = array(
'title' => 'Browser Inner Action',
'page callback' => 'innerActionCallBack',
'access arguments' => array('access content'),
'type' => MENU_CALLBACK,
);
return $items;
}
function innerActionCallBack() {
header('Access-Control-Allow-Origin: *');
drupal_session_start();
print session_id();
}
This function is used on my page.tpl.php file to create an ajax to server.
The problem here is when I call the ajax, the session id is different when
I refresh the browser and I can not retreive the Session test that I created earlier.
Do you know what is happening here. Any helps are really appreciated.
Ok so I have figured out the answer. I have to login the user into Drupal first so that Drupal can retrieve the correct sessionID.
So I have create my checkbox in my form
$form['existing_customer'] = array(
'#type' => 'checkbox',
'#title' => t('Are you an existing customer'),
'#ajax' => array(
'callback' => 'checkbox_selected',
'wrapper' => 'subject',
),);
This calls my function and changes the values in my checkbox
The problem is I cannot get it to switch back if it is unchecked
function checkbox_selected(&$form, &$form_state) {
if ($form_state['values']['existing_customer'] == 1) {
$my_options = array( 'select' => t('Select'), 'mr' => t('Mr'), 'mrs' => t('Mrs'), 'miss' => t('Miss'), 'ms' =>t('Ms'), 'sir' =>t('Sir'), 'dr' => t('Dr'), 'prof' => t('Prof') );
}
elseif ($form_state['values']['existing_customer'] == 0){
$my_options = array( 'seconfZ' => t('jimmy'), 'mr' => t('Mr'), );
}
$form['subject'] = array(
'#type' => 'select',
'#title' => t('Subject'),
'#options' => $my_options//$form['subject_options']['#value']
);
return $form['subject'];
}
I thought I could do a switch on the checkbox value or state but no joy?
Oftentimes, when you use the Form API #ajax system, the wrapper that you specify is actually replaced with another element AFTER drupal_html_id() has been called again on the element wrapper. So I would check the markup of the "subject" element in Firebug/Web Inspector after your AJAX stuff happens--I'm betting that the wrapper div is now something like "subject--1".
To fix this, you need to manually set a wrapper div on the item you are replacing--one that won't change when the form is rebuilt. For example, in your form builder:
$form['existing_customer'] = array(
'#type' => 'checkbox',
'#title' => t('Are you an existing customer'),
'#ajax' => array(
'callback' => 'checkbox_selected',
'wrapper' => 'subject-wrapper',
),
);
$form['subject'] = array(
'#prefix' => '<div id="subject-wrapper">',
...
`#suffix' => '</div>',
);
Hope that helps!
I am trying to make a full cycle form with parameters and response page. Form is working OK, but response page is coming up black. Anyone have a suggestion or model example.
function module99_menu(){
$items = array();
// inital form
$items['module-99'] = array(
'title' => t('Export'), // Page title
'page callback' => 'fn_module99', // function to call when this page is called
'access arguments' => array('access content'), // An array of arguments to pass to the access callback function.
'description' => t('Export'),
'type' => MENU_CALLBACK,
);
// response page
$items['my_module-99-response/%/%'] = array(
'title' => t('Response Page'), // Page title
'page callback' => 'fn_module99_response', // function to call when this page is called
'page arguments' => array(0,1), // pass with arg(0) and arg(1)
'access arguments' => array('access content'),
'description' => t('Export - response form'),
'access callback' => TRUE,
'type' => MENU_CALLBACK,
);
function fn_module99() {
return drupal_get_form('module99_my_form');
}
function module99_my_form_validate($form, &$form_state) {
// do some validation
}
function module99_my_form_submit($form, &$form_state) {
// do some stuff
drupal_set_message(t('The form has been submitted.'));
$parms = "p1=" . "A" . "&p2=" . "B" ;
$form_state['redirect'] = array('my_module-99-response', $parms);
}
function fn_module99_response($parm1,$parm2) {
$output = $parm1 . $parm2;
return $output;
}
function module99_my_form($form_state){
$form = array();
$form['email'] = array(
'#type' => 'textfield',
'#title' => t('E-mail address') ,
'#size' => 64,
'#maxlength' => 64,
'#required' => TRUE,
);
$form['submit'] = array(
'#type' => 'submit',
'#value' => t('Save'),
);
return $form;
}
You should change the redirect a bit:
$form_state['redirect'] = array("my_module-99-response/$param_a/$param_b");
Also in your hook_menu you want to change the page arguments:
$items['my_module-99-response/%/%'] = array(
'page arguments' => array(1,2),
);
This will match the two % in your url, as 0 is 'my_module-99-response'.
I don't know if it will help, but the standard method is to use drupal_get_form on the hook menu with the form id of the form as a parameter. I'm not sure what you are trying to do with the arguments?
$items['my_module-99-response/'] = array(
'title' => t('Response Page'), // Page title
'page callback' => 'drupal_get_form',
'page arguments' => array('fn_module99_response'),
'access arguments' => array('access content'),
'description' => t('Export - response form'),
'access callback' => TRUE,
'type' => MENU_CALLBACK,
);
You should also specify a submit handler in the form using the '#submit' property (make sure you pass an array). Do validation in the same way while you are at it.
function module99_my_form($form_state){
$form = array();
$form['email'] = array(
'#type' => 'textfield',
'#title' => t('E-mail address') ,
'#size' => 64,
'#maxlength' => 64,
'#required' => TRUE,
);
$form['submit'] = array(
'#type' => 'submit',
'#value' => t('Save'),
);
$form['#submit'] = array('module99_my_form_submit') ;
$form['#validate'] = array('module99_my_form_validate') ;
return $form;
}
$form_state['redirect'] = array("my_module-99-response/$param_a/$param_b");
this works great except drupal mangles the slashes with encoding