How to bind spinner input value with a slider in primefaces

See also questions close to this topic

• h:dataTable Setting the width of the cell has no effect

  In h:dataTable, set the width of the style of h:column, but it is invalid. The code is as follows:

  <h:dataTable rowClasses="column50"
  
  .column50 { max-width: 100px; }
  
• Unable to access CDI

  I have a class that contains a method annotated with @PostConstruct which fetchs list of customers

      @ViewScoped
      @Named
   public class CustomerController extends AlertResponse {
    @PostConstruct
      public List<Customer> init() {
      ResponseEntity<List<Customer>> listResponse =
              restTemplate.exchange("http://localhost:8030/api/customers/listCustomers",
                      HttpMethod.GET, null, new ParameterizedTypeReference<>() {
                      });
      customersList = listResponse.getBody();
      return customersList;
  }
  

  When i run the application i get this error

  java.lang.IllegalStateException: Unable to access CDI
  at javax.enterprise.inject.spi.CDI.current(CDI.java:65)
  at com.sun.faces.cdi.CdiUtils.createDataModel(CdiUtils.java:308)
  at com.sun.faces.facelets.component.UIRepeat.getDataModel(UIRepeat.java:255)
  at com.sun.faces.facelets.component.UIRepeat.setIndex(UIRepeat.java:465)
  at com.sun.faces.facelets.component.UIRepeat.process(UIRepeat.java:515)
  at com.sun.faces.facelets.component.UIRepeat.encodeChildren(UIRepeat.java:1081)
  at javax.faces.component.UIComponent.encodeAll(UIComponent.java:1648)
  at org.primefaces.component.column.Column.renderChildren(Column.java:90)
  at org.primefaces.component.datatable.DataTableRenderer.encodeCell(DataTableRenderer.java:1356)
  at org.primefaces.component.datatable.DataTableRenderer.encodeRow(DataTableRenderer.java:1272)
  at org.primefaces.component.datatable.DataTableRenderer.encodeRows(DataTableRenderer.java:1179)
  at org.primefaces.component.datatable.DataTableRenderer.encodeTbody(DataTableRenderer.java:1119)
  at org.primefaces.component.datatable.DataTableRenderer.encodeTbody(DataTableRenderer.java:1072)
  at org.primefaces.component.datatable.DataTableRenderer.encodeRegularTable(DataTableRenderer.java:401)
  at org.primefaces.component.datatable.DataTableRenderer.encodeMarkup(DataTableRenderer.java:331)
  at org.primefaces.component.datatable.DataTableRenderer.render(DataTableRenderer.java:106)
  at org.primefaces.component.datatable.DataTableRenderer.encodeEnd(DataTableRenderer.java:97)
  

  When i removed these lines, the view is rendred fine

             <p:column headerText="Customer Status" sortBy="#{customer.customerStatus}"
                            filterBy="#{customer.customerStatus}">
                      <ui:repeat value="#{customer}" var="data">
                                                  <h:outputText rendered="#{data.customerStatus == 'Unlocked'}">
                                                      <p:tag styleClass="p-mr-2" severity="success" value="UnLocked"
                                                             rounded="true"/>
                                                  </h:outputText>
                                                  <h:outputText rendered="#{data.customerStatus == 'Locked'}">
                                                      <p:tag styleClass="p-mr-2" severity="danger" value="Locked"
                                                             rounded="true"/>
  
                                                  </h:outputText>
                                              </ui:repeat>
                  </p:column>
  

  What could be the problem Thank you in advance
• JSF 2.2 (Mojarra) calls f:ajax twice in nested composite:component

  i've got a pretty simple example:

  there is a nested composite component.

  on my index.xhtml is a component called "ht:wrapper" to which are registered some ajax listeners for onKeyup and onChange events.

  the compostite component "ht:wrapper" itself provides some clientBehaviors for given events and a nested compostite component "ht:input" this inner component is a simple h:inputText with clientBehaviors registered for keyup and change.

  the ajax listener on index.xhtml will call a javascript function which adds the name of the event ("onKeyup" or "onChange") to a at the bottom of the input.

  my problem: "onKeyup" fires twice if i press/release a single button.

  is this a bug or im i dooing something wrong?

  some tests with myfaces 2.2 seems to work as expected and fires only one event at a time.

  here my minimum example:

  index.xhtml

  <h:form id="htmlForm">
      <p>
          This is a simple example how a behavior (keyup, change) gets called twice. <br /> 
          A simple h:inputText is nested in a composite component,
          which provides clientBehaviors.
      </p>
  
      <ht:wrapper
          id="htmlWrapper"
          value="#{myBean.htmlString}">
          <f:ajax
              event="onKeyup"
              onevent="add('onKeyup')" />
          <f:ajax
              event="onChange"
              onevent="add('onChange')" />
      </ht:wrapper>
  
      <script>
          function add(s) {
              $('#htmlBehavior').append('<div>' + s + '</div>');
          }
      </script>
      <div
          id="htmlBehavior"
          style="margin-top:10px; width: 250px; background-color: #ccc; border: 1px solid #472; padding: 5px">
          <div>
              <b>Triggered Behaviors:</b>
          </div>
      </div>
  </h:form>
  

  ht:wrapper

      <cc:interface shortDescription="my simple input wrapper">
      <cc:attribute
          name="value"
          required="true" />
  
      <cc:clientBehavior
          name="onKeyup"
          targets="inputWrapper"
          event="onKeyup" />
  
      <cc:clientBehavior
          name="onChange"
          targets="inputWrapper"
          event="onChange" />
  </cc:interface>
  
  <cc:implementation>
      <ht:input
          id="inputWrapper"
          value="#{cc.attrs.value}" />
  </cc:implementation>
  

  ht:input

  <cc:interface shortDescription="my input">
  
      <cc:attribute
          name="value"
          required="true" />
  
      <cc:clientBehavior
          name="onKeyup"
          targets="inputId"
          event="keyup" />
  
      <cc:clientBehavior
          name="onChange"
          targets="inputId"
          event="change" />
  
  </cc:interface>
  
  <cc:implementation>
  
      <h:inputText
          id="inputId"
          value="#{cc.attrs.value}" />
  
  </cc:implementation>
  

  pom.xml

  <?xml version="1.0" encoding="UTF-8"?>
  <project xmlns="http://maven.apache.org/POM/4.0.0"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
      <modelVersion>4.0.0</modelVersion>
      
      <groupId>com.my.example</groupId>
      <artifactId>behavior</artifactId>
      <packaging>war</packaging>
      <version>1.0</version>
      
      
      <properties>
          <jetty.version>9.4.46.v20220331</jetty.version>
          <mojarra.version>2.2.20</mojarra.version>
          <myfaces.version>2.2.14</myfaces.version>
      </properties>
  
      <!-- Project dependencies -->
      <dependencies>
          
          <!-- Mojarra 2.2-->
          <dependency>
              <groupId>com.sun.faces</groupId>
              <artifactId>jsf-api</artifactId>
              <version>${mojarra.version}</version>
              <scope>compile</scope>
          </dependency>
          <dependency>
              <groupId>com.sun.faces</groupId>
              <artifactId>jsf-impl</artifactId>
              <version>${mojarra.version}</version>
              <scope>compile</scope>
          </dependency>
          
           
          <!-- MyFaces 2.2 -->
          <!-- 
          <dependency>
               <groupId>org.apache.myfaces.core</groupId>
               <artifactId>myfaces-api</artifactId>
               <version>${myfaces.version}</version>
          </dependency>
          <dependency>
               <groupId>org.apache.myfaces.core</groupId>
               <artifactId>myfaces-impl</artifactId>
               <version>${myfaces.version}</version>
          </dependency>
           -->
      </dependencies>
      
      <build>
          <plugins>
              <plugin>
                  <groupId>org.eclipse.jetty</groupId>
                  <artifactId>jetty-maven-plugin</artifactId>
                  <version>${jetty.version}</version>
              </plugin>
          </plugins>
          <pluginManagement>
              <plugins>
                  <plugin>
                      <groupId>org.apache.maven.plugins</groupId>
                      <artifactId>maven-compiler-plugin</artifactId>
                      <version>3.8.1</version>
                      <configuration>
                          <source>1.8</source>
                          <target>1.8</target>
                          <encoding>UTF-8</encoding>
                      </configuration>
                  </plugin>
              </plugins>
          </pluginManagement>
      </build>
  </project>
  
• Problems with the attribute "placeholder" of an <p:inputText tag when the value of the inputText is empty

  I am using JSF Mojarra 2.3.9.SP02 with PrimeFaces 7.0 running on Wildfly 17 with the PrimeFaces's own Sapphire template.

  I have a severe problem with one <p:inputText element in my form, for which I have specified a placeholder, and whose initial value is empty. This is the first input field just below the panel group with the title "Kontaktperson" as shown in the attachment

  

  Below is my minimal working example:

  =========== .xhtml file ==================

  <!DOCTYPE html>
  

  <h:head>
      <f:facet name="first">
          <meta http-equiv="X-UA-Compatible" content="IE=edge" />
          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
          <meta name="apple-mobile-web-app-capable" content="yes" />
      </f:facet>
      <title>Hello</title>
      <h:outputScript name="js/nanoscroller.js" library="sapphire-layout" />
      <h:outputScript name="js/layout.js" library="sapphire-layout" />
      <h:outputScript name="js/ripple.js" library="sapphire-layout" />
  </h:head>
  
  <h:body>
      <style>
          .md-inputfield_marg_top{
              margin-top: 10px;
          }
      </style>          
                  
    <div class="ui-g ui-fluid">   
          <div class="card card-w-title">
              <h:form id="resultsFormId">
                      
                          <div class="card-title">Firmendaten bearbeiten</div> 
                                <p:fieldset legend="Kontaktperson" toggleable="true" toggleSpeed="500">
                                <div class="ui-g-12 ui-md-2">
                                     <div class="ui-inputgroup">
                                        <span class="ui-inputgroup-addon">
                                            <i class="material-icons">account_circle</i>
                                        </span>
                                        <h:panelGroup styleClass="md-inputfield md-inputfield_marg_top">
                                            <p:inputText value="#{fdTestBean.titel}" placeholder="Mag."/>
                                            <label>Titel</label>
                                        </h:panelGroup>     
                                      </div>
                                </div>
                                <div class="ui-g-12 ui-md-2"/>
                                <div class="ui-g-12 ui-md-8">
                                     <div class="ui-inputgroup">
                                        <span class="ui-inputgroup-addon">
                                            <i class="material-icons">account_circle</i>
                                        </span>
                                        <h:panelGroup styleClass="md-inputfield md-inputfield_marg_top">
                                            <p:inputText value="#{fdTestBean.qualifikation}" />
                                            <label>Qualifikation</label>
                                        </h:panelGroup>     
                                      </div>
                                </div>
                                <div class="ui-g-12 ui-md-6">
                                     <div class="ui-inputgroup">
                                        <span class="ui-inputgroup-addon">
                                            <i class="material-icons">account_circle</i>
                                        </span>
                                        <h:panelGroup styleClass="md-inputfield md-inputfield_marg_top">
                                            <p:inputText value="#{fdTestBean.vorname}"/>
                                            <label>Vorname</label>
                                        </h:panelGroup>     
                                      </div>
                                </div>
                                <div class="ui-g-12 ui-md-6">
                                     <div class="ui-inputgroup">
                                        <span class="ui-inputgroup-addon">
                                            <i class="material-icons">account_circle</i>
                                        </span>
                                        <h:panelGroup styleClass="md-inputfield md-inputfield_marg_top">
                                            <p:inputText value="#{fdTestBean.nachname}"/>
                                            <label>Nachname</label>
                                        </h:panelGroup>     
                                      </div>
                                </div>
                            </p:fieldset>
             </h:form>
        </div>
     </div>
      
      <h:outputStylesheet name="css/nanoscroller.css" library="sapphire-layout" />
      <h:outputStylesheet name="css/ripple.css" library="sapphire-layout" />
      <h:outputStylesheet name="css/grid.css" library="sapphire-layout" />
      <h:outputStylesheet name="css/layout-#{guestPreferences.layout}.css" library="sapphire-layout" />
     </h:body>
  </html>
  

  And my backing bean here:

  package at.home.digest.web.ave.makler.firma;
  
  import java.io.Serializable;
  
  import javax.inject.Named;
  
  @Named("fdTestBean")
  @javax.faces.view.ViewScoped
  public class FDTestBean implements Serializable {
  
      private String titel;
  
      private String qualifikation;
  
      private String vorname;
  
      private String nachname;
  
      public String getTitel() {
          return titel;
      }
  
      public void setTitel(String titel) {
          this.titel = titel;
      }
  
      public String getQualifikation() {
          return qualifikation;
      }
  
      public void setQualifikation(String qualifikation) {
          this.qualifikation = qualifikation;
      }
  
      public String getVorname() {
          return vorname;
      }
  
      public void setVorname(String vorname) {
          this.vorname = vorname;
      }
  
      public String getNachname() {
          return nachname;
      }
  
      public void setNachname(String nachname) {
          this.nachname = nachname;
      }
  
  }
  
• When nesting another datatable in rowexpansion, splitbutton stops working when 2 or more main rows are loaded

  So I'm trying to nest a datatable within another datatable in the rowexpansion tag as follows:

  <h:form>
      <p:dataTable var="item" 
                   value="#{bean.items}">
          <p:column>
              <p:rowToggler/>
          </p:column>
          <p:column headerText="Item Name">
              <h:outputText value="#{item.name}"/>
          </p:column>
          <p:rowExpansion>
              <p:dataTable var="subitem" 
                           value="#{item.subitems}">
                  <p:column headerText="Subitem Name">
                      <h:outputText value="#{subitem.name}" />
                  </p:column>
                  <p:column>
                      <p:splitButton value="Save" action="#{bean.save}">
                          <p:menuitem value="Update" action="#{bean.update}"/>
                          <p:menuitem value="Delete" action="#{bean.delete}"/>
                      </p:splitButton>
                  </p:column>
              </p:dataTable>
          </p:rowExpansion>
      </p:dataTable>
  </h:form>
  

  the testing methods in the bean are just

      public void save() {
          addMessage(FacesMessage.SEVERITY_INFO, "Success!", "Saved subitem");
          PrimeFaces.current().ajax().update(":frmTopbar");
      }
  
      public void update() {
          addMessage(FacesMessage.SEVERITY_INFO, "Success!", "Updated subitem");
          PrimeFaces.current().ajax().update(":frmTopbar");
      }
  
      public void delete() {
          addMessage(FacesMessage.SEVERITY_INFO, "Success!", "Deleted subitem");
          PrimeFaces.current().ajax().update(":frmTopbar");
      }
      public void addMessage(FacesMessage.Severity severity, String summary, String detail) {
          FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(severity, summary, detail));
      }
  

  If only a single item and its subitems is loaded, everything displays and splitbutton buttons work fine.

  The bean just sends a FacesMessage to test and like I said, the message is properly shown for each of the 3 buttons.

  But as soon as I load 2 or more items and their subitems, everything looks visually correct, but the commands in splitbutton no longer reach bean, so no FacesMessage is sent.

  Does anyone have a clue about what is going on or a suggestion as to what can be done to fix it?

  I'm using primefaces v11.0

  Thanks a lot!
