Is it possible to deactivate the onclick event following a successful ajax request?

I am looking to disable the onclick event after a successful ajax request.

<div class="report_button" id="report_button" title="Reportthis" style="width:65px;height:15px;" onclick="reported_text(user_id,lead_id);">Report</div>

This is the div that I would like to disable after it has been clicked.

function reported_text(user_id,lead_id){
    new Ajax.Request("/agent/report/lead-refund",
    {
        method:"POST",
        parameters:"user_id=" + user_id + "&lead_id=" + lead_id ,
        onSuccess: function(transport){
            alert("Thank you for your response");
            jQuery('#report_button').attr("disabled", "disabled");
        },
        onFailure: function(transport){

            $('tag_error_status').innerHTML = '';
                alert("Unsuccessful request processing. This will be rectified soon.");
        }
    });
}

Is there any way to achieve this? The div is used by multiple users, and I need it to only be disabled for a specific user.

javascriptjqueryhtmlcssajax

Answer №1

 new Ajax.Request("/agent/report/lead-refund",
    {
        method:"POST",
        parameters:"user_id=" + user_id + "&lead_id=" + lead_id ,
        onSuccess: function(transport){
            alert("Your response has been received");
            jQuery('#report_button').hide();
        },
        onFailure: function(transport){

            $('tag_error_status').innerHTML = '';
            alert("We were unable to process your request at this time. Please wait for rectification.");
        }
    });

To achieve this, you have the option of using the hide function or 

$("#report_button").attr("onclick","")

Answer №2

Depending on how you added the listener, choose the appropriate method: if you utilized $(document).on, then use:

$(document).off("click", "#report_button");

If you used $("#report_button").on, then use:

$("#report_button").off

Alternatively, you can simply do:

$("#report_button").click(function(){ return false; });

Answer №3

To prevent clicks, you can use the following method:

document.getElementById("report_button").onclick = function() {return false;};

I came across this code snippet on this link

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to include the title "addmoves" to the server using AngularJS?

https://i.sstatic.net/yR2fk.png Furthermore, I am looking to include a button that allows users to add additional movies. The goal is to input multiple sets of data simultaneously, such as: newMovies = [ { movieName:"", director:"", release ...

javascriptangularjs

Implementing a ranking system in Rails 4

After diving into the world of ranked model and exploring a useful tutorial on sortable tables, I find myself struggling with an issue that's making me pull my hair out! The core problem lies in managing the sorting of cards within a deck on the deck ...

jqueryruby-on-railsajaxjquery-uiruby-on-rails-4

Tips for submitting a request following a change in the variable

I am in the process of developing a React application and I have implemented Auth0 for authentication. My goal is to initiate an HTTP request upon page refresh, but only if the variable isLoading is false. This way, I can access the user object once the ...

javascriptreactjstypescriptnext.js

Using " " to split a name into two lines is not being recognized

My issue involves the display of tab names in two lines within multiple tabs. You can view the demonstration here. I attempted to use the \n character while setting the tab name but it was not recognized. Any suggestions on how to achieve this? Here ...

javascripthtml

Elevating the Material Design Lite Progress bar using ReactJS

