0

I have the below img tag :

<img alt="no pic to display"  class="profile__image" id ="popupPic" />

I am trying to display a photo retrieved from ajax call :

photo looks like this in browser console : coded pic

this is my jquery that I have tried to use here :

var pic=(data.split("photo:")[1]).split("manager:")[0];
document.getElementById("popupPic").src ='data:image/png;base64, + pic';

the php file used to make the ajax call to active directory :http://pastebin.com/tSRxwQL8

I am able to display other attributes from the console such as title ,mail ,department etc by calling the jQuery as follows :

 $('.leaderboard li').on('click', function () {
 $.ajax({
 url: "../popupData/activedirectory.php", 
 type: "POST",
 data: {id:$(this).find('.parent-div').data('id')},
 success: function(data){
 console.info(data);
 $('#popup').fadeIn();
 var email=(data.split("mail:")[1]).split("title:")[0];
 $('#emailOfUser').html('Email:'+ email); 
 var dept=(data.split("department:")[1]).split("manager:")[0];
 $('#departmentOfUser').html('Department:'+ dept);
 var pic=(data.split("photo:")[1]).split("manager:")[0];
 $('#popupPic').append(pic);
 },
 error: function(){
 alert('failed, possible script does not exist');
 }
 });
 });

The browser console shows that an ajax call returns this : 

   <p> sn: xxxxxx<br/>givenname: xxxxx<br/>
   employeeID: 0050<br/
   >distinguishedName: CN=xxxx     xxxxx,OU=Employees,OU=Accounts,OU=India,DC=asia,DC=xxxxxxx,DC=com<br/>
   displayName: Mark Hewettk<br/>sAMAccountName: xxxxxxx<br/>
   department: xxxxx<br/>manager: CN=xxxxxx xxxxxxx,OU=Employees,OU=Accounts,OU=India,DC=asia,DC=xxxx,DC=com
   <br/>
   mail: mhewettk@abc.com<br/>
   title: xyz<br/>
   photo :����%&'()*456789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz���������������������������������������������������������������������������

the problem is that I am unable to display the thumbnail photo i.e the photo tag above.

kindly help me on how to fetch the photo from the ajax data.

JAne
  • 97
  • 1
  • 10
  • What is the result, as seen by the JS, of the AJAX call? (Rather than trying to work this out from reading the PHP.) – Richard Jan 31 '17 at 16:00
  • `document.getElementById…` is much easier with jQuery: `$('#popupPic').attr('src', imageUrl)` – Richard Jan 31 '17 at 16:01
  • it doesnot show anything in the UI, so I believe it is not able to read anything.If look at the php file,which I have used to make the ajax call ,I am simply displaying the data in the console and has tried to pull the image.I will update the above code with the complete JS and compete console data. @Richard – JAne Jan 31 '17 at 16:03
  • @Richard i have provided the entire info,whatever I could. – JAne Jan 31 '17 at 16:06
  • the line where photo is assigned in PHP is commented out. Hence the photo does not exist in the contents returned by PHP. PLUS... contents returned by PHP is html and you are trying to read it as JSON. – Nawed Khan Jan 31 '17 at 16:07
  • i tried using ur solution : $('#popupPic').attr('src', 'data:image/png;base64, pic') ...... no luck – JAne Jan 31 '17 at 16:09
  • Make a call to your PHP from browser's dev tools or tool like Fiddler2. Ensuring the server is sending the right content to the client is a basic debugging step. – Richard Jan 31 '17 at 16:09
  • @NawedKhan ohh sorry...it not commented out.I pasted it by mistake.if commented,I woulnot be able to show u the encode photo in the above pic and code.Sry .my bad. – JAne Jan 31 '17 at 16:10
  • Suggestion: return JSON from the PHP code: you won't need to write a (mini) parser in JS. Also, looking at the AJAX result: is the photo base64 encoded by the server because it should be (needed for data url of the form you are using). – Richard Jan 31 '17 at 16:11
  • Firstly , its pulled from the active directory so it is such. Secondly I tried to return json but no luck.I will share the code,just a sec – JAne Jan 31 '17 at 16:14
  • I eve tried to convert it to JSON following this.but no luck.http://stackoverflow.com/questions/8823925/how-to-return-an-array-from-an-ajax-call – JAne Jan 31 '17 at 16:16
  • http://pastebin.com/YyuUggn8 --- .php file – JAne Jan 31 '17 at 16:18
  • http://pastebin.com/JTHeAjsi j query @Richard – JAne Jan 31 '17 at 16:18
  • Don't use pastebin rather than a complete and minimal re-create in the question itself. Please see http://stackoverflow.com/help/mcve. – Richard Jan 31 '17 at 16:22
  • I tried my best to provide the info.Will take care from next time. – JAne Jan 31 '17 at 16:24
  • If I am not wrong you want to show the base 64 encoded image using ajax call ? – Mayank Pandeyz Feb 01 '17 at 07:40
  • @MayankPandeyz yeah exactly.But the issue here may be I am not getting JSON from the .php file i.e the ajax call.i tried doing,no luck yet. – JAne Feb 01 '17 at 09:37
  • OK Jane, you are getting this image base 64 encoded string from database or from any where else? – Mayank Pandeyz Feb 01 '17 at 09:39
  • I am pulling the image from active directory. @MayankPandeyz – JAne Feb 01 '17 at 09:45
  • You mean : activedirectory.php named file ? – Mayank Pandeyz Feb 01 '17 at 09:48
  • The .php file that you see here,I am using it to query the active directory and pull the info that you see in the above sctipt, such as givenname,thumbnail photo,sn,cn etc @MayankPandeyz – JAne Feb 01 '17 at 09:49
  • the file name is activdirectory.php and at the same time I am pulling the info also from active directory. – JAne Feb 01 '17 at 09:51
  • @MayankPandeyz https://msdn.microsoft.com/en-us/library/bb742424.aspx plz see this. – JAne Feb 01 '17 at 09:53
  • OK, let me try and will be back to you after some time. – Mayank Pandeyz Feb 01 '17 at 09:54
  • alright .plz see this too.I tried this also.http://stackoverflow.com/questions/16937863/display-thumbnailphoto-from-active-directory-in-php @MayankPandeyz – JAne Feb 01 '17 at 09:55
  • @JAne: check your email and reply me there what is the issue with this? – Mayank Pandeyz Feb 01 '17 at 10:15

0 Answers0