Ajax Live Search Questions - javascript

So basically this has been asked many times but I couldn't find an answer with my needs. Basically I have found many urls with links like example.com/ajax/search?query=Thing
I have a bit of a header in the works and I currently use W3schools XML version but it doesn't fit my needs at all since I need it to basically search IMDB for whatever the user enters, Once they enter for example 'The Simpsons' it will then popup all search results with the name and it being a clickable link to the IMDB link for example http://www.imdb.com/title/tt0096697/ but then replace imdb.com in that url with my websites url (To make it responsive in a way).
But I need it to use AJAX/jQuery in a way so that it searches on IMDB so using this XML file method wont work.
How is the sites with /ajax/search doing this type of IMDB search which is used a lot on torrenting sites lately.
This is where I got my current code for the search from: Live search with PHP AJAX and XML
But as I said it needs to be run with Ajax, Have live search, and basically scrape/search on IMDB in a way and then change imdb.com to mysite.com
Update:
I managed to find something like this:
http://pastebin.com/PAD5AXUK
And this is the HTML:
<div class="main-nav-links hidden-sm hidden-xs">
<form method="GET" action="http://www.imdb.com/find" accept-charset="UTF-8" id="quick-search" name="quick-search">
<div id="quick-search-container">
<input id="quick-search-input" name="query" autocomplete="off" value="Quick search" type="search">
<div style="background-position: -160px 0px;" class="ajax-spinner"></div>
</div>
</form>
<ul class="nav-links">
<li> Home
</li>
<li> Browse
</li>
</ul>
<ul class="nav-links nav-link-guest">
<li> <a class="login-nav-btn" href="javascript:void(0)"> Login </a> | <a class="register-nav-btn" href="javascript:void(0)"> Register </a>
</li>
</ul>
</div>
But it still doesnt seem to work at all

you can check this.
https://twitter.github.io/typeahead.js/
Problem will be solved

