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 !
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 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.
Using Django 1.11 with Viewflow-Pro 1.04
This is probably a very simple question, but I've spent hours googling and reading and have come up completely empty.
Each page of my app has various CSS/javascript files that it loads with script and link tags. However, when a user clicks a link and it redirects them to another page, the source isn't refreshed - it is still using the source from the previous page (which is often similar, but not the same).
Refreshing the page fixes it, as it pulls the correct source. But basically I'm having to refresh the page every time I get redirected to a new page.
This has proven hard to debug, since a lot of pages have the same source and so they "seem" to work correctly - but I think it only happens with links. If my view.py redirects users (using return render or similar) then it doesn't happen. It is just if a user clicks a link to jump from one part of my site to another.
Anyone have a clue what it could be? I would include code samples, but it's affecting my entire project - if some specific code would be helpful let me know.
This is an example of what one of my links looks like:
{{ MOC }}
Thanks for any help.
Viewflow uses Django-Material frontend with Turbolinks to manage page scripts.
To adapt your page for Turbolinks ensure that scripts located in the <head> of a document. And 'turbolinks:load' event used to initialize it.
Ex: https://github.com/viewflow/viewflow/blob/master/viewflow/frontend/static/viewflow/js/viewflow.js
Phonegap, writing app for Android. Here is what my app supposed to do :
1) onDeviceReady, read xml ( item names and corresponding hyperlink for each item - so kind of Table of contents) and show them on index.html
onDeviceReady: function () {
app.receivedEvent('deviceready');
var readStatus = sessionStorage["readComplete"];
alert("readComplete = " + readStatus);
if (readStatus != "true") {
app.readxml();
sessionStorage["readComplete"] = "true";
}
},
In app.readxml() I read all items + links in my datafile(XML) and add them to a ordered list in a div of Index.html page.
onDeviceReady seems to be getting called each time page loads ( like navigating back). Reading same page for each page load and rebuilding seems redundant since once we read, the page should remember how it was built and controls have their old data in them.So, I store the reading xml status in sessionStorage so that i dont readxml and rebuild page each time.
2) when user clicks on a link in the list, navigate them to a page1.xml
3) when clicks back button, bring them back to Index.html
Problem at #3 --> when user comes back to first page ( index.html), at that time readStatus == true, the Index.html is showing blank.
Question --> how can I maintain state of index.html ( with data populated from reading xml) so that I dont have to rebuild page on each navigation back.
Any help is appreciated.
Whenever you open a new link (page.html) in Cordova, the previous page (index.html) will be destroyed, this behaviour depends on the system, iOS will sometimes cache previous pages and Android seems to always clear data right away.
If you want to avoid reloading the XML data, you can save it into the sessionStorage or localStorage (JSON is a good format). But the DOM has to be re-built whenever you go back to index.html, there will be a minor delay still.
A quick workaround to your problem could be creating an iframe within index.html to load page.html. Or a floating DIV layer on top of index.html using Ajax to load page.html. Both approach will work fine, assuming your index.html and page.html isn't too resource consuming.
data-dom-cache="true"
use this in your html tag. for more infromation follow this...http://demos.jquerymobile.com/1.2.0/docs/pages/page-cache.html
For example, I have a web page called "myApplication.html", and I click the menu, it loads the "menu.html", but it is not loading the whole page, it just like a facebook by clicking the "Account" on the right, it is a part of web site only.
When I click the menu.html items, I don't want the whole page to reload, I only reload some of the content in the myApplication.html, for example, reload a div tag, which id is "photo".
I know that it can put all the code in one html, by not calling menu.html, but I think it is to complex to separate the work. Also suggestions?
myApplication.html -> menu.html -> click on menu.html's menu item -> reload myApplication.html "photo" tag
I would highly rcommend checking out jquery, which has awesome support for ajax what you want to do would be as simple as $('div').load('menu.html')