Category Archives: LinkButton

LinkButton

[RESOLVED]How to pseudo click Update link button from javascript

Hi,

How can I click a Formview Update link button from javascript ?

Hi shtrudel,

From your description, if you want to add client event for update button, you could refer to the following code.

    <script type="text/javascript">
        function updateClick() {
            alert("Update?");
            return false;
            
        }
    </script>

        <asp:FormView ID="FormView1" runat="server" DataKeyNames="Id" DataSourceID="SqlDataSource1" OnItemUpdating="FormView1_ItemUpdating" DefaultMode="Edit">
            <EditItemTemplate>
                Id:
                <asp:Label ID="IdLabel1" runat="server" Text='<%# Eval("Id") %>' />
                <br />
                Name :
                <asp:TextBox ID="NameTextBox" runat="server" Text='<%# Bind("Name") %>' />
                <br />
                Gender :
                <asp:TextBox ID="GenderTextBox" runat="server" Text='<%# Bind("Gender") %>' />
                <br />
                <asp:LinkButton ID="UpdateButton" runat="server" CausesValidation="True" OnClientClick="return updateClick();" CommandName="Update" Text="Update" />
                &nbsp;<asp:LinkButton ID="UpdateCancelButton" runat="server" CausesValidation="False" CommandName="Cancel" Text="Cancel" />
            </EditItemTemplate>
            ...

        </asp:FormView>

If you want to trigger update button click event from JavaScript. You could refer to the following code.

document.getElementById('<%= FormView1.FindControl("UpdateButton").ClientID %>').click()

If you have any other questions about my reply, please let me know freely.

Best Regards,
Dillion

[RESOLVED]my asp:TextBox using bootstrap is getting disabled when reducing the screen size to mobile device

Hi there,

If someone can please help with the issue below.

I am using asp:textbox with bootstrap. It works fine on desktop screen. But when resizing it to mobile version ie. decreasing the screen size. The bootstrap control does not work.

It just becomes static readonly. It happens to all my checkbox , button, text box.

codes are below:

div class="col-md-8 col-xs-12">
            <div class="form-horizontal">
                <div class="form-group">
                    <asp:Label ID="lblId" CssClass="col-sm-3 control-label" runat="server" For="txtId">Booking reference</asp:Label>
                    <div class="col-sm-4">
                        <asp:TextBox ID="txtId"  CssClass="form-control" runat="server"></asp:TextBox>
                    </div>
                </div>

<div class="col-xs-12">
                    <div class="form-group">
                        <asp:LinkButton ID="btnNext" CausesValidation="false" runat="server" Text="Next"
                            class="btn btn-primary pull-right" />
                    </div>
                </div>

</div>

</div>

Hi code_hh,

Thanks for your post here.

According to the documentation ,you need to add viewport tag to your head like below:

<meta name="viewport" content="width=device-width, initial-scale=1">

About how to use bootstrap css, I suggest that you can refer to the link below:

http://getbootstrap.com/2.3.2/scaffolding.html#responsive

http://getbootstrap.com/css/

Best Regards,

Kevin Shen.

I have done that on my master page…..

thanks kevin for your reply…any further help would be much appreciated.Thank you

Do you have any other code that relates to this? I created a similar HTML example that can be seen below that doesn’t appear to have the same issues that you are referring to. Is there any other elements around this that could be causing an issue :

<div class="col-md-8 col-xs-12">
            <div class="form-horizontal">
                <div class="form-group">
                    <!-- I've always been a fan of the 2-10 rule with label - element sizing in Bootstrap -->
                    <label class="col-md-2 control-label" >Booking reference <label>
                    <div class="col-md-10">
                        <input class='form-control' />
                    </div>
                </div>
                <div>
                    <div class="form-group">
                      <button class='btn btn-primary pull-right'>Next</button>
                    </div>
                </div>
           </div>
</div>

You can see an example of this here, however I don’t see anything that would cause your textbox to be "disabled" unless there is some additional code / Javascript that might be doing that.