• Getting error while creating an IBAction "Cannot convert value of type 'Float' to expected argument type '[CVarArg]'"

  I want to connect a slider to the viewController in my app which I am writing with swift.

  As soon as I create an IBAction:

  @IBAction func heightSlider(_ sender: UISlider) {}
  

  I immediately get the error message:

  "Cannot convert value of type 'Float' to expected argument type '[CVarArg]'".

  I have already searched for the solution in the Apple documentation but I can't get rid of the error.

  Can someone please help me with this?

  Many greetings

  FULL CODE: import UIKit

  class ViewController: UIViewController {
  
      override func viewDidLoad() {
          super.viewDidLoad()
          // Do any additional setup after loading the view.
      }
  
      @IBAction func heightSlider(_ sender: UISlider) {
      }
      
      @IBAction func weightSlider(_ sender: UISlider) {
      }
      
  }
  

  Screenshot: Cannot convert value of type 'Float' to expected argument type '[CVarArg]'

  I am using Xcode Version 13.3 (13E113)
• How to find index of previous active class

  I am trying to make a slider. Most of it is working till here, but I am not getting further as I want to find the index of the item which I removed the class as last from.(before the click)

  So when I click on a dot, the clicked dot must be enabled and get the active class and the class on the previous active dot needs to be removed.

  navDots.addEventListener('click', e => {
           
           // make only dot's clickable
           const targetDot = e.target.closest('.dots');
  
          // disable NavDots for clicks
          if(!targetDot)return;
              
          //Find the index of the clicked btn
          const dotIndex = Array.from(targetDot.parentNode.children).indexOf(targetDot);
          console.log(dotIndex);
  
          // Add the active class tot the dot     
          navDots.children[dotIndex].classList.add('active');
         
          //HOW TO REMOVE PREVIOUS DOT ACTIVE style?
              
              //show image with dotIndex
              showImages(dotIndex);
  });
  

  Thank you for helping,

  r,y.
