Call a function in JS file from drupal - javascript

I have included a javascript in the module "myid" I've been developing in drupal by using this code:
function myid_init() {
drupal_add_js(drupal_get_path("module", "myid") . "js/myid.js");
}
This is my Javascript file "myid.js":
function myid_js_start(){
alert("hello world");
}
Below is the code that creates a button that invokes an alert function:
$form['add_button'] = array(
'#type' => 'button',
'#value' => 'Take a picture',
'#attributes' => array('onclick' => 'myid_js_start()'),
);
I dont know where did I go wrong. The button shows up but doesn't fire any alert function. Can anyone help me with this?

If you have followed the proper drupal directory structures and everything is where it supposed to be then it could be you are setting the attributes[onclick] as 'myid_js_start()'. Try doing it like
$form['add_button'] = array(
'#type' => 'button',
'#value' => 'Take a picture',
'#attributes' => array('onclick' => 'myid_js_start'),
);
Maybe that will solve it.
I don't have a drupal system setup at the moment to test your code. It could be something else but worth a try.

Attach the .js file to the form itself using #attach.
$form['#attached']['js'] = array(
drupal_add_js(drupal_get_path("module", "myid") . "js/myid.js"),
);

Related

How to get the current post type in JavaScript?

I want to change several background colors via "post type".
I don't know how to query the "post type".
I know, that my code is 100% wrong. I searched the web for a solution. But couldn't find any, that would work.
(function() {
var elements, posttype;
function init() {
elements = document.querySelectorAll('.color');
posttype = get_post_type();
}
function checkColor() {
if (posttype === 'veranstaltung') {
element.classList.add('pink');
element.classList.remove('color');
} else if (posttype === 'ausstellung') {
element.classList.add('green');
element.classList.remove('color')
} else if (posttype === 'digitale-events') {
element.classList.add('red');
element.classList.remove('color')
}
}
init();
checkColor();
})();
One method is javascript if you create a function inside function.php which you have to call all the custom post type and return all the post with ajax in javascript which I do not suggest, the second method is to create a custom page and display all the custom post type with php, and then you have to do a condition to check which post type is the post and then add a custom class to each custom post type.*Note: This get all posts of a custom type use:
$posts = get_posts([
'post_type' => 'custom',
'post_status' => 'publish',
'posts_per_page' => -1,
'order' => 'ASC'
]);

WordPress wp_localize_script : PHP variable not recognized by JS script