just noticed that if I remove col-xs-12 …it works fine..any logic to that pls

The col-{x} classes are part of Bootstrap’s built-in Grid System, which allow you to define classes that will use these values to scale your content based on the size of the Viewport. For instance the class
"col-md-8" would take up 8 out of the available 12 "grid" positions when the screen size fell into the medium ("md") category of 768px and 922px, however the "col-xs-12" class would cause a particular element to take up all 12 of the positions when the screen
was very small ("xs").

You can visit the link that I provided above and try resizing your browser to see how the current grid reacts.

Hi there…this is my page below in brief….I also have a standard master page that it is referring to

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Standard.Master"
    CodeBehind="page1.aspx.vb" Inherits="web.page1" %>

<%@ Register Assembly="Web" Namespace="Web" TagPrefix="ma" %>
<%@ Register Assembly="Hip" Namespace="ParkResorts.Web.UI.WebControls" TagPrefix="" %>
<%@ MasterType VirtualPath="~/Standard.Master" %>

<asp:Content ID="Content6" ContentPlaceHolderID="Content" runat="server">

<div class="row">

div class="col-md-8 col-xs-12">
            <div class="form-horizontal">
                <div class="form-group">
                    <asp:Label ID="lblId" CssClass="col-sm-3 control-label" runat="server" For="txtId">Booking reference</asp:Label>
                    <div class="col-sm-4">
                        <asp:TextBox ID="txtId"  CssClass="form-control" runat="server"></asp:TextBox>
                    </div>
                </div>

<div class="col-xs-12">
                    <div class="form-group">
                        <asp:LinkButton ID="btnNext" CausesValidation="false" runat="server" Text="Next"
                            class="btn btn-primary pull-right" />
                    </div>
                </div>

</div>

</div>

</div>

</div>

</asp:Content>

yes your one works fine…but some how mine doesn’t work fine if I make the screen small and and add the col-xs-12

I’m not sure if this is a typo or not, but it looks like you might be missing an opening ‘<’ on your class with "col-md-8 col-xs-12" :

<div class="row">

div class="col-md-8 col-xs-12">
            <div class="form-horizontal">

which should be :

<div class="row">

<div class="col-md-8 col-xs-12">
            <div class="form-horizontal">

[RESOLVED]Link colour and underline question

Hello

I am trying to add style to the following LinkButton:

<asp:LinkButton runat="server" CssClass="labelStyle1" OnClick="LinkButton_Click" >Log out</asp:LinkButton>

In my <style> tags, I have:

.labelStyle1 {
font: normal 14px 'Droid Sans','Trebuchet MS', Arial, sans-serif;
color:#ffffff;
float: right;
position:absolute;
top: 55px;
right: 100px;
text-decoration: none;
height: 16px;
}

 .labelStyle1 a:hover {
      text-decoration: underline;
      color:#ffffff;
    }

The text appears as white. When I hover the mouse over it an underline appears, which is what I want, but the text is a blue colour even though I have defined it as #ffffff.

What is preventing it from remaining white, please?

Thanks.

Change your css style like given below

.labelStyle1
        {
            font: normal 14px 'Droid Sans' , 'Trebuchet MS' , Arial, sans-serif;
            color: #ffffff;
            float: right;
            position: absolute;
            top: 55px;
            right: 100px;
            text-decoration: none;
            height: 16px;
        }
        
        .labelStyle1:hover
        {
            text-decoration: underline;
            color: #ffffff !important;
        }

That works now, thanks!

And just on account of that: !important; Strange that the attribute needs to be emphasised in that way, but it did the trick!

Thanks again!

Bluenose

And just on account of that: !important; Strange that the attribute needs to be emphasised in that way, but it did the trick!

