Grabbing information from one page and displaying it in another - javascript

I have a html page I'm making, which displays a bunch of category links - each of which link to an inventory page with a number of products. The client would like the page with the links to have the number of equipment available next to the title e.g.
Excavators (5)
The issue is, I dont have access to the back end of the inventory, its hosted with another company. At the top of each inventory it has a number of matches field, which is the information I need
Can anyone think of a way i can show that matches number on a different page dynamically (without php). The only thing I can think of at the moment is doing a really hatchet job with an iframe - but that wont be pretty or professional. Any genius thoughts would be appreciated!!
p.s the page im linking to is internal in my site - the inventorys in an iframe

If the data you need is an identifiable container, and you can work out the url to retrieve it from, you could use the jQuery .load() method, e.g.
$( "#result" ).load( "ajax/test.html #container" )
Where #container has the data you want, and #result is where you want to load it to.
http://api.jquery.com/load/

You could store the web page as an html string in localStorage. It's not too complex.
localStorage.setItem('myPage','<div>Your html page in a string friendly format</div>');
to retrieve:
var retrievedObject = localStorage.getItem('myPage');
console.log('retrievedObject: ', retrievedObject);

Related

Server Side Rendering and JavaScript

I am currently developing an application using asp.net MVC.
On page load user profiles are loaded with small thumbnails, some bio info on the right. When the user paginates I only want to update a certain part of the page where the results section is.
The confusing thing for me is instead of removing and adding elements recklessly, What is the best way to initially load results dynamically, and then use JavaScript to update those elements with ajax?
My main concern was what effects is constantly updating and removing elements from the dom having on memory and performance.
For example when the user goes to page two there are 5 main elements I would change using ajax, the thumbnail and the bio info. There are about 12 tile like containers. That brought me to question how to properly update the dom elements without having to recreate the whole container holding the 5 elements.
Thanks for your time everyone.
Use something like this with jquery.get();
$.get( "yourdatafromserver.asp", function( data ) {
$( ".resultContainer" ).html( data ); //update certain div with obtained result dynamically without page refreshing
alert( "Load was performed." );
});
You need to have an Event like onclick' oronhover` etc. to call this function or else on page loading

Javascript pull data from website (member site)

I haven't written any code for this yet as I am trying to figure out how to do it first. I have a site at work that I have to log into with a password. Its a site that we use to manage our lanes (I work in transportation currently) the information is displayed as a popup across several taps.
What I need to be able to do is pull the data off of a field on the last tab (its the field that shows total amount for our loads) the page is a .aspx page so is it possible to scrub this? Is there another method without getting the service involved? I am trying to do my own analysis program but really confused on where to start with retrieving the data.
any helpful hints or links are appreciated.
Try the Jquery load function that target and loads the returned HTML into your nominated result field. You also can target that specific field that you want.
$( "#result" ).load( "targetDomain/targetPage.html #targetField" );

Adding view count to external links on site

I want to create a gallery where the images link directly out to the website in a new window when clicked.
However I would also like a view (or click to be more descriptive) count to show overlayed on the image on hover.
How do I do about creating the link/view count? Since no page is actually loaded - only a link clicked?
On top of that I would also like to use a custom short URL service. Does anyone know one that is good and/or would have a solution to my problem?
Cheers!
I've made a TODO list for you :)
[JS/AJAX] catch the click event and send a message to the server what was clicked
[PHP/ROR/Python/etc] store information in the DB (increment the clicked element counter)
[PHP/ROR/Python/etc] when page is loaded, retrieve counter values from DB and put them into the HTML
[JS] use counter values to display them over images
As for short URL services I like goo.gl .

jQuery pagination for json results

What is the best way of doing a pagination? I would also need to save the current page, so that when I click a link it would save the page I was on. So if I'm on page 2 of the pagination and click one link and then get back to pagination page it would remember that I was on page 2.
I get the results/data from Json request where I have offset and limit possibility.
$.getJSON(base_url+'/ajax/get_news/4/!OFFSET!/!LIMIT!/true', func...
Where !LIMIT! is how many results it shows and !OFFSET! is, well offset :D When I click a link, it makes that request, it goes throught the results and appends the result into page.
What is best way to save the page, cookies? Should I get all the results and then do the pagination somehow or do new request when user change page?
Some tutorial or "hands on" example would be awesome. Normal instructions/guides are difficult to undestand since my first language isn't english.
It appears you have two questions:
1) How to save page state (what page you are on): If the application must continue to use an ajax, then you should look at storing the state in the url as discribed here:
http://ajaxpatterns.org/Unique_URLs
2) Regarding where to do the pagination, I think it would depend on the size of the data to paginate. If it is small and you are not worried about the data changing on between paging, do it all in javascript. Otherwise, do it server-side.
Okey I should use the !OFFSET! and !LIMIT! to do the pagination. I just need change those numbers with pagination links (1 2 3 4 pages etc) to get the pagination to work I believe. But I dont know where to start :/

How To Display List of Sites One At A Time

I am looking for a way to display a list of websites one at a time from a URL list. I'm fine with a very manual solution, I found an AJAX solution where each "page" is displayed in a tab but it is very heavy because if I have 50 pages I want users to page through one at a time, this solution essentially pulls all 50 pages onto the one page. Do you know of a framework which does the same thing but only loads one page at a time? Thank you very much for the advice and help. Here is the site I found - http://css-tricks.com/jquery-ui-tabs-with-nextprevious/
You could load the URLs into an array and then create a 'next' button that loads the next url into a div; replacing the previous one.
do you require doing this will javascript?
might be easier to curl the pages using php, then echo this returned data as an eval-able array into the html. Then allow user to alter which part of the returned array you are looking at using a next and prev button.
if you pre-load each one it will be heavy as you have noted.
This idea is screaming for AJAX. With proper AJAX calls, you would only load a page once it has actually been selected by tab. Any previous page loaded into the area would need to be dumped. You shouldn't actually need to physically switch tabs if you're using the src attribute of an iframe, simply changing the src and forcing it to refresh itself should accomplish the trick. If you are performing a screen scrape through a remote web service, then you could simply use jQuery/AJAX to rewrite the innerHTML of the panel in question.

Categories