Create the module.libraries.yml
File : at-story.js
module file where we load the file and varibales :
.module file
at-story:
js:
js/at-story.js: {}
dependencies:
- core/jquery
- core/jquery.once
- core/drupalSettings
File : at-story.js
Drupal.behaviors.atjs = {
attach: function (context, drupalSettings) {
if (drupalSettings.at_story.node_published == false) {//not published
if (drupalSettings.at_story.node_type == 'story') {
$('#edit-title-0-value', context).keyup(function () {
var long_h = $(this).val();
$('#edit-field-story-short-headline-0-value').val(long_h);
$('#edit-field-app-headline-0-value').val(long_h);
});
}
}
}
};
module file where we load the file and varibales :
.module file
if($form_id == 'node_story_edit_form' || $form_id == 'node_video_edit_form' || $form_id == 'node_photo_gallery_edit_form' || $form_id == 'node_breaking_news_edit_form'){
if ($node = \Drupal::routeMatch()->getParameter('node')) {
$form['#attached']['library'][] = 'at_story/at-story';
$form['#attached']['drupalSettings']['at_story']['node_published'] = $node->isPublished();
$form['#attached']['drupalSettings']['at_story']['node_type'] = $node->getType();
}
How to add inline css and js in a page by drupal 8 :
$load_more_btn = "#load_more_wrapper { text-align:center; }";
$form['#attached']['html_head'][] = [
[
'#tag' = 'style', \\array
'#value' = $load_more_btn, \\array
],
'load-more-css'
];
return $form;
It will add this tag in header:
#load_more_wrapper { text-align:center; }
Same as Js , in place of style it would be script
#load_more_wrapper { text-align:center; }
Same as Js , in place of style it would be script
How to use the Jquery within Ajax Responce :
use Drupal\Core\Ajax\AjaxResponse;
use Drupal\Core\Ajax\HtmlCommand;
use Drupal\Core\Ajax\InvokeCommand;
use Drupal\Core\Ajax\AlertCommand;
$response = new AjaxResponse();
//return the ajax return form with jquery
$response->addCommand(new HtmlCommand('#message-wrapper', $form['live_blog_container']));
$response->addCommand(new AlertCommand('Title or description, Anyone field is Required.'));
$response->addCommand(new InvokeCommand('.load_more_ajax', 'hide', array()));//hide is jquery function it could be any jquery function
InvokeCommand need three params:
1 - selector
2 - jquery function
3 - arguments of the function
like it
$response->addCommand(new InvokeCommand('#live_blog_title', 'addClass', array('my_new_class')));
$response->addCommand(new InvokeCommand("#load_more_limit", 'val', ['new_value']));//set the field value of id
return $response;
Comments
Post a Comment