Actually the problem was not adding the !important attribute , the problem lies with the statement 

 .labelStyle1 a:hover {

where you dont need the ‘a’ anchor tag selector in the css style as you have directly applied css styles to your linkbutton.

Having said this I would recommend adding the !important attribute always when you want your css to take priority over default css.

Oh, OK.

Yes !important seems to be quite, well, important.

Thanks again.

[RESOLVED]create a link to a content that will open in an iframe

Hi,

is it possible to create a link to content that will open in the iframe of a specific page?

say I have this:

1. Page 1:
http://domain.com/Integrated/Index?HtmlElementId=tge_pnl&GroupHtmlElementId=tile2Tile
. on this page there is an iframe

2. Page 2:
http://anotherdomain.com/Variance/Index/b8b85b6f-3e9a-482c-bba1-900b92b2a308
. on this page there is content that i’d like to show on the iframe of Page 1

is it possible to create a link that will open Page 1 and show page 2 in the iframe section.

Please not that I need this to be dynamically created. i.e. the content that will show on the iframe will change depending on the ‘news letter’ link a user receives. in any case i’d like that content to appear within the context of the iframe instead of a standalone
page.

doable?

Krs

Hi Awillys,

Thanks for your post.

Firstly, if you’d like to dynamically set src property of iframe to show a page as a subwindow, you could try the below code.

<script>
    function showcontent() {
        document.getElementById("icontent").src = "TargetPage.aspx";
        return false;
    }
</script>

<iframe id="icontent"></iframe>
<br />
<asp:LinkButton ID="btnshowcontent" runat="server" OnClientClick="return showcontent();">news letter</asp:LinkButton>

Secondly, if you want to load page fragments, you could try the following code.

<script>
    $(function () {
        $("#btnshowcontent").click(function () {
            $("#DivContent").load("TargetPage.aspx #content2");
            return false;
        })
    })
    }
</script>


<div>
    <div id="DivContent">
    </div>
    <br />
    <asp:LinkButton ID="btnshowcontent" runat="server">news letter</asp:LinkButton>
</div>

For more information about .load() method, you could refer to the below link.

Hope it will be helpful to you.

Best Regards,

Fei Han

Hi Awillys,

Yes I believe that can be done using the src attribute of the iframe tag, please try the following code :

document.getElementById('contentHolder').setAttribute("src","https://www.mirror.co.uk");
  

contentHolder is the id for the iframe tag.

Sample Working Demo

You can replace https://www.mirror.co.uk by your Page2 

Hope it helps

Need details to the way

Hi,
I want to have repeater control on the right the menu (each TAB sub-menu items) below

    <style type="text/css">
        #container{
            height:200px;
            background-color:black;
        }

...
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> onclick="pict_click2();" />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label23" runat="server"><b>Test</b></label>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    ...

and then center the div that is having both the menu and the repeater control inside, on the page. is there any demonstration to do this?

Hi HuaMin,

Thanks for your post.

This article show us how to create multi-level navigational menu with the ASP.NET Repeater control and CSS styles, you could refer to it.

Hope it will be helpful to you.

Best Regards,

Fei Han

how to adjust the css codes below

    <style type="text/css">
        #horizontalmenu {
          /*text-align: center;
          margin-left:120px;*/
          width:90%;
          margin:auto;
        }
        #horizontalmenu > ul {
          padding: 1px;
          margin: 1px;
          list-style: none outside none;
          display: inline-block;
        }
...
	    <SeparatorTemplate>
	    </SeparatorTemplate>
	    <FooterTemplate>
		    <div class="headerFooter"></div>
	    </FooterTemplate>
    </asp:Repeater>
    <br />

to ensure the repeater above is aligned on the right of the TABs, of which each TAB is having a few sub-menu items? I expect that the TABs with sub-items are the green part below, while the reapeater is the blue part.

wmec

repeater above is aligned on the right of the TABs, of which each TAB is having a few sub-menu items? I expect that the TABs with sub-items are the green part below, while the reapeater is the blue part.

  1. You should not post all your code here, only that small piece which is directly related to the issue.
  2. What the exact issue? Please show the screenshot of the current output and a picture of expected result.