I currently have MDL running with React and it appears to be functioning properly. The Progress Bar is displaying on the page as expected, loading with the specified progress on page load when a number is entered directly: document.querySelector('#qu ...

javascriptreactjsmaterial-design-lite

When a new element is introduced, onmouseenter feature assigns a unique dynamic function variable

I am incorporating elements generated by Javascript using a for loop. My goal is to pass different variables to a function for each element. Check out my code snippet: var thumbnail_box = document.createElement("div"); thumbnail_box.onmouseenter = functi ...

javascriptjquery

Using AngularJS, generate a JSON array with a specified key

Looking to create a JSON array structure with keys using AngularJS, but unsure how to push data in order to achieve this. The goal is to generate a JSON array based on the provided data below. $scope.category = [{"id": 20, "name": "vegetable"}, {"id": ...

javascriptangularjs

What is the best way to iterate through a collection of two or more arrays in order to determine the total length of all

https://i.stack.imgur.com/PpFlB.pngI currently have multiple Arrays containing various inputs this.listNumber = [ { "GenericQuestions": [ { "input": "long", }, { "input": & ...

javascriptangularjstypescript

Use JavaScript to gather various data forms and convert them into JSON format before transmitting them to PHP through AJAX

My understanding of JSON might be a bit off because I haven't come across many resources that discuss posting form data via JSON/AJAX to PHP. I often see jQuery being used in examples, but I have yet to delve into it as I've been advised to firs ...

phpjavascriptajaxjson

Having problems saving data with JQuery.ajax

Is there a way to store data from a Textbox when the Button is clicked? I am currently using JQuery AJAX to accomplish this task, as shown below. Please note that these tags are placed inside the theme function. function theme_user_post_block($vars) { $t ...

jsonjquerydrupaldrupal-7

Communication between portlets cannot be cast to an ActionResponse

I am currently in the process of developing a web application on Liferay 6.2 using JSF Primefaces 5.3, running on Tomcat. The challenge I am facing involves having Portlet 1 and Portlet 2 situated on the same page. My objective is to manipulate the state ...

ajaxjsfprimefacesliferay

Issues may arise in TypeScript when you are working with an array of objects along with other properties within a type

I am encountering an issue with an object structure similar to the one below: let Obj = { ['0'] : { mode: 'x' }, getMode: () => 'x' } The problem arises when I attempt to create a type definition as shown here: type Obj = ...

javascripttypescript

In an AngularJS custom filter function, the error message "keys is not defined" is displayed

As I was reviewing examples in an Angular JS book, I came across a concept that has left me puzzled. It involves the use of custom filters with ng-repeat. Below are the code snippets: <a ng-click="selectCategory()" class="btn btn-block btn-default btn- ...

javascriptangularjs

How to retrieve all the text inside an element using Protractor and Selenium

<div class="test"> <span> <div>CONTENT </div> </span> <div> <ul> <li> <span>More text</span> EXAMPLE1</li> <li>EXAMPLE2</li> ...

javascriptangularjsseleniumselenium-webdriverprotractor

How can JSON data be passed to the Google Charts API?

I am currently working on a project that involves retrieving JSON data from a website and visualizing it on a live graph using the Google Charts API. Despite my efforts, I am unable to get the chart to display properly. Can someone please guide me in the r ...

javascripthtmljsonchartsgoogle-visualization

Exploring Data within Data Structures

I am currently making two JSON requests in my code: d3.json("path/to/file1.json", function(error, json) { d3.json("path/to/file2.json", function(error, json2) { }); }); The structure of json 2 looks like this: [ { "city" : "LA", "locati ...

javascriptjsond3.js

Switching images using jQuery when hovering over navigation bar items

I'm attempting to implement a jQuery function that swaps images in the navigation bar based on user hover actions. The image displayed should vary depending on the height of the element being hovered over. Currently, I have the following code which i ...

jquery

Does anyone have experience using the Ajax load more plugin for WordPress?

Is there a way to incorporate custom jQuery into the Ajax load more repeater Template on WordPress? ...

ajaxwordpress

Using SVG background images in Internet Explorer versions 7 and 8: a guide to HTML, CSS,

I have created a unique SVG image to use as a background, but it's not displaying in Internet Explorer 8 and earlier versions. I tried using tools like or http://code.google.com/p/svgweb/, but they only support SVG for IMG and Object elements, not ba ...

htmlcssinternet-explorer-8svgbackground-image

Align the div to the left with text or a paragraph displayed on the right side

Check out my js fiddle below: https://jsfiddle.net/9yj63s3f/ Here is the CSS code snippet: .viddiv{ float:left; width:50%; } .vidholder{ position:relative;height:0;padding-bottom:50%; width:50%; float:left; } iframe{ position:abso ...

htmlcss