Pop up for further details within a gridview? - javascript

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

Issue with JQuery UI Modal box showing when it shouldn't

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..

Hide Button using Jquery Dialog

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();

Easiest way to show a jquery popup details page from ASP.NET Gridview

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.

Why Colorbox doesn't work on click event?

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});

How to dynamically load content from an external url, inside of a jquery ui modal dialog widget?

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>

Categories