Run Search on Webpage Dynamically - javascript

I'm trying to dynamically submit a search form on BBB (Better Business Bureau) then load the results as if you were to go to the web page and enter the search criteria yourself. So far I dont have much, but...
$.post('https://www.bbb.org/search/', {input:"car", location:"New York, NY"}, function(data){ $( "#results" ).empty().append( data ); });
Basically I send the input and location and attempt the load the results in to a div container. I can load the results in to the current page OR just re-route to the page that would load had you manually ran the search. Any ideas on how to do this? I know pages like youtube have search api's for developers but BBB does not (to my knowledge)

You can form the query string for the main search page with "input" and "location". e.g for input : "car" and location : "New York, NY" query strings looks like this
queryString = type=name&input=car&location=New York,NY&tobid=&filter=business&source=bbbse&default-source=bbbad&radius=&country=&language=&codeType="
append this query string to the url. "https://www.bbb.org/search/?" + queryString
which is equivalent to https://www.bbb.org/search/?type=name&input=car&location=New+York%2C+NY&tobid=&filter=combined&source=bbbse&default-source=bbbad&radius=&country=USA&language=en&codeType=YPPA
Now you can set browser window.location (javascript) equal to above url which will route you to desired page with search results.

Related

Url for specific action in a page

I have page flow like this
User lands on the landing page.
Then does some selection of some select boxes and then hits search.
Then use is taken to new page with all search criteria and displayed search results.
In this page we have left section to display all results and when user clicks on any result item we show the result details on right side.
All this was fine. But now client want a bookmarkable link for the open section i.e. when use clicks on the left div, right div should open and this should have proper url, so that it can be shared.
How can i achieve this, making urls for open divs? i tried #id=1002 everything worked, but when user copies the url and pastes, java is not able to get the hash tag.
Here is one of doing it. -- Codify and map URLs and then handle them within the javascript.
Let me explain.
Say for example, you have 2 divs -- div1, div2
(1) Codify and create a mapping logic/convention ---
Map the states of divs to URLS --
div1 open div2 close --> URL = mysite.com/page/d1-open/d2-close
div1 open div2 open --> URL = mysite.com/page/d1-open/d2-open
div1 close div2 open --> URL = mysite.com/page/d1-close/d2-open
div1 close div2 close --> URL = mysite.com/page/d1-close/d2-close
and so on
(2) Handle the URL at Server --- Just make send the output of mysite.com/page , ignore the rest
(3) Handle the URL at Client ---
something like this
function handleURL() {
var myURL = window.location.href;
var urlArray = myURL.split("/");
//examine the urlArray and decode the URL code after mysite.com/page/
// and open or close your divs accordingly
// eg: if the url-part after page/ is div1-open/div2-close
// i.e urlArray[2]=div1-open and urlArray[3]=div2-close
// you would know what to do accordingly...
}
The example I explained you, is barely scalable. You will have to manually come up with 2^n mappings for each combination of n divs. However, if really want to make it scalable, you can automate the codification too.
You can assign each state of the page a unique id.
Eg: mysite.com/mypage/page-config-id=abcd1
Then you ask the server the for the div configuration
i.e which div is open which divs are closed etc as a JSON. And then you can use Javascript to parse the JSON and rearrange the page.
You can store the div config --> page-config-id key-value pair in a key-value database on the server in a database or file or noSQL or whatever.
You need URL to right divs content only.
You will have to come up with a uri router that links to the searched resource.
If your search resource is user profile then all user should be accessible via some uri like /user/:userid.
Suppose the search is for a person named z.Your left div will have all profiles with name z. Clicking on any result item will open that person in detail view, however the URL should be changed using location attribute to /user/z1.
Also you will need to check if the user that is searching for the resource has access level to view that content.

Adding / updating a paramenter in URL with jquery

I have 16 database results shown on my website. Using a load more button, the user can load the next 16 database items and they get appended into the container.
Im trying to make a way so that if the user clicks back after visiting a link, they will get shown the same amount of results as they had loaded.
My plan for this is to add a page number to the url after each load more function. When the user clicks back in the browser, i can then use that parameter in the LIMIT php claus.
So, in my ajax response, i append the data and then i wish to add a page number to the url, or update the page number if there already is one.
An example of what i want to achieve is:
www.mydomain.com/?page=1
I have made a jsfiddle with a basic button click function just for testing since im away from my laptop until later.
jsFiddle
And the code just incase:
var url = document.URL;
var pageID = '1';
$("#addtourl").click(function(){
// add page id to the url
alert(url);
});
Where the url is alerted i want to modify the URL. I already create a page ID so thats not an issue.
Thanks!
You can use the HTML 5 history.pushState function as explained here .

How to make search field for user with autofill for html list

