Bound cfselects' onClick causing issue - javascript

I have a cfselect which is working fine. I have an onclick event to refresh the binding to the cfselect because the query contents keep changing quite frequently and I want the users to have the updated list.Now i want to add "Select any Bus" as the first option which I am not able to do.
I tried adding a row to the query result ahead of it being returned from my cfc. But I am not able to select any other value other than 'Select any Bus'.
My cfselect code is:
<cfinvoke component="getCalculatorData" method="getAllBus" argumentcollection="#houseArgs#" returnvariable="qry_busList">
<cfform style="align:centre" id="frm_drpDwnBus" name="frm_drpDwnBus">
<cfinput name="hdnrr" value="#rrSbstring#" type="hidden">
<cfselect name="dpDwnBs" bindOnLoad="true"
bind="cfc:getCalculatorData.getAllBus(hdnrr.value)"
value="busType_id_pk"
display="busType_name" >
onclick="javascript:refresh(hdnrr.value)"
<option value="0" on>Select a Bus</option>
</cfselect>
</cfform>
My cfc:
SELECT busType_id_pk
,busType_name FROM tbl_bustype
WHERE busType_railroad_letter=
javascript:
function refresh(s)
{
ColdFusion.Bind.assignValue('dpDwnBs','value', dataCalcu.getAllBus(s))
}
As soon as i remove the onclick event all works fine. Please help me out here.

