My English is bad so I write easily. I'm using Jquery Dialog and I want to show multiple dialogs. (dialog1 opens dialog2 opens dialog 3...)
But the problem is when I open dialog1 and then dialog2 (confirm dialog, So that the user can choose Yes/No in dialog2 and return value to dialog1), I don't know how to return that value until user click the yes or no buttons.
I know Javascript is asynchronous, so when user opens dialog1 and click open dialog2, it won't wait for event in dialog2 to finish.
Here is my source code (simple logic) jsfiddle.net/juRm9/2
all dialogue are nothing but div.so store some hidden variable with id inside the div where you want to get the data.
And bind onclick events of second dialogue(according to your requirement onclick of yes or no) to assign the value to hidden element of first div.
You can use store values in hidden fields, to in the page. then use it any time you want.
Related
I am using Devextreme module for a dxlist popup. I am able to open the popup and to show the list of items with a search input field but I have one more list popup. When I search in the first popup and close it, open the second popup, the search field text is not cleared.
<dx-popup class="popup popupMore" [width]="500" [height]="500" [showTitle]="true" title="{{popupdata.name}}" [dragEnabled]="false"
[closeOnOutsideClick]="true" [(visible)]="isVisible">
<div class="list-container">
<dx-list #list [dataSource]="popupdata.data" [height]="400" [searchEnabled]="true"
searchMode="contains" >
<div *dxTemplate="let data of 'item'">
<div>{{data}}</div>
</div>
</dx-list>
</div>
</dx-popup>
The above code is used in the html. Same popup will open for another two event.
Example:
I have three buttons. When we click on each button we need to open the same popup with different data. When we click on the first button, this list popup will open with a search option. I searched in the search field and closed the popup. Then clicked the second button, same popup will open with new data but the search input field is not cleared.
Could anyone please help me, how to clear the search field for the next list popup that opens?
Thanks in advance.
As mentioned in the comment above, the cleverest approach I could think of is registering the dxPopup's onShown event and, when fired, you may either:
Reset the list.instance searchValue option (using this.list.instance.option('searchValue','');).
Assign a two-way binded value to the dx-list component and reset that value. For that case, specifically, add [(searchValue)]="_searchValue" to the html dx-list tag, and add this._searchValue = '' in the dxPopup's onShown callback.
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.
I have a user control which consists of a textbox, a linkbutton and a jquery dialog, so when the user clicks the link button they get the dialog and select a user name in the list. They select the user, the dialog closes and they see the selected user name in the textbox. This is all working fine. The issue I have is when I have multiple instances of the same user control on my page. The dialog appears, but when they select the user regardless of which instance of the user control they have clicked to open the dialog., it always populates the 2nd textbox.
The javascript to set the textbox value is all in the user control. I have googled it everywhere and everybody says break it out into a seperate file, so I tried this
User Control
function setUserDetails(id, name) {
setSelectedValue("<%# tbxSelectedUserName.ClientID %>", name);
setSelectedValue("<%# tbxSelectedUserId.ClientID %>", id);
closeSelectUserDialog();
}
External Javascript File.js
function setSelectedValue(control, value) {
$(control).val(value);
}
now nothing gets set. The function is called but no value is shown in either textbox.
Any ideas?
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.
I want to create an alert box with 3 radio buttons in it. It should be like
'Replace'
'Save'
'Merge'
along with OK and Cancel buttons. Any idea how to achieve this?
To add to what WoLpH said, you specifically want a modal overlay that can be called programmatically similar to an alert box. Give jQuery UI or YUI a try.
There is no default javascript box that does this, you have confirm(), prompt and alert available and that's it.
There are however widgetsets/libraries that give you this option. Try Ext JS for example
You can use javascript to create modal dialog box with the controls you would like to show. You can customize the look & get rid of the default grey dialog boxes, it's really cool. Check the link below.
Javascript modal dialog sample
use the input tag to generate radio buttons
<input type="radio" name="button_1">Replace</input>
and div tag to generate you okay and cancel buttons
<div id="cancel">Cancel</div>
and have the onclick functions of your div's be a javascript call which pulls the data out of the radio buttons.