I have image links of a website's images stored in my DB but when I show them on my asp page using repeater or data list which im building, it shows some where pics and somewhere just boxes and no
image, can anyone help me?
here is my datalist code to show products but some images are being shown and some are like broken icons and empty box having no image, and i have image links of a website which i am displaying in
data list and i have checked all links as well on web they work perfectly fine but don't show anything in my data list web form,is this a styling issue or binding?
code of Data list is given below
<div style=" border:inset; margin-left:100px; display:inline-block;">
<asp:DataList ID="DataList1" runat="server" RepeatColumns="5" RepeatDirection="Horizontal">
<ItemTemplate>
<div class="span4" style="display:inline-block; border-top:1px; background-color:none;width:190px; height:440px; border:solid; border-width:1px; border-spacing:2px 4px; border-bottom:inset; border-top-width:1px;" runat="server"><br />
<div class="products" style="height:430px; width:189x; border:inset;border-style:none;border-spacing:2px 4px;">
<asp:Image ID="ImgId" runat="server" style=" height:160px; width:160px;" ImageUrl='<%#(DataBinder.Eval(Container.DataItem,"ImageLink")) %>' /> <br />
<h3 class="title" style="font-family:Pristina;font-size:medium;height:30px; margin-bottom:-15px;"> <b><%# Eval("Name") %></b><br /><br /><br /></h3>
<br />
<p class="price" style="font-family:Pristina;font-size:medium; height:30px;padding-top:40px; "><b>Price</b> <%# Eval("Price") %> <br /><br /><br /><br /><br /></p><br />
<br />
<b style="margin-bottom:-20px">www.shophive.com</b>
</div>
</div>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" VerticalAlign="Top"/>
</asp:DataList>
</div>
Related
I am trying to figure out how to enable users to translate the returned content of one field, such as a textarea.
I do not propose to use api's that would translate the whole of the site on click, but just one field or division.
To do that, I have stumbled upon a free widget from gTranslate that could do the job nicely. However, I cannot get it to work for my intended 'just one field' purpose.
I have tried to wrap this widget in an iframe, but still no joy [with my limited php knowledge.]
For this scenario, you can assume that I have a simple crud application that has the usual view/edit/delete routines on the index page. The table has just a few columns in it such as first_name, last_name and so on and a column called comment, which is the text area that I wish to translate. For this, you may assume any text field such as a blog, description, etc.
When View pressed, I fire up 'detail_view.php' which just presents the first name and the comment fields of that record. It is on this page that I wish to have the comment field to get translated. So to this end I thought I would use an iframe. The source of the iframe is a secondary page called 'details_translate_include.php.' It is in this page that I have placed the widget so that the user could select the language by pressing the relevant icon given from that widget.
But It does not work. The data does not get populated and the widget is outside of the iframe.
So, can I ask for your help please?
NB.: This approach may not be the ideal solution to get this going. So, if you are aware of an alternative solution I would be more than happy to listen to.
A. In my 'detail_view.php' I have:
<!-- /.row -->
<div class="col-lg-12">
<div class="col-lg-6">
<form role="form" method="post" action="index.php">
<div class="form-group">
<label>First name:</label>
<input class="form-control" placeholder="First Name" name="firstname" value="<?php echo $xx; ?>">
</div>
<div class="form-group">
<label>Comment:</label>
<textarea class="form-control" rows="3" name="comment"><?php echo $yy; ?></textarea>
</div>
<div class="">
<label>Comment: [repeated here to get the translation working]</label>
<iframe src="details_translate_include.php" width='790' height='250' frameborder='0' scrolling='no' marginheight='0' marginwidth='0'class="bordered-box"></iframe>
</div>
<button type="submit" class="btn btn-default">Return to main menu</button>
</form>
B. In my 'details_translate_include.php' I have:
<?php
include('connection.php');
?>
<?php
if( isset( $_GET['recID'] )){
$yy=$_GET['comment'];
echo $yy;
}
?>
<div>
<textarea name="comment"><?php echo $yy; ?></textarea>
</div>
The output looks like this:
output error image
However, I would like to get the data returned and the widget to be inside of that division.
C. the content of the translate widget [which is freeware] is given below:
<!-- GTranslate: https://gtranslate.io/ -->
<img src="//gtranslate.net/flags/blank.png" height="16" width="16" alt="English" /><img src="//gtranslate.net/flags/blank.png" height="16" width="16" alt="French" /><img src="//gtranslate.net/flags/blank.png" height="16" width="16" alt="German" /><img src="//gtranslate.net/flags/blank.png" height="16" width="16" alt="Italian" /><img src="//gtranslate.net/flags/blank.png" height="16" width="16" alt="Persian" /><img src="//gtranslate.net/flags/blank.png" height="16" width="16" alt="Portuguese" /><img src="//gtranslate.net/flags/blank.png" height="16" width="16" alt="Russian" /><img src="//gtranslate.net/flags/blank.png" height="16" width="16" alt="Spanish" /><img src="//gtranslate.net/flags/blank.png" height="16" width="16" alt="Welsh" />
<style type="text/css">
<!--
a.gflag {vertical-align:middle;font-size:16px;padding:1px 0;background-repeat:no-repeat;background-image:url(//gtranslate.net/flags/16.png);}
a.gflag img {border:0;}
a.gflag:hover {background-image:url(//gtranslate.net/flags/16a.png);}
#goog-gt-tt {display:none !important;}
.goog-te-banner-frame {display:none !important;}
.goog-te-menu-value:hover {text-decoration:none !important;}
body {top:0 !important;}
#google_translate_element2 {display:none!important;}
-->
</style>
<br /><select onchange="doGTranslate(this);"><option value="">Select Language</option><option value="en|ar">Arabic</option><option value="en|eu">Basque</option><option value="en|ca">Catalan</option><option value="en|zh-CN">Chinese (Simplified)</option><option value="en|zh-TW">Chinese (Traditional)</option><option value="en|da">Danish</option><option value="en|nl">Dutch</option><option value="en|en">English</option><option value="en|fi">Finnish</option><option value="en|fr">French</option><option value="en|de">German</option><option value="en|el">Greek</option><option value="en|hi">Hindi</option><option value="en|it">Italian</option><option value="en|no">Norwegian</option><option value="en|fa">Persian</option><option value="en|pl">Polish</option><option value="en|pt">Portuguese</option><option value="en|ru">Russian</option><option value="en|es">Spanish</option><option value="en|sv">Swedish</option><option value="en|tr">Turkish</option><option value="en|cy">Welsh</option></select><div id="google_translate_element2"></div>
<script type="text/javascript">
function googleTranslateElementInit2() {new google.translate.TranslateElement({pageLanguage: 'en',autoDisplay: false}, 'google_translate_element2');}
</script><script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit2"></script>
<script type="text/javascript">
/* <![CDATA[ */
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('6 7(a,b){n{4(2.9){3 c=2.9("o");c.p(b,f,f);a.q(c)}g{3 c=2.r();a.s(\'t\'+b,c)}}u(e){}}6 h(a){4(a.8)a=a.8;4(a==\'\')v;3 b=a.w(\'|\')[1];3 c;3 d=2.x(\'y\');z(3 i=0;i<d.5;i++)4(d[i].A==\'B-C-D\')c=d[i];4(2.j(\'k\')==E||2.j(\'k\').l.5==0||c.5==0||c.l.5==0){F(6(){h(a)},G)}g{c.8=b;7(c,\'m\');7(c,\'m\')}}',43,43,'||document|var|if|length|function|GTranslateFireEvent|value|createEvent||||||true|else|doGTranslate||getElementById|google_translate_element2|innerHTML|change|try|HTMLEvents|initEvent|dispatchEvent|createEventObject|fireEvent|on|catch|return|split|getElementsByTagName|select|for|className|goog|te|combo|null|setTimeout|500'.split('|'),0,{}))
/* ]]> */
</script>
I found some other questions about this argument but I can't get anything to work.
I have a repeater with datasource, this is my repeater code:
<div class="container dafareoggi" id="divDaFareOggi">
<div runat="server" id="divSegnaposto"></div>
<asp:Repeater runat="server" ID="rptDaFareOggi" DataSourceID="SqlAttivitaDaFareOggi">
<ItemTemplate>
<div id="<%# Eval("id") %>">
<div class="div-titolo" title="<%# Eval("Titolo") %>"><%# Eval("Titolo") %></div>
<div class="div-testo" title="<%# Eval("Note") %>"><%# Eval("Note") %></div>
<div>
<table style="width: 100%;margin-top:0.5em;padding-right:0.2em;">
<tr>
<td style="width: 50%; text-align: left;">
<asp:ImageButton runat="server" ImageUrl="~/images/gabri.png" Width="2.3em" Height="2.3em" ToolTip='<%#Eval("tecnico")%>' Enabled="false" Visible='<%# IIf(Eval("idutente") = 8, True, False) %>'/>
<asp:ImageButton runat="server" ImageUrl="~/images/giuse.png" Width="2.3em" Height="2.3em" ToolTip='<%#Eval("tecnico")%>' Enabled="false" Visible='<%# IIf(Eval("idutente") = 2, True, False) %>'/>
<asp:ImageButton runat="server" ImageUrl="~/images/robi.png" Width="2.3em" Height="2.3em" ToolTip='<%#Eval("tecnico")%>' Enabled="false" Visible='<%# IIf(Eval("idutente") = 5, True, False) %>'/>
</td>
<td style="width: 50%; text-align: right; ">
<asp:LinkButton CommandName="delAttivita" CommandArgument='<%#Eval("ID")%>' runat="server" ID="lnkDelAtt" CausesValidation="False" OnClientClick="return confirm('Sei sicuro di voler eliminare questa attivita?');"><i class="fa fa-trash fa-lg" title="Elimina attività "></i></asp:LinkButton>
<asp:LinkButton CommandName="editAttivita" CommandArgument='<%#Eval("ID")%>' runat="server" ID="lnkEditAtt"><i class="fa fa-pencil-square fa-lg" title="Modifica attività "></i></asp:LinkButton>
</td>
</tr>
</table>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
In the repeater there is a place card div with id divSegnaposto (2nd row) and then a bunch of div may be loaded accordingly to data read from the db.
What I want is that when there are no data to load, so divSegnaposto is the only item, to show it and, vice versa, when there are 1 ore more other divs, to hide it.
I figure that I should count the number of items inside the repeater or rows inside datasouce (I'm using EF), so I tried different approach in repeater_databound_event, but for example repeater.items.count is always 0.
How can I achieve the goal?
I ended up using a linq query that gets the same as the sqldatasource at itembound event and then I check if it's empty or not and show\hide the placecard accordingly. I don't like it too much because makes me mad: I already have all the information I need inside the repeater or the sql data source, so I guess I thought there was an easier, less code-consuming way to do it. But all the answers I found are more complicated than just re-do the query in code behind...
Here is my HTML Code that i am using
<div u="slides">
<div>
<asp:SqlDataSource ID="1" runat="server" ConnectionString="<%$ ConnectionStrings:constr %>" SelectCommand="SELECT Image FROM Gallery"></asp:SqlDataSource>
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="1">
<ItemTemplate>
<img u="image" src="<%# "image.ashx?Id="+ Eval("Id") %>" />
</ItemTemplate>
</asp:Repeater>
</div>
The Generic Handler .ashx for the image is THIS
My Issue is that on the Slide, only the last image uploaded come out.
For example, if i uploaded 5 images, only the fifth last uploaded image come up on the slider and it remains static.
I have tested the same generic Handler. it works normal for another slider.
am i missing something.
P.S - the Jssor scripts and css are all in their default values.
nothing was edited.
You placed all images in a single slide.
Please create slide for every image as below.
<div u="slides">
<asp:SqlDataSource ID="1" runat="server" ConnectionString="<%$ ConnectionStrings:constr %>" SelectCommand="SELECT Image FROM Gallery"></asp:SqlDataSource>
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="1">
<ItemTemplate>
<div>
<img u="image" src="<%# "image.ashx?Id="+ Eval("Id") %>" />
</div>
</ItemTemplate>
</asp:Repeater>
</asp:SqlDataSource>
</div>
I have a few lines of code in which no server connection and databse fetching included. Problem is picture is not being displayed when I want to show that in datalist.
<asp:DataList ID="dlpic" runat="server" RepeatDirection="Horizontal" RepeatColumns = "4">
<ItemTemplate>
<div class="item" id="construction">
<div class="border">
<a id="imageLink" href="~/images/Gallery/Gallery_Halmar001.jpg" class="zoom prettyPhoto" runat="server" >
<img src="images/Gallery/Gallery_Halmar001.jpg" class="scale-with-grid" />
</a>
</div>
<h5></h5>
<p></p>
<div class="shadow"></div>
</div>
</ItemTemplate>
</asp:DataList>
Do I still need to bind datalist?
Yes you need to bind it. A datalist will not render any items if it is unbound or bound to a List with 0 items. But if you're not binding to anything, why use the datalist at all? Just display the markup directly.
I am using the ModalPopupExtender control to display a modal popup dialog when a button is click. The problem is that dragging the dialog results in an 'scrollleft is null or not an object' error.
Here's a video demo
..and here is ALL the code:
If possible, I'd like to resolve this problem w/o resorting to modifying the AjaxToolkit scripts themselves.
<%# Page Language="VB" AutoEventWireup="false" CodeFile="MyModalSimple.aspx.vb" Inherits="MyModalSimple" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.modalBackground
{
background-color: Gray;
filter: alpha(opacity=70);
opacity: 0.7;
}
</style>
<link href="Default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function onOk() {
//form1.submit();
}
</script>
<script type="text/javascript">
var clientid;
function fnSetFocus(txtClientId) {
clientid = txtClientId;
setTimeout("fnFocus()", 1000);
}
function fnFocus() {
//debugger;
if (document.getElementById("pnlModal").style.display != "none")
eval("document.getElementById('" + clientid + "').focus()");
}
function fnClickOK(sender, e) {
__doPostBack(sender, e);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<br />
Clicking the button will bring up the modal dialog<br />
<br />
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<br />
<asp:Button ID="Button1" runat="server" Text="Button" />
<cc1:ModalPopupExtender ID="Button1_ModalPopupExtender" runat="server" TargetControlID="Button1"
PopupDragHandleControlID="programmaticPopupDragHandle" PopupControlID="pnlModal"
OkControlID="btnOK" CancelControlID="btnCancel" DropShadow="true" OnOkScript="onOk();"
BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>
<br />
<asp:Panel ID="pnlModal" runat="server" Style="display: None" BackColor="#CCCCCC">
<asp:Panel runat="Server" ID="programmaticPopupDragHandle" Style="cursor: move; background-color: #DDDDDD;
border: solid 1px Gray; color: Black; text-align: center;">
Caption
</asp:Panel>
<br />
<table>
<tr>
<td>
<asp:Label ID="lblFirst" runat="server" Text="First"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtFirst" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblLast" runat="server" Text="Last"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtLast" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
</td>
<td align="right">
<asp:Button ID="btnOK" runat="server" Text="OK" />
<asp:Button ID="btnCancel" runat="server" Text="Cancel" />
</td>
</tr>
</table>
</asp:Panel>
<asp:Label ID="lblMessage" runat="server"></asp:Label>
<br />
<br />
</div>
</form>
</body>
</html>
Partial Class MyModalSimple
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not Page.IsPostBack Then
Button1.Attributes.Add("onclick", "fnSetFocus('" + txtFirst.ClientID + "');")
btnOK.OnClientClick = String.Format("fnClickOK('{0}','{1}')", btnOK.UniqueID, "")
End If
End Sub
Protected Sub btnOK_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnOK.Click
lblMessage.Text = "Hi, " & txtFirst.Text & " " & txtLast.Text
End Sub
End Class
Unfortunately this is a known bug in the DragPanelExtender. I would recommend dropping the modal extender all together if it's an option and you're comfortable with javascript.
With jQuery/jQuery UI for example, your page would look like:
<form id="form1" runat="server">
<br />
Clicking the button will bring up the modal dialog<br />
<br />
<div>
<br />
<asp:Button ID="Button1" runat="server" Text="Button" />
<br />
<div id="myModal" Style="display: None" background="#CCCCCC" title="Caption/Dialog Title">
<table>
<tr>
<td>
<asp:Label ID="lblFirst" runat="server" Text="First" />
</td>
<td>
<asp:TextBox ID="txtFirst" runat="server" />
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblLast" runat="server" Text="Last" />
</td>
<td>
<asp:TextBox ID="txtLast" runat="server" />
</td>
</tr>
</table>
</div>
<asp:Label ID="lblMessage" runat="server"></asp:Label>
<br />
<br />
</div>
</form>
<script type="text/javascript">
$(function() {
$("#<%= Button1.ClientID %>").click() {
$("#myModal").dialog({ buttons: { "Ok": function() { $(this).dialog("close"); } } });
}
});
</script>
This is a whole different way of programming, but results in a much richer UI experience for the user. If you're willing to learn jQuery and how it hooks up, it's a really natural/fluid syntax that can add a great deal of power/flexibility to your web pages. Now keep in mind that I prefer jQuery but that there are many other javascript libraries available. You should at least browse around and see what looks the most comfortable if you're just getting started...it's possible since you're from a VB background (I'm from C#) that another libraries coding style/syntax is much more appealing.
Now if you're unwilling to go down that road and it's too unfamiliar, your only alternative as far as I can see is to do what you don't want to...compile the AJAX Control Toolkit yourself. If you want to go this route, grab the latest source from codeplex and modify the below section of Release\AjaxControlToolkit\Compat\DragDrop\DragDropScripts.js:
_drag: function(isInitialDrag) {
var ev = window._event;
var mousePosition = { x: ev.clientX, y: ev.clientY };
To this:
_drag: function(isInitialDrag) {
if (!this._activeDragVisual) return;
var ev = window._event;
var mousePosition = { x: ev.clientX, y: ev.clientY };
The _onScrollerTick operation in certain browsers bombs out and nulls the dragVisual function. Credit is due here: A post on the ASP.Net forums by freakyer led me down this debug path to figure out where it's breaking...but I see no other solution as there is an actual bug in certain browsers not-fixable without a script change and recompile.
I urge you to consider the jQuery/other framework path, there's a ton of community support and examples out there to help get you started. This question from a while back is worth a read if the framework options interest you at all.