• Slider in Apple store style

  I know I would show some effort in this but I have no idea... I'm trying to make a slider like the one in the store section of Apple website.

  https://www.apple.com/store

  The slider has to be aligned to the left side of the grid when the page is loaded and then it has to go full width when the user scrolls it. I can't find any solution. Can someone point me to the right direction?
• Spinner wont show selected and wont respond to item selection

  I'm trying to make a very very simple spinner at least, as follows:

  XML:

  <Spinner
       android:id="@+id/spinner_categories"
       android:layout_width="0sp"
       android:layout_height="wrap_content"
       android:drawSelectorOnTop="true"
       android:layout_weight="1"
       android:textColor="#000000"
       android:spinnerMode="dropdown"/>
  

  JAVA:

  spinnerCategories = findViewById(R.id.spinner_categories);
  ArrayAdapter<String> adapter = new ArrayAdapter<String>(
                  getApplicationContext(),
                  android.R.layout.simple_spinner_item,
                  categories);
  adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
  spinnerCategories.setAdapter(adapter);
  Log.d(Utilities.LOG_FLAG, "SPINNER: " + spinnerCategories.toString());
  spinnerCategories.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
              @Override
              public void onItemSelected(AdapterView<?> adapterView, View view, int position, long l) {
                  Toast.makeText(context, categories.get(position).toString(), Toast.LENGTH_SHORT).show();
                  Log.d(Utilities.LOG_FLAG, "SELECTED");
              }
  
              @Override
              public void onNothingSelected(AdapterView<?> adapterView) {
                  Log.d(Utilities.LOG_FLAG, " NOT SELECTED");
              }
          });
  

  I can see the entire list, but once I click on an item, nothing happans, and it wont show the selection at all, even if I use setSelection(), and if I try to do spinnerCategories.getSelectedItem().toString() I get a NullPointerException. I tried searching the web a lot, but none solution seems to help me...

  ---

  Edit

  For some reason when I load the page and then I go out of the page and reenter it, only then it will show the selected items of the spinner

  • On the first load it shows for a very brief second and then it's gone until the page is reentered the second time
