I've got a richfaces calendar component defined as
<rich:calendar id="startDate" value="#{myBean.dateSet.startDate}"
timeZone="#{myBean.dateSet.timeZone}"
datePattern="#{myBean.dateSet.datePattern}"
enableManualInput="true" immediate="true">
<a4j:support event="onchanged" action="#{myBean.adjustEndDate}"
reRender="startDate,endDate" ajaxSingle="true" />
</rich:calendar>
when I'm changing the date using the calendar popup/gui everything is working fine.
However when I'm changing it via the input text field, the value is not being updated to myBean.dateSet.startDate, although it is being updated correctly on the calendar component itself (i.e. if I click the icon for calendar popup it shows the updated current date).
Any suggestions on how I can get it to update the value to myBean correctly?
Thanks!
Use oninputchange event, that's the one that tracks manual changes.
I'm not sure if this helps, but if you want to get the value inside the input text field, you refer to it as <calId>InputDate . So in your case, the input text field will have id startDateInputDate. Hope this helps somehow!
You can use the oninputchange event inside the rich:calendar component like Max Katz suggested.
For example:
<rich:calendar
...
oninputchange="invokeCalendarOnChange(event,'#{rich:clientId('$idOfTheCalendar')}')"
...
</rich:calendar>
function invokeCalendarOnChange(event, id) {
var c = RichFaces.$(id);
c.invokeEvent("change", RichFaces.getDomElement(c.id), event, c.selectedDate);
}
Hope that helps!
Related
Situation:
We have an AEM 6.4 Touch UI dialog and a number of existing component instances that were created through this dialog.
Now we want to add an additional boolean property (checkbox) to the dialog.
The default value of the new property should be true / checked.
Expected Result:
When an editor opens the updated dialog for an existing component, I would expect that the dialog shows the new checkbox checked since this is the default and the JCR contains no value for existing components.
Actual Result:
The dialog shows the checkbox unchecked for an existing component that has no value for this property in the JCR.
Surprisingly, the dialog shows the checkbox checked for a freshly created component!
Any ideas? Thanks.
Snippet of the checkbox inside the .content.xml file below.
<newProperty
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
checked="{Boolean}true"
name="./newProperty"
text="The recently added new property"
uncheckedValue="{Boolean}false"
value="{Boolean}true"
/>
It certainly will require a JS validation, since the absence of the value is falsy for the dialog.
Your example should always work, no need for extra js or properties. When you say there is no existing 'value' for this property, do you mean this property is not there or it is empty? Because an empty property would still have a value, in this case an empty string, resulting in it being read as false and the checkbox being empty. A new componenty does not have this property, resulting in the default being shown. If this does not work as designed, could you extend your example by adding all current properties of the component?
#John Goofy - you just need to add below property
'ignoreData={Boolean}true'
then, your node becomes
<newProperty
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
checked="{Boolean}true"
name="./newProperty"
text="The recently added new property"
uncheckedValue="{Boolean}false"
value="{Boolean}true"
ignoreData="{Boolean}true"
/>
please let me know, if it doesn't work for you.
I have event populating my full calendar and I'd like to add an icon to some of the events that meet a certain criteria. For example, my calendar events are representations of work orders that will be added to routes. So if a work order is in a route, I'd like the event that represents that work order to have an icon in the title that signifies that it is part of a route.
I could just change the event's color, but I'd like more than just color. Am I asking too much? Is this possible?
eventRender: function(event, element, calEvent) {
element.find(".fc-event-title").after($("<span class=\"fc-event-icons\"></span>").html("<img src=\"images/on1.jpg\" />"));
}
Sure you can. In eventRender you can look for and manipulate .fc-event-title (mind that some "short" events may not have this markup), or just add a class with an image background, or add a dingbat (bullet here), like:
.fcimg .fc-event-title:before {content: "\025cf\00020";}
You may also do a little modification in the plugin that is in DayEventRenderer.js file goto "daySegHTML" function and in that right after the condition if (!event.allDay && seg.isStart) (that is the start of the making of event div itslef) insert the following statement:
if (event.imgSource != '')
html += "<div><img src='" + event.imgSource + "' style='display:inline;width:2.0em;height:2.0em;margin-bottom:0.5em'></div>";
Note that event.imgSource is not the builtin event property but you have to provide it while providing the event data.
So if you dont provide event.imgSource nothing will get included and if you provide the image source it will automatically add it.
Hope this will resolve the issue :)
I want the fullCalendar to redraw itself (all the structure and events) without reloading the page.
Scenario:
I am using a patch of fullCalendar that supports the Resource View. For a few user actions I want to change the resources. But I don't want to reload the page.
You could 'destroy' and 'render' the calendar as a whole. But that might be cumbersome - especially in older browsers.
$('#calendar').fullCalendar('destroy');
$('#calendar').fullCalendar('render');
If you don't actually need to render the table, but just rerender the events again, you could use the 'rerenderEvents' method:
$('#calendar').fullCalendar('rerenderEvents');
Hopefully this helps!
Use refetchResources: .fullCalendar( 'refetchResources' )
This will fetch and freshly re-render the resource data, per the FullCalendar documentation.
The problem:
"...The problem is that the calendar is initialized while the modal or div is not visible... " based on this link enter link description here
In my opinion, destroy is not needed in this case, only with render you can see the calendar.
My solution:
<script type="text/javascript">
$('#objectname').show(0,onObjectShow);
function onObjectShow(){$('#calendar').fullCalendar('render');}
</script>
You must to be sure that the object(container of calendar) is fully visible. For example, my first mistake was to put this code on "onClick" event, and click event is triggered before show the object container and has no effect.
Solution Based on this reference.
You can also redraw calendar on the fly using below command-
$(window).trigger("resize");
I am using modalpopup to enter some value in a textfield. After the value is selected in the modalpopup view, the modalpopup is closed and the value takes the appropriate value. Even if the value is displayed in the textfield, the textfield1.text returns an empty string. When I see the source code (html), I see that even the textfield isn't displaying anything; it hasn't really had this value input, because the appropriate html input field hasn't got a value yet.
This is the code I use to fill this textfield:
function CloseRequestModal(s)
{
document.getElementById('<%=txtRequest.ClientID%>').value = s;
var mpu = $find('<%=ModalPopupExtender3.ClientID%>');
mpu.hide();
}
Please help.
I would need to see source HTML cause it looks like you have template language mixed into your javascript but perhaps instead of "textfield1.text" you use "textfield1.value"?
Additionally, you would need to view "generated" source (with a browser plugin) or inspect the node with web inspector on safari/chrome or firebug on firefox in order to see the change that you made with javascript.
i fixed this problem in an alternate way.
even if the value is there (in the textfield), none of the events is fired, to let know the browser / compilator that the value really exists.
so i decided, despite editing the value of the textfield, i store this value in the session too. in this case, the value is displayed for user needed in the interface, and on the other hand i use the value that i stored in the session.
Here's the scenario:
I have a textbox and a button on a web page. When the button is clicked, I want a popup window to open (using Thickbox) that will show all items that match the value entered in the textbox. I am currently using the IFrame implementation of Thickbox. The problem is that the URL to show is hardcoded into the "alt' attribute of the button. What I really need is for the "alt" attribute to pass along the value in the textbox to the popup.
Here is the code so far:
<input type="textbox" id="tb" />
<input alt="Search.aspx?KeepThis=true&TB_iframe=true&height=500&width=700" class="thickbox" title="Search" type="button" value="Search" />
Ideally, I would like to put the textbox value into the Search.aspx url but I can't seem to figure out how to do that. My current alternative is to use jQuery to set the click function of the Search button to call a web service that will set some values in the ASP.NET session. The Search.aspx page will then use the session variables to do the search. However, this is a bit flaky since it seems like there will always be the possibility that the search executes before the session variables are set.
Just handle the onclick of your button to run a function that calls tb_show(), passing the value of the text box. Something like
... onclick = "doSearch()" ...
function doSearch()
{
tb_show(caption, 'Search.aspx?KeepThis=true&q=\"' +
$('input#tb').val() +
'\"&TB_iframe=true&height=500&width=700');
}
If you read the manual, under the iframe content section, it tells you that your parameters need to go before the TB_iframe parameter. Everything after this gets stripped off.
Here is an idea. I don't think it is very pretty but should work:
$('input#tb').blur(function(){
var url = $('input.thickbox').attr('alt');
var tbVal = $(this).val();
// add the textbox value into the query string here
// url = ..
$('input.thickbox').attr('alt', url);
});
Basically, you update the button alt tag every time the textbox loses focus. Instead, you could also listen to key strokes and update after every one.
As far as updateing the query string, I'll let you figure out the best way. I can see putting a placeholder in there like: &TB=TB_PLACEHOLDER. Then you can just do a string replace.
In the code-behind you could also just add the alt tag progammatically,
button1.Attributes.Add("alt", "Search.aspx?KeepThis=true&TB_iframe=true&height=500&width=700");