how to force a text box to have its class a custom class name
So I have a requirement where we manipulate the input of the text box via javascript/query that is called from a local action on a button press. On the section that is called contains a text box where I've put a class name on the advanced presentation options.
but when running the case and then clicking the button. the text box's class name resets to "leftJustifyStyle".So that makes me unable to manipulate the input of the text box.
How do I make it so that when the modal/overlay shows up. the class name of the text box stay as "manipulate-input"?
Updated: 28 Jun 2020 2:31 EDT
Morgan Stanley
IN
Hello eriikoh,
Once the control is saved with custom classes, it won't be removed at runtime unless it conflicts with OOTB custom classes.
This is what happens when we add custom class to layout or control :
I have added "custom-class" to the text control from the presentation tab.
Here is the snip of the DOM structure of the text control rendered in our browsers.
The class which we mentioned in the control is added to the First node (red box) of the control, not on the input tag (green box). This is because to provide the custom class with access to all elements of that control.
To can select that input tag, use the following selector:
.custom-class input
The above selector will get all input tag elements available inside the custom-class.
Here is the example to get the value of the text control in JS.
var val;
val= document.querySelectorAll('.custom-class input')[0].value;
console.log(val);
I think you have looked at the class on the input tag. Can you give a try on JS code with the above selector?
I hope it helps. Good Luck!
ACN
PH
I will look into this one, thank you!
ACN
PH
I can't get the class via jquery. I was trying an on click event but it doesn't work. It looks something like this
$('.manipulate-input input').click(function(){
codes
})
Morgan Stanley
IN
When using the click event, you have to check whether the DOM is fully-loaded. Try the below code.
<script>
$(document).ready(function(){
$('.manipulate-input input').click(function(){
logic here
});
});
</script>
Try first with console.log() or alert(); in the logic part to check whether the event is triggered and then write the logic.
Let me know if you face any more issues!
Updated: 30 Jun 2020 3:37 EDT
ACN
PH
I wrote the script on a text file by the way. It works on the first section but if I do a local action that launches a modal or overlay or submit to go to the next page, the script no longer works. what I did is add it to the harness while also setting the class name to the advanced presentation options then did this.
$('.flat-menu').on('ready keypress blur click', function(){
$('.manipulate-input').click(function(){
console.log('sample');
})
})
but I think there is a more efficient way of doing it like your answer.
Morgan Stanley
IN
Are you facing any other issues?
I hope your issue is fixed.