This is an elementary problem (I think), and I am embarrassed to ask it here. It may have been answered already, but I could not find it my searches.
In its simplest form, there are two check-boxes, and each CheckBox has a control (e.g, TextBox or DropDownList) associated with it. When the checked state of a CheckBox changes, the associated control must be enabled or disabled.
JavaScript function:
<script type="text/javascript:>
function enable(bValue, control)
{
document.getElementByID(control).Enabled = bValue;
}
</script>
I'd call this function as an event procedure, e.g, enable(this.Checked, "expJob") and enable(this.Checked, "itemJob"), in the HTML below:
<body>
Billable? <asp:CheckBox ID="expBillable" runat="server" Checked="false" OnCheckedChanged="enable(this.Checked, "expJob");" />
to <asp:DropDownList ID="expJob" runat="server" Enabled="true" />
<br /><br />
Billable? <asp:CheckBox ID="itemBillable" runat="server" Checked="false" OnCheckedChanged="enable(this.Checked, "itemJob");" />
to <asp:DropDownList ID="itemJob" runat="server" Enabled="true" />
The problem is that, because of the use of quotes, I am unable to specify the "expJob" parameter in the HTML. Even the use of single quotes does not work.
So the question: Will this approach work? What is the proper syntax?
What is the best way to write and use a function such as this? I am sure such function use will be required when having to iterate over the rows in a grid.
Interestingly, all the questions/answers I have seen use a control's disabled attribute. I am only able to use the Enabled attribute. Can someone explain why, and what the difference is?
You have to use the single quotes ('itemJob')
I think OnCheckChanged is a server event. Asp.net needs a handler in the code behind when you want to use this. Thats why you are getting an error. Find the correct client side event when you want to fire a client side event. Take care of firing postbacks, but default for checkbox is "no auto postback" anyway.
Please be aware that javascript is case sensitive so
document.getElementById is good,
document.getElementByID is bad (note the ID in caps is bad)
Related
First post here, so bare a bit with me. Searched a lot, but either because I was to blind or because I just didn't use the correct search strings, I haven't found any answer relevant to my problem.
Basically, I have a web application written in Java and using Primefaces. I'm using a p:layout, having the main content in the center unit, the header in the north and the footer in the south unit of the layout. The west layout unit holds a p:poll which runs every two seconds cand calls a js function when the oncomplete event is triggered.
So far so good. The thing is that on a certain page, in the center layout unit, I have a f:viewParam which accepts only longs and, even though the value is valid, when the above poll gets executed, the requiredMessage from the f:viewParam appears.
After doing some intensive search, I've found that by adding a ignoreAutoUpdate="true" to the p:poll, the messages from the f:viewParam will not get triggered and the warning telling that I have to provide a valid id isn't shown.
So, my question is: by having the ignoreAutoUpdate="true" in my p:poll will compromise, by any chance, the f:viewParam validation? Or is it safe to leave it there?
Here is the relevan parts from my layout:
The poll form the west layout unit:
<h:form id="liveQueueForm">
<p:remoteCommand name="rcStart" action="#{liveQueueMB.startPoll()}"/>
<p:remoteCommand name="rcStop" action="#{liveQueueMB.stopPoll()}"/>
<p:poll id="liveQueueUpdater" delay="10" widgetVar="livePoll" interval="2" listener="#{liveQueueMB.init}" oncomplete="updateLiveQueue(xhr, status, args);" autoStart="true" partialSubmit="true" ignoreAutoUpdate="true" immediate="true" />
<div id="live-queue">
<div id="queue-holder"></div>
</div>
</h:form>
The f:metadata block which holds my f:viewParam:
<f:metadata>
<f:viewParam name="callId" value="#{viewInboundCallDetailsMB.callId}" required="true" requiredMessage="Please provide a valid call ID" converter="javax.faces.Long" converterMessage="The call ID is not numeric" />
<f:viewAction action="#{viewInboundCallDetailsMB.init}"/>
</f:metadata>
Thank you!
From Primefaces manual about ignoreAutoUpdate:
"If true, components which autoUpdate="true" will not be
updated for this request. If not specified, or the value is
false, no such indication is made."
Which means that it's not going to do update your viewParam component, and other components that have autoUpdate="true".
It's not going to disable the validation on it. (Unless of course, if you are using your poll for validation, which i presume you are not)
I have a text box which takes a search value, and i want to send this string to the server side on click of a button. Not by a form submit, by an ajax call.
I had added an actionListener to the input tag itself, which is called on blur. But what i really want is for the user to click the button to trigger the search function.
I got an idea from this question, and implemented it this way:
<h:inputText id="likeMaterial" value="#{createBookingForm.searchText}"></h:inputText>
<a4j:jsFunction name="setParameterAndRerender" actionListener="{bean.searchMaterials}" reRender="searchResult">
<a4j:actionparam name="param1" assignTo="#{createBookingForm.searchText}"/>
</a4j:jsFunction>
<h:commandButton value="Search" onclick="setParameterAndRerender('mySearchText');return false;"></h:commandButton>
The value received at server side is of course, "mySearchText". How do i pass what the user enters? Or how do i bind #{createBookingForm.searchText} before the button's action listener is called?
Im open to any other approach to. I have limitations though : Im working on enhancing a legacy application, built using JSF 1.1. I cant upgrade, not without a fight at least!
Edit : I tried doing it this way, but i get "undefined" on the server side.
Why not use a4j:commandButton instead of h:commandButton? It will execute ajax request and render what you want. No form submit will happen. Loks like what you need.
h:commandButton by default submit the form when clicked. So no need to send specially using a4j:jsFunction or in any other way. You can completely remove your js function unless if you have something else to do. If you want to test that add an action method and print the value of searchText variale in createBookingForm bean.
Hope this helps!!
This is the whole solution
<h:inputText id="likeMaterial" value="#{createBookingForm.searchText}"></h:inputText>
<a4j:commandButton reRender="searchResult" actionListener="#{createBookingForm.searchMaterials}">
<a4j:actionparam name="param1" noEscape="true" value="document.getElementById('likeMaterial').value" assignTo="#{createBookingForm.searchText}" />
</a4j:commandButton>
I am trying to create a dynamic query page. I am more than happy to learn ruby on rails which is what I am currently doing. However there is a time constraint for this and I have been searching high and low on how to hide a field on a form if a checkbox is checked. I have next to nothing ruby skills and I cant change to another language. Any assistance would be greatly GREATLY appreciated. Also if you know a good tutorial for doing query pages would help!!!
For a form like:
<form ...>
<input id="hide-box" type="checkbox" />
<input id="field-to-hide" />
</form>
You'll need to use something like JQuery to listen for checking and hide accordingly.
$('#hide-box').on('change', function() {
$('#field-to-hide').toggle($(this).prop('checked'));
});
I see this question asked frequently and I have done extensive experimentation to try to get this to work. However everyone else's examples and answers have so far failed me. I am bemused. Here is the situation:
AsyncFileUpload is NOT in an UpdatePanel
Image and Label to be updated are in an UpdatePanel
Update should occur after the upload completes
The upload is indeed saving the file as expected. My problem is regarding getting the page to update after that happens. The file being uploaded is an image, and I would like that image to update. I am aware of some problems with images not updating on the client if you reuse filenames, but I am also printing it to a label just to be sure. I am certain the UpdatePanel I am targeting is not updating.
I have tried the following approaches:
Using the server side method to manually update a conditional UpdatePanel - this fails because the file upload is done in a frame. Sniffing the returned HTML shows that the correct HTML is actually sent back after the post, but of course to the wrong frame.
Using the client side method to trigger a javascript postback to my UpdatePanel. This does not work and I cannot tell why.
Using the client side method to trigger a javascript button click inside the UpdatePanel. Again, nothing happens and I don't know why.
Setting the UpdatePanel's trigger up so that it points directly at the AsyncFileUpload. No joy, but I knew that would be a long shot, keeping in mind the hidden frame.
Moving the AsyncFileUpload into the UpdatePanel and trying some variety of the above. When I do this, I lose all handle of the file being posted to the server and I cannot save the file in the first place.
Normally when I get this kind of error, where all the tutorials appear to be wrong, it turns out that my error is because I didn't set an ID on a control somewhere and it somehow mattered. I can't even see that in this case. Here is some code.
<fieldset class="pj_Pics">
<ul>
<li>
<label>Picture 1</label>
<asp:UpdatePanel ID="ajax_Pic1" runat="server" UpdateMode="Always">
<ContentTemplate>
<asp:Image ID="img_Pic1" runat="server" />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<asp:Button ID="Button1" runat="server" Text="Button" />
</ContentTemplate>
</asp:UpdatePanel>
<div style="position:relative;">
<div class="photoChooser">
<ajaxToolkit:AsyncFileUpload ID="fu_Pic1" runat="server" CssClass="pj_PicChoose" Width="84px" OnClientUploadComplete="picPost1" OnUploadedComplete="fu_PictureFile_UploadedComplete" ThrobberID="throb1" />
<span><asp:Literal runat="server" Text="click to change"></asp:Literal></span>
<asp:Image ID="throb1" runat="server" ImageUrl="~/images/throbber.gif" AlternateText="uploading image" />
</div>
</div>
</li>
</ul>
</fieldset>
protected void fu_PictureFile_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
{
bla bla bla;
// and update the image
img.ImageUrl = "~/" + webfolder + imageFileName;
thing.Text = img.ImageUrl;
}
function picPost1(sender, args) {
document.getElementById('<%# Button1.ClientID %>').click();
}
Any help greatly appreciated. There is obviously a ScriptManager on the page and the code I've shown is just the last thing I have attempted. Let me know if there is anything else you need to see.
Thank you!
I happen to face the same situation today, and this is how I solved it.
According to this LINK, there's no Postback is happening or even a ViewState since its Asynchronous FileUpload.
So in OnUploadedComplete I test file type and size before executing the SaveAs() in codebehind, then I test the same in OnClientUploadComplete to display messages and carry on the rest of the work like setting Images URL. Hope this helps.
When value of hasMoreCategories got as YES, apex:selectList controller is successfully rendered. But that will not execute loadValuesWithCategor method that comes under the apex:actionSupport. Does anyone have some idea about this issue? Code is as follow.
<!-- Panel for display category relate information -->
<apex:outputPanel id="categoryPanel">
<apex:outputLabel value="Category" rendered="{!hasMoreCategories=='YES'}" />
<!-- ControllerSRAndTesting: category -->
<apex:selectList label="Category" id="categoryList" value="{!categoryValue}" rendered="{!hasMoreCategories=='YES'}" size="1">
<apex:selectOptions value="{!jobCategorValues}"></apex:selectOptions>
<apex:actionSupport event="onchange" action="{!loadValuesWithCategor}" rerender="itemsReqPageBlock, footer" />
</apex:selectList>
</apex:outputPanel>
Question : can you verify from the debug log that the 'loadValuesWithCategor' method is definitely not being executed when the selection is made?
Without knowing what the rest of your page looks like, it is difficult to know what the problem might be. You could have a required field on the screen that is not populated with the picklist selection is made and that could cause this type of problem.
I my self done some mistake, that is why that code has been behaved like that manner. That mean I have reset the value of hasMoreCategories as NO within loadValuesWithCategor method. Therefore even it was rendered due to value of rendered option is false , apex:selectList component does not existing on the UI. Thanks.
If you wants to call the methode by actionSupport do below task.
Remove "transient" from a declaration of a selectoption list.
Remove immediate attribute.