I'm trying out Kendo Mobile. I'm really impressed with it so far. I've read this tutorial and am modifying it a bit for my needs.
I've added an additional element to the tabstrip to include a "login" view. Because my login form is long and complex, I don't want the actual code in index.html. So, I've included it in a separate html file : login.html.
Now, when the user clicks on the login icon on the tabstrip, the GUI automatically transitions to the login form. All good.
When the GUI loads, I am using JS to detect if the user is logged in our not. If not, I want the GUI to automatically load the login page. I'm able to do that using Kendo's "navigate" function. Unfortunately, that takes the user out of the layout from the main application page. Is there anyway to have an external html page that when navigated to will contain the main applications layout?
<footer data-role="footer">
<div data-role="tabstrip" id="defaultTabStrip">
Home
Home
Foo
Home
</div>
</footer>
This properly loads the login.html page, but I have no GUI around it. I'd like to navigate to this content, but inside my main layout.:
if ( ! loggedIn ) {
app.navigate("login.html");
}
So ... this is awkward.
Now, when I use this :
if ( ! loggedIn ) {
app.navigate("login.html");
}
It all works properly. I didn't do anything at all. I just tried again later and the login page loaded properly within the GUI layout. So, I guess we can consider this solved.
Related
So I'm struggling to figure out how to do this and I can't find any answers. I've been searching the whole web for the last two days but haven't found an answer yet.
The goal: I want a dynamic navigation for an admin/dashbaord website that only updates a div (the main view) of a website and updates the url accordinly (eg. pressing on the
welcome menu button loads the welcome.html into the
#main-view and the url updates from
samplewebsite.com/dashboard to
samplewebsite.com/dashboard/welcome). Then on refresh, stay on the same website with the loaded content (eg. samplewebsite.com/dashboard/welcome still has welcome.html in the #main-view but doesn't actually navigate to the welcome.html file.
Examples: mee6.xyz/moderation or contacts.google.com
What I've already accomplished: Loading welcome.html into #main-view and updating the url with /welcome by clicking on a button by doing this:
HTML:
Welcome
JS:
$('#welcome-button').click(function(event){
event.preventDefault();
var href = $(this).attr('href');
$('#main-view').load(href, function() {
console.log("Load was performed.");
});
history.pushState(null, "Welcome", href);
})
I'm using Flask with Python where I have the following routing set up:
#app.route('/dashboard')
def dashboard_server():
return render_template("dashboard_server.html")
#app.route('/dashboard/welcome')
def welcome():
return render_template("welcome.html")
The behaviour I experience: When I click the welcome menu button, #main-view updates with the welcome.html and the url updates. When I
refresh the browser though, I takes me to the actual welcome.html which makes sense, since it's pointing to this file. That's how I loaded the html into the div in the rist place. But how can I prevent that?
Also the navigation (back/forward) doesn't work but that's another problem I'll
adress after I got this figured out.
What I behaviour I expect: I want it to stay on the main page with #main-view still being filled with welcome.html. Then when
pressing another menu button I want it to update the div and url and
on the refresh be on the same page with the updated div and so on.
A visual explanation:
I'm grateful for any kind of help. Thanks a lot in advance!
This seems to be a pretty hacky way to do routing with JavaScript. But here is how I think your problem can be solved:
When user refreshes the page on this url: /dashboard/welcome, you should run some js that would grab the location.pathname and know that the url must not have the welcome part and would redirect the user back to dashboard but you would have to add an url parameter to let the js on dashboard page know which page's content to load in the #main-view so from dashboard/welcome you can redirect the user to an url similar to this: dashboard?page=welcome. Now through js on the dashboard page, you need to grab the url parameter page and load the content of the welcome.html which you already have achieved. Now you should change the url back to dashboard/welcome from dashboard?page=welcome and push the url to history too.
This approach might have a lot of scenarios where the stie might break. One would be: when your js is evaluating things on dashboard/welcome page, the welcome page might have already been loaded, so you would have to show a loader or similar to prevent the flash of incorrect content.
I can't think of more scenarios from top of my head. I would suggest you to use some sort of framework/library to take care of routing for you. CRA (create react app), Next.js, Gatsby.js, Nuxt.js are all great libraries that can handle routing in a very robust way so you don't have to worry about that and can focus on the content and styling your applciation. Except CRA, I think all other libraries support static site generation which gives you better SEO overall. But to use these, you need to know React.js or Next.js at least. Best of luck!
I'm developing a web app using ReactJS. I want to create an Admin layout my self. My problem is, how to change the view without reloading the sidebar? I mean, there is a sidebar in the Admin layout. We have options to click there. When we click on a particular option, let's say "User Profile", it loads the User Profile page on the right side of the screen. The URL also changes. But, the sidebar does not reload. Please, someone, edit this if the thing I'm going to express is not much clear. I hope it is clear.
I want to know, how to do this? How to route the views like that?
The following image shows what I am trying to achieve.
A HTML page transitioning the view to another page, without actually having to redirect to another HTML file.
The website has a nice sliding animation when you click on a category, like on mobile when entering certain sections of the 'app'.
Website: https://app.ignition.fun/
I am intermediate at web development, so please dumb it down when trying to explain; I'd assume this stuff is quite complex :P
Thanks.
I was trying to make an application in SharePoint and wanted to make it so that if you click on a button, it redirects you to a page and when that page loads I wanted it to instantly redirect the user to another page. ( I couldn't get the button to just redirect to the page I wanted on click, so that's why I tried doing it this way. ) I did this using a jQuery / JavaScript script. I'm new to making scripts so I was just testing and I ended up making this script:
<script type="text/javascript">
$(document).ready(function(){
Redirect();
});
function Redirect(){
$(document).load("url");
}
</script>
My problem is now that whenever that page loads, it just loads a blank page. But I can't get to the edit screen because it instantly redirects me to a blank page. I tried turning off JavaScript in Google Chrome but even though I was able to load the page without redirecting, I wasn't able to get to the edit page because it's in a jQuery AJAX drop down menu which obviously also doesn't work if JavaScript is turned off.
I would appreciate any help
EDIT: When I say edit screen I mean the place where I can edit the script. To do that I have to press a button on the page, but I can't do that since the page instantly redirects to a blank page.
Use the webpart maintenance page which allows you to remove and manage web parts without visiting the page, the instructions are as below.
Lets say your page is example.com/sites/default.aspx add the query string ?contents=1 to the page it will take you to the manage web parts page you can remove the script editor web part from there.
The other way is to use SharePoint designer to remove the web part this will also help you achieve the same result.
Basically on the home page I have the code snippet generated by Twitter Widget, when I load the page for the first time via url, the feed gets displayed, now I go to other page & come back to home page again, the twitter feed doesnt seem to be displayed.
I dont seem to find the reason behind this, is it something related to a SPA ? because if the load home page via URL it loads but when I navigate back & forth it doesn't display, I just see the a tag Tweets by User
This is the widget code when we create a widget inside Twitter Settings(it's minified, I did format to make it readable)
<script>
!function(d,s,id){
var js,fjs=d.getElementsByTagName(s[0],p=/^http:/.test(d.location)?'http':'https';
if(!d.getElementById(id)){
js=d.createElement(s);
js.id=id;
js.src=p+"://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);
}
}(document,"script","twitter-wjs");
</script>
as you can see the if(!d.getElementById(id)) this looks for the existence of the element, if it doesnt exist then it'll insert the feed, In my case this element exists but the widget was not rendering somehow when I navigate to some page & come back, so I removed that if statement and everything works perfectly, Only a single widget on the page.
Not the best solution but in future someone faces this problem this is a possible workaround !