Question
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"?
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
})
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!
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.
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:
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.
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!