Mozilla XUL - Dialog button's ID - javascript

I'm thinking if there's a way to add ID attributes to 'accept' and 'cancel' buttons within a dialog?
<dialog id="myDialog" title="My Dialog"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
onload="window.sizeToContent();"
buttons="accept,cancel"
buttonlabelaccept="Set Favourite"
buttonaccesskeyaccept="S"
ondialogaccept="return doSave();"
buttonlabelcancel="Cancel"
buttonaccesskeycancel="n"
ondialogcancel="return doCancel();">
I know I can add buttons like this:
<button
id="identifier"
class="dialog"
label="OK"
image="images/image.jpg"
disabled="true"
accesskey="t"/>
But can be this done inside a dialog context?

It can be done inside of a dialog context. But the code you've posted might not work as expected depending on what you expect to achieve.
The button you posted will not function as the accept button unless it has special attribute dlgtype="accept". Citing this article that talks about creating custom dialog buttons:
If you are not satisfied with the layout of predefined buttons in dialog, you can put explicit button elements in your XUL file and add a dlgtype attribute to them. Valid values for dlgtype are the six button types listed above.
<button
dlgtype="accept"
class="dialog"
label="OK"
image="images/image.jpg"
disabled="true"
accesskey="t"/>
This approach enables you to choose where the accept button is located, styling of it etc.
If the goal is to get an accept button somewhere in the code and manipulate its properties, then just use document.documentElement.getButton("accept"). Citing the same article:
// Disable the OK and Cancel btns
document.documentElement.getButton("accept").disabled = true;
document.documentElement.getButton("cancel").disabled = true;
Let me know if you wanted something different.

Related

Disable textfield on Touch UI cq dialog

I want to call a JS function on load of cq dialog to validate if a field already has something if so, disable it from the edition. I have tried with validation but it is called after the users interact with the field, I need a way to do it before when is being loaded. Is it possible?
<id
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="ID"
validation="is_empty" // DO THIS WHEN IS LOADED
name="./id"
required="{Boolean}true"/>
I can think of a way to achieve this using cq.authoring.dialog clientlib and jQquery
Create a clientlib with categories as cq.authoring.dialog. Scripts in this clientlib are loaded only in the author instance.
Add a class to the text field using the granite:class attribute, this is to hook onto the textfield using script in the above clientlib
<id
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="ID"
granite:class="readonlySelector"
name="./id"
required="{Boolean}true"/>
You will have to include the below namespace in dialog.xml to usegranite:class.
xmlns:granite="http://www.adobe.com/jcr/granite/1.0"
Notice the class name registered above in the DOM
Use one of the OOTB granite event listeners like foundation-contentloaded to fire the script on initialization of the dialog. You could probably use a more narrower event, check out granite documentation for more events
Use the Coral UI Textfield documentation to find out supported attributes. disabled and readonly are supported. Place this code in the cq.authoring.dialog clientlib.
$(document).on('foundation-contentloaded', function (e) {//event fires when dialog loads
var $textField = $('.readonlySelector');
if ($textField.val()) {//truthy check
$textField.prop('disabled', true);//Greys the field
$textField.prop('readonly', true);
}
})
Grayed and disabled

Javascript change the value of innerHTML or innerText not working

I am working on a form (which comes from the Laserfiche Forms application) and I am trying to change the text on a button that currently reads "Auto Fill" which is very non-descriptive since I have 5 of those buttons.
A little backstory: My code used to work and then all of a sudden one day it doesn't and creates an error where the user can only see the "Submit" button and the title of the form, but as soon as I comment out the below code the form works again but then I have those non-descriptive buttons again.
Is something wrong with my code?
document.getElementById("lookup1573").innerHTML = "Fill Section";
On button inspection, I see something a little odd:
<button id="lookup1573" class="autofill" type="button vo="d">Auto fill</button>
You had a typo in the html:
type="button vo="d"
This is the correct way:
<button id="lookup1573" class="autofill" type="button">Auto fill</button>
Here is the full example:
https://jsfiddle.net/o2er21v0/
That is not a typo but a customer parameter of Forms.
So here is the easy way to use these kind of things with forms:
Firstly, give all of your elements classes. Whilst outside of using Forms it is recommended to use ID's to reference your elements, doing that with Forms will give you more work, tenfold.
To note about Autofill buttons: they only appear on lookups that you have enabled them on (unless you are using an old version of Forms) and will appear next to the last element in your lookup (if that makes sense).
To change the name of your autofill buttons you are going to have to do so after the page has loaded.
Below is example code to do just that, assuming that the element that has the Autofill button you have given it a class of "vendorName".
The "vo" is actually very useful as you can use it to easily interact with your field content in conjunction with your classes. In the below example I am changing what is in the field without having to go into the code and work out what the number of the id is. This makes any code you make more portable as you can then implement it in other projects, projects where you ID numbers will be different. This is so flexible that it does not matter if the "vendorName" element is a normal text input, multi-line text area or a drop down menu as that same piece of code will work the same.
4:
$(function() {
$( ".vendorName .autofill").text( "Fill Section" );
});
5:
$( ".vendorName [vo]").val( "A New Vendor Name" );
Forms already uses the jQuery library so this will work just fine. Remember to give all of your elements a class (I usually name it the same as the variable). You can also give them multiple classes by separating the classes with a space.

