How to update table value from Google search result - javascript

So I was challenged to make a table that its value is based on search result from Google. I was tasked with three things that's totally new for me:
For example, I have the name of Barrack Obama and Abraham Lincoln, when I click on Barrack Obama, the table (with three columns: Number, Page Title, and URL) will be updated according to the Google search result of "Barrack Obama" and when Abraham Lincoln is clicked, the table will be updated again accordingly.
I was asked to make the table changeable, must able to swap columns, resize, order it by ascending or descending.
and finally, when I click on the URL or any of the list, the result page could appear on the same page (on a reading panel, a different section from the table but still on the same page, let's say it's on the right side section of a webpage), and should be resize-able as well
Can somebody give me a pointer or clue on where should I start looking or doing? I was only given clue as using JSON, Jquery, or Google API, but I don't quite sure of the specifics. Any help is appreciated, sorry for the multiple question, I had to since it was related in some way (I think). Thank you for the response!

Google does not have an API for their search results, but here's the general flow of logic:
You will need to make a GET AJAX request using XMLHttpRequest or jQuery on a Google search URL. Do some playing around with Google searches and you can see how they format them:
https://www.google.com/?#q=barack+obama
On the returned HTML page, you should parse out the results and set your table data. Again, play with the Google search results page and see how it's formatting.
For #3, the returned HTML object can be embedded in something like an iframe to give the user a reading panel.
For resizing, there aren't any default HTML tags that will resize like a split pane. If you decide to go with jQuery, you could look at the jQuery UI or other widgets that give you the resizing functionality you'd like.

Related

How to save selection state in multipage results view?

I am trying to figure out how I can save selection state in a web app. To be more specific I am making some query interface that queries a mongo backend. The results are are rendered in a image gird type view with checkboxes on each image and a download button to download selected images. Now, I am anticipating dealing with a lot of results for a given search. To handle this I am going to use paging. I am wondering how I would even save the selection state as I am flipping through paged results. I am totally new so if anyone can so much as provide an answer with some supporting information I can look into; that would be great.
Use AJAX to fetch the results on the next pages and append it into a separate section in the page rather than navigating away from the first page. This way the selected results are maintained as they are. You may need to do some calculation around your pagination and some toggling logic to show/hide divs when the pagers are clicked.
Useful link you could use (maybe ignoring the PHP/MySQL parts): http://www.sitepoint.com/pagination-jquery-ajax-php/

Dynamically display database information onclick

I set up a web service using LAMP for personal use.
Basically, I have a scrollable list with some database information I pull once in the PHP script. I'd like to be able to click on one of the items, and have more information appear in a preview pane . (preview pane is set up)
I don't expect to ever have more than 100 entries in my database. Also, the data I'm pulling is very small...about 10 fields, all text data.
My question is as follows:
If I pull all the data I need in one shot, how can I store it so that each block of data I define (2-3 rows are what I need in the preview pane) is "cached" and I can access that given block at will so I can display it upon clicking its corresponding list entry?
Basically, this is about the same as clicking an email in a web-browser and having the rest of the message show up in a preview pane.
Thanks.
nb: the fact that I'm using a preview pane or a list is irrelevant. Just describing what I'm doing.
If I understand correctly, you would like to create a simple page, where several details are hidden until you click on different buttons. If you would like to do this in a "cached" way, you can try the following:
Fetch the complete data so that everything (with details) ends up in the result HTML. Everything: I mean, the parts which should be visible at all times and also the details which should be visible only after pressing a button.
Now, to the design. You will have to write CSS code, which will hide the details. (Of course, for that, you will have to create HTML in step 1 which will let you target the details via CSS classes, for example.) You will also have to figure out how to create buttons.
The most complicated part is to bind the buttons to Javascript actions, which will perform showing the hidden details. You can control all CSS properties from Javascript, so for example you can alter the position, the size, the text color etc. of a <div> dynamically.
Most people nowadays use jQuery for tasks like the one in step 3, or even software libraries built on the top of jQuery. That could help a lot if you're just starting out with tasks like this one. On the jQuery site, you will find a great place to start, called the jQuery Learning Center.
Edit: I've created a very basic fiddle to let you test the JS part of my concept, see it here: http://jsfiddle.net/eL9mj/22/

Dynamic Loading Grids; Javascript or Tag library

I am looking for a grid implementation on my dashboard. The requirement here is that if the data that the grid might be fetching changes while a user is looking through the grid, the changes should be reflected. So the row present in page 1 may be present in page 2 after sometime. If the user clicks on page 2, he should be shown a fresh page that is fetched from database and that item should be in page 2. So, I need to use a pagedObjectList to get the data and show that data when user looks for the next page. The same requirement is for sorting too.
So I am looking for a javascript Grid like jqGrid or DHTMLX grid or a Tag Library which has some sort of ajax calling mechanism for sorting and paging instead of showing the old data which is fetched first.
Please suggest any grid/ tag library implementation which can fulfill the above mentioned requirement. Thanks in advance
I finally went with DHTMLXGrid, it has all the configurable actions I needed, like onPageAction, onSort etc. I could simple write my custom code for those trigger events. I would also recommend it to others, pretty handy and solid.

Searching, sorting, paginating and filtering DIVs using Jquery/AJAX/Javascript

I'm working on the front-end of my project and doing the back-end later. I've ran into a snag though. I have a list of DIVs (want them to be collapsible as well) that are suppose to show various apartments around a given zip code. Problem is, I don't know where to go to look for these things:
Firstly, I wish to sort these divs by name or ranking.
Secondly, I
want to be able to search these results and toss out the ones that
they do not want, i.e. I type in A, all apartments that begin with
letters B-Z disappear in the list. I think in p after A, all Aa-Az
letters disappear from the list, etc.
Thirdly, should I use jQuery to paginate my results or should I use PHP instead?
Lastly, I have a filter box. I want to do the same as above except with different selectable options (on the fly using AJAX). User selects, 1 to 3 bedroom apartments, no pets,
and hits filter... boom, list of apartments with values.
Is there anything that I can use using jQuery/Javascript to speed up this process that also degrades when Javascript's disabled? I know this sounds like a lot, but any help would be greatly appreciated.
Well for this to work without javascript, and still behave like you want, i guess you have to build this in pure old html (with form post's / links) and then add jquery ajax functionality to make it prettier and faster when javascript is enabled.
If i were doing this, i would build it with form post's that return the whole page (when javascript is disabled) and add jquery events on page load to prevent default form post and instead use ajax post to only partial load your pages and aply transition effects.
One last thing, if you have a lot of data to show on page use pagination and sorting at database level, return only the visible content of your page. This will work with and without javascript, and is scalable (with lots of results it becomes unmanageable to it in javascript)

Home Baked Google Instant (Just the fancy AJAX)

Anyone know how you could duplicate the instant nature of Google Instant?
I'm trying to create a similar functionality with hand carved results (basically a huge if statement) on a website.
Some more clarification:
If a user were to type 'phone' in a search bar, contact information would instantly appear below.
more clarification:
I don't really want predictive results, just simply returning results based on keyword instantly below the input bar.
So you want to move the search box on the first keystroke in a box then use ajax to retrieve results? Sounds like the bulk of what you're asking to do...
Business statements -> code
Try this post http://www.rsc-ne-scotland.org.uk/mashe/2010/09/google-custom-instant/ It's a very simple implementation using jquery and Google custom search returning JSON.

Categories

Resources