I have a gridview which lists items. What i want to be able to do is click a link which will open a pop up to show further details for the specific item. So far I have managed to create a pop-up Div tag which will show the details of the product that is selected in the grid view. Currently the Div tag is opened using a hyperlink outside of the Gridview. When i try to put the link inside a template field in the gridview the pop up does not open.
This is the javascript for the pop up div
<script type="text/javascript">
$(document).ready(function () {
$("#OpenDialog").click(function () {
$("#dialog").dialog({ modal: true, height: 400, width: 500 });
});
});
</script>
The div tag
<div id="dialog" title="CPU Details" onload="false" style="display: none" >
The div tag is then opened using the following which is placed outside of the gridview.
<a id="OpenDialog" href="#">Click here to open dialog</a>
Do it this this way to see the wonders of css selectors.
Mark Up
<ItemTemplate>
<asp:LinkButton ID="lblId" runat="server" Text='<%# Bind("Id") %>' CssClass="opener"></asp:LinkButton>
</ItemTemplate>
<div class="dialog" title="My details" >
Details here
</div>
JqueryCode
$(document).ready(function () {
$(".opener").click(function () {
$(".dialog").dialog("open");
return false;
});
});
I have dropboxed a working example for you here which has a bonus of taking care of update panels.Enjoy.
try the following:
$(document).ready(function () {
$("#OpenDialog").click(function (e) {
$("#dialog").dialog({ modal: true, height: 400, width: 500 });
return false;
});
});
and let me know if it will not work for you.
UPDATED
add a class to link like :
<a id="OpenDialog" class="OpenDialog" href="#">Click here to open dialog</a>
now
$(document).ready(function () {
$('.OpenDialog').click(function (e) {
$("#dialog").dialog({ modal: true, height: 400, width: 500 });
return false;
});
});
try this it will definitely work for you as when ids of control have changed in gridview when it renders in html.
Related
So there's a few pieces to this. First of all, here's the Javascript located in the head of the ASPX page:
<!--//**********************************
// Test modal popup
//********************************** -->
<script type="text/javascript">
//Total out of range dialog
$(function () {
$("#dialog").dialog({
modal: true,
// autoOpen: false,
width: 570,
buttons: {
"Ok": function () { $(this).dialog("close"); },
"Cancel": function () { $(this).dialog("close"); }
}
});
});
</script>
Then, at the very bottom of he ASPX page (which is rather lengthy...) I have the modal piece:
<div id="dialog" title="ATTENTION">
<table style="width:565px; border-spacing:0px; border-collapse:collapse;">
<tr>
<td style="width:65px; ">
<img src="http://someimage" style="height: 120px; width: 80px" />
</td>
<td style="vertical-align:top">
<p>some text</p>
</td>
</tr>
</table>
</div>
</asp:Content>
Lastly, in the code-behind I have this:
if (!Page.IsPostBack)
{
if (MyServer.Contains("localhost"))
{
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "dlgOutOfRange",
"$(function() {$('#dialog').dialog('open');});", true);
}
Now, I know this all works, it's been tested. However, this modal is displaying even when it's not supposed to, and when I skip through the code it bypasses the Page.IsPostback so it knows it's not a postback. For instance, I have a dropdown that has a SelectedIndexChange function tied to it. When I change the value in the dropdown, this modal becomes visible. Is there something in the div tag that I'm not doing? I tried adding style="Visible: False;" but that just made the text invisible.
<script type="text/javascript">
$(document).ready(function () {
$("#dialog").dialog({
modal: true,
width: 570,
buttons: {
"Ok": function () { $(this).dialog("close"); },
"Cancel": function () { $(this).dialog("close"); }
}
});
});
</script>
Try this..
I use jQuery Dialog on ASP.NET C#. When I click button "Show dialog", the dialog is appeared and button "Show dialog" also display on dialog.
I want to hide this button. Please help me.
This is my code:
<script type="text/javascript">
$(".printt").live("click", function () {
$("#dialog").dialog({
title: "Password Confirm",
buttons: {
Ok: function () {
$("[id*=btnWhatch]").click();
},
Close: function () {
$(this).dialog('close');
}
},
});
return false;
});
</script>
And ASPx
<div id="dialog">
<dx:ASPxButton ID="ShowDialog" CssClass="printt" runat="server" Text="Show Dialog">
</dx:ASPxButton>
</div>
Thank for your help !
Just hide the button after the Show dialog button is clicked.
$('#ShowDialog').hide();
I have a c# Asp.net Gridview with some data and then there is a details page for each row of data with a hyperlink to view the details page. What is the best (easiest) way to show a popup using jquery modal box after clicking on the "Show Details" for any particular row of data?
So for example the page "details.aspx?id=10012" would popup in a modal dialog after clicking a "Show Details" hyperlink
An example where I am passing CustomerID as QueryString to another page
Step 1 - Create an ItemTemplate in your page like this.
<ItemTemplate>
<asp:HyperLink ID="DetailsLink" runat="server"
CssClass="my_link"
Text="View Details"
ToolTip='<%# Eval("CustomerID") %>'
NavigateUrl="#">
</asp:HyperLink>
</ItemTemplate>
Step 2 - Place a div outside the GridView like this.
<div id="dialog">
<iframe id="myIframe" src=""></iframe>
</div>
Step 3 - JS
$(document).ready(function () {
$("#dialog").dialog({
autoOpen: false,
modal: true,
height: 600,
open: function (ev, ui) {
$('#myIframe').attr('src', 'Popup.aspx?id=' + selectedID);
}
});
var selectedID = "0";
$('.my_link').click(function (event) {
selectedID = this.title;
event.preventDefault();
$('#dialog').dialog('open');
});
});
The code is self explanatory. Hope this helps.
I'm using Colorbox in my app. What I'm looking for is, on page load hide div (.box) and when I click on the link, it opens (div.box) and shows it's title (My Box) and style.
<div class="click" href="link">Click here!</div>
<div class="box" style="width:700; height:800;" title="My Box">
<p>Content goes here</p>
</div>
Here is what i have tried.
<script>
$(document).ready(function () {
$('.box').hide();
$('.click').click(function () {
open_colorbox(newWidth, newHeight, newTitle);
});
function open_colorbox(c_width, c_height, c_title) {
var options = {
width: c_width,
height: c_height,
title: c_title,
overlayClose: false
};
$.colorbox(options);
}
});
</script>
The above solution doesn't work. What am I missing here?
UPDATE 1:
Based on the below comments and answer(s) I only use one line to open colorbox, but still not working!!!
<script>
$(document).ready(function () {
$('.box').hide();
$('.click').click(function () {
$(".box").colorbox({ open: true });
});
});
</script>
UPDATE 2:
Thanks to #Franklin. His solution is the correct one. Here is an example of how simple Colorbox can be done. http://codepen.io/egyamado/pen/Jnxvi
Inside your click function, can't you just do...
Try adding #id of the div
$(".box").colorbox({href:"#id", inline:true});
Or
$("a.click").colorbox({href:"#id", inline:true});
I asked this question before, but I don't think I explained properly for what I am trying to accomplish.
There are multiple links on my website and I want to open the content from the link in a jquery ui modal dialog widget.
I'm trying to use 'this' to reference the link that the user selects dynamically.
What am I doing wrong here?
The code I'm using is below:
comment #1
comment #2
comment #3
<div id="somediv"></div>
<script type="text/javascript">
$(document).ready(function() {
$("#somediv").load(this.getTrigger().attr("href")).dialog({
autoOpen: false,
width: 400,
modal: true
});
$("#test").click(function(){$( "#somediv" ).dialog( "open" );});
});
</script>
http://jsfiddle.net/qp7NP/
A couple changes: changed ID to Class and used IFrame.
comment #1<br>
comment #2<br>
<a href="http://ask.com/" class="test" >comment #3</a><br>
<div id="somediv" title="this is a dialog" style="display:none;">
<iframe id="thedialog" width="350" height="350"></iframe>
</div>
<script>
$(document).ready(function () {
$(".test").click(function () {
$("#thedialog").attr('src', $(this).attr("href"));
$("#somediv").dialog({
width: 400,
height: 450,
modal: true,
close: function () {
$("#thedialog").attr('src', "about:blank");
}
});
return false;
});
});
</script>
In case you want to pull in the HTML instead of IFrame, you will have to use Ajax (XMLHttpRequest), something like this: http://jsfiddle.net/qp7NP/1/
You can't have multiple elements with the same Id.
Change your links to to class="test" instead and therefore your click event to $('.test').click().
Also if you still have problems, and I remember I had some similar issues because how JQUery Dialog behaves itself with the DOM. It will literally rip your #somediv out of content and append it to the bottom of a page to display that dialog. I solved my dynamic dialog loading issues with wrapping it in another div.
<div id="somediv-wrap">
<div id="somediv">
</div>
</div>
<script>
$(document).ready(function() {
$("#somediv-wrap").dialog({
autoOpen: false,
width: 400,
height:200,
modal: true
});
$(".test").click(function(event)
{
event.preventDefault();
var link = $(this).attr('href');
$("#somediv").load(link,function(){
$( "#somediv-wrap" ).dialog( "open" );
});
});
});
</script>