How can I select this element with javascript?

I am trying to write an applescript application that logs into a website upon launching. So far I can successfully open Chrome, load the web page into the active tab, select and input the password, but I cannot click the submit button.
Below is the element on the page:
<button type="submit" class="btn btn--ac" alt="Login"
title="Login" tabindex="6"><i aria-hidden="true"
class="lush lush-locked"></i> Login</button>
My skill level in javascript is little to none, yet I cannot find a way to successfully select this item and click it. I have tried already using the TagName and ClassName but it does not work, perhaps my syntax is incorrect. Is there a way to do this without a ID type?
I have tried:
execute front window's active tab javascript
"document.getElementByClassName('btn, btn--ac').click()"
execute front window's active tab javascript
"document.getElementByTagName('button').click()"
I should note this script runs in Google Chrome.
Thanks for any help in advance.
First of all you're using a wrong function. It should be
document.getElementsByClassName
Try using: (Assuming the Submit button is the only button with class btn)
document.getElementsByClassName('btn')[0].click();
Here's basic definition of the function from Mozilla:
document.getElementsByClassName():
Returns an array-like object of all child elements which have all of
the given class names.
Hence, you get a list of elements. Hence, you select the first element in it (using the 0 as index), and then click on it.
The correct syntax in plain js to select an element by his class is:
document.getElementsByClassName('btn--ac');
With this you'll get an array with all elements with the class 'btw--ac'. In your case try this:
document.getElementsByClassName('btn--ac')[0].click();

How do I get a button to trigger a javascript function?

I have a C#/.NET web application I am working on. On one of the pages I have a table of values generated from a database. I need each value to be clickable so that when you click a value it filters data in a separate table next to it.
So what I decided to do was to make each value into a button:
<input type="button" id="exampleID" class="exampleClass" value="#Model.Data.Value1" />
In my Javascript I have this:
$(".exampleClass").click(function () {...
The code inside the function isn't relevant to the question because it isn't getting called when I click the button. Each button has a unique ID that I am using in my function and I gave them each the same class so that I can catch when any of them are called and then use their unique ID to determine which was clicked. I have set a breakpoint inside the function using Firebug but it's not getting tripped when I click the button. I am stumped as to why this isn't working.
Could be any number of things: are you attaching the click event in the ready method? Is jQuery even loaded on the page? Have you tried refining the selector? For example, $('input.exampleClass').click(). It has to be some dumb mistake.

modify datepick plugin to popup calendar when an icon is clicked

Im using a jQuery calander plugin called datepick on my site. I connect the datepicker to my input field like this:
$('.dobOnly').datepick();
Here's a working example: jsFiddle
By default the calendar pops up when the user clicks on the input. Instead, Id like for it to only pop up if the user clicks an icon next to the input.
Its propbly important to mention that there are several of these inputs on the page Im working on. As such it seems likely that a solution would have to include modifying datepick() to take the id of the related text field as an argument so that the pop up affects the intended input.
What would be the best way to edit waht I have to accomplish this?
According to the documentation you need to wrap the image in a hidden div. Then in the options for datepick specify the showOnFocus and showTrigger properties.
HTML
<input type="text" name="gd2" id="gd2"/>
<div style="display:none">
<img id="calImg" src='https://pnrbuilder.com/_images/cal.png' alt=""/>
</div>
JS
$(function() {
$('#gd2').datepick({showOnFocus: false, showTrigger: '#calImg'});
});
JSFIDDLE: http://jsfiddle.net/xzzCf/7/
There is an example of this on the invocation tab of the documentation

Categories

Resources