Run a Shortcode from a Button in Visual Composer - Wordpress - javascript

This should be a fairly obvious thing to be able to do. I have a plugin that has a modal newsletter signup form. I am very happy with the plugin and it has a number of options for the way it launches (after x seconds, when user reaches bottom of screen etc) it also has a manual launch option which gives me these following codes.
My theme uses Visual Composer. I want to launch the popup manually when a site user clicks a button on the homepage. I thought this would be simple but apparently not. The options I have with the standard VC button is shown below; I have tried numerous options of adding classes to the button but I cannot add a shortcode or class to any of the fields to launch the modal. I know there is a javascript onClick function but I'm not very good with Javascript. There must be a simple way to click a button and open a modal, maybe I am overlooking something completely obvious.

OK after reading back my question I thought about adding a custom css class to the button field Extra Class Name and it works. I thought that the extra class name here was for styling the button itself and did not realise that this would also trigger the pop-up as well. Guess I should have checked that first.

Related

Wicket Adding a draggable DialogBox with user defined tetarea, textbox and button

I am pretty new to Apache Wicket. I was able to get a home page, a form accepting inputs and then final success page where all accepted inputs are displayed. When this success page loads, there is a button. I would like to show a draggable dialog box with a textbox or a text area with when the button is clicked. I was trying to execute the JQuery extensions for wicket. But not able to get it on to my success page. It always complains for wicket id or component not exist and errors related based on what has been written on the java code or added to the markup html file. Here is the code to call the draggable dialogbox i created..Yes I wrote the wicket:extend for subclass. Still very confusing to me..please help.
This code is inside the AjaxButton Click...
HomePanel homepanel = new HomePanel("homepanel");
homepanel.setOutputMarkupId(true);
homepanel.setOutputMarkupPlaceholderTag(true); //tried removing it
homepanel.getMarkupId(true); //just for trial i put here
homepanel.setVisible(true);
add(homepanel);
homepanel.setVisible(true);
target.add(homepanel);
In the markup I have homepanel included.
Using apache wicket version 8.x
What am I do do. I am tapped out and no other way as my search also returns same thing .. any help.. thanks for the same.

Call a javascrip function in a button's link option from Divi (wordpress theme)

First of all, thank you in advance for any help you can give me.
I'm not a coder, at all.
I'm a photographer (https://lucky4shop.pt/portfolio/) that just happens to know a bit about Wordpress websites and can read css/html but I don't know how to code in any language.
That said, here's my problem...
I'm creating a Wordpress website with the Divi theme/builder for a restaurant that has 2 locations.
On the homepage, I created a button that activates a popup using a plugin called "Popups for Divi" that basically takes a section created by Divi Builder and makes it a popup.
The popup shows 2 buttons that come from an online ordering system called GloriaFood, each button for each restaurant.
The buttons are implemented through a shortcode.
When the user clicks one of the buttons, it shows the Menu that is created in GloriaFood but the popup doesn't go away unless the user clicks on the "X" to close it.
I'm trying to find a way for it to close automatically when the user selects one of the restaurants.
Divi Builder has an option to add a link to the code area that is created through the shortcode and I know that the popups plugin has a "hide function but I don't know how to implement that upon the action of a button click.
I'll leave some links here to relevant information:
How the button is added: https://www.gloriafood.com/restaurant-ideas/add-online-ordering-button-wordpress
Functions of the popup plugin: https://divimode.com/divi-popup/ (you have to scroll down to find them)
Screenshot for the shortcodes
Link option on the builder
Advanced options of the "Code" Module, in case this helps

How to prevent multidocument form page from reloading?

I'm working on a web app that takes the user through multiple forms with simple interface of a 'back' button, form, 'save' button and a 'next' button.
Clicking 'save' only calculates a number from given answers and sends it to localStorage.
When I then click 'next', it opens the next html file I prepared, constructed the same way, just with a different form. The problem is that if I press 'back', the form on the first page is empty, but when I use the browser's 'back' button, it's all there. How do I get this result with my 'back' and 'next' buttons? I'd like the user to be able to browse their answers as well as see a certain form already completed if they encounter it on a different path (there are various paths through 3 to 5 of 11 forms created, depending on what the user wants to calculate).
I understand it's opening the html file every time I click an 'a href', but I don't know how to change it. I tried searching for html form reloading prevention etc. but it doesn't seem to yield any answers. I'm not sure I know how to formulate my problem in a simple enough way.
Best simple solution would pretty much be what "Manolo" suggested.
Put all the forms you need in one HTML doc
Set all the form's style to "display: none" except the first
Create a simple JS function that changes the "display" style accordingly and attach it with the "onclick" attribute to your buttons.
Sorry for the lack of code. Typed this on mobile and hoped it would be straight forward enough. Hope this helped.
Load the forms as you need them using javascript to request them to your server. Use fetch api.
Other solution is to add all the forms to one page and hidde them all from the user. When the user click next you hide firstForm and show secondForm.
You can use History_API of DOM to manipulate the history
let stateObj = { foo: "bar" }
history.pushState(stateObj, "page 2", "bar.html")
And can catch thee event of back and next button of navigator with
WindowEventHandlers

Simulate click in web.whatsapp.com

My mission is export my whatsapp contacts with profile picrures.
So I decided to make a chrome extension for this purpose.
And Here to collect phone of each I have to click them. And each time go back to contact list I guess. The button I got a problem to click on by javascript code is
I need to click on this button by code and get full contact list
I can find this elem by query like
$('.menu-horizontal span .menu-horizontal-item:nth-child(2)')
But when I tried to click on this element - nothing happens
$('.menu-horizontal span .menu-horizontal-item:nth-child(2)').click()
Any ideas... please!!!!. I just need to open contacts panel each time!!
I have added and used jquery but It's ok to use vanilla JavaScript
I'm using simulating click function in my extension - https://gist.github.com/davojta/3647dfbf006bec75f6ef7e3f8d2f3e70

Social buttons and changing attributes using EmberJS

I'm trying to have two social buttons (facebook & twitter) on my website using EmberJS. I'm binding the URL of those buttons to an attribute url (for example).
The problem is that the attribute url is changing, and the buttons are not reloading.
I did a spin-off of this article on the EmberJS: http://emberjs.com/guides/cookbook/helpers_and_components/creating_reusable_social_share_buttons/
Updated to the last EmberJS version (1.3.1), and added a "change text" button. Try changing the text for the text button, and you'll see that the button is not reloading.
Link to the jsbin: http://emberjs.jsbin.com/izOtIYi/1/edit (watch the console too)
I think it's because Twitter is messing with the Metamorph system. How can I bypass this? I'm sure someone faced this before.
The strangest thing is that it's working well with facebook like button.
Thanks !
The issue is that when you load the twitter widget it parses the <a> and then replaces it with an <iframe>. So even when you update the text property it doesnt reload the button.
One way to work around it would be to rerender the view when the text changes this would cause the iframe to be removed and a new a tag to be added.
I fixed up the jsbin to update the button when the text changes http://emberjs.jsbin.com/izOtIYi/8/edit
I got put the logic which rerenders the button into the component to make it more reusable.
The button will flash whenever the text is changed because its actually removing the existing button and creating a new button each time the text changes.

Categories

Resources