views:

85

answers:

2

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;
}
A: 

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.

Sani Huttunen
Tried this but does not solve the problem. It is always the first time it takes twice clicks, subsequent clicks are fine.
eb
+1  A: 

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.

Chris
Tried it. Placed it within UpdatePanel, not luck.
eb
This shouldn't be in the UpdatePanel. The code illustrated should be in the Page_Load function.
Chris
Tried that now. Now it loses the property value: alert($('#' + id).css('visibility')); return inherit rather than visible as I set it. Also I have them in usercontrol and looks like page is littered with Javascript registered via the ScriptManager.RegisterClientScriptBlock method. Can't I call an external .js file
eb
I edited my post to show how to register the external JavaScript file with the ScriptManager. Also, your edit function isn't setting the visibility like: `$('#' + id).css('visibility')` it is setting the visibility like: `$('#' + id).find('.edit').css('visibility')`
Chris
this all worked before the UpdatePanel was added - there is something UpdatePanel doing to override it. There is nothing wrong the way I set the visibility. What I am doing is to set two inner Divs to hidden/visible, therefore I am using find method to find the inner divs inside a wrapper Div with the id (defined in the parameter).
eb
is the edit function getting called on the first click? Throw an `alert('foo');` in at the start.
Chris
yes - it is called on first click.
eb
I believe you aren't setting the visibility of the edit and content elements initially. If you are, show me the code where you are doing it.
Chris