Now the repeater does not appear on the right side of the several TABs (while each each TAB is having sub-items). This is what I expect to adjust.

Hi wmec,

wmec

to ensure the repeater above is aligned on the right of the TABs

According to your description and picture, I recommend to divide the page into two parts, we could use the first one to display menu and use the second one to display repeater. You could refer to the below sample to divide your page.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        #horizontalmenu {
            /*text-align: center;
          margin-left:120px;*/
            width: 90%;
            margin: auto;
            display:block;
            float:left;
        }

        #repcontainer{
            width:9%;
            display:block;
            float:left;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div id="horizontalmenu">
            </div>
            <div id="repcontainer">
            </div>
        </div>
    </form>
</body>
</html>

Best Regards,

Fei Han

Usually alignment could be done using one of 2 techniques

  1. have a table <table><tr><td> first container here </td><td> second container here </td></tr></table>. 
  2. have containers such as <div> with float:left/right <div style="width:400px;float:left"> first container here </div><div style="width:400px;float:left"> second container here </div>

Thanks a lot to all.
Fei Han,
I expect to show the repeater on the right of the TABs (of which each is having sub-items). but using these

    <style type="text/css">
        #horizontalmenu {
          width:60%;
          display:block;
          float:left;
        }
        #repcontainer {
            width:15%;
            display:block;
            float:left;
        }
        #horizontalmenu > ul {
          padding: 1px;
          margin: 1px;
          list-style: none outside none;
          display: inline-block;
        }
        #horizontalmenu > ul > li {
            text-align: left;
            display: block;
            border: 4px solid #CC55FF;
            border-style: inset;
        }
        #horizontalmenu li ul {
            display: none;
            position: absolute;
        }
        #horizontalmenu li:hover ul {
            display: block;
            background: #7C7A82;
            height: auto;
        }
...

        <asp:Repeater ID="Repeater" runat="server">
	        <HeaderTemplate>
	        </HeaderTemplate>
            <ItemTemplate>
		        <asp:LinkButton ID="Link1" runat="server" Text='<%# Eval("row1") %>' BackColor="#57789E" Width="820px" 
                    ForeColor="White" Font-Bold="true" Font-Names="Arial" style="line-height:33px" 
                    ToolTip="Double-click the line to locate to the record" OnClick="bt_Click" />
            </ItemTemplate>
	        <SeparatorTemplate>
	        </SeparatorTemplate>
	        <FooterTemplate>
		        <div class="headerFooter"></div>
	        </FooterTemplate>
        </asp:Repeater>
    </div>

the repeater is still shown underneath the TABs. why?

Smirnov,

Can you advise why I encounter the problem, using the above codes?

Any help to this?

[RESOLVED]java script function not working after page postback

I am using JavaScript function

and i am using ajax update panel

when the page is post back JavaScript function is not working properly

My code is

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
 <link rel="stylesheet" href='<%= Page.ResolveUrl("~/Styles/bootstrap-datetimepicker.min.css") %>'/>
<asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>

<asp:LinkButton ID="LinkbtnReset" 
            runat="server" 
            CssClass="btn btn-primary" onclick="LinkbtnReset_Click">
    <span class="glyphicon glyphicon-refresh"></span> Reset
</asp:LinkButton>

<div class="form-group">

         
         
            <label class="control-label col-md-2 col-xs-12 col-sm-3" for="confirmPassword">Ref No:</label>
            
            <div class="col-xs-12 col-md-2 col-sm-3">
                 <asp:TextBox ID="txtRefNo" CssClass="form-control" runat="server"></asp:TextBox>
            </div>
            <label class="control-label col-xs-12 col-md-1 col-sm-3" for="confirmPassword">Ref Date:</label>
            <div class="col-xs-12 col-md-2 col-sm-3">
                <div class="input-group date form_date " data-date="" data-date-format="dd-M-yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
                    <asp:TextBox ID="txtRefDate" CssClass="form-control" runat="server"></asp:TextBox>                   
					<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                </div>
				<input type="hidden" id="dtp_input2" value="" />
            </div>
         </div>
 </ContentTemplate>
    </asp:UpdatePanel>
    <!-- Script for DatePicker -->
     <script type="text/javascript" src='<%= Page.ResolveUrl("~/Scripts/bootstrap-datetimepicker.js")%>' charset="UTF-8"></script>
    <script type="text/javascript">
        
                $('.form_date').datetimepicker({
                    language: 'en',
                    weekStart: 1,
                    todayBtn: 1,
                    autoclose: 1,
                    todayHighlight: 1,
                    startView: 2,
                    minView: 2,
                    forceParse: 0
                });
          
   
   </script>


   <!-- End Script for datepicker -->
