0

I need to execute some backend methods based on CSS classes of <html> or <body>.

To determine if the <html> tag has a CSS class name "someClass" I used JQuery $("html").hasClass("someClass"). Then I wrapped it in a function with return values

function hasSomeClass() {
    if ($("html").hasClass("someClass")) {
        return true;
    } else {
        return false;
    }
}

Then I executed my function in my controller via RequestContext.getCurrentInstance().execute("hasSomeClass();");. But RequestContext.getCurrentInstance().execute()'s return type if void.

Q: How can I send the return value of my javascript function to my backend bean function?

I can think of some options, but I would like to pass the return value as parameter to my backend method directly instead of these walkarounds:

  1. Use a global javascript variable as parameter
  2. Use a hidden input field

Edit: About other solutions:

I also tried this solution, but I don't know where to put remoteCommandFunctionName([{name: 'name1', value: 'value1'}, {name: 'name2', value: 'value2'}]);. Do I put it in the <script> tag? Do I wrap it with a function? Because if I System.out.println(name1); I receive null.

My quick fix with weird behaviour:

<h:body onload="hasSomeClass() ? #{controller.onDoSomething('true')} : #{Controller.onDoSomething('false')}" > returns true and false a millisecond apart, although <html> has someClass.

kahranna
  • 1
  • 1
  • 3
  • Try p:remoteCommand which allows you to call a backing bean method from JavaScript: https://www.primefaces.org/showcase/ui/ajax/remoteCommand.xhtml – Melloware Jun 11 '19 at 14:01
  • Your approach is wrong. You're mixing view representation with logic. Why are you trying to get `html`'s css class from a bean? It would be better to call an action instead when some event occur... – Oscar Pérez Jun 11 '19 at 14:04
  • My goal is to get the screen width on load and whenever the window is resized. I want this information to be passed to the backend to determine whether the device is a mobile device or not, because I need this for `rendered="#{controller.mobileView}"`. – kahranna Jun 11 '19 at 14:10
  • 2
    Possible duplicate of [How to invoke a JSF managed bean on a HTML DOM event using native JavaScript?](https://stackoverflow.com/questions/16588327/how-to-invoke-a-jsf-managed-bean-on-a-html-dom-event-using-native-javascript) – Jasper de Vries Jun 11 '19 at 14:26
  • If you found the solution, instead of editing and adding it into the question it would be better to post and accept it as answer. This way it's obvious to anyone that this case is solved. – Selaron Jun 12 '19 at 06:31

1 Answers1

0

My solution that works in my use case

<script>
function hasSomeClass() {
    if ($("html").hasClass("someClass")) {
        someFunc();
    } else {
        someOtherFunc();
    }
}
</script>

<h:body>
<p:remoteCommand name="someFunc" actionListener="#{controller.soSomething('true case')}"/>
<p:remoteCommand name="someOtherFunc" actionListener="#{controller.soSomething('false case')}"/>
</h:body>
kahranna
  • 1
  • 1
  • 3
  • 1
    You can pass parameters to the remoteCommand so you only need one. https://stackoverflow.com/questions/7221495/pass-parameter-to-premotecommand-from-javascript – Kukeltje Jun 12 '19 at 09:21