Develop Reference

Change jQuery click event (this)

I dont know a lot about js and jQuery. I bought a WP theme and I want to do a few changes on it.
In this page: https://websitesdevs.com/search-services/
You can see a div with a text saying "Apply Filters" and when you click on it, it opens a popup with all the filters. The thing is that I want a search box, and then a button to open this popup with the filters.. I've been trying it but I can't do it.. I would like to open that popup with any other CSS class. Do you know how can I do it?
I think that the popup opens with this JS & jQuery script
//filter dropdown
jQuery('.mmobile-floating-apply,.wt-mobile-close').on('click', function() {
var _this = jQuery(this);
_this.parents('aside.wt-sidebar').toggleClass('show-mobile-filter');
});
This code is located at workreap_callbacks.js
Thanks for your time, I really need this

As far as I understand your question, you can run this:
$('.mmobile-floating-apply,.wt-mobile-close')
.parents('aside.wt-sidebar')
.toggleClass('show-mobile-filter');
from any place in your code.

Click on a button in a Modal Window - Protractor

I'm writing protractor tests for an existing app.
I have a button called 'Decline' in a modal window, and I'm trying to click it using:
element(by.buttonText('Decline')).click();
But I receive the below error:
UnknownError: unknown error: Element is not clickable at point (,). Other element would receive the click:
May be because I have another button called 'Decline' outside the modal window?
How do I click on the modal window's Decline button ?
Found that this is the js code that displays this Decline button.
.....
var content = {
title: 'Decline',
htmlBody: '<p>...</p> ',
okButton: 'Decline',
onOk: function() {
.....

As there are two buttons with button text Decline, How do we identity the one in modal?
One way to approach that would be to improve your locator to work in the scope of the modal content. But, since you have not provided an HTML representation of the modal I cannot provide you with a specific answer. Here are the samples that you can improve to fit your use case:
element(by.css(".modalContent button[ng-click*=ok]")).click();
element(by.css(".modalContent")).element(by.buttonText("Decline")).click();
Another approach could be to find all buttons with a specific text and filter the visible one:
element.all(by.buttonText("Decline")).filter(function (button) {
return button.isDisplayed().then(function (isDisplayed) {
return isDisplayed;
});
}).first().click();

My Colleague recommended this and it worked:
Clicking on First Decline button opens up a modal,
Sleep for some time,
Now click on the second Decline button.
element(by.buttonText('Decline')).click();
browser.sleep(2000);
element(by.cssContainingText('.btn', 'Decline')).click();
Thanks for all your help :)

Write the code
which needs to display under modal window,
inside form tag.
And serialize that form with the existing form.

Just search the button by its text and use the function click. So for you it should look like that:
element(by.buttonText('Cancel')).click();

try the below code,
var DeclineBtn = element(by.buttonText('Decline'));
browser.executeScript("arguments[0].click()",DeclineBtn.getWebElement())

Can not call Selector of Map SVG (Wordpress map plugin) when clicked

I am working on a Wordpress website with a MapSVG plugin. Here it is:http://www.wordpressdemo7.mozaikdesign.fr/
My client want to open specific tab bellow when click on an area of the map. For example, when click on Kalimantan area, the tab Kalimantan will be open.
The problem is I can not select the clicked area. I used the code bellow but no luck.
jQuery(document).ready(function ($) {
jQuery("a[href$=#tanjung]").click(function( event ) {
event.preventDefault();
jQuery("#tabbed-nav").data('zozoTabs').select(4);
});
});
So, can anyone help me out of this problem? Thank you and thank you very much.

Greetings from plugin's author. You have to put it into onClick event handler in javaScript tab inside of MapSVG control panel:
function(){
var regionID = this.id;
if (regionID == "Kalimantan"){
jQuery("#tabbed-nav").data('zozoTabs').select(4);
}
}

Problems with CKEditor dialog on top of Bootstrap modal window

I have included a plugin here, to include code snippets on my site using CKEditor. With this, I found that people have problems with CKEditor dialog boxes and Bootstrap's modal window. Any dialog box opened isn't focused on, and text can't be entered.
A solution was found here. This fixes my issues with other dialog boxes, but not the one that opens with this pre tag plugin. Does anyone have any advice to get code snippets to work properly in CKEditor and Bootstrap?
$.fn.modal.Constructor.prototype.enforceFocus = function() {
modal_this = this
$(document).on('focusin.modal', function (e) {
if (modal_this.$element[0] !== e.target && !modal_this.$element.has(e.target).length
&& !$(e.target.parentNode).hasClass('cke_dialog_ui_input_select')
&& !$(e.target.parentNode).hasClass('cke_dialog_ui_input_text')) {
modal_this.$element.focus()
}
})
};

The solution was adding the condition
&& !$(e.target.parentNode).hasClass('cke_dialog_ui_input_textarea')
now it works! Hopefully that helps anybody with this same issue.

Could someone point out the error in my jQuery?

I'm making a script to open all links on a page when I click a button in my toolbar. What exactly is wrong with the following code?
function performCommand(event) {
if (event.command == "open-tests") {
$('a').each(function(index, elem) {
window.open($(elem).attr('href'));
});
}
}
As far as getting to the function, it does this fine, as if I comment out the if statement and put in a simple alert, it will work as expected. However the above code does not work.

There is no standard command property of the event object provided by jQuery.
Why do you think there is one?

Did you disable your PopUp Manager or are you using any other kind of adblocker / secure plugin?
Despite that Safari refuses to window.open when called in a callback
more to read:
http://jensarps.de/2009/08/21/safari-and-window-open/