</asp:Content>

first time it is working fine

but when i click the Link button date picker is not working

i tried the following way but no use

protected void Page_PreInIt(object sender, EventArgs e)
    {
        string datescript;
        datescript = " <script type='text/javascript' src='../../Scripts/bootstrap-datetimepicker.js' charset='UTF-8'></script>";
        datescript = datescript + ("<script> $('.form_date').datetimepicker({language: 'en',weekStart: 1,todayBtn: 1,autoclose: 1,todayHighlight: 1,startView: 2,minView: 2,forceParse: 0});</script>");
        ClientScript.RegisterStartupScript(this.GetType(), "myScript", datescript, true);
    }

could anyone slove?

Thanks,

Murali.

Hi,

Try to add the datetimepicker from document ready event i.e.

$(document).ready(function(){
$('.form_date').datetimepicker({
                    language: 'en',
                    weekStart: 1,
                    todayBtn: 1,
                    autoclose: 1,
                    todayHighlight: 1,
                    startView: 2,
                    minView: 2,
                    forceParse: 0
                });
});

Hi Murali,

Thanks for your post.

murali krishna14

<script type="text/javascript">
        
                $('.form_date').datetimepicker({
                    language: 'en',
                    weekStart: 1,
                    todayBtn: 1,
                    autoclose: 1,
                    todayHighlight: 1,
                    startView: 2,
                    minView: 2,
                    forceParse: 0
                });
          
   
   </script>

Firstly, according to your code, are you sure that the datetimepicker works fine after the DOM has been initialized?

Besides, you could refer to the following code to execute your handler.

$(function () {
    $('.form_date').datetimepicker({
        language: 'en',
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        minView: 2,
        forceParse: 0
    });
})

Here is some example about Bootstrap datetimepicker, you could refer to it.

Best Regards,

Fei Han

[RESOLVED]clear textbox with different id

Hi,

I have asp.net textboxes width different IDs.

I would like to add linkbutton that will clear all textboxes in the page dynamically.

or other option is to clear all the asp.net form, think it should be easier.

How can I do that?

Hi

Checkout the post below. From javascript you can reset the form as follows:

document.forms[0].reset();

http://forums.asp.net/t/1015988.aspx?Need+help+with+ASP+NET+Reset+button+to+clear+form+fields+non+html+button+

http://www.dotnetcurry.com/showarticle.aspx?ID=78