As for the searching of IMDB You're going to have to use something like the php curl extension to get the contents from the website and parse them with an html parser library.
For the live searching thing, you can change the url in javascript with this pushState() function like in the following answer: Changing the url with javascript. Then you can use some jQuery to make it easier to send ajax get requests to YOUR OWN server, where the php script will process the request to IMDB (something involving
$.get("/ajax?query=TMNT", function(data) { //handle the data in here } );
Then in that callback function you can update your page with the contents of the result. You could even do some of the processing locally, like with the changing the url of the IMDB link.
The process would resemble the following chart:
User Enters Query (TMNT) ->
Ajax sends data to my own backend page (process.php) ->
process.php scrapes IMDB search query and parses it with html parser ->
outputs results which return to ajax function ->
ajax callback function places results in a DOM element

Related

Get Dynamiclly loaded Source Code from python using mechanize and bs4

I want to get source code of page that loads from javascript actually that page is linkedin profile page and i want to get job and education details.
I'm not using selenium i don't want browser window to open i know about headless but cookies problem
I have logedin through mechanize and i have get some data like phone number, address, headlines, emails, and Full Name. But as it is loaded from javascript so i can't get whole page data.
Data getting:
.....<code id="bpr-guid-892585" style="display: none">
{"data":{"entityUrn":"urn:li:collectionResponse:uPYuDSPXzooiHx+zPOguG1+f+JFMWTWFEfhiIQtEFMM=","elements":[],"paging":{"count":10,"start":0,"total":0,"links":[]},"$type":"com.linkedin.restli.common.CollectionResponse"},"included":[]}
</code>
<code id="datalet-bpr-guid-892585" style="display: none">
{"request":"/voyager/api/takeovers","status":200,"body":"bpr-guid-892585","method":"GET","headers":{"x-li-uuid":"AAXafRyXk/WxvhRuOZTrnA\u003D\u003D"}}
</code>
<img class="datalet-bpr-guid-892585" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="display: none"/><code id="bpr-guid-892586" style="display: none">
{"data":{"entityUrn":"urn:li:collectionResponse:nZx6/1e1AAbOHh075gv083zrunZT186/K+rx5FP70A4=","elements":[{"lixTracking":{"urn":"urn:li:member:865882626","segmentIndex":2,"experimentId":4358724,"treatmentIndex":1,"$type":"com.linkedin.voyager.common.ChameleonConfigLixTrackingInfo"},"data":{"namespace":"premium/templates/components/chooser/plan-card","locale":"en_US","message":"Learn more","key":"i18n_card_select_plan","$type":"com.linkedin.voyager.common.ChameleonConfigDataI18n"},"displayName":"card_select_plan","description":"testing 'Learn more' on SKU cards, vs control of 'Select plan' ","lixTreatment":"VAR_t20152_PR_1","lixKey":"chameleon.PREMIUM:us.copy.17654","creatorDisplayName":"cyount","status":"PERMANENT_RAMP","$type":"com.linkedin.voyager.common.ChameleonConfigItem"},{"lixTracking":{"urn":"urn:li:member:865882626","segmentIndex":3,"experimentId":4395729,"treatmentIndex":0,"$type":"com.linkedin.voyager.common.ChameleonConfigLixTrackingInfo"},"data":{"namespace":"onboarding/templates/components/widgets/people-you-may-know","locale":"en_US","message":"Connecting with people lets you see updates and keep in touch","key":"i18n_onboarding_pymk_page_header_phase_3","$type":"com.linkedin.voyager.common.ChameleonConfigDataI18n"},"displayName":"onboarding_pymk_page_header_phase_3","description":"Onboarding PEOPLE_YOU_MAY_KNOW widget header copy test","lixTreatment":"control","lixKey":"chameleon.ONBOARDING:global.copy.19060","creatorDisplayName":"zihliu","status":"MAX_RAMP","$type":"com.linkedin.voyager.common.ChameleonConfigItem"},{"lixTracking":{"urn":"urn:li:member:865882626","segmentIndex":3,"experimentId":4395707,"treatmentIndex":1,"$type":"com.linkedin.voyager.common.ChameleonConfigLixTrackingInfo"},"data":{"namespace":"onboarding/templates/components/widgets/profile-edit-common","locale":"en_US","message":"What’s your most recent experience?","key":"i18n_onboarding_profile_edit_work_header_v2","$type":"com.linkedin.voyager.common.ChameleonConfigDataI18n"},"displayName":"onboarding_profile_edit_work_header_v2","description":"Onboarding PROFILE_EDIT widget header copy test","lixTreatment":"VAR_t21697_PR_1","lixKey":"chameleon.ONBOARDING:global.copy.19063","$recipeTypes":["com.linkedin.voyager.dash.deco.relationships.ProfileWithEmailRequired","com.linkedin.voyager.dash.deco.identity.profile.WebTopCardCore"],"$type":"com.linkedin.voyager.dash.identity.profile.Profile","firstName":"Adarsh ","profilePicture":{"displayImageWithFrameReferenceUnion":{"vectorImage":{"$recipeTypes":["com.linkedin.voyager.dash.deco.common.VectorImageOnlyRootUrlAndAttribution"],"rootUrl":"https://media-exp1.licdn.com/dms/image/C4E35AQEIVkoUWgLFvw/profile-framedphoto-shrink_","artifacts":[{"width":200,"$recipeTypes":["com.linkedin.voyager.dash.deco.common.VectorArtifact"],"fileIdentifyingUrlPathSegment":"200_200/0/1597096649541?e=1647694800&v=beta&t=XVOK0upwO6V3NaJtUWLwy-yLMDa8cZICzYH0do67vhU","expiresAt":1647694800000,"height":200,"$type":"com.linkedin.common.VectorArtifact"},{"width":400,"$recipeTypes":["com.linkedin.voyager.dash.deco.common.VectorArtifact"],"fileIdentif
</code>
<img class="terminatorlet" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="display: none"/>
<div aria-live="polite" class="visually-hidden" id="a11y-notification" role="region"></div>
</body></html>
And also if there is way by using of selenium then please guide me but using headless attribute.
It contains all data that i mentiond above but when loaded from browser after login it's different.
Thanks for any help.

What is the meaning of folder after hash(#) in the anchor tag?

In the Component Template section of this angular tutorial, they use the following code:
...
<ul class="phones">
<li ng-repeat="phone in $ctrl.phones | filter:$ctrl.query | orderBy:$ctrl.orderProp" class="thumbnail">
<a href="#/phones/{{phone.id}}" class="thumb">
<img ng-src="{{phone.imageUrl}}" alt="{{phone.name}}" />
</a>
{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul>
...
In the anchor tag they use following value for href "#/phones/{{phone.id}}". As far as I know href="#" would jump to the top of page on click. And href="#mydiv" would jump to the element with id mydiv.
I've never seen something like href="#/folder1/myimg.jpg". Is it equivalent to href="/folder1/myimg.jpg"?
Putting the "#" symbol as the href for something means that it points not to a different URL, but rather to another id or name tag on the same page. For example:
Click to go to the bottom of the page
blah blah
blah blah
...
<a id="bottomOfPage"></a>
However, if there is no id or name then it goes "no where."
for more info you can see ...
What is href="#" and why is it used?
But in angularJS it is used for routing the request ... as angularJS provide very good support to built Single Page Application .. the parameter after # used to find out proper page to render ....
here is a nice example .. but you need time to understand it in depth ..
It seems like all anchor events will be interrupted by javascript and perhaps page will be loaded on background using ajax and browser's address line will change but it will not be cause for browser to reload the page. In HTML4 it was unable to change address line without reloading the page. So It's kind of workaround to:
Specify which page should be loaded by js.
Give the user ability to refer to specific page in future or share it.

JQuery Filer: Inserting download file link

I'm using the library JQuery Filer. It can upload files pretty well and can display the upload files.
I'm using templates to show the files icons (Like this example).
I tried put a link to download file by clicking over the icon. So I put the href for itemAppend template, but I need put the url.
<a href=" ? ">
<div class="jFiler-item-inner">
...
</div>
</a>
Because I retrieve a Json object like this:
{
"name":"appended_file.jpg",
"size":5453,
"type":"image\/jpg",
"file":"191a1a.jpg",
"url":"http:\/\/dummyimage.com\/720x480\/f9f9f9\/191a1a.jpg"
}
But I don't found a way to use a *fi-** personalized variable ti insert the url in href. I would like something like 'fi-url' to generate the link:
<a href='{{fi-url}}'>
<div class="jFiler-item-inner">
...
</div>
</a>
I think it would be a good feature. Anyone knows if JQuery filer allows personalized fi-* variables or there another method to put the link.
Thanks

how to load form based on other form data using PHP and AJAX

I'm kinda new with php and ajax, so I need a little bit of help here. I'll explain my concept a little bit, please give me feedback is it possible or not.
this is a little bit of my code for the main page :
<ul class="treeview-menu">
<li id = 'menu1'>
<a>
<i class="fa fa-angle-double-right"></i>
Menu1
</a>
</li>
</ul>
<div id="content_info" style="display:none;"></div>
<div id="content_data" style="display:none;"></div>
<div id="content_input" style="display:none;"></div>
I have two other page, lets called it form_view.php and form_input.php. the form_view.php is used to show data from the database, and the form_input is used to input new data and edit old data. I'm planning to use AJAX for loading the form_view and form_input on the main page.
First, when I choose Menu1, it will show the content_data div and hide the other two div. Then, it will load form_view.php inside the content_data div. I'm using tables for viewing the data and there's an edit button for each row. When I click the button, the form will be submitted to form_input, and the form_input will show the data that's been chosen.
Is it possible to make form_input show the data that's been chosen and load it in the content_input div? When this is happens, content_data and content_info will be hidden, and content_input will be shown. Is it possible to not refresh the main page while doing so?
And if it's all possible, can you show me some example for the code?
I appreciate any feedback. Thanks.
Encode the data in the url request for form_view.php
$( "#content_data" ).load( "ajax/form_view.php?"+parameters );
Make sure to url encode your parameters. The later retrieve the data from $_GET in your PHP.

Passing Javascript To a Redirected Web page

The code I want to run upon triggeting the redirect, is to go to another web page (or local html file, either is possible in this situation), however pass some javascript to run on that page, as that page works off embeding content in Iframes. This needs to be done to allow me to specify the content in the iframe upon redirect.
To put it simpler. How can I make it so when you go to website.com/about/, it redirects to website.com/ with the content for /about/ loaded in an iframe?
<head>
<title> CodeBundle </title>
<script>
function home() {document.getElementById("loadedpage").src="home.html";}
function about() {document.getElementById("loadedpage").src="about.html";}
function reviews() {document.getElementById("loadedpage").src="reviews.html";}
function tutorials() {document.getElementById("loadedpage").src="tutorials.html";}
function blog() {document.getElementById("loadedpage").src="blog.html";}
</script>
</head>
<body>
<header>
<br><hr><font size=27><a onClick="home();">Code Bundle</a></font><br><hr>
<div ALIGN=RIGHT>
<font size=6> | <a onClick="about();">About</a> | <a onClick="reviews();">Reviews</a> | <a onClick="tutorials();">Tutorials</a> | <a onClick="blog();">Blog<a> |</font> <hr>
</div>
<iframe id="loadedpage" src=home.html width=100% height=100% frameborder=0>Iframe Failed to Load</iframe>
</header>
</body>
</body>
this is my index.html for website.com/
I want to write a page so that when you go to website.com/about/ it redirects to website.com/ running the javascript function about(), so as to display the about page.
You will have to either pass some data using a query parameter or a fragment identifier.
See:
http://en.wikipedia.org/wiki/Query_string
http://en.wikipedia.org/wiki/Fragment_identifier
In either case you will have something present in the url and it will look like:
http://www.example.com/?page=about
or:
http://www.example.com/#about
or - this would be best:
http://www.example.com/#!/about
because it could let you make the website crawlable. See:
Making AJAX Applications Crawlable
Now after reading your comment to the answer by theredled that you "add new content regularly and loading that in embeded iframes is quicker than writing new html every time" I have to ask this: aren't you using a templating system in your website?
Keep in mind that making AJAX-loaded content and using fragment identifiers to display the right content is not done because the page creation is easier (it isn't) but because the user experience is faster and more responsive. See for example the website for the SoundJS library:
http://www.createjs.com/#!/SoundJS
When you click the link to PreloadJS at the top you go to:
http://www.createjs.com/#!/PreloadJS
The content is reloaded, the address bar changes, but the page is actually not reloaded. (You can see that it is properly crawlable because it shows in the results if you google for ReloadJS.)
Pass content by a user session ?
However, it's a quite dirty case, maybe you already know that :)

Categories

Resources