Can I make a AJAX call back from another page in HTML? - javascript

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')

Related

Wordpress, how to debug Javascript to check a specific behavior

I need to debug Javascript to check which function is called on a specific behavior.
To be more specific, when we click inside an iframe, all the page or at least the iframe is reloaded, so loaded 2 times.
For example, if you take a look at this page:
https://artetcadres.fr/art-et-images/#collection/hopper/
and click on the artist "Klimt", the main page activate a javascript function, display this image on the entire page and reload the iframe content.
I tried with the Chrome Devtools but can't figure out which function is called display the image "Loading..." and reload the iframe.
It's reloaded maybe because the url is dynamically updated. The anchor #collection/hopper/ will become #collection/klimt/.
This strange behavior appeared after an wordpress upgrade.

jQuery script keeps redirecting me from a page I'm trying to edit

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.

jQuery Mobile Load Content Via Ajax Before Page Shown

I am very experienced with jquery, but jquery mobile is very new to me. I am developing an app using cordova and jquery mobile.
So i have a multi page setup in the html, with navigation bars that switch the pages. All works great there, however, i need to load the page content via ajax when the page is changed.
I am managing to do this with a post request to an external web server that generates the content, then caches it inside a local database via the app. I am currently doing this with the "pagebeforeshow" event.
The problem is, when the user clicks the menu item, jquery mobile has already switched the page before the ajax call in "pagebeforeshow" is fired, which means we see a blank page delay while the content is requested.
So my question is: Is there a way to either prevent jquery mobile from switching the page automatically on menu click so that i can catch the event, grab the content and then manually display the page with changePage() or is there an event i can hook into that fires well before the transition takes place?
So the idea is they click the menu item, a full screen loader shows (which works) , load the content and then display the page, not display the page then load the content....
Make sense?
The way I'd go about it would be to not use pagebeforeshow and instead have the page initally covered by a splash screen.
Then when the splash screen is loaded and displayed (image onLoad or similar) start the AJAX call, which once finished, fades out the splash screen and shows the actual content.

Window like facebook chat

The Facebook chat window remains open, unchanged, to refresh the page, or even when we change page. How to reproduce something similar? Tried with frameset, but it did not work.
How to keep a div open a window similar to the internal, even after refreshing the page or clocar on a website link?
Like them, you can try -
The data is shared between facebook pages. Probably HTML5 localStorage? Cookies? I'm not sure.
If you notice, they don't "refresh" the page, they ajax-refresh the content on the page for subsequent loads. (unless you manually navigate to the same page, of course.)
Finally, its all CSS mainly some z-index put to use.
I hope those 3 are enough to get you started.
I don't think the whole page of Facebook is loaded. Every link has it's own 'target'. Most of them fetch a page (I think with simply AJAX) to show, others to just change some partials of the screen. So let's say, you have two divs. One div is the chat-div. Positioning fixed and all, z-index on 100, it will always stay on top. The rest of the page is the other div. Within this div, you can load certain pages with AJAX, without the whole screen to refresh.
As with reloads of the screen: you can easily save (also with AJAX) whether the user closed the chat screen or has it opened. Just create a table in a database called 'chats' or something, then when a chatscreen is opened you put an entry in that table with 'person_1', 'person_2' 'lastmessage' and 'active'. When they close the chat, you can put the 'active'-field to false. Then, whenever someone loads the entire website, you check the table chats for active chats, and shows them when there are any.
I would look into qjuery-qjax: https://github.com/defunkt/jquery-pjax
From their docs:
pjax works by grabbing html from your server via ajax and replacing the content of a container on your page with the ajax'd html. It then updates the browser's current url using pushState without reloading your page's layout or any resources (js, css), giving the appearance of a fast, full page load. But really it's just ajax and pushState.

Reparse Google Plus Button?

I have a website where pages are loaded via AJAX so I reload the Facebook comments box and like button (FB.XFBML.parse()) each time a link is opened. I was wondering if there is a similar way to reload the Google Plus button with JavaScript for a page.
Parsetags should be set to explicit.
See: https://developers.google.com/+/plugins/+1button/
Then you can call gapi.plusone.go(); to have the tags re-parsed.

Categories

Resources