Preventing a POSTBACK upon closing an alert.

Question

User1465740667 posted

My personal project (not college nor school related) is building a TRIVIA website.  I am using VB2010 Web Development to perform this task and I am pleased with my current development.  I have been successful in placing the Trivia questions and Answers selection within a frame that is placed inside a .container and a .content div.  I have placed an image in the .container and the .content provides a transparent darkened view of the image.  My questions and answer selections background are also transparent and therefore the user is able to view the image.  I have provided this information as I am wondering if perhaps my problem is related to the ".container and .content.

My problem is POSTBACK.  My Trivia is a Bible Trivia and I wish to provide a "scripture reference" with each question.  I am using an "alert" to provide the scripture reference.  I am successful in providing the alert with each question HOWEVER, when the user closes the alert it does a POSTBACK and the Trivia returns back to the very beginning and therefore the user must start the trivia over again.

I have already tried "return false" , OnClientClick='return false',  runat="server"  unsuccessfully.

I would appreciate any help. 

Thanks.

William Carowick

Answer 1

User-474980206 posted

as you don't show the "alert" code we have no idea what you coded, or the markup/script for the close 

Answer 2

User1465740667 posted

Hello Bruce:

So sorry.  This is what I have.

 var a4 = ["<button class=buttons002 onclick=myFunction1() run at=server;return false; OnClientClick=myFunction1() run at=server;return false;>Scripture Reference</button>",

function myFunction1() {
    alert("Scripture is presented here.  [Genesis 6:11-18]");
    return false

I have a couple screenshots of the Quiz .  The Start screen, and the Question with Answer Choices and Scripture Reference screen.  This upload will not permit me to access files from my computer.  

Hope this helps.  If not, tell me what else you need.

Thanks,

William Carowick

Answer 3

User1535942433 posted

Hi williamcarowick,

Do you care of using jquery?Try to remove the call from OnClientClick and just implement your logic at jquery on click event by using id selector as follows.

 <script src="Scripts/jquery-3.6.0.min.js"></script>
    <script>
        $(function () {
            $("#btn1").click(function (e) {
                e.preventDefault();
                alert("Scripture is presented here.  [Genesis 6:11-18]");
                return false;
            })

        })
    </script>

Best regards,

Yijing Sun

Answer 4

User753101303 posted

Hi,

Or what if using just type="button" to make sure this is not a submit button rather than using a submit button and having to cancel the submit?

Answer 5

User1465740667 posted

Hello Yijing Sun:

The jquery did not stop the POSTBACK.  It did bring the alert up but upon closing the alert it did the POSTBACK and took the Quiz all the way back to the beginning.  I was hoping that would work.  Oh, well, back to the drawing board.  lol.

Thanks,

William Carowick

Answer 6

User1465740667 posted

Hello PatriceSc:

Do you mean like this:

var a4 = ["<button=buttons002 onclick=myFunction1();>Scripture Reference</button>",

instead of:

var a4 = ["<button class=buttons002 onclick=myFunction1();>Scripture Reference</button>",

WELL, WELL, WELL - I think you are onto something here.  I changed it to button=buttons002 and strangely enough it removed the button from the quiz but left the words Scripture Reference in place.  So I clicked on the words Scripture Reference and it brought up the alert.  When I closed the alert the quiz remained and I finished answering the question so it went to the next question.  So it worked.  It just removed the button. Kinda' works like a <span>Scripture Reference</span> link thing.  I would prefer a button but could change the text to "CLICK ME for Scripture Reference".

Do you think that maybe the button is working as a submit button although it is not set up as an asp.button?  If so, what can I do to cancel the submit.

My script was:

function myFunction1() {
    alert("Scripture is presented here.  [Genesis 6:11-18]");
    return false
}
  

Thanks,

William Carowick

Answer 7

User1535942433 posted

Hi williamcarowick,

I have another way that you could use updatepanel. Just like this:

 <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="myFunction1()" />
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger  ControlID="Button1"/>
            </Triggers>
        </asp:UpdatePanel>

Best regards,

Yijing Sun

Answer 8

User753101303 posted

Being a submlit button is based on https://www.w3schools.com/tags/att_button_type.asp so just use type="button" to tell you want just a button rather than a submit button.

It seems your buttons002 class is styling the button as a link and apparently is changing even its behavior (altering maybe its type ?)