I am attempting to use navigateTo() within a modal in my NativeScript Vue application.
My modal components is wrapped in a <Frame>, which I understand is how to allow it to be a navigation controller. However, when I attempt to navigate to the sub-component of the modal, it actually opens behind the modal in the main frame.
You can see this behavior here: https://play.nativescript.org/?template=play-vue&id=azowAE&v=3
Click the "Open Modal" button and then click the "Show subpage" button. Seemingly nothing happens, but if you then click the "Close" button, you'll see the sub page opened behind the modal.
In order to navigate to a frame that is used in a modal, you should utilize the second argument to the $navigateTo method. This can reference a frame by reference or id. The easiest way I found was to give the frame in the modal an id:
<Frame id="modal-frame">...</Frame>
Then you can navigate inside the modal as as example
this.$navigateTo(OtherComponent, {frame: 'modal-frame'});
Note, you do not put a # in front of the ID like a CSS selector. Only the id value.
See for code reference: https://github.com/nativescript-vue/nativescript-vue/blob/master/platform/nativescript/plugins/navigator-plugin.js#L48
Another cause for this same issue is when the sub-component that the modal is navigating to isn't wrapped in a <Page> tag.
When you add a catch to your navigate code then it gives the following errors, depending on whether you use the ref or id.
this.$navigateTo(NewModal, {
frame: "frame-id" // or "frame-ref"
}).catch(e => console.log(e));
"frame-ref" throws TypeError: Cannot read property 'id' of undefined
"frame-id" throws TypeError: backstackEntry.resolvedPage.onNavigatingTo is not a function
Related
I have a site with TouchableOpacity that uses react-navigation to navigate to another screen. Is it possible in some way to add href to this button so I could open the another screen in new tab using context menu "Open link in new tab"?
I know there is possibility to add accessibilityRole='link' href={''} to a component but what about a whole button of view.
This is according to: https://github.com/necolas/react-native-web/issues/162
Using Text component it is possible by:
<Text
accessibilityRole='link'
href={defineRightClick()}
target='_blank'
onPress={(e) => {
e.preventDefault();
navigateFunction();
}}>
Click to navigate, right click to open in new tab
</Text>
Ask if more information is needed for this question and I will edit it.
Every help is appreciated as I have tried to find solution but have not come across or found a way to handle this case.
Found an answer!
Even thought it is not documented in here: https://necolas.github.io/react-native-web/docs/accessibility/#accessibility-patterns
and using href in TouchableOpacity will show ts error No overload matches this call., it is possible to add to a TouchableOpacity props
accessibilityRole='link'
href={'desired link'}
target='_blank'
Then using e.preventDefault() in onPress event of TouchableOpacity will prevent link opening and do other things assigned to the function. At the same time the link is possible to be opened with right click > context menu > "Open link in new tab"
I will post this as answer so if anyone else comes across this they might find the solution
I'm trying to make a simple app with Playground (https://play.nativescript.org/). I'm using "RadSideDrawer" as a side menu. I'm satisfied. BUT ... every time I use "RadSideDrawer" and I move from one page to another, inside the "ActionBar" a button appears whose function is to bring back to the left page (please have a look at this page https://www.attivitacollaterali.it/appdata/services/apps/RadSideDrawer.html). I don't need and want this button. How can I make it not appear? Thank you.
Or, if not, at least update "RadSideDrawer". I mean that if the button goes back, for example to the "Search" page from the "Home" page, it should highlight/select "Search" in the "RadSideDrawer" menu and not leave "Home". Thanks again.
I think you're looking for the "clearHistory" option while navigating. When navigating to another page, you must do this:
this.router.navigate([url], { clearHistory: true });
Just make sure you're injecting RouterExtensions in your constructor:
constructor(private router: RouterExtensions) {}
That should clear the navigation stack when navigating, thus removing the button to go back to the previous page.
EDIT: If you want to retain the navigation stack, I believe you can also edit your action bar like this:
<ActionBar>
<NavigationButton visibility="collapsed"/>
</ActionBar>
I'm having difficulty trapping a programmatically triggered click event on a hidden button control from a ASP.NET MVC 4 web app inside a VB6 thick client (which is using a web browser control). I'm able to trap the click event itself using the following:
Private WithEvents WebDoc As HTMLDocument
Private Function WebDoc_onclick() As Boolean
Select Case WebDoc.activeElement.iD
Case "A"
Do something
Case "C"
Do something else
End Select
WebDoc_onclick = True
End Function
And this works just fine if the control is visible. But if the control is invisible:
<div class="HideBtnDiv">
<input id="C" name="NoItems" type="button" class="BtnDiv" style="display:none"/>
</div>
and I try to trigger a programmatic click via one of the following:
$("#C").('click');
$("#C").trigger('click');
$("#C").triggerhandler("click");
$("#C").focus();
$("#C").trigger('click');
I'm getting an empty string for the "id" attribute and as a result I can't distinguish which button was clicked. This button serves no purpose other than to indicate to the VB6 app that a certain criteria has been met and that's the reason why I need it to be hidden. Does anyone have any idea why the id is getting stripped? Or is there any other way to communicate back to the client?
I've also tried filtering by element style using
Select Case WebDoc.activeElement.Style
Case "display:none"
Do something else
End Select
but it came back as "[Object]" so no luck there either. Please let me know if there is a way around this.
Thanks,
Lijin
You seem to have tried several ways of dynamically triggering the click event, but did you try the most obvious way:
$("#C").click();
???
But here is what I would do:
1- Make all of your buttons visible, by removing "display:none" from their style
2- Wrap the buttons you want to hide in a new DIV
3- Set "display:none" style in the newly created DIV
4- You can then trigger the .click() event of any button even if not visible by calling $(id).click();
Thanks, Ahmad. Actually I meant .click() not .('click'). Sorry about that.
Anyway, I tried your suggestion and made the button visible and set the style of the wrapping div to display:none but the id attribute was still coming through as an empty string.
However, I did figure out another way to get this to work. If I keep the wrapping div and button as visible and then focus and click when the condition is met and then do a hide(), my problem is resolved!
$("#C").focus();
$("#C").trigger('click');
$("#C").hide();
The button doesn't get displayed and VB6 still passes the id on the click event. The weird thing is it requires the focus() call to still be made. Without it, I'm back to square one. Not sure if this is a bug.
I have a page that collects a set of user comments on the contents of that page. New comments are added to the page by clicking a button and filling out a form that appears via a Bootstrap modal. The results are then inserted into the page via ajax. This is all working fine.
The "results" that are added to the page include another Bootstrap button/link, which looks something like this:
<a tabindex='-1' href='#' class='ajax-modal btn btn-small'
data-target='modal_my-modal' data-backdrop='true'
data-controls-modal='res-modal' data-keyboard='true'
url='/somewhere'>Click me</a>
The link looks and behaves like a button (thanks, Bootstrap!), but, when clicked, doesn't trigger the modal like it's supposed to. However, if I refresh the page in the browser so that this comment, along with the others on the page, are redrawn, the button/link now works fine.
Since the button works when the page is redrawn, I'm assuming that there is some Bootstrap initialization code that runs when the page loads and sets up all the links to do their stuff, and that I need to call this after adding my new button to the page. Is this correct, and, if so, what should I be calling to get the link properly initialized? Thanks!
Short answer: There is indeed a function that gets called when the page is drawn and that sets up the click handlers -- it's my own function that's responsible for setting up the modals. I added a call to that function after the html containing the button/link, and all's well. I'm sure there is a Bootstrap init function that gets called, but calling my own is what was needed.
Hi I have a page with a navigation menu on the left and when any link
on this menu is clicked , an Ajax get call is sent to the server and
the right side gets updated with the new page.
How I am currently doing this is by creating 2 columns, the left col
contains the navigation link and the right col contans a div named the
content which has a dojotype of dojox.layout.ContentPane.Now when the
data is received from the server, I change its content like this
dijit.byId("thecontent").setContent=data
Now when I click on the navigation link , the right side gets
displayed properly(this page has dijits and also some scripts to
handle onclick events). But firebug returns an error saying
"Tried to register widget with id==thecontent but that id is already registered"
my main dojo include looks like this:-
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.5/dojo/dojo.xd.js"djConfig="parseOnLoad:false"></script>
I do a dojo.parser.parse() in the function dojo.addOnLoad like this:-
dojo.addOnLoad(function(){
dojo.require("dijit.form.Button");
dojo.require("dijit.form.Textarea");
dojo.require("dijit.form.ValidationTextBox");
dojo.require("dojox.layout.ContentPane");
dojo.require("dijit.Editor");
dojo.addOnLoad(function(){
dojo.parser.parse();
sendgetrequest();//this initiates the xhrget request
dojo.removeClass(dojo.byId("doc3"),"hiddendiv");
}
);
})
I am also unable to run any scripts in this new loaded page. No onclick event is working, just the dijit widgets are displayed...
The error means, as Ken already said, that you are creating a dijit with an id that already exists. My guess would be that you load the AJAX content in the right panel without destroying the old right panel first.
Try calling destroyRecursive on the main dijit container in the right panel before loading the new content. Also, if you do not need to set the id of the dijit, you just might drop the id (but that would leave a memory hole because the old dijits are not destroyed).