ajax partial load from another page - javascript

So what I want to do is load only a section of one webpage onto another page. So I want to grab the content of a page (stuff inbetween a div with a certain id) without the headers and footers. I know I've seen this before but its, stangly, a hard thing to find.
Anyone kind enough to point me in the right direction?
thank you

You can use the jquery's load method for that.
$('#result').load('test.html #container');
This will load contents of element having id container from test.html page into current page and inside the element with id result.

Related

Have only part of php document load

I have created a PHP/HTML document which uses jQuery to create a sliding page effect. I would like to have what the user selected on the first page correspond to what they see on the second page. I know how to do this if I was to use two separate pages however I would like to keep the sliding page effect.
The problem is that PHP is loaded first so for the second page nothing is displayed because on initially loading the page nothing is selected on the first page.
The only solution I have is to have the second page only load when the first is completed, but I have no idea how to do this. Does anyone know if its possible to have the document load at separate times?
UPDATE
On second thoughts could I use a XMLHttpRequest to achieve this? And if so how can I do this

Get content from div on another page/site by ID and display it on my site

I kinda tried everything.
I'm on Wordpress and using snippets to add code to a specific location on the website and pull some numbers generated on another website. To be more specific it's a counter, I want to sync the numbers on my site to the other site.
I tried jquery, but I don't really know any.
All PHP codes I tried retrieve NULL.
The get page url function doesn't work, so I iframed the page through a proxy hide website and the HTML content does display, just to have it on my domain rather than on another one.
But I just can't seem to pull the content out of the div I want.
I included the DOM document files and tried that code, but it won't display anything.
Any suggestions ?
You have 2 options to do that:
place targeted website url in an iframe - and use "postMessage" to communicate with parent and vice versa (http://javascript.info/tutorial/cross-window-messaging-with-postmessage, https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage)
create a service (even a simple JSONP service) that will provide the data you want - when being called (Simple jQuery, PHP and JSONP example?)

How can I embed hidden data in a web page and recover it using the DOM?

I have a web page that draws data from several other local (same origin) web pages. I collect the data from these other web pages using XMLHttpRequest. I then use the DOM to parse out the needed data from each page. There is one piece of data that I would like to include in each of the other local pages (i.e., in the DOM for each of the other local pages), however, I don't want that data visible when the web page is viewed. (Visible in the source code is OK, just not in the rendered HTML). I can think of a couple of ways of doing that. However, I am not enammered with any of them. I'm wondering what suggestions others might have. Thanks for any input.
Some options:
The hidden attribute:
All HTML elements may have the hidden content attribute
set. The hidden attribute is a boolean attribute. When
specified on an element, it indicates that the element is not yet, or
is no longer, directly relevant to the page's current state, or that
it is being used to declare content to be reused by other parts of the
page as opposed to being directly accessed by the user. User agents
should not render elements that have the hidden attribute
specified.
The template element
The template element is used to declare fragments of HTML that
can be cloned and inserted in the document by script.
In a rendering, the template element represents nothing.
Comments
Depending on the semantics, you can choose one or another. Or even combine them:
<template hidden><!-- Hidden data --></template>
As you mentioned to get through AJAX request, it is in your control where to show or not.
Once you get the result through AJAX, you can store in your script to do some manipulation or show in HTML page itself with parent tag as visible false, so that end user cannot see (except Source code viewing).
What's wrong with a simple hidden div?
<div id="hiddenData" style="display:none;">...</div>
To be honest, it seems like the way you are passing around data is kind of a hack already, so I don't see any real need to be fancy.

Showing loader indicator

I have a page linking to another separated page on the server. I would like to present a loader that finishes exactly when the second page is fully loaded. I dont use AJAX to call the second page, but a simple GET action. Is there a way to control that?
an example would be at: http://m.elal.co.il when you click on one of the buttons.
Thanks
I think the best way here is to preload page with ajax and then push all content of second page to body tag of this page.

Ajax call returning whole page

I have following page with some random tips: http://www.javaexperience.com/tips
I want to display the tips only on the other pages of website so I am making an ajax call and adding whatever returned by the ajax response to a Div's HTML.
The DIV html is:
<div id="tips"><div>
The ajax call is:
jQuery("#tips").load("/tips/");
The problem is that the ajax call results in whole page content to be added to div (since the page gets appended to the div, the above jQuery code gets invoked infinitely) where as I want to add only the tips section. Is there any easy way out?
This is the expected behavior of the load method, it'll always download the entire content. You can specify that a certain part of the loaded page be parsed and placed into the calling container.
jQuery('#tips').load('url #tip1');
You need:
$('#tips').load('ajax/test.html #container');
More info on load here

Categories

Resources