I am trying to modify a script (ajaxcalls.js) in my WordPress via my child theme. I created a duplicate of the file in the child theme (ajaxcalls_child.js).
I added the following code inside the function.php file in order to dequeue the old JS file, enqueue the new one and pass the variable ajaxcalls_vars which ajaxcalls_child.js uses:
<?php
//made sure here that the action execute after all the other scripts are loaded
add_action('wp_enqueue_scripts', 'wpestate_load_child_scripts', 100);
function wpestate_load_child_scripts() {
wp_dequeue_script('wpestate_ajaxcalls');
wp_enqueue_script('ajaxcalls_child', get_stylesheet_directory_uri().'/js/ajaxcalls_child.js', array('jquery'),'1.0', true);
wp_localize_script(‘ajaxcalls_child’, ‘ajaxcalls_vars’, array(
'contact_name' => esc_html__( 'Your Name','wprentals'),
'contact_email' => esc_html__( 'Your Email','wprentals'),
'contact_phone' => esc_html__( 'Your Phone','wprentals'),
'contact_comment' => esc_html__( 'Your Message','wprentals'),
'adv_contact_name' => esc_html__( 'Your Name','wprentals'),
'adv_email' => esc_html__( 'Your Email','wprentals'),
'adv_phone' => esc_html__( 'Your Phone','wprentals'),
'adv_comment' => esc_html__( 'Your Message','wprentals'),
'adv_search' => esc_html__( 'Send Message','wprentals'),
'admin_url' => get_admin_url(),
'login_redirect' => $login_redirect,
'login_loading' => esc_html__( 'Sending user info, please wait...','wprentals'),
'userid' => $userID,
'prop_featured' => esc_html__( 'Property is featured','wprentals'),
'no_prop_featured' => esc_html__( 'You have used all the "Featured" listings in your package.','wprentals'),
'favorite' => esc_html__( 'Favorite','wprentals').'<i class="fas fa-heart"></i>',
'add_favorite' => esc_html__( 'Add to Favorites','wprentals'),
'remove_favorite' => esc_html__( 'remove from favorites','wprentals'),
'add_favorite_unit'=> esc_html__( 'add to favorites','wprentals'),
'saving' => esc_html__( 'saving..','wprentals'),
'sending' => esc_html__( 'sending message..','wprentals'),
'reserve' => esc_html__( 'Reserve Period','wprentals'),
'paypal' => esc_html__( 'Connecting to Paypal! Please wait...','wprentals'),
'stripecancel' => esc_html__( 'subscription will be cancelled at the end of the current period','wprentals'),
'max_month_no' => intval ( get_option('wp_estate_month_no_show','') ),
'processing' => esc_html__( 'processing..','wprentals'),
'home' => get_site_url(),
'delete_account' => esc_html__('Confirm your ACCOUNT DELETION request! Clicking the button below will result your account data will be deleted. This means you will no longer be able to login to your account and access your account information: My Profile, My Reservations, My bookings, Invoices. This operation CAN NOT BE REVERSED!','wprentals'),
'adv_search_what_half' => $adv_search_what_half,
'adv_search_how_half' => $adv_search_how_half,
'adv_search_type' => $adv_search_type
));
}
Now after I visit my website, I can see that the old script has been replaced by the new one but I can see on the chrome console that ajaxcalls_vars is not defined as soon as the a function needs it in the new script.
Error on the chrome console
So the new script is there but my variable ajaxcalls_vars is not defined according to ajaxcalls_child.js, therefore, I think there is something wrong in the way I try to pass that variable to the new script.
After looking at similar issue, I understood other type of mistake and tried to improve that code up to the one I shared above. But still can not get it right.
Your single quotes around the first 2 args in wp_localize_script(‘ajaxcalls_child’, ‘ajaxcalls_vars’, array(... are not real single quotes. Try deleting them and replacing with the ' character wp_localize_script('ajaxcalls_child', 'ajaxcalls_vars', array(...
Once I did that, the object is available in the enqueued script (tested on xampp wp 5.0)

How to add js-file to wordpress widget?

I try to add test.js file to my widget in front-end part. But it's nothing happens. The file contain alert. What's wrong with my code?
class PPNDR_new_widget extends WP_Widget{
function __construct(){
$args = array(
'name' => 'new widget',
'description' => 'this is my first widget',
'classname' => 'ppndr-new-widget'
);
parent::__construct('my_first', '', $args);
}
//front-end display of widget
public function widget($args, $instance) {
add_action('wp_enqueue_scripts', 'CounDounJS_enqueue_js');
function CounDounJS_enqueue_js() {
wp_enqueue_script('resize', plugins_url('/assets/js/test.js', __FILE__));
}
return;
}
}
add_action( 'widgets_init', function() {
register_widget('PPNDR_new_widget');
} );
I had a similar problem and google led me here -- What ended up working for me was eliminating the add_action('wp_enqueue_scripts.. and simply enqueuing my scripts and styles in the widget function.
for example:
//front-end display of widget
public function widget($args, $instance) {
wp_enqueue_script('resize', plugins_url('/assets/js/test.js', __FILE__));
}
There is the problem of not being able to dequeue the script, but I suspect the need for this would be slim.
Hope this helps.

Update text in block with Nodejs integration module in drupal 8

Below is information what I have done till now and what I am trying to do.
What I have done till now
Nodejs module and drupal 8 done. Example modules are working fine.
Created a simple module in drupal 8 consists of a form called simple
form. On its submit function, called nodejs module function to enqueue my message to the channel.
Javascript callback function created defined in nodejs enqueue message.
What I have been trying to acheive
When submitting a text form. Just to update the block in drupal 8.( Update the block content with hello world.)
Problem
My javascript callbacks associated with nodejs aren't being called.
Below are my codes.
Submit Function Code
public function submitForm(array &$form, FormStateInterface $form_state) {
/*$message->broadcast = TRUE;
* This would normally be replaced by code that actually does something
* with the title.
*/
$title = $form_state->getValue('title');
$message = (object) array(
'channel' => 'example',
'broadcast' => TRUE,
'callback' => 'example',
'data' => array(
'message' => 'Hello World'
),
);
nodejs_enqueue_message($message);
drupal_set_message(t('You specified a title of %title.', ['%title' => $title]));
}
Javascript callback code
(function ($) {
Drupal.Nodejs.callbacks.example = {
//grab the message and inject into the header
callback: function (message) {
console.log('simple example');
if(message.channel == 'example') {
$('#nodejs-selector').html(message.data.body);
}
}
};
})(jQuery);
Any help on this, I would be very grateful. I would love to provide more information on this, if anyone needed.
You should modify $message as
$message = (object) array(
'channel' => 'example',
'broadcast' => TRUE,
'callback' => 'example',
'data' => array(
'body' => 'Hello World'
),
);
To access the message body as message.data.body

How to reload page in cakephp using jQuery when clicking the submit button

In my program i want to reload the page when clicking the comment button. What exactly happens is it do update the data in my database but i have to manually reload rather i want to reload page as soon as i click comment button.
echo $this->Js->submit('Comment',
array(
'before' => $this->Js->get('#busy-indicator')->effect('fadeIn', array('buffer' => false)),
'complete' => $this->Js->get('#busy-indicator')->effect('fadeOut', array('buffer' => false)),
//'before'=>'alert("Comment posted");',
//'success'=>'jQuery("#PostComment").val("");',
'url' => array(
'controller' => 'posts',
'action' => 'comment/'.$post['Post']['id']
),
'update' => '#UserComment',
//'class'=>'submit',
'class' => 'comment',
'id'=>'SubmitComment',
));
You can just redirect to the same page after clicking the comment button
return $this->redirect($this->here); OR
return $this->redirect($this->request->here); // cake 2.x
suppose we have a function handling comment inside your controller
public function comment() {
// process content here...
// redirects the user immediately with a nice message
$this->flash('Your comment has been saved, thanks', '<page you wish to redirect');
OR
$this->setFlash('blablablabla');
return $this->redirect($this->here); // this->here refers to the current pageurl
OR
return $this->redirect($this->request->here); // cake 2.x (// this->request->here refers to the current pageurl)
}

Categories

Resources