Having misread the question originally, let's take another swing.
A standing onclick bind event on a select box will never work. To use a select box the way most people do, you click it twice: once to drop it down, and once to select your item. However, on the first click you reset the item. Even if the box stays open (I suspect this might be browser dependent, but hanven't really tested), the second click will also reset it, meaning that you'll lose your selection, as the selected item is destroyed and recreated as a new DOM node.
I can think of three solutions.
First, you can add a refresh button to the form, and refresh the values in the select box then.
Second, you can use jQuery or similar to bind the event, and then onclick refresh the option list and then remove the onclick event binding. This means that the user can only refresh the options once, but (hopefully) that should be enough. If the page uis used multiple times (via AJAX for example) you can rebind the onclick refresh event on submission.
Finally, display the form item as an uneditable text field (onfocus="blur();" IIRC). Add a button, or change the focus event to launch a modal window that pulls the options from your CFC via AJAX or similar and displays them, so that anytime they choose to edit this item, they get a new set of choices.
All of these have the disadvantage of not preserving previous selections, as the bind refresh destroys all the option odes and builds a new option list.

Related

Semantic UI React - do not trigger onChange while dropdown option list is still open

I have a dropdown in semantic on ReactJS and I want to trigger the onChange event only when a user really selects an option, and not when the list of options is still displayed.
Let me explain:
The dropdown is created like this:
<Dropdown
placeholder='Select language'
fluid
search
selection
options={options}
onChange={...}
/>
Which displays like this:
When you click on it, it opens (drops down?) the list of options:
The problem is that, when you use the down arrows to go to the desired option, it triggers onChange every time you press the down arrow. In this case, to reach Aragones, it triggers the onChange 4 times.
I want to trigger the onChange only when the list of options gets closed, and not the 3 previous times, where the user didn't mean to select any value:
Intuitively for me, the user only wants to select the value when he pressed enter, or clicked in the option, or clicked outside the options to close the option list. Otherwise she is just browsing around. But I wouldn't want to write individual listeners for all these cases.
In my case, selecting an option has a lot of consequences, so I want to know when the user really wants to do this. How can I do this?
As an alternative, can I listen to show or hide events for the option list? or ask in the onChange if the option list is shown or hidden?
Thanks!
From https://react.semantic-ui.com/modules/dropdown/,
selectOnNavigation
true {bool}
Whether or not to change the value when navigating the menu using arrow keys.
Setting to false will require enter or left click to confirm a choice.

force a change event on an DOM element without actually changing it

Summary: I am trying to force a change event to fire on an HTML element, without actually changing it, but the event does not seem to fire.
My scenario: There is a page (created by someone else) that is designed to hide certain fields until a value from a certain dropdown is selected, at which time the dependent fields will appear. But in some scenarios, the dropdown should be autopopulated and fields should appear by default. So I am trying to trick the page into showing the dependent fields when it is first loaded. I do something like this:
form.field('THEDROPDOWNFIELD').$el.trigger('change');
But nothing happens. I found that
form.field(‘THEDROPDOWNFIELD’).setValue(form.field('THEDROPDOWNFIELD').$el[0][1].value); //dummy value, first value in the list
form.field('THEDROPDOWNFIELD').$el.trigger('change');
will fire the change event. For whatever reason, $el.trigger('change') does not trigger the change unless the DOM element's value truly has changed. The problem is I don't want the dummy value in that dropdown to be there.
Summary (again): Is there a way to force the dropdown's element change event to fire when the selected value in the dropdown has not actually changed?
This snippet works ok (uses JQuery):
$('#toChange').bind('change', function() {
$('#result').text('select changed');
})
$('#triggerChange').bind('click', function() {
$('#toChange').trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="toChange">
<option>---</option>
<option>First</option>
<option>Second</option>
<option>Third</option>
</select>
</form>
<br>
<button id="triggerChange">Click to trigger change</button>
<div id="result"></div>
Your code doesn't seem to be failing, so it must be something related to the DOM or the way the other guy has implemented this effect. It is hard to guess what your problem might be. So my suggestion is as follows:
Check if its really implemented to trigger on radiobutton change and not on a click event handler on a div/other element that's not directly related to the radio button.
Check if your HTML code is failing.
Provide more code snippets that you think might be related.

jQuery change function, how to save the state like a session

I am looking for a way with my form I am currently showing and hiding fields based on the values selected in the dropdowns, What I want to know is.
when i select yes and the field below displays I click submit on the form, if I return to the form the value is still present but the field is hidden again...
How can I prevent that from happening by default?
I want my browser to remember the jQuery change funtions state I left it at after I submit the form.
What you want to do is 'refresh fields visibility' in some cases. I suggest you to create such function refreshFieldsVisibility. Such function reads values from the dropdown and shows/hide the proper field. Then call your function:
When elements state is changed, with on('change') events.
When document is ready (this is your case as I understand), with $(document).ready
Any other situation if necessary

Saving form values dependant upon onclick/onchange functions

I have a form that saves user entered values on submit with php.
Some of the fields are in div's that are display:hidden until an onclick or onchange function changes that div to show.
How can I show only the divs containing fields with saved values after the form has been submitted? I have saved the values in the always visible fields but cannot trigger their functions.
I am using very little jquery because I am new to the syntax and would prefer to implement solutions I can understand and adapt. Simple jquery is acceptable if it is a better/quicker/easier solution.
Thanks
Code Example:
<input type="radio" id="customer" name="jobtype" value="customer" onclick="getJobType()" autofocus>Customer
<input type="radio" id="store" name="jobtype" value="store" onclick="getJobType()">Store
<span id="customerjobs" style="display:none">
<select id="customer" name="customer" onchange="createJobsList(this.value)">
*various options*
</select>
<span id="jobslist"><br></span>
</span>
The first span (id=customerjobs) is initially hidden. Upon selection from the radio's, all but the corresponding span is set to display:none and the selected is set to display:block. On submit, the selected radio is saved, but the onclick isn't called to show the span.
The second span (id=jobslist) content is populated by innerHTML using the results of an ajax call to PHP when a selection is made. On submit, the selected option is saved, but the onchange isn't called to fill the span.
So I need to trigger the onclick of a saved radio value to show my content and trigger the onchange of a saved select to populate additional content.
Note: I used onblur with javascript to set the focus initially so any action would trigger the content but it caused an unnecessary pause in filling the form that I didn't want.
Page loads with only a radio selection.
User clicks radio button.
Onclick function changes style of span id=customerjobs to display:block.
The select input inside the span is now visible. The user selects an option.
Onchange function makes an ajax call to request information from the server which is placed in span id=jobslist.
User submits form to same page.
Form saves entered values so they are still selected when page reloads.
Onclick and onchange functions are not triggered by PHP saved values so steps 3 and 5 never occur. Page is left with only the radio buttons unless it is clicked again.
Well, I have a jsfiddle to illustrate my problem using default selections because I cannot use PHP to save entered values.
Imagine the form has just been submitted and the values saved are the checked radio button(customer) and the selection from the drop down(1) which adds the word "customer".
Ideally, the entire form would still be visible (The selected radio, the selected option and the content added to the last span "customer").
Instead, only the selected radio is visible unless it is clicked again to unhide the select drop down. The drop down retains its' value as well, but the content in the last span will only appear onchange.
http://jsfiddle.net/L5H2u/31/
Try it out and advance thanks for any suggestions.
Can you hook a function to onload that checks the radio buttons and simulates the click by calling getJobtype()? That will get the initial case where the radio button is already the way the user wants it. Further clicks will work as you planned.
Edited to add: If I understand you right, all is well the first time the page is loaded because the user has to click something and that runs your getJobType() function. However, when the page is reloaded, the correct radio button is already checked, the user doesn't change anything, and your function doesn't run. If that's correct, running getJobType() from onload should fix it.
You may need something like <input type="hidden" id="firstrun" value="true"> The PHP would set that to false on subsequent loads of the page, and the onload function would only make things happen if "firstrun" was false. Edit: You don't need this because getJobType() has no default action; keep reading.
Edited still more: You have checked="checked' on the Customer radio button, so if the user is a customer, even the initial run doesn't reveal the hidden material.
Remove checked="checked" when the page is initially loaded so that on the initial presentation, neither button is checked.* Then add window.onload=getJobType; to the end of your JavaScript.
On the initial load, getJobType() will do nothing since it checks both buttons and has no default action. When a button is clicked, getJobType() will run and act based on the button that was clicked.
When the page is loaded a subsequent time, one of the buttons will be checked and when onload runs getJobType() it will perform the corresponding action.
The radio buttons, SELECT values, and any other form elements that are preserved and "reflected" by the server-side PHP will be correct when the form is loaded the second (and subsequent) times. Where you need an onload JavaScript function is when one of those values also changes something else, such as making a hidden DIV visible. If there are functions other than getJobType() that manipulate the DOM, it will likely be cleaner to write an init function that sets up the DOM based on the values of the form elements as preserved by the PHP process.
* I normally advocate having some button checked by default so that the user can always get back to the initial state. This case seems to be an exception.

HTML select element onchange trigger for already selected option

I have the following HTML containing a drop down list (single selection)
<script type="text/javascript">
$(document).ready(function () {
$("#garden").bind('change', function() {
alert("Changed");
});
});
</script>
<body>
<div id="content">
<select id="garden">
<option value="flowers">Flowers</option>
<option value="shrubs">Shrubs</option>
<option value="trees">Trees</option>
<option value="bushes">Bushes</option>
</select>
</div>
</body>
</html>
When the HTML page is rendered, Flowers is the already selected element in the drop-down by default (being the first one). If I select any other value (other than "Flowers"), the Javascript function is fired and a alert box containing "Changed" is shown.
Q1: But, in case I re-select Flowers again, the onchange event is not triggered. I understand it is because nothing was 'changed' in the drop-down list. Is there a way a function is triggered even when no change to the already selected value in drop-down is done?
Q2: How to extract the value of the element which has just been selected (even if nothing new was selected - that is, user clicked on the drop down, and simply clicked somewhere else).
I have already tried the onblur but that requires that the user clicks somewhere else on the document so that the drop-down loses focus. Any help would be really appreciated.
[I have edited out the HTML headers and other script inclusions in the code snippet provided for brevity.]
Well I think I don't get you 100%, but some things I can suggest here are:
bind a click event handler to the select
$("#garden").bind('click', function() {
alert($(this).find('option:selected').text());
});
bind a focusout event handler
$("#garden").bind('focusout', function() {
alert($(this).find('option:selected').text());
});
and of course bind the change event handler which you already got. The click event handler might be a little bit tricky since it would fire every time you click on the element. But if you don't alert() it every time it should not be a problem at all, you got the current selection and can do with it whatever you want.
You can manually trigger the event when you load the page:
$(document).ready(function() {
$("#garden").bind("change", function() {
// ...
}).change();
});
This will pick up the initial value - so I think it makes your second question irrelevant. This won't work in all situations (I'm hoping that your actual handler isn't an alert but actually something useful!), but could come in handy...
Are you sure that whatever you are doing is the most sensible way to do things? It seems like very strange UI to have different behaviour if you select an item by leaving it as the default compared to selecting it by opening up the select and selecting the currently selected item.
If you are wanting to make them explicitly choose flowers then maybe you want a dummy entry at the top that says "Please choose one" that will then mean they are forced to actually change to flowers if that is what they want. It would probably be simpler than complicating your code with more event handlers and such like.
If you do really need to go down the path you are following then you may want to consider what the behaviour is if somebody just tabs to the control and then past it. ie should that fire your script off as well?
Edit to respond to comment at length:
What you will want to do in this case is hook into the onSubmit handler of the form. This is called, as you can imagine, when the form submits. If your handler returns false that form will not be submitted.
This handler is traditionally where you would do client side validation by examining the state of whatever form elements you care about and checking their values are valid. In this case you'd check if the value of garden was "N/A" or whatever you set it to and if so pop up an alert (in the simplest case) and possibly mark whichever fields need attention. Then the user will choose a valid entry (hopefully) and next time he submits your validation will succeed, you return true in the handler and the user can be happy he submitted valid input.
As always though the standard disclaimer that any data can be sent to your server by a determined user so you should not assume that just becasue you had this validation that you are getting valid data on the server. :)
Question 1: I think the event for that would be "onSelect".
Question 2: I think the "onSelect" event would work for that as well, not 100% sure. Something to try at least and mess with.
To my opinion, the easiest solution is to duplicate the first option into a disabled and hidden element having the same label. Your dropdown list will display the label of the hidden option, but thus won't be displayed in the list.
<select id="garden" name="blabla" onchange="this.form.submit();" >
<option value="" disabled selected style="display:none;">Flowers</option>
<option value="flowers" >Flowers</option>
<option value="shrubs" >Schrubs</option>
<option value="trees" >Trees</option>
<option value="bushes" >Bushes</option>
</select>
Your question seems same as HTML SELECT - Trigger JavaScript ONCHANGE event even when the option is not changed
and the solution mentionned above was provided by Simon Aronsson.
Nota bene : the solution works perfectly with Firefox, but not with Internet Explorer.

Categories

Resources