Develop Reference

Customizing popup window based on it's calling hyperlink Ids

I have a html code that describes about the community members like "K S Lenscapes" and "Venky P G" which onclick calls a modal popup #visit
<div class="portfolio-info">
<a href="#visit" id="ks" ><h3>K S Lenscapes</h3></a>
</div>
<div class="portfolio-info">
<h3>Venky P G</h3>
</div>
This is #visit code :
<div id="visit" class="modalDialog">
<div>
X<br><br>
<div class="text-center">
<p><a class="btn btn-primary btn-lg" href="#" id="ba">Book Appointment</a></p>
</div>
</div>
</div>
I need "Book Appointment" button of #visit to recognize from which anchor tag it is requested and send mail to corresponding portfolio taking its email from a file or databse.
I have no idea how to do this, Please help me out with this.

You can use data attribute for this
<div class="portfolio-info">
<h3>K S Lenscapes</h3>
</div>
<div class="portfolio-info">
<h3>Venky P G</h3>
</div>
and update the book appointment href URL when ever the dialog is opened.
in this case data variables can be called like $('selector').data('url')

HTML:
<h3>Bar</h3>
JavaScript:
function updatePopup(id) {
document.getElementById('ba').href = 'path/to/handler?id=' + id;
}
The updated HTML will pass the link ID to the function when clicked, and the JavaScript will update the popup window 'Book Appointment' button accordingly.
The ID is then passed in the query string of the URL of wherever you'd like to handle the email sending part. Retrieving the email from the database and sending an email to it is an entirely different and much broader question, of which I'm sure you will be able to find information on how to do this elsewhere on the site.

Ajax Live Search Questions

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

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.

Pull twitter profile picture without Auth / API with Javascript

Is there a way to pull someone's profile picture from Twitter and display it on my site without Auth or Twitter API?
I think it was possible with API v1.1 but support for that has been stopped.
Any suggestions or advice?

There's the easy way, or the hard way :-)
The easy way is to use a service like http://avatars.io/
Simply call http://avatars.io/twitter/edent to get my avatar.
The hard way?
You can scrape it directly off the Twitter site. It's not pretty - but it works.
If you look at the source for my Twitter page - https://twitter.com/edent - you will see this block of HTML.
<a href="/settings/profile"
class="account-summary account-summary-small"
data-nav="edit_profile">
<div class="content">
<div class="account-group js-mini-current-user" data-user-id="14054507" data-screen-name="edent">
<img class="avatar size32" src="https://pbs.twimg.com/profile_images/417381475101593601/UUi48hOg_normal.jpeg" alt="" data-user-id="14054507">
<b class="fullname">Terence Eden</b>
<span class="screen-name hidden" dir="ltr">#edent</span>
<small class="metadata">
Edit profile
</small>
</div>
</div>
</a>
You can look for the first instance of <img class="avatar size32" and grab the src from that.

Can I get some help decoding this bit of a Facebook page?

I'm trying to figure out just how a particular function works on a Facebook page, and being no friend of JS syntax, am having trouble. Here's the question mark bit:
<a href="#" clicktoshowdialog="my_dialog" onclick="
(new Image()).src = '/ajax/ct.php?app_id=4949752878&action_type=3&post_form_id=3b933f46f9c4c44981e51b90c754bfce&position=2&' + Math.random();
FBML.clickToShowDialog("app4949752878_my_dialog");
return false;">
<img src="linktopicture" title="Are your friends fans?" width="190" height="230" />
</a>
<div style="display:none">
<div id="app4949752878_my_dialog" fbcontext="aa3fcff8e653">
<div class="app_content_4949752878" style="padding:10px">
<div with hidden then exposed content...
The functionality of this is an image that, when clicked, pops out the previously hidden div. I know that the app###### is prepended to all JS used in Facebook to limit its scope. I'm confused by the anchor parameter of
clicktoshowdialog="mydialog"
What is that identifying, and how is it targeting the div that's exposed when the image is clicked? Thanks for any clarification, and let me know if I can post any more sample code.

According to the wiki it's just for opening the dialog (which is defined at the bottom). Facebook generates the JS to open the dialog. The attribute got post-processed and the JS code (that you see in the onclick= attribute) was generated on it's basis.