may be you can try out this,

 $(‘#form_id :text).val(”);

Hi borisre,

Thanks for your post.

borisre

I would like to add linkbutton that will clear all textboxes in the page dynamically.

As for your problem, you could refer to the following sample to empty TextBoxes.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="../../Scripts/jquery-1.8.2.js"></script>
    <script>
        $(function () {
            $("#BtnClean").click(function () {
                $("input[type=text]").val("");
                return false;
            })
        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <br />
        <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
        <br />
        <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
        <br />
        <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
        <br />
        <asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>
        <br />
        <asp:LinkButton ID="BtnClean" runat="server">Clean</asp:LinkButton>
    </div>
    </form>
</body>
</html> 

If you have any question  about this issue, please post back freely.

Best Regards,

Fei Han

thanks, it worked great, but I keep on getting the following error after using it:

Invalid postback or callback argument.  Event validation is enabled using <pages enableEventValidation="true"/> in configuration or <%@ Page EnableEventValidation="true" %> in a page.  For security purposes, this feature verifies that arguments to postback
or callback events originate from the server control that originally rendered them.  If the data is valid and expected, use the ClientScriptManager.RegisterForEventValidation method in order to register the postback or callback data for validation.

Script for a close button which will work both for colorbox popup and normal popup in a asp.net and vb.net web application

I have a page which opens as a popup from two different area.

In the first area it opens as a colorbox popup.

And from the second one it opens inside another simple javascript popup.

The problem is the page was previously designed as a colorbox popup.

And the close button designed for the page works only when it opens as colorbox popup.

<a href="javascript:parent.$.colorbox.close();" class="btn" title="Close Window">Cancel</a>

But the close button doesnot work when it opens inside another simple popup. I normally use the following line of code for the close button of normal simple popup

<a class="btn" href="javascript:window.close();">Close</a>

but that doesnot work when the popup opens as a colorbox popup.       Is there any script that will work in both cases?

I have tried to close the popup window via vb.net by using the following code .

asp.net line of code 

<asp:LinkButton runat="server" EnableViewState="false" ID="uxClose"
            Text="Close Window via Asp" CssClass="btn" />

VB.net code

  Protected Sub uxClose_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles uxClose.Click
        If Not Page.IsValid Then Exit Sub
        Page.ClientScript.RegisterClientScriptBlock(Me.GetType(), "CloseWindowScript", "window.close();", True)

   End Sub

that does not work.

I have also tried

 Protected Sub uxClose_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles uxClose.Click
        If Not Page.IsValid Then Exit Sub
       Me.close()
   End Sub

but that gives error message 

I will appreciate your kind co operation

Thank you

Hi bashabi,

Thanks for your post.

As for your problem, I have some questions.

  1. Would you like to close the popup window or parent window?
  2. The close button is in the parent window or popup window.
  3. Could you show us more code to help us reproduce your problem?

Best Regards,

Fei Han

Hi 

Thanks for your reply. I want to close only the popup window and that close button also in the popup window.

As I said in my question this popup window opens from several area of the parent window .  From some area it opens as a color box popup. and there are some area it opens inside another normal popup page and thus it opens as a normal popup.

————————

To explain more 

Suppose : The popup window is n_pop_up.aspx . If the n_pop_up.aspx  page opens from list.aspx page which is a page in parent window;  it opens as a colorbox popup.

The code in list.aspx page to open  n_pop_up.aspx  page  is 

<%@ Page Title="" Language="VB" MasterPageFile="~/_resx/E4.master" AutoEventWireup="false" CodeFile="new.aspx.vb" Inherits="E4_Jobs_Details_Interview_New" ValidateRequest="false" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="Server">
<input type="hidden" name="vid" id="vid" value="<%= Vacancy.ID.ToString()%>" />


     <a href="#" id="saveInt" class="btn">Continue</a>

</asp:Content>

<asp:Content ID="Content2" runat="server" ContentPlaceHolderID="ScriptContent">


    <script type="text/javascript" charset="utf-8">

     $(function () {

                    if((parseInt(r.d))>0) {

                             var commUrl = "n_pop_up.aspx?templatetypeid=1&communicationtemplateid=" + $('#intTemplate').val() + "&applicationid=" + applicants.join() + "&interviewid=" + r.d;
                             $.colorbox({ width: '900px', height: '90%', iframe: true, href: commUrl, open: true, overlayClose: false });
                        }
               return false;

    });

    </script>
</asp:Content>

There is another popup suppose its name is d_popup.aspx which is opened as a normal popup (when i say normal popup that is that popup is opened via  window.open() method). and the code to open that popup is following,

        function openpopup() {
                 var CURL = 'd_popup.aspx?i=' + application.Id;
                 window.open(CURL, '', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=1,width=820,height=600,left = 560,top = 240');

        }

and the n_pop_up.aspx is also linked in d_popup.aspx page and when the link is clicked its opens inside the d_popup.aspx page. 

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="Server">
        <div class="btn-group">
             <button class="btn dropdown-toggle" data-toggle="dropdown">
                    <i class="icon-cog"></i>                                                                                                </button>
                   <ul class="dropdown-menu pull-right">
                      <li class="dropdown-submenu">
                           <a href="n_pop_up.aspx">Communication</a>                                                                            
                      </li>
                                                                                         
                                                                                         
                    </ul>
           </div>
</asp:Content>

And when the n_pop_up.aspx page is opened inside d_popup.aspx page that opens as a normal popup. 

The following close button in the n_pop_up.aspx page works when the page opens as a color box popup

        <a href="javascript:parent.$.colorbox.close();" class="btn" title="Close Window">Cancel</a>

And the following close button in the n_pop_up.aspx page works when the page opens as a normal popup

                <a class="btn" href="javascript:window.close();">Close</a>

but none of the above works for both case.  I want something that will serve both cases.

————–

I hope I have been able to make the situation  clear to you.

looking forward to your reply

Thanks

[RESOLVED]click on edit, show cancel link on this specified row only

I am clicking on edit link of a row . i Want to hide a column of Edit link & need to show the cancel link. how could i do that ?

Hi,

Not fully understood your requirement,but try out this prototype and see if this satisfies your requirement.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('.cancel').hide();
            $('.edit').click(function () {
                $(this).hide();
                $(this).next().show();
            });
        });
    </script>
    <table>
        <tr>
            <td>
                <a href="#" class="edit">Edit</a>
                <a href="#" class="cancel">Cancel</a>
            </td>
            <td></td>
        </tr>
        <tr>
            <td>
                <a href="#" class="edit">Edit</a>
                <a href="#" class="cancel">Cancel</a>
            </td>
            <td></td>
        </tr>
        <tr>
            <td>
                <a href="#" class="edit">Edit</a>
                <a href="#" class="cancel">Cancel</a>
            </td>
            <td></td>
        </tr>
    </table>

Hi waqar1,
From your description, if you are using Gridview, you could put the Edit button into the ItemTemplate, and put the Cancel button into the EditItemTemplate. You could refer to the following code:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnRowEditing="OnRowEditing">
<Columns>
    <asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150" />
    <asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="150" />
    <asp:TemplateField>
        <ItemTemplate>
            <asp:LinkButton Text="Edit" runat="server" CommandName="Edit" />
        </ItemTemplate>
        <EditItemTemplate>
            <asp:LinkButton Text="Update" runat="server" OnClick="OnUpdate" />
            <asp:LinkButton Text="Cancel" runat="server" OnClick="OnCancel" />
        </EditItemTemplate>
    </asp:TemplateField>
</Columns>
</asp:GridView>

More details, please refer to the following links:

http://www.aspsnippets.com/Articles/Edit-GridView-using-BoundField-Column-in-ASPNet.aspx

http://www.aspsnippets.com/Articles/Insert-Update-Edit-Delete-record-in-GridView-using-SqlDataSource-in-ASPNet.aspx

if you are use a table as sangeeth2007 said, you could use the following code:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.cancel').hide();
            $('.edit').click(function () {
                $(this).hide();
                $(this).next().show();
            });
            $('.cancel').click(function () {
                $(this).hide();
                $('.edit').show();
            });
        });
    </script>

  <table>
        <tr>
            <td>
                <a href="#" class="edit">Edit</a>
                <a href="#" class="cancel">Cancel</a>
            </td>
            <td></td>
        </tr>
        <tr>
            <td>
                <a href="#" class="edit">Edit</a>
                <a href="#" class="cancel">Cancel</a>
            </td>
            <td></td>
        </tr>
        <tr>
            <td>
                <a href="#" class="edit">Edit</a>
                <a href="#" class="cancel">Cancel</a>
            </td>
            <td></td>
        </tr>
    </table>

If you have any other questions about my reply, please let me know freely.
Best Regards,
Dillion