I am calling betterdoctor api and im getting back data and i am trying to display a image from the json data. But all im getting back is the src of the image.How do i display the image? instead of just the src of image.
for(i=0;i<data.data.length;i++){
list = list +
'<div class="user">' +
'<p>' +data.data[i]['profile']['first_name']+ " " +data.data[i]
['profile']['last_name']+'</p>' +
'<p>' + 'latitude is ' + data.data[i]['practices'][0]['lat']+ '</p>'
+
'<p>' + 'longtitude is ' + data.data[i]['practices'][0]['lon']+
'</p>' +
<img src= data.data[i]['profile']['image_url'] alt="Mountain View">
+
'</div>'
}
As per Robby Cornelissen comment, you probably want to put the URL inside a img tag.
for(i=0;i<data.data.length;i++){
list = list +
'<div class="user">' +
'<p>' +data.data[i]['profile']['first_name']+ " " +data.data[i]
['profile']['last_name']+'</p>' +
'<p>' + 'latitude is ' + data.data[i]['practices'][0]['lat']+ '</p>'
+
'<p>' + 'longtitude is ' + data.data[i]['practices'][0]['lon']+
'</p>' +
'<p><img src="' + data.data[i]['profile']['image_url'] + '"/></p>' +
'</div>'
}
Related
I'm working on an online website for contact management and I need to display my contacts from an xml file in html divs. How can I do this using an AJAX CALL, exclusively? My xml looks like this and I want to put this tags in some divs, one div for each contact.
<?xml version="1.0" encoding="UTF-8"?>
<contacts>
<contact id_contact="1">
<firstName>Lara</firstName>
<lastName>Adey</lastName>
<photo>lara.png</photo>
<email>lara.adey#gmail.com</email>
<birthday>1999-03-12</birthday>
<adress>Brooklyn 99</adress>
<description>Nice girl</description>
<phone>520-447-9821</phone>
<interests>Coding</interests>
<idUser>2</idUser>
</contact>
</contacts>
Try this in your javascript using JQuery $.ajax
Documentation : http://api.jquery.com/jquery.ajax/
$(document).ready(function () {
$.ajax({
type: "GET",
url: "contacts.xml",
dataType: "xml",
success: xmlParse
});
});
function xmlParse(xml) {
$(xml).find("contact").each(function () {
$(".main").append('<div class="contact"><div class="firstname">' + $(this).find("firstName").text() + '</div><div class="lastName">' + $(this).find("lastName").text() + '</div><div class="photo">Photo ' +
$(this).find("photo").text() + '</div><div class="email">Email ' + $(this).find("email").text() +'</div><div class="birthday">Birthday ' + $(this).find("birthday").text() + '</div><div class="address">Address ' + $(this).find("address").text() + '</div><div class="description">Description ' + $(this).find("description").text() + '</div><div class="phone">Phone ' + $(this).find("phone").text() + '</div><div class="interests">Interests ' +
$(this).find("interests").text() + '</div><div class="idUser">User ID ' +
$(this).find("idUser").text() + '</div></div>');
$(".contact").fadeIn(1000);
});
}
In your HTML :
<div class="main"></div>
I have an outlook add-in that should insert HTML into an appointment. This can be done by calling:
item.body.setSelectedDataAsync
My problem is that I'm trying to insert HTML with a background image. This works fine when using Outlook in the browser, but the Outlook client requires workarounds using VML as described here:
https://www.emailonacid.com/blog/article/email-development/emailology_vector_markup_language_and_backgrounds
I guess item.body.setSelectedDataAsync strips the comments needed for VML (like <!--[if gte mso 9]> ) from the HTML passed to insert?
How can I accomplish adding HTML with background image from my add-in that works across different Outlook versions (browser and client)?
Below is example of javascript code used to insert HTML:
let htmlToInsert = '<table cellpadding="0" cellspacing="0" border="0" width="' + imageWidth + '" >';
htmlToInsert += '<tr><td style="text-align: center; font-size: x-large">' + this.props.roomMap.mapTitle + '</td></tr>';
htmlToInsert += '<tr><td valign="top" style="min-height:' + imageHeight + 'px;height:' + imageHeight + 'px; background-repeat: no-repeat; background-position: center bottom; width:' + imageWidth +';min-height:' + imageHeight + 'px;height:' + imageHeight + 'px;" background="' + this.props.roomMap.thumbnailUrl + '">';
htmlToInsert += '<!--[if gte mso 9]>';
htmlToInsert += '<v:rect style="width:' + imageWidth + 'px;height:' + imageHeight + 'px;" strokecolor="none">';
htmlToInsert += '<v:fill type="tile" src="'+ this.props.roomMap.thumbnailUrl +'" /></v:fill>';
htmlToInsert += '</v:rect>';
htmlToInsert += '<v:shape id="NameHere" style="position:absolute;width:' + imageWidth + 'px;height:' + imageHeight + 'px;">';
htmlToInsert += '<![endif]-->';
htmlToInsert += '<img src="https://www.meetingroommap.net/images/marker.png"/ style="margin-left:' + markerX + 'px; margin-top:' + markerY + 'px">';
htmlToInsert += '<!--[if gte mso 9]>';
htmlToInsert += '</v:shape>';
htmlToInsert += '<![endif]-->';
htmlToInsert += '</td></tr>';
htmlToInsert += '<tr><td style="text-align: center; font-size: xx-small">Powered by <a target="_blank" href="https://www.meetingroommap.net" >www.MeetingRoomMap.net</a></td></tr>';
htmlToInsert += '</table>';
console.log(htmlToInsert);
item.body.setSelectedDataAsync(
htmlToInsert,
{ coercionType: Office.CoercionType.Html,
asyncContext: { } },
function (asyncResult) {
if (asyncResult.status === Office.AsyncResultStatus.Failed){
console.log("Error calling item.body.setSelectedDataAsync: " + asyncResult.error.message);
}
else {
// Successfully set data in item body.
}
});
Thank you for your feedback. After further investigation, it appears there's no great workaround to achieve your scenario. We continue to learn about the new requirements add-in developers have, which helps us enable great scenarios on our platform. We track Outlook add-in feature requests on our user-voice page. Please add your request there. Features on user-voice are also considered when we go through our planning process.
Link to user voice: https://officespdev.uservoice.com/forums/224641-general/category/131778-outlook-add-ins.
Thanks again for your feedback,
Outlook Add-ins Engineering Team
Complete Polyer noob here trying to write a simple little Polymer app.
What I'm trying to do is drive navigation of my iron-pages from a custom element (client-table) but can not figure out how to do this.
I've tried various permutations of using attr-for-selected and selected attributes within the table, but that doesn't seem to work. I've also tried setting up an anchor tag around the paper-button, and almost got that working, but it would trigger a full page refresh and not display my #clientInfo section when the page loaded.
Any suggestions on how to accomplish this, links to documentation that better explain routing/navigation in Polymer (esp. in cases of using custom elements), any default Polymer elements I should inspect the source of, etc?
<!-- snippet from index.html -->
<iron-pages attr-for-selected="data-route" selected="{{route}}">
<section data-route="home">
<paper-material elevation="1">
<h2>Clients</h2>
<client-table></client-table>
<a data-route="clientInfo" href="/">test</a>
</paper-material>
</section>
<section data-route="clientInfo">
<paper-material elevation="1">
<h2></h2>
<p>This is the users section</p>
Rob
</paper-material>
</section>
</iron-pages>
<!-- snipped from client-table.html -->
buildTable: function() {
var domTable = this.$.table;
var tableData = this.parseTableJson(this.buildTableJson());
var tableMarkup = this.buildTable_initTable() + "<tbody>";
for (var index in tableData) {
row = tableData[index];
var rowMarkup = "<tr>";
rowMarkup += "<td>" + row.clientFirstName + "</td>";
rowMarkup += "<td>" + row.clientLastName + "</td>";
rowMarkup += "<td>" + row.clientEmail + "</td>";
rowMarkup += "<td>" + row.clientPhone + "</td>";
rowMarkup += "<td>" + row.clientZipCode + "</td>";
rowMarkup += "<td><paper-button><iron-icon icon='card-membership'></iron-icon></paper-button></td>";
rowMarkup += "</tr>";
tableMarkup += rowMarkup;
}
tableMarkup += "</tbody>";
$(domTable).append(tableMarkup);
}
And then I found routing.html.
I am using the onload method in the form like below in one of my servlet:
out.write("<!DOCTYPE html PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\"> \n");
out.write("<html><body onload=\"document.forms[0].submit()\">\n");
out.write("<form method=\"POST\" action=\"http://ipaddress:8085/internal/Logout\">\n");
out.write("<input type=\"hidden\" name=\"groupId\" value=\"" + groupId
+ "\"/>\n");
out.write("<input type=\"hidden\" name=\"userName\" value=\""
+ userName + "\"/>\n");
out.write("<input type=\"hidden\" name=\"idpServer\" value=\""
+ idpServer + "\"/>\n");
out.write("<input type=\"hidden\" name=\"sessionId\" value=\""
+ sessionId + "\"/>\n");
out.write("<input type=\"hidden\" name=\"targetPage\" value=\""
+ targetPageURL + "\"/>\n");
out.write("<input type=\"hidden\" name=\"locale\" value=\""
+ locale + "\"/>\n");
out.write("<input type=\"hidden\" name=\"logoutPage\" value=\""
+ logoutPage + "\"/>\n");
out.write("</form>\n</body>\n</html>\n");
After the above code i have one more line which is like
deleteExpiredSession(sessionId);
In the first code block we have 'onload' method which will automatically submits the form to action url but in my case it is not happening
the control is going to some other servlet.
In debug mode the code executing along with the second part of code(deleteExpiredSession(sessionId);), I think the second part should
not be executed because the above code is having onload.
Earlier it was working fine but suddenly it is stopped working. I think recently we migrated to tomcat6 - tomcat7. Is this the reason?
Any suggestions would be great.
I tested your application and I found out the problem is about your action address and id is not valid. You doesn't put port word after : in your URL. Change it to following code and it will work:
<form method="get" action="http://ipaddress:8080/internal/Logout" >
...
I replaced 8080 with port.
I am trying to create a list of actors in a film with a small profile image to the left of the actor's name and their accompanying character, however my images are strangely stacking on top of one another, and I'm not sure why. The cast names, their character and the image are all being pulled in dynamically from an external API.
Below is an image of the current layout:
The accompanying HTML and CSS is below:
HTML
<?php
foreach($tmdb_cast['cast'] as $castMember){
if ($tmp++ < 10)
echo '<img src="http://cf2.imgobject.com/t/p/w45' . $castMember['profile_path'] . '" class="actor_image" alt="' . $castMember['name'] . '" title="' . $castMember['name'] . '" />';
echo '<p>' . $castMember['character'] . ' - ' . $castMember['name'] . '</p>';
}
echo '<p id="morecast">[...view all cast]</p>'
?>
CSS
#cast {
margin-left: 50%;
border: solid 1px red;
}
.actor_image {
float: left;
}
#morecast {
text-align: right;
}
The layout I'm trying to achieve is something similar to the one on display at IMDb, with the actor's name and character vertically aligned with the image:
It looks like you're floating your images, but not applying a "clear" between your image+text units. Try applying a "clear: both;" between each actor instance?
Wrap the image and p elements in a div and have clear:both on the div. Set the inline style to a class. I did it inline as a quick-and-dirty example.
foreach($tmdb_cast['cast'] as $castMember){
if ($tmp++ < 10)
echo '<div style="clear: both;">'
echo '<img src="http://cf2.imgobject.com/t/p/w45' . $castMember['profile_path'] . '" class="actor_image" alt="' . $castMember['name'] . '" title="' . $castMember['name'] . '" />';
echo '<p>' . $castMember['character'] . ' - ' . $castMember['name'] . '</p>';
echo '</div>'
}
I'ts convenient to create a css class that wraps every image and text group:
echo '<div class="actor">
<img src="http://cf2.imgobject.com/t/p/w45' . $castMember['profile_path'] . '" class="actor_image" alt="' . $castMember['name'] . '" title="' . $castMember['name'] . '" />';
echo '<p>' . $castMember['character'] . ' - ' . $castMember['name'] . '</p>
</div>';
And float each container
.actor{
float:left;
clear: left;
}
Now you have a box arround the image+text group that you can float. If this doesn't fix the problem, next step is define the .actor "width" property