I am trying to load bunch of product detail into a canvas component from a List component.
Every time the user clicks on a product inside my List, the product detail will be displayed in the canvas component. The product detail might contain null and I want to check it before displaying in my canvas component.
In my canvas component, I use createcomplete to check if the productDetail==null then do something. My problem is if the user clicks the product with the non-null detail first time, the statement "if (productDetail==null) then do something" won't work if the user click a null product detail because the canvas component has been created the first time user clicks a non-null product detail.
I want to check if the productDetail==null every time the user click a product...I hope I explain my question well and appreciate any helps.
My code..
AS:
protected function changeHandler(event:IndexChangeEvent):void{
compDetailinfoResult.token=getCompList.compDetail(event.target.selectedItem.productId);//get the product detail clicked by the user
}
<s:List dataProvider={productData}/> //when user click a product,
//the canvas will show product detail..
<comp:productDetail productData={compDetailinfoResult.lastResult} //custom property
change="changeHandler"/> //if the product detail is
//null, the statement inside
//the canvas will check via
//creationComplete. but if the
//user click the non-null product,
//the creationComplete check pass. User clicks a null product again,
//the check won't work anymore...
code for my productDetail component:
public var productData:arrayCollection
protected function canvas1_creationCompleteHandler(event:FlexEvent):void
{
var undefinedBrand:String=dataFromClick.getItemAt(0).brand;
if(undefinedBrand==null){ // I want to check every time the user click a List item
brand.text="Brand: No Brand";
switchView.enabled=false;
displayPictureBig.source="assets/vacant.jpg";
}
}
<s:Panel>
<label id="brand" text="productDate.getItemAt(0).brand"/>
//I want the brand to be displayed..
//but if brand is null..it will display No Brand..
//see AC above...but createComplete only fire once.
//Anyway to keep tracking if the brand that is sent by List is null?
</s:Panel
Thanks for the helps..
I'm having some trouble understanding your issue. Are you referring explicitly to Canvas, the Halo container? Or did you name one of your custom components Canvas? If it is custom, as your code suggests, what is inside the component?
creationComplete is an event that only fires once, when the component finishes running the component lifecycle creation process for the first time. Your code snippets do not show any data being passed from the list into the canvas, so that could be one reason why the data is null.
If someone selects a new item on the list, the change event should dispatch. You can add an event listener to the change event and use it to update the data you are sending into your canvas component.
Related
Please refer to the following https://github.com/CD1010/BlazorWizard.git for this question. The sample is in StepActivations Branch
I have a page called DemoWizard, which incorporates a 3 step wizard. When i click the "Toggle Enabled" button, the second and third steps links should go to enabled or disabled state. It seems however, that the first time takes 2 clicks to turn off the headers, and the state is always behind.
So it appears that StateHasChanged() is not refreshing child states properly.
Note that the refresh() method was an attempt to get at least step2 to refresh properly, but to no avail.
Any idea why?
the click handler that does toggle is below.
void OnClick()
{
step2Enabled = !step2Enabled;
step3Enabled = !step3Enabled;
StateHasChanged();
Step2.Refresh();
}
Your code isn't showing up exactly as advertised, but i think what you need to do is add an event callback to the Blazorize CheckEdit component:
<Blazorize.CheckEdit #bind-Checked="#Parent.IsValid" CheckedChanged="#VerifyEnabledTabs">Check Me</Blazorise.CheckEdit>
where VerifyEnabledTabs is a method on the top level Wizard that can assess where you are and what is complete / filled / checked / whatever, to allow certain links to be active.
I have multiple pages in my applications, one of them is to add a driver information.
When i go to add driver information page and fill some of the fields like "driver licence" text box, then i do not add this to DB and click "go back" button (that discard the changes and come back to home page) when i enter again to this page the fields that i have previously filled in with data do not clear and refresh (its supposed to all fields be clear and empty)
Does anyone have a solution for that?
code for "go back button:
app.datasources.driver.clearChanges(function() {
console.log("cleared changes");
});
returnToDriver();
returnToDriver() code is:
app.datasources.DRIVERS_LIST.query.clearFilters();
app.datasources.DRIVERS_LIST.load();
app.showPage(app.pages.Driver);
Already tried:
widget.root.descendants.TextBox1.value = "";
widget.root.descendants.TextBox1.value = null;
but do not work for me.
Regards
Potentially there are can be multiple ways to leave the page:
browser navigation including navigation hotkeys
links on the page that can navigate to other pages
in-app navigation buttons/hotkeys
etc...
The best way to handle all possible navigation scenarios is using onDetach page event
// Implicit way
// page onDetach event handler, assuming that page
// is bound to appropriate datasource:
// #datasources.<MyDatasource>.modes.create
widget.datasource.clearChanges();
// Explicit way
// Explicitly clearing changes for create datasources in
// page onDetach event handler
app.datasources.<MyDatasource1>.modes.create.clearChanges();
app.datasources.<MyDatasource2>.modes.create.clearChanges();
...
Once you add this code to the onDetach page's event handler you can remove all other clearChanges occurrences from the page.
Is it possible to add a listener for the click event on the icons and/or labels that appear for styled maps? I have a form that allows entry of Points of Interest. Since the poi styling shows icons and/or labels for many potential candidates, and clicking on one opens an infowindow with address info, etc, I would like to capture this address info to the fields on my form if the user clicks on one.
There is no API-based access to the POI's .
But there is a possible workaround.
When you click on a POI an InfoWindow opens. It's possible to modify the InfoWindow-prototype to be able to access the content of the InfoWindow without having a reference to the InfoWindow-instance.
//store the original setContent-function
var fx = google.maps.InfoWindow.prototype.setContent;
//override the built-in setContent-method
google.maps.InfoWindow.prototype.setContent = function (content) {
//when argument is a node
if (content.querySelector) {
//search for the address
var addr = content.querySelector('.gm-basicinfo .gm-addr');
if (addr) {
alert(addr.textContent);
//leave the function here
//when you don't want the InfoWindow to appear
}
}
//run the original setContent-method
fx.apply(this, arguments);
};
Demo: http://jsfiddle.net/doktormolle/Vkf43/
Note: The selectors for the infowindow are not documented, they may change in the future
I realize this is an old Q, but this was recently fixed in Maps API. You can now listen for click events on map icons.
Starting with version 3.26 you should listen to the "click" event on the Map object. If the user clicks on a POI, a IconMouseEvent is raised. This class extends the Regular MouseEvent and contains a property called placeId. So you can check if the event object has defined placeId. The placeId field contains of course a Place Id, that you can use with Places API to get more info on the icon that was clicked. Calling stop() on the event itself will prevent Maps API from showing the default info window.
I prepared a small demo which demonstrates how to capture the click event and display your own info window.
http://jsbin.com/parapex/edit?html,output
I added bootstrap popovers to the calendar events which open on click:
eventClick: (event, jsEvent, view) ->
if event.ajaxUrl?
elem = jQuery(#)
elem.popover('destroy')
jQuery.ajax({url: event.ajaxUrl})
.done (result) ->
elem.popover(
placement: 'top'
html: true
trigger: 'manual'
title: moment(event.start).format('dddd, DD. MMMM YYYY - HH:mm')
content: result
container: 'body')
elem.popover('show')
My problem is, that these popovers stay open when I change the calendar view (e.g. change the month or to week/day layout). As the popovers are bound to the .fc-event divs/spans within the calendar, I need to access these DOM elements to run .popover('destroy').
Whenever a fullCalendar view is changed, the old DOM-Elements are replaced with the ones for the new view, so I would have to access them before the view is actually changed. Unfortunately there are only callbacks for event loading (loading which happens after the view is changed) and viewDisplay (same, but you get the new view).
To make sure I understood viewDisplay correctly, I added a small test to the calendar which always gives me "0" (the data-selector comes from jquery data selector)
viewDisplay: (view) ->
alert(jQuery('.fc-event:data(popover)').size())
Is there a way to hook into the calendar process everytime the view is to be changed - but before the view is actually changed?
Edit
For now I'm simply destroying the popovers once the mouse is moved over any calendar button (as a bind to click would be executed after the view change), but this solution is just a workaround
jQuery('.fc-button').on 'mouseover', () ->
jQuery('.fc-event:data(popover)').popover('destroy')
V3
I think you are looking for http://fullcalendar.io/docs/display/viewRender/
From doc
viewRender
Triggered when a new date-range is rendered, or when the view type
switches. function( view, element ) view is the View Object for the
new view. element is a jQuery element for the container of the new
view.
This callback will get triggered when the user changes the view, or
when any of the date navigation methods are called.
This callback will trigger after the view has been fully rendered,
but, before events have been rendered (see also: eventAfterAllRender).
UPDATE
V4 renamed from viewRender to datesRender https://fullcalendar.io/docs/v4/datesRender
V5 renamed from datesRender to datesSet https://fullcalendar.io/docs/datesSet
In V4, viewRender was deprecated, check out the release notes, now they have:
"viewSkeletonRender" callback which is triggered when the new view is mounted, it receives a view object containing a lot of good stuff in it.
"viewSkeletonDestroy" callback which is triggered right before the old view is about to get unmounted.
--
Alternatively, thought may not answer the question directly, you can use the "datesRender" callback. I needed was to run a function when previous, next, or the view changed. (I had to compute the total number of hours of an event type based on the date range and the views)
I would like to add custom right clicks to a number of spark list controls.
I have tried the following as an item renderer. (as per the flex 4 cook book).
Full Render code here http://pastebin.com/Kx8tJ1cY
When I right click on the Spark List I simply get the Adobe Default Context menu.
This is the same default behaviour I had before I added any code to this.
Could anyone tell me how to add right clicks to List Items in Flex 4.
Please and Thank you.
I found the problem/solution. You cant use context menus if there are Vboxes or Tab Navigators. Which is insane because it means I cant do relative layout properly or decent variable width design.
Quoted from: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/ui/ContextMenu.html
For example, if a DataGrid control is a child of a TabNavigator or VBox container, the DataGrid control cannot have its own context menu.
Christopher Huyler posted something similar (source code available here). From the article:
Start out by grabbing the Javascript code from Google's code repository.
Step 1 – Setup custom context menu code
Create a new Flex project in Flex Builder. Copy rightclick.js and swfobject.js into the html-template folder of your project. From here, I had to make several changes…
I modified the RightClick.init() function to accept an object and container value as input. This allows me to pass in the name of the application as the object instead of having it be called the same thing every time.
I included rightclick.js and swfobject.js in the header of index.template.html.
I added a new div to the body called “flashcontent”.
I added an onload handler to the body tag to initialize RightClick
I replaced AC_FL_RunContent(…) with new SWFObject(…) making sure to maintain all template variables.
After making these changes, I verified that no right-click context menu appears in my application.
Step 2 – Listen for the rightClick event
Next I added a few lines to the main mxml file of my application to listen for the ExternalInterface event that will be dispatched when I right-click my appliction.
private function handleCreationComplete():void
{
ExternalInterface.addCallback("rightClick", handleRightClick);
}
private function handleRightClick():void
{
Alert.show("Right Click Success!");
}
Step 3 – Dispatch an event to the correct object
Getting the event to the main application is easy, but we actually want the appropriate child object to be notified when the right-click event occurs. Since I am not using any double-click events in my application I decided I would treat every right-click event like a double-click event. Users without a two button mouse (aka Mac users) can simply double-click to get the same menu while users with a two button mouse just have to right-click. Here is how I make sure the event is dispatched to the appropriate object.
private function handleRightClick():void
{
var objects:Array = systemManager.getObjectsUnderPoint(
new Point(mouseX,mouseY));
if (objects.length>0)
{
var object:Object = objects[objects.length-1];
var relatedObject:InteractiveObject;
if (object is InteractiveObject)
relatedObject = object as InteractiveObject;
else if (object.parent && object.parent is InteractiveObject)
relatedObject = object.parent;
var event:MouseEvent = new MouseEvent(
MouseEvent.DOUBLE_CLICK,true,false,mouseX,mouseY,
relatedObject);
object.dispatchEvent(event);
}
}
I hope this helps!