CODEWITHSUNDEEP
c#asp.netjavascriptupdatepanel
eb.
eb.

Reputation: 63

UpdatePanel and Javascript

I have inline script such as this, which toggles between an edit and a display divs. If it is inside the the UpdatePanel it requires two click before it works. If I remove the UpdatePanel it works fine with a single click.

<a href="#" onclick="edit(event,'ctl00_CPH1_ctl00_win1')">Edit</a>

Can anyone help please?

Thanks

EDIT: Edit function:

function edit(e, id) {
    var editdiv = $('#' + id).find('.edit');
    var cntdiv = $('#' + id).find('.content');

    if (editdiv.css('visibility') == 'hidden') {
        editdiv.css('visibility') == 'visible'
        cntdiv.css('visibility') == 'hidden'
        cntdiv.hide();
        editbox.show()
    }
    else {
        editdiv.css('visibility') == 'hidden'
        cntdiv.css('visibility') == 'visible'
        cntbox.show();
        editbox.hide()
    }

    stopEventBubble(e); // Code to cancel event bubbling;
}

Upvotes: 1

Views: 1460

Answers (2)

Chris
Chris

Reputation: 2045

Are you using the ScriptManager to register the edit function?

protected void Page_Load(object sender, EventArgs e)
{
    string jsEdit = @"function edit(event, id) {}";
    ScriptManager.RegisterClientScriptBlock(this, GetType(), "editFunction", jsEdit);
}

If your code is in an external file, you can register it with the ScriptManager or the ScriptManagerProxy in the aspx for your page:

<ScriptManager runat="server" id="ScriptManager1">
    <Scripts>
        <asp:ScriptReference path="~/js/edit.js" />
    </Scripts>
</asp:ScriptManager>

EDIT: alright, I know what the issue is now. You aren't setting the css visibility to begin with. So either you need to set the css visibility or you can modify your edit function to follow the following logic:

function edit(e, id) {
    var editdiv = $('#' + id).find('.edit');
    var cntdiv = $('#' + id).find('.content');
    //I reversed it to look for visible instead of hidden.  The main problem with this approach and your other approach is that the original value is inherited.
    if (editdiv.css('visibility') == 'visible') {
        editdiv.css('visibility') == 'hidden'
        cntdiv.css('visibility') == 'visible'
        cntbox.show();
        editbox.hide()
    }
    else {
        editdiv.css('visibility') == 'visible'
        cntdiv.css('visibility') == 'hidden'
        cntdiv.hide();
        editbox.show()
    }

    stopEventBubble(e); // Code to cancel event bubbling;
}

The other option will require you to set the following in you "edit" and "content" divs.

<div id="edit" style="visibility:hidden"> ... </div>
<div id="content" style="visibility:visible"> ... </div>

If you need further help, I'll need to see your aspx code concerning the UpdatePanel, edit, and content.

Upvotes: 1

Sani Huttunen
Sani Huttunen

Reputation: 24375

Try this:

<a href="#" onclick="edit(event,'ctl00_CPH1_ctl00_win1'); return false;">Edit</a>

Edit
As Chris said: If you are injecting the function when you click the Edit link the function won't exist the first time you click an Edit link.

What you could do is add the function inside a <script> tag in the <head> section of the markup:

<head>
  <script>
    function edit(event, id) {
      // Your code here
    }
  </script>
</head>

Or in a separate .js file.

Upvotes: 0

Related Questions