I need a search field on my site allowing users to search for their location (for a local weather forecast).
I have a html list of locations - each location is clickable (with href to the relevant weather forecast page).
The user should start typing a location in the search field - and as the location name is typed, a match function should start and autofill the search field.
The user should not see the list - only the search field.
Once the match function has autofilled the search field, user should press go or return - and the link to the relevant weather forecast be activated.
I know some html and javascript, but this one is above my level.
I found this code on stackoverflow Filter search for <ul>. It's something like that - but user must not see the list.
You would have shared a bit info with us:
You know some HTML, but don't wanna show it? We would have helped you better if you just sent us some code! :)
What you'll need
Ok, here is the thing.
First create an input field such as:
<input type="text" name="text" id="text" value="" onkeyup="search()"/>
Then use a function as:
function search () {
var value_field = $('#text').val();
$.ajax({
// create an ajax request here..and get the value
success: function (data) {
$('#div').html(data);
}
});
}
<div id="div"></div>
This will be the div where all the data from ajax would come and display.
Where all the thing is happening
Now the main thing is from the other page. You need to control it to show the data or hide it or whatever you want it to do. That's going to happen on the other page the page where request is going.
You can try to show the data only when there is a perfect match else write this:
$('#div').html('Keep writing, you can match');
And make the user write some more words, who know what he mind match!
User will never see the list
Untill or unless you let him go to the page, untill then he will just see the results you are viewing him! So you should use a Database to show the data when the request is Ajax only, otherwise don't create a connection to the database. This way user would never ever see the list, unless its you! :D
Summary:
And the thing is same, the main process is:
You create a function in the input field to search when there is any word added. Forget the backspace right now.
You will send the value to the next page for processing, get the data, set it to the type you want the user to see.
Display it using `$('selecter').html(data);
Good luck.

Create dynamic url from user input

I am running a blog: http://jokesofindia.blogspot.com. I want to provide a dynamic link in the sidebar of my blog to download a Hindi newspaper in pdf format.
I tried to view source url of epaper.patrika.com and found that if I enter the url epaper.patrika.com/pdf/get/145635/1 it will download the first page and epaper.patrika.com/pdf/get/145635/2 it will download second page, and so on.
The last part of url is the page number. But the second to last part of the url, '145635', changes every day. Now I want to be able to enter this changing part of url manually every day and then have the JavaScript generate download links with the date replaced by the information I entered.
This code also needs to work on mobile devices such as Android.
You can use the html5 data object to store the data and use JS to get that data and append it to the link:
HTML
<div class="linkholder" data-number="12345">
PDF page 1
PDF page 2
</div>
JS
$(document).ready(function() {
var newNum = $('.linkholder').attr('data-number');
$('.linkholder a').each(function() {
var newLink = $(this).attr('href').replace('#', newNum);
$(this).attr('href',newLink);
});
});
view the CodePen to see it in action.

Facebook Like button for every item?

I have Facebook iframe app where I am pulling content with JSON and representing it in a list with search criteria.
On item click new content shows on the same page (using ajax), and that page shows more info about item. I want to add a LIKE button for every clicked item.
But it must be a different URL so I can publish it on my FB wall. So when I check link from Like button on wall, it will redirect me on that special item.
Here are few issues:
1) How to define Like button for every item?
<div class="fb-like" data-href="LINK FOR LIKE BUTTON" data-send="true" data-layout="button_count" data-width="450" data-show-faces="true" data-colorscheme="dark"></div>
Here is LIKE button, I need to specify different data-href for every item.
2) I need to send some parameters to url. Let's say when clicking on item, I should send item id to URL. Right now I can send item id to my URL but it is doing just in my iframe -- not in facebook URL. How can I do this?
I think second problem would give an answer for my first problem.
Edit: I am doing this using jQuery.
edit2:
so, i am using jquery for my site, pulling content with JSON and representing it with html and jquery, i have, it is all the same page, but on click i hide some contents and show another, so my main content is a list of items, click on item i hide main content, and i show item info content
so, it is all one page, so it has the same URL (main content, item content,... all the same URL)
so for adding LIKE buttons for every item, i need to make a difference between those items, so i done this
'window.location.href=window.location.href + "#id=" + propertyid;'
so right now, every item has its own URL, which i done manually, so right now every item has own URL which i could use for LIKE button
but, when i alert this new window.location.href is seems all right, i get this new location with #id=12345 included, but when i try to send that location to LIKE button data-href it is always just the main location, without this new part includind item id #id=12345
Yes, you can create FB Like buttons for "items" shown on dynamically created screen content (eg Ajax popups).
Issues:
Individual item urls
FB demands a "social graph endpoint" for each item that can be liked. So you also need to support a url which returns only the "item." This is the url for the individual item. It is also the url that a FB viewer will click on if they want to find out more about the item.
Example: a page shows a list of articles. There is an individual Like button next to each article. When a person "Likes" article B, it is shown in their FB stream. When they click on "Article B" in the stream, it should go to a page that only shows article B.
Also, the url for just article B will be queried by Facebook to obtain the FB meta headers for the individual item (image, classification, etc).
Parsing the new dom for FB items Depending on which method you use for adding FB like buttons et al, you may need to tell FB to explicitly (re-)parse the new parts of the dom that you just added dynamic content to. (Your pop-up.)
Since you know the element that you added the popup to, there is no need to tell FB to reparse your entire dom. Tell them to parse starting at the beginning of your newly added/changed element:
Code I use:
if (event_data) { // event_data was received, show it
panel.setBody(event_data); // set the pop-up's body
if (!this.ie && typeof(FB) != "undefined" && FB.XFBML)
{FB.XFBML.parse(this.panel_el);} // Parse FaceBook markup
....
Docs from FB on this:
http://developers.facebook.com/docs/reference/plugins/like/
http://developers.facebook.com/docs/opengraph/
http://ogp.me/ # FB site about "Open Graph Protocol"
Place this in a for loop, and you should be fine.
var elements = $("#divId").html();
$("#divId").html(elements + "like button code");
$("#divId.fb-like").attr("data-href", "what you want to link to");
See .html() and .attr() specs.

Categories

Resources