Click here to Skip to main content
15,881,882 members
Please Sign up or sign in to vote.
1.00/5 (2 votes)
Hello there. I am doing refresh page with response redirect. The button has a response redirect code. I want to deactivate my button after forwarding. Response redirect to the page because I've never done the switch is not passive.

What I have tried:

I tried response.write and jquery

C#
Response.Redirect("~/flows/Edit?id=" + flowId);

JQuery;
JavaScript
$(function () {
  $("#sms").click(function () {
    var $foo = $(this);
    if(!$foo.data('clicked'))
    {
      alert("SMS sent successfully!");
    }
    else {
      alert("You've already sent this sms.");
    }
    $foo.data('clicked', true);
  });

a href;
HTML
<a class="btn btn-default" id="sms">Sent SMS</a>
Posted
Updated 15-Oct-18 0:14am
v2
Comments
Kornfeld Eliyahu Peter 14-Oct-18 15:23pm    
Unclear...
When you redirect to an other page, usually your previous page replaced so none of it's content appears anymore... So what button do you want to disable?
[no name] 14-Oct-18 16:05pm    
I'm using response redirect on the update page. so the page refreshes itself after the update. I have an 'send appointment sms' button on my update page. I want to give the 'sms sent' warning when they click this button once. If you click this button for the 2nd time 'already sms thrown' I want to give the warning.
Kornfeld Eliyahu Peter 14-Oct-18 16:21pm    
You probably do it wrong, but we can't help without some code to fix...
[no name] 15-Oct-18 3:34am    
How do I add a picture to a comment?
Kornfeld Eliyahu Peter 15-Oct-18 3:36am    
You can't...
Copy code as code - and format it...

1 solution

You are not following along, a page once redirected will not contain the previous state, unless you preserve it using server-side code or the client-side code.
JavaScript
if(!$foo.data('clicked'))
This requires that your element contains a data property, or that you attach a data property on runtime. Otherwise, it will be false (your condition being true), it will always try sending an SMS. Then you do this,
JavaScript
$foo.data('clicked', true);
You try making sure that the button now has the data property of clicked, and it set to true. But that is where your problem arises. After this, your page refreshes and the DOM reloads the HTML content and in this content there is no data property for the hyperlink (your button).

You can solve it in two ways. First one is that you employ a server-side code and render the data property on demand, such as,
C#
ViewBag.BtnClicked = true;
Response.Redirect("~/your-url");
Then in the client-side, render the control like,
HTML
<a class="btn btn-default" @if(ViewBag.BtnClicked != null) { <text>data-clicked="true"</text> } id="sms">Sent SMS</a>
This will render the hyperlink with the property you wanted to be assigned. Second way is using the JavaScript's libraries and tools, one of such is localStorage[^] API. Using this you can store the state of the values in the browser, instead of storing them on the server. In this you can do,
JavaScript
$(function () {
    $("#sms").click(function () {
        var btnClicked = localStorage.get($(this)); // Passing the object as key
        // So that we can utilize same function for multiple elements.
        if(!btnClicked)
        {
            alert("SMS sent successfully!");
            localStorage.set($(this), true); // Set that this button has been clicked.
        }
        else {
            alert("You've already sent this sms.");
        }
        // No need to run the code if it has been set already.
    });
});
This will be a bit tricky if you have multiple buttons on the page and you want to control which of the buttons have been clicked and which of the buttons are disabled/enabled. Same is true for server-side as well.

Read more about .data()[^] function in jQuery.
Check out the localStorage examples on MDN: window.localStorage - Web APIs | MDN[^].

Edit
Also, I forgot to write you can always consider using Ajax and sending a background request, which will not refresh the page. This way your SMS will be sent, your data property will be added, and your code will work too. You can read the following link to learn more about sending Ajax requests using jQuery.

jQuery.ajax() | jQuery API Documentation[^]
 
Share this answer
 
v3
Comments
[no name] 15-Oct-18 8:44am    
really thank you very much for your comment but the answers you suggested did not work :(
Afzaal Ahmad Zeeshan 15-Oct-18 18:15pm    
What was the problem that you encountered?
[no name] 16-Oct-18 3:33am    
sending sms directly, not even alert:)
Afzaal Ahmad Zeeshan 16-Oct-18 7:12am    
That is because you are not preventing the default action to take place. Use event.preventDefault(); under the else condition.
[no name] 16-Oct-18 7:47am    
where do I use this code in the example you're giving? I'm a little bad about MVC.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900