Made successive wix lightbox modal - javascript

I try to made a terms and condition modal next to my register form on my wix website.
enter image description here
I have two custom dialogs #lightbox1 & #lightbox2. After user clicks REGISTER NOW (#button2) on #lightbox1 another custom popup dialog (#lightbox2) with some text and OK button should be shown. After user clicks ACCEPTER on this popup, the register should be confirmed.
That is the code i added :
$w.onReady(() => {
$w('#button2').on('click', function () {
$w("#lightbox2").show();
});
});
The problem is not recognize #lightbox2 and it throws me error :
"An element with the ID '#lightbox2' does not exist on this page. Select another element and view or edit its ID in the Properties & Events panel."
enter image description here
enter image description here
Then, if a charitable soul wants to help me, I'll welcome him with open arms 😂.

Wix only allows one lightbox at a time to function, as an alternative approach you can add Wix Multi-State component inside the lightbox popup and switch the views with the help of code
Wix Velo Tutorial for Multi-State Boxes

Related

Remove download button from odoo's pdf_viewer main widget

I found this answer and it helps to remove the download button from field's widget, but how can I do this with the main widget? I mean, the one that appears when you click on records' attachments.
Remove download button from odoo's pdf_viewer widget
Also I'm reading this about "Modifying a main widget from the interface" but I don't find the way to do this with the main widget https://www.odoo.com/documentation/15.0/developer/reference/frontend/javascript_cheatsheet.html
Main widget
I tried with this code but it wont' help, only on the fields widget. At least that's what I see.
var basic_fields = require('web.basic_fields');
basic_fields.FieldPdfViewer.include({
_disableButtons: function (iframe) {
$(iframe).contents().find('button#download').hide();
// $(iframe).contents().find('button#secondaryDownload').hide();
this._super(iframe);
},
});`

Unable to click on a button (tag=>EDL-FILE-UPLOAD) using LeanFt +Java automation script

In a web app that we are testing using LeanFt, there is a type button object with the tag (EDL-FILE-UPLOAD). A dialog to browse the file system and upload a file must pop up when this button is clicked.
This happens when the button is clicked manually.
But when I try the .click() or .doubleClick() methods in my LeanFt automation script, nothing happens.
Now this button has a web element child that displays the label.
So i tried XPathDescriptions for the webElement, and tried the findChildren() function as follows
WebElement[] h = browser.describe(Button.class, xPathDescriptionOfButton).findChildren(WebElement.class, xPathDescofWebElement)
for(int i=0;i<h.length;i++) {
h[i].click();
h[i].hoverTap();
h[i].longPress();
h[i].doubleClick();
h[i].click(MouseButton.LEFT);
h[i].fireEvent(EventInfoFactory.createMouseEventInfo(MouseEventTypes.ON_CLICK));
h[i].fireEvent(EventInfoFactory.createEventInfo("click"));
}
None of the above led to the dialog for uploading files popping up.
Is there any other way to make sure that the button is clicked, and the dialog pops up using Java+LeanFt?
Thank you.
I have been able to solve this issue by using the Robot class to perform mouse click and release actions on the co-ordinates of the button.
Robot r=new Robot();
r.mouseMove(xCoordinate, yCoordinate);
r.mousePress(InputEvent.BUTTON1_DOWN_MASK);
r.mouseRelease(InputEvent.BUTTON1_DOWN_MASK);

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())

How to have control over backbutton hit in javascript?

I have used the concept from below link..It worked.
detecting browser back button in javascript/jquery without using any external plugins
but my problem is,
I have a dialog box which shows different input fields.
So, what i have did is when i click on back button i making that dialog to hide. But at the same time i am using the areyousure.js warning message at popup.. When i change any input field on popup and click on backbutton,I am getting a warning message as "You have unsaved changes. Stay on this page" or "leave this page." but when i click on the stay on this page the popup is getting hide as according to concept of that link.
So , what iam trying is, when i click backbutton after changing anyfield in dialog box , i must get that warining msg and if i click stay on page it should be stay there..
When i dont change any thing just have clicked back button i must just hide the dialog box and load the page..
Hope you all understand my problem.If so, please give me a solution.
My approach for hiding the dialog box when no changes are done on the pop up
bajb_backdetect.OnBack = function()
{
var popDiv = $('#popupModal #progressDiv');
var popIframe = popDiv.find('#pop-iframe');
popIframe.hide();
}
I cant do changes in my areyousure.js pages as it is used in most of the code. Some code dont have the dialogboxes..
So, in the current page , i need to valdate both the coditions..
I think this is the solution for you: Detect/Warn when back button is pressed
Let us know if it helps

Javascript alert popup form

i have search this whole site and google but cannot find it so, here goes!
i would like a way to show a form when using alert.
for example, when user click post, a dialog pop with asking user a few question like a html form and allow user to click submit or reset or cancel, without loading a new page.
i have seen this done but cannot find the same site again.
i have tried putting htm to alert with little success of posting.
any Help is Highly Appreciated!
What you are looking for is a Prompt Box:
<script type="text/javascript">
function show_prompt() {
var name = prompt('Please enter your name','Poppy');
if (name != null && name != "") {
alert(name);
}
}
</script>
example taken from here: http://www.w3schools.com/js/js_popup.asp
you can do this with jQuery dialogs -- load the dialog on user click and have a form presented in the dialog. have a look at the demos here: http://jqueryui.com/demos/dialog/
To complete #Liv's answer you can use jQuery's UI
Reference: Modal Form
The example shows how to create a new user. It will pop up a dialog where you complete a form and you can submit it or you can cancel it.
Use a modal dialog to require that the user enter data during a multi-step process. Embed form markup in the content area, set the modal option to true, and specify primary and secondary user actions with the buttons option.
It pretty much what I understood you need.
Good luck!
HTML can't be placed in system dialogs generated by alert(), confirm() or prompt(). However, you can download jQuery UI and set it up on your Website. (Make sure you have the "dialog" component chosen on the download page.) Then in your JavaScript:
$("<div>Place your HTML here</div>").appendTo("body").dialog({
modal: true,
title: "Enter a title here"
});
Make sure you run this code after the page has loaded by using either window.onload or $(document).ready().
Ad#m
You will not be able to do this with alert, but you should take a look at how to create modal windows.
I recommend you to use a div popup. What you have to do is setting a background on top of all other elements except the div where your form is. The css property display will be set to 'none' until the form is then activated, by setting display = "block". That can be performed using javascript.

Categories

Resources