I have created a iframe to upload and display the images into the server without refreshing the page.Kindly help me with a solution to drag and drop the saved image from a iframe into a div.
The following code is used in the iframe(iframeImage.aspx) to display the images from the server:
<div>
<asp:DataList ID="dtlist" runat="server" RepeatColumns="4" CellPadding="5">
<ItemTemplate>
<div id="divImage" runat="server" onclick="Test()" class="draggable">
<asp:Image Width="100" ID="Image1" ImageUrl='<%# Bind("Name", "~/MyImages/{0}") %>' runat="server" />
</div>
<br />
<asp:HyperLink ID="HyperLink1" Text='<%# Bind("Name") %>' NavigateUrl='<%# Bind("Name", "~/MyImages/{0}") %>' runat="server"/>
</ItemTemplate>
<ItemStyle BorderColor="Brown" BorderStyle="dotted" BorderWidth="3px" HorizontalAlign="Center"
VerticalAlign="Bottom" />
</asp:DataList>
</div>
From code behind, I am binding the images into the datalist.
Currently, I need to drag and drop the image into a main div(reportHeader of CustomDesign.aspx).The below code is used to bind texts into the main div:
function CreateTextLineLabel(textAreaElt) {
var id = "Text1" + count.num++;
$('#reportHeader').append('<div id="' + id + '" class="draggable" ondblclick="showPopup(this)"><span>' + $(textAreaElt).val() + '</span></div> ');
$("#" + id).draggable({ revert: "invalid" });
$("#" + id).resizable();
$("#reportHeader").droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function(event, ui) {
$(this)
.addClass("ui-state-highlight")
.find("p")
.html("Dropped!");
}
});
$(textAreaElt).remove();
}
Im pretty sure you cant actually do this at all, images in your iframe are in a different document so no drag and drop framework (that I've ever heard of) will work spanning 2 documents.
It sounds to me like you are better off to implement an ajax upload control instead of having your upload code in an iframe. This will still avoid having a postback but also gets around dirty postbacks ect. If you have a google for ajax upload you will see plenty of different examples you can use depending on the kind of result and actual codebase you are using. If you arent using MVC a common one is in the Ajax Control Toolkit
The Following Example will help you to accomplish this with Javascript. Check it out, I have used it before and it works perfectly.
Goodl luck!
Related
On client side button click event, I want to get control id that are place in Item template of Grid View. I tried this code but it doesn't work. Thanks
function buttonClicked(sender, args) {
var gv = $find('<%= GridView1.ClientID %>');
var textbox = $GridView1.findControl(gv.get_element().parentNode, "Textbox");
}
Here is the Gridview
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1"runat="server">
</asp:ScriptManager>
<div>
<asp:UpdatePanel ID="upTest" runat="server">
<ContentTemplate>
<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False" DataSourceID="KurzDS" DataKeyNames="Id" OnRowCommand="GridView1_RowCommand">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:TextBox ID="Textbox" runat="server" Text="Textbox"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:TextBox ID="Textbox1" runat="server" Text="Textbox1"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:Button ID="btn" Text='btn' CommandArgument='<%# Eval("Id")%>' CommandName="btn" runat="server" CausesValidation="false" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
Thanks for including the GridView example. Now that I can see what you are attempting, I have a much better answer for you.
First, make a slight change to the button template, change out CommandArgument for OnClientClickand since you are using this button client side instead of posting back to the server, you can simplify it like this:
<asp:Button ID="btn" Text='btn' OnClientClick='<%# Eval("ID", "YourJavascriptFunction({0} - 1); return false;") %>' runat="server" CausesValidation="false" />
I have the click event call your JavaScript function and it sends in a parameter of the server side resolved id. Notice I subtract 1 first though. This is because the server side ASP.Net Eval function give the ID starting at 1. But, each of the ids that get generated for your text input elements start with a zero base.
Now look at the JavaScript function below.
// Clicking the first button sends in a 0, second sends in a 1, etc.
function YourJavascriptFunction(id) {
// each of the TextBox1 elements has an ASP.Net server side
// generated id that ends with GridView2_Textbox1_0,
// GridView2_Textbox1_1, etc.
let selectId = "input[id$='GridView2_Textbox1_" + id + "']";
// The text we use in the querySelector function states
// find the DOM element with a tag of "input" where the id
// ends with . . . The $ in id$= is the part that says the
// value must "end with"
let textBox1 = document.querySelector(selectId);
// Now that we have TextBox1 from the same row as the button,
// getting the value is easy.
alert(textBox1.value);
}
I left off a jQuery example as this querySelector command works in almost every browser including IE8 and above, so you shouldn't need jQuery for something this simple.
Let me know if I can help further.
I need to pass an argument (which comes from my database) from a radgrid view column to my javascript (which opens a dialog box window). However, I can't put the "bind("Id")" as a parameter from where I call the javascript as href.
In simpler words, I am looking for a way to pass <% Bind("Id")%> to the javascript, OpenMyWindow, call instead of the hardcoded, 111, right now.
<telerik:GridTemplateColumn UniqueName="Meet" DataField="Subject" HeaderText="Meet">
<ItemTemplate>
<div style="text-align: center">
<asp:LinkButton ID="LinkButton1" runat="server" Text='<%# Bind("Subject") %>' href="javascript: OpenMyWindow(111);" Width="30%">
</asp:LinkButton>
</div>
</ItemTemplate>
</telerik:GridTemplateColumn>
When I try "OnClick" instead of "href", my popup dialog box closes instantly and doesn't stay opened.
Try using "OnClientClick" and return false from your javascript method to prevent post back.
Alternatively. You could use a method passing in the DataIten. Then output an anchor tag created anyway you like:
<%# formatOpener(Container.DataItem) %>
With code behind of:
protected string formatOpener(object item)
{
ObjectType myObj = (ObjectType)item;
return String.Format("<a href=\"javascript:OpenMyWindow({0});\" width=\"30%\"/>{1}</a>", myObj.ID, myObj.subject);
}
I think you don't need a LinkButton, you could achieve it with an asp:HyperLink (which renders as a a tag):
<asp:HyperLink ID="HyperLink1" runat="server" Text='<%# Eval("Subject") %>' NavigateUrl='<%# "javascript: OpenMyWindow(" + Eval("ID").ToString() + ");" %>'></asp:HyperLink>
Also, don't use Bind if you don't need it, for displaying purposes always use Eval.
User HyperLink control instead and try setting the NavigateUrl property of the HyperLink this way:
<asp:HyperLink ID="hlLink" runat="server" Text='<%# Bind("Subject") %>' NavigateUrl='<%#Eval("Id", "javascript: OpenMyWindow({0});")%>'>
hope it helps./.
I finally figured out and solved this issue. Actually, somebody told me on the other post that, CommandArgument is completely a server-side property and doesn't render any html attribute. So I can't change any button's attribute and fire click on it. I finally made "Id" come through the code behind and made it work.
aspx code
<telerik:GridButtonColumn UniqueName="Subject" DataTextField="Subject" HeaderText="Meeting">
<HeaderStyle Width="30%" />
<ItemStyle HorizontalAlign="Center" />
</telerik:GridButtonColumn>
Code Behind
var subjectLink = meetingRow["Subject"].Controls[0] as LinkButton;
subjectLink.Attributes.Add("onClick", "javascript: return OpenMyWindow('" + meetingId + "')");
Below is my label code under a repeater with image:
<asp:Repeater ID="innerRep" runat="server">
<ItemTemplate>
<li>
<img src=' <%#Eval("ImageName") %>' alt='<%#Eval("ImgUrl") %>' width="100" height="60" onclick = "ChangeImage(this)" style="cursor:pointer;" />
<br /> <asp:Label ID="Label1" runat="server" Text='<%#Bind("VideoName") %>' ></asp:Label>
</li>
</ItemTemplate>
</asp:Repeater>
When I click the particular image using image onclick, then the video will start playing in I frame, as well as I need video name should come below I frame in a label.
For that I used one label2 for displaying the video name below the video player.
Alter the img tag within repeater to:
<img src=' <%#Eval("ImageName") %>' alt='<%#Eval("ImgUrl") %>' width="100" height="60" onclick = "ChangeImage(this,'<%#Eval("VideoName")' )" style="cursor:pointer;" />
I assume that you keep a html span(id=spnPlayingVideoName) for brevity, below the iframe
then within javascript you can do something like:
<script language="javascript">
function ChangeImage(getID, playingVideoName)
{
//Set label value in JavaScript
//document.getElementById("spnPlayingVideoName").value=playingVideoName;
//Set label value in jQuery
$("#spnPlayingVideoName").text(playingVideoName);
var targetID = document.getElementById("centralImage");
targetID.src=getID.alt;
}
</script>
This code is not tested thoroughly, but provided for a quick idea.
Note: Make sure that adding extra parameter to "ChangeImage(...)" function does not break other code.
If it break some other code, you may write a separate function(Eg: UpdateVideoLabel(...)) and call that as well from "onclick" event of img tag.
$(function(){
$('img').click(function(){
//make a variable with the value of a label1 based on the selected img - in your given code you can achieve this by the example bellow or using $(this).next().next().text() - > <br /> is element as well.
var videoname = $(this).parent().find("label1").text();
$('label2').text(videoname);
});
});
I get image by image-handler in first page and how to pass into second page
The .aspx page is like
<asp:Image ID="Image1" runat="server" Height="250px" Width="290px"
ImageUrl='<%# "ImageHandler.ashx?ImID="+ Eval("idnews") %>' />
Just pass the name of the image on the second page and set the same on the second page.
Try this code and implement according to your code
<asp:HyperLink
ID="lnkImage" runat="server"
ImageUrl='<%# Eval("productid","~/Handler.ashx?productid={0}") %>'
NavigateUrl='<%# Eval("productid","ProductLarge.aspx?productid={0}")' />
and markup in ProductLarge.aspx should be,
<img src='Handler.ashx?productid=<%=Request["productid"] %>' alt='Large Image' />
You are fetching image from database, so its not very big deal. You can just pass the Image id via Query string or other method and can display image as u display it on previous page.
I am a new coder trying to experiment with jquery for my first time. I'm trying to setup a simple datalist that might be used to display comments for an item. I want a clickable link (per datalist row) to drop down a panel (per datalist row) that has comment text. so the user looks at row 1, clicks it's link to read comments, and the comments panel drops down. they scroll down and do the same for the next item.
so far i have the below code as a small test page, but it's not working. nothing happens basically. I'm hoping someone can help me out because i'm very new and just teaching myself this stuff from what I see in tutorial videos and such. I tried the clientID thing because it seems i need that to deal with the auto-generated ID's .NET will assign panels as it's rendered, but i'm not sure if i'm doing it right.
greatly appreciate your time and effort.
head section
<script src="jquery-1.4.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('Panel1text').hide();
});
$("#<%=HyperLink1.ClientID%>").click(function() {
$("<%=Panel1text.ClientID%>").show();
});
</script>
body section
<asp:DataList ID="DataList1" runat="server" DataKeyField="cid"
DataSourceID="SqlDataSource1" Width="645px">
<ItemTemplate>
cid:
<asp:Label ID="cidLabel" runat="server" Text='<%# Eval("cid") %>' />
<br />
cuser:
<asp:Label ID="cuserLabel" runat="server" Text='<%# Eval("cuser") %>' />
<br />
blogid:
<asp:Label ID="blogidLabel" runat="server" Text='<%# Eval("blogid") %>' />
<br />
<br />
<asp:HyperLink ID="HyperLink1" runat="server">show text</asp:HyperLink>
<br />
<asp:Panel ID="Panel1text" runat="server">
<asp:Label ID="textLabel" runat="server" Text='<%# Eval("text") %>' />
</asp:Panel>
<br />
</ItemTemplate>
</asp:DataList>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT * FROM [ocomments]"></asp:SqlDataSource>
It looks to me like you are going to have multiple elements with the id of 'HyperLink1' and 'Panel1text'. I would recommend using classes instead. Add a "class='link'" to the link element and a "class='panel'" to the panel element. Use the following CSS to initially hide the panels:
.panel { display: none; }
Then use the following jQuery to show the element:
$(document).ready(function(){
$(".link").click(function(evt){
evt.preventDefault(); // prevents the click from leaving the page
$(this).next().show(); // show the panel
});
});
You may need to fiddle with the '.next().show()' selector a bit. Not certain how ASP.NET is going to render out the elements.
Bob