Is it possible to sync the innerHTML of 2 divs (or any other HTML element or ASP.net control) via Pusher?
My 1st page has an div that I use to insert iframes to PDFs/other files via jquery. I am trying to find a way to also push that data to a div on another page, so that clients can see what files are being displayed.
Please excuse me if this is a naive question - I am new to Javascript and Websocket.
I am building my site via ASP.NET MVC4, if that makes a difference.
Thank you
It's probably not a good idea to send the actual HTML code over Pusher as that can turn out to be quite a lot of data. Have you considered sending the URL for the iframes to each connected client so they can synchronise and load up the same page?
Related
Just finished learning Vuejs and after visiting a few websites that use Vuejs like;
a) https://coderstape.com
b) https://www.thenetninja.co.uk
c) https://laracasts.com
I noticed that by navigating around the websites we by clicking on navbar links and some other links then the pages refresh and I haven't been able to find out the reason online. Could someone kindly explain what's happening in that? Doesn't it go against the purpose of SPA?
For example the last site you specified: https://laracasts.com.
On its main page there is a white button "BROWSE COURSES". If you open Chrome DevTools panel(look at the picture with explanations), go to tab "Networks" (1) and then click on this white button, you can see GET request to "series?curated" (2). If you open its details, you can see that as response, new page is received in the form of an HTML code (3), not JSON for example, as is usually the case in SPA.
Also, if you look at what programming language is used on this site, for example, using service https://whatcms.org/?s=laracasts.com, you can see that this is a PHP, namely Laravel.
From all this, I can make the assumption that they use Vue.js only partially, maybe in several components, but the site navigation itself is presented in the form of traditional static pages, which is why the page reloads.
Also, for example, if you take a look at this website https://www.spendesk.com/, you can see that they use Vue.js+Nuxt.js, as well as Node.js, as indicated by service whatcms.org, and if you try to navigate to various pages on this site, you will see no page loading. I can say that this site is a true SPA in the form in which you mean it.
I heard that you can do a SPA with a Laravel backend, but I think that's another story.
I have this device data that are shown in real time using ThingsBoard.
And I have an iframe to show the device data content on a web page.
If I used the same iframe on my ionic app's HTML page, I am getting all the header, submenu and other unnecessary things that are not needed in the app.
What I need is the main content area of the device data section.
Can I do that with the iframe or do I need to call all the individual ThingsBoard API's to populate the dashboard on my own?
If you are managing the Thingsboard then you can develop custom iframes with unnecessary headers/footers removed. Then you will get clean iframes to display inside your Ionic app.
In case the Thingsboard is not managed by you then you have to develop adapters to scrape the html data from the Webpage. These adapters will provide your Ionic app only the data you require.
You can use PHP Simple HTML DOM Parser for implementing these data scraping adapters.
PHP Simple HTML DOM Parser
I'm creating a SPA app using Durandal and I would like to include a credit card payment facility. The guys that I'm looking at requires you to give return URLs to success, cancel and a view other pages, is that possible?
To me it would be breaking the 'single page' part of SPA, but is it possible? Could I do it all in a window?
Disclaimer: I don't know Durandal, but you would solve this in an SPA using either "hashbang URIs" or actually re-serving the SPA in your webserver for the requested return URI and adjusting the content using the same technique as hangbash URIs but using history.pushstate/history.popstate instead, see here: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history
A more general article from Google is available here that covers the same principle: https://developers.google.com/webmasters/ajax-crawling/
This "works" because SPAs are SPAs only in that the browser requests a new HTML document from the server once (or in your case, twice), the SPA should still be updating the history and address-bar state of the UA as the user navigates the application, just as though it were a regular multi-page application.
A great example of this is GitHub's source navigator: Try here ( https://github.com/angular/angular.js ) and navigate the repository, observe that the contents of the file-listing change as does the address bar, but your browser doesn't reload the whole page... yet if you copy+paste the (modified) address bar address into a new browser window, you get the same page back.
I looked into doing credit card processing from a SPA and the best option I had found was Stripe. They supply a javascript file that looks like it would work, I never implemented it on my project due to time constraints so I can't confirm that it works but it looked very promising.
IFRAMEs are quite good for this sort of thing. You can use jQuery to hook an event handler to the page load event and this will tell you when the other end has responded. Load the 3rd party page into the IFRAME and serve response pages on the URLs you provide to the service provider. As mentioned by others you can use routes to identify the response pages. The IFRAME will stop the round-tripping from mucking up your application state and in fact it is possible to put script in your response pages that dot-notates its merry way up the DOM and into your app.
I am writing a program to automate link validations in a site. Our site is having more than 400 links per page and we need to open each link and see it is returning a valid page i.e 200, there are other requirements as well to check if the page is a 404 redirection page etc. It means to validate 400 inks it will take about 30 minutes or so.
My design is to integrate this with the Front-End (Selenium) automation in a way that each time the browser loads a new page or browser refreshes it will trigger a new thread by passing the page source for validating all the href available.
We are not following a page object model otherwise I could trigger this in my each page.
Question here is that is there any way we can listen to a browser refresh or page load event using Selenium Web Driver?
Correct me if I don't understand your question, but page_refresh and page_load_event can be two very different goals for you, if you are dealing with AJAX. You can try this article about the AJAX part
and this one for selenium custom events synchronization.
This solution here is the most actual I could find.
Actually Selenium is JS driver so this answers can be helpful if you want to try it too:
check-if-page-reloaded-or-refresh-in-js
is-page-reloaded-or-refreshed-using-jquery-or-javascript
post_detect_refresh_with_javascript
I don't want to use frame or iframe because most websites are busting it nowdays.
what are the possible methods to do this?
The intended behaviour is as if like two browser controls loaded in a website.
What is wrong with an iframe? What do you mean by busting (lots of websites are full of iframes)? You do not want to use iframes within an email but that is a different point!
The advantage is when people click on links within an iframe the content of the iframe gets refreshed, while if you pull the content of a webpage and then display it within a div the user will be moved on loosing the rest of the page.
you can pull it via script (PHP / curl) and display the code from there.
or you can use good old frames, although i wouldn't recommend it.
If you do not want frames, then another option is to do it server side - make your server access the pages and combine them into one response stream.
You can also so this client side using Javascript and DHTML
fopen() returns a file pointer:
$file = fopen("http://www.site.com/", "r");