• Android: Spinner does not save selection after configuration changes

  I have Spinner with ArrayAdapter. ArrayAdapter code show like:

  class HouseholdsArrayAdapter(
  context: Context,
  resource: Int,
  ) : ArrayAdapter<Household>(context, resource, arrayListOf()) {
  
  fun submitList(list: List<Household>) {
      this.clear()
      this.addAll(list)
  }
  
  override fun getView(position: Int, convertView: View?, parent: ViewGroup): View {
      return super.getView(position, convertView, parent).also {
          (it as TextView).text = getItem(position)!!.fullAddress
      }
  }
  
  override fun getDropDownView(position: Int, convertView: View?, parent: ViewGroup): View {
      return super.getDropDownView(position, convertView, parent).also {
          (it as TextView).text = getItem(position)!!.fullAddress
      }
  }
  

  Also i have households list. It is LiveData in my ViewModel. I observe it in onViewCreated() method:

  viewModel.householdList().observe(viewLifecycleOwner){
          householdAdapter.submitList(it)
  }
  

  My issue: Spinner DOES NOT save selected position after rotating screen. What is more: Spinner save position after rotating if i submit households list immediately. But it does not work with LiveData mechanism. This is very strange because how i understand Spinner must save state with the help onSaveInstanceState() and onRestoreInstanceState().
• When click on Android spinner the item cannot be chosen

  Could you please help me? The spinner I have created a spinner. When I click on it I can see a list of items but when I click on any of them, the drop-down many closes, and no element gets selected. I tried to change text color, and background but nothing helps. Any idea what could be a problem?

  public class MainActivity extends AppCompatActivity implements AdapterView.OnItemSelectedListener {
  
  int quantity = 0;
  TextView textView;
  Spinner spinner;
  ArrayList spinnerArraylist;
  ArrayAdapter spinnerAdapter;
  HashMap goodsMap;
  String goodsname;
  double price;
  
  @Override
  protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      
      textView = findViewById(R.id.textView);
      spinner = findViewById(R.id.spinner);
      spinnerArraylist = new ArrayList();
  
      spinnerAdapter = new ArrayAdapter(this, android.R.layout.simple_spinner_item, spinnerArraylist);
      spinnerAdapter.setDropDownViewResource(android.R.layout.simple_spinner_item);
      spinnerAdapter.notifyDataSetChanged();
      spinner.setAdapter(spinnerAdapter);
  
  
      spinnerArraylist.add("guitar");
      spinnerArraylist.add("drums");
      spinnerArraylist.add("keybord");
  
      goodsMap = new HashMap();
      goodsMap.put("guitar", 500.0);
      goodsMap.put("drums", 1500.0);
      goodsMap.put("keybord", 1000.0);
  
  }
  
  @Override
  public void onItemSelected(AdapterView<?> adapterView, View view, int i, long l) {
      goodsname = spinner.getTransitionName().toString();
      price = (double) goodsMap.get(goodsname);
      TextView priceTextView = findViewById(R.id.textView);
      priceTextView.setText("" + quantity + price);
  }
  
  @Override
  public void onNothingSelected(AdapterView<?> adapterView) {
  
  }
  

  The spinner itself:

      <Spinner
      android:id="@+id/spinner"
      android:theme="@style/mySpinnerItemStyle"
      android:layout_width="match_parent"
      android:layout_height="wrap_content" />
  

  style.xml

  <resources>
  <style name="mySpinnerItemStyle" parent="@android:style/Widget.Holo.DropDownItem.Spinner">
      <item name="android:textSize">12sp</item>
      <item name="android:textColor">@color/black</item>
      <item name="android:spinnerMode">dropdown</item>