Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    May 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Fire change-event manually

    Hey I've got a problem with fireing a change-event manually.
    So I have a selectOneMenu (i'ts like a dropdown in jsf) with different values.

    If I choose a value of this dropdown-list, a datatable should be updated. This works correctly, if i choose this value manually.

    Now there is a case, where I need to insert a new value to the selectOneMenu. This new value gets selected automatically, but the change-event to update the datatable doesn't get fired...

    So basically I have this button to save a new value to the selectOneMenu which then gets selected correctly, but the datatable doesn't get updated, which is why I tried to write the function fireChange() and gave that to the oncomplete of the button:

    Code:
    <p:commandButton ajax="true" id="seatingPlanSave" actionListener="#{EventAssistentController.createSeatingPlan}" value="#{msg.save}" update=":createEvent:EventSeatingPlan, :createEvent:ticketTypePrices" 
    oncomplete="fireChange()"/>
    For the fireChange()-function, i tried a few different things:

    Code:
    function fireChange() {
    	var element = document.getElementById("createEvent:EventSeatingPlan_input");
    element.onchange(); 
    }
    Code:
    function fireChange() {
    var element = document.getElementById("createEvent:EventSeatingPlan_input");
    $(element).trigger("change");
    }
    Code:
    function fireChange() {
    if ("fireEvent" in element)
    	element.fireEvent("onchange");
    else {
    	var evt = document.createEvent("HTMLEvents");
    	evt.initEvent("change", false, true);
    	element.dispatchEvent(evt);
    }
    But none of these work

    Can you please tell me how I can achieve this?

    Thanks, Xera

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    Look at this it works and if not a strieght insert for you at lest a easy modification:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>
    
    <!-- this is the dropdown select. It triggers the function that adds to the DB-->
    <select id="mySelect" onchange="changer(this.value);">
      <option value=""></option>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="opel">Opel</option>
      <option value="audi">Audi</option>
    </select>
    
    <!-- This button calls the JS that inserts a new option to the select dropdown -->
    <button type="button" onclick="displayResult()">Insert option</button>
    
    <script type="text/javascript">
    // This will add info to a DB. Here it just does an alert with what should be inserted
    function changer(token){
    	alert(token);
    }
    
    // This adds extra option AND CALLS THE DB INSERT FUNCTION
    function displayResult()
    {
    var x=document.getElementById("mySelect");
    var option=document.createElement("option");
    option.text="Ford";
    try
    	{
    		// for IE earlier than version 8
    		x.add(option,x.options[null]);
    		changer("Ford");
    	}
    		catch (e)
    	{
    		x.add(option,null);
    	}
    }
    </script>
    </body>
    </html>
    Evolution - The non-random survival of random variants.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •