0

I'd like clicking on the element to append the hash to the url and then initiate a postback, but I can only get one or the other to happen.

Clicking on the element with an onserverclick attribute initiates the postback, but doesn't append the hash.

<a href="#message" class="anchorButton" onserverclick="BackwardsPost" id="subAnchor" runat="server">Submit</a>

Clicking on the element without the onserverclick attribute causes the hash to be appended to the url, but no postback occurs.

<a href="#message" class="anchorButton" id="subAnchor" runat="server">Submit</a>

My objective is to display another element through the use of the CSS target pseudo selector as soon as the user clicks the element and have that same click initiate a postback. I know JavaScript is the appropriate tool for this task, but it isn't an option.

Here's the element I want to set to visible with the target pseudo selector:

<p class="targetMessage" id="message">Insert text here.</p>

and here are the CSS classes I'm using:

.targetMessage {
    display: none;
}

.targetMessage:target {
        display: block;
        color: red;
}

I've also considered using an html meta element to automatically refresh the page while storing the page's state in session state; causing the page to reload with the message upon the user's click and then refresh automatically a few seconds later to do the actual work, but I'd rather not employ this option.

Your input is appreciated. Thank you!

Scott Nearing
  • 1
  • 1
  • 1
    Is the intention for the message to appear right before the page posts back? Or is the message primarily meant to be read after the page has posted back and reloaded? – Serlite Nov 07 '16 at 21:55
  • @Serlite I'd like the message to appear right before the page posts back. – Scott Nearing Nov 09 '16 at 13:45
  • Alright - I've added an answer which I think achieves the behaviour you need, though not using the same approach. Let me know if it works alright for you, or if the problem isn't quite solved. – Serlite Nov 10 '16 at 16:28

1 Answers1

0

Because your desired usage of href seems to conflict with how ASP.NET renders the control when onserverclick is defined, I would suggest an alternative approach that doesn't rely on the anchor's href.

If you're open to moving the message in your markup, you can use the sibling selector in conjunction with the :focus pseudo-class to reveal the message when the link is clicked:

.targetMessage {
  display: none;
}
.anchorButton:focus + .targetMessage {
  display: block;
  color: red;
}
<a href="#" class="anchorButton" id="subAnchor">Submit</a>
<p class="targetMessage" id="message">Insert text here.</p>

Hope this helps! Let me know if you have any questions.

Serlite
  • 12,130
  • 5
  • 38
  • 49
  • I appreciate the help, but that doesn't really achieve the desired effect. I actually tried several of the pseudo-classes some time ago, but none of them worked quite right. :focus reveals the hidden message whenever a user tabs to the element even if they don't click on it or hit enter. I think this has the potential to confuse users. :hover has similar problems and :active is even less effective. @TylerH posted an interesting CSS hack [here](http://stackoverflow.com/questions/13630229/can-i-have-an-onclick-effect-in-css) that looks like it might work. – Scott Nearing Nov 14 '16 at 13:58
  • @ScottNearing Sure, using a hidden checkbox was the next solution that came to mind. As long as you can get ASP.NET to play nicely using a checkbox control to trigger the postback event instead of an actual anchor or button element, that sounds like a much better approach for your needs. – Serlite Nov 14 '16 at 15:05
  • You were right about ASP not wanting to play nice with the checkbox. The hidden checkbox used with :checked works about as well as the anchor tag combined with :target. I still can't get the postback and the styling to occur on the same click. – Scott Nearing Nov 14 '16 at 18:27
  • @ScottNearing What does your revised approach look like? Could you edit your question to include that as well? Maybe it can be adjusted to work as desired. – Serlite Nov 14 '16 at 19:02