Triggering controller actions in JavaScript with bootgrid

How can I trigger a Bootstrap Modal that is located in a partial view within a controller using jQuery-Ajax and Bootgrid's JavaScript?


var grid = $("#grid").bootgrid({
    ajax: true,
    url: "/Currency/listCurrencyJson",
    formatters: {
        "commands": function(column, row) {
            return "<button type=\"button\" class=\"btn btn-default btn-lg delete\" data-row-id=\"" + row.id + "\"><span class=\"glyphicon glyphicon-star\" aria-hidden=\"true\"></span> Star</button>" +
                "<button type=\"button\" class=\"btn btn-xs btn-default command-edit\" data-row-id=\"" + row.id + "\"><span class=\"fa fa-pencil\"></span></button> " +
                "<button type=\"button\" class=\"btn btn-xs btn-default command-delete\" data-row-id=\"" + row.id + "\"><span class=\"fa fa-trash-o\"></span></button>";
        }
    }
}).on("loaded.rs.jquery.bootgrid", function() {
    /* Executes after data is loaded and rendered */
     grid.find(".command-edit").on("click", function(e) {
        alert("You pressed edit on row: " + $(this).data("row-id"));
    }).end().find(".delete").on("click", function deleteCurrency(id) {
        $.ajax({
            url: '/Currency/createCurrency',
            type: "POST",
            data: { "row-id": "row-id" },
            success: function() {
                //alert("Done");  
            }
        });
    });
});

Answer №1

Using ActionLink in C# can create a link rather than a button. A simple alternative is to replace your buttons with styled links using CSS:

Instead of relying on the C# ActionLink method, you can manually create an HTML link for the same output:

<a href="/Currency/Delete" class="button-link-class">Read More<span class="arrow">→</span></a>

CSS:

.button-link-class
{
     font: bold 11px Arial;
     text-decoration: none;
     background-color: #EEEEEE;
     color: #333333;
     padding: 2px 6px 2px 6px;
     border-top: 1px solid #CCCCCC;
     border-right: 1px solid #333333;
     border-bottom: 1px solid #333333;
     border-left: 1px solid #CCCCCC;
}

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

After the geolocation is retrieved, employing a callback function

I have been developing a web service program that tracks the location of users using geolocation. The program initiates geolocation to locate the user and then proceeds to record the location. However, since geolocation relies on a callback function to ret ...

jQuery swap- enhancing the appearance of numerical values

I am looking to customize specific characters within my <code> tag. While searching online, I came across the .replace() function but encountered issues when trying to style numbers. My goal is to change their appearance without altering the text its ...

A Guide to Retrieving the First Child Element's Text with Jquery and a Class Selector

I want to extract the text from the first child small element inside a dynamically generated div. The structure looks like this: <div class="NDateCount" style="display:inline-block"> <!--Issue to solve--> <small ...

The DirectoryNotFoundException error in Ajax FileUpload Route/Querystring suggests that the specified directory

I have a WebApp that includes an upload section. I'm using an Ajax Toolkit Fileupload control to upload the files to a sql database. After encountering a similar error as described in this post, I spent hours testing and finally identified the roo ...

Using React to fetch data and then mapping it inside a function

I am facing an issue where I need to make a request for each item in the MAP, but I want to ensure that I wait for the response before moving on to the next object. Currently, my code is sending out all the requests simultaneously, causing the Backend to c ...

Utilizing absolute positioning with a rotated div element

The situation I am facing involves a parent div and child div. The child div is positioned absolutely with respect to the parent div and has been rotated by an angle of 90 degrees. Due to the fact that the origin is located at the center of the child div ( ...

React Select Event Bug: Not firing on subsequent attempts

My select filter menu has 5 different options that work fine when the page loads or refreshes. However, when I try to continuously select an option, it does not filter the content as expected. Here is a snippet of the code: <div className="filter_ ...

What about nested elements with percentages, set positions, and fixed placements?

Picture: https://i.sstatic.net/KFNR1.png I am working on a design with a yellow container div that I want to keep at 50% width of the window. Inside this container is a purple image div that stretches to 100% of the parent container's width, and ther ...

Error in React countdown functionality

Successfully integrating a vanilla JS countdown into a React component is challenging. Here is how I achieved it: import React, { Component } from 'react'; class CountdownComponent extends Component { constructor(props) { super(prop ...

Storing props in JSX components using variables in React.jsLearn how to set props in JSX components and

If I have already created a component: class Co extends React.Component { render = () => { const name = this.props.name; return ( <p>Hello, my name is {name}</p> ) } } and stored it in a variable ...

Dual models integrated into a single timepiece

Let's say I have a watch function that monitors a model in this way... $scope.$watch('number', function () { $scope.number = $scope.number.replace(/\D/, ''); $scope.number = $scope.number.replace(/\s+/g, '&a ...

Transferring an IONIC project to a different computer

Let me outline the current situation I am facing - I primarily work as a firmware developer rather than a software developer. Recently, a team member who was responsible for developing the front end of an application in IONIC has left the company, leaving ...

javascripttoggleClass execute with revert back

I'm trying to use addClass on my button with the Bootstrap CSS active class. However, during debugging it seems to work, but then the addClass('active') action is reversed. Has anyone encountered this issue before? Here is my code: $ ...

Unexpected website icon shows up in my Node.js project

As a newcomer to working with the backend of Node.js, I'm facing an issue while trying to integrate favicons into my project using RealFaviconGenerator. Despite following the instructions provided, the favicons are not showing up on either my developm ...

deleting the selected list item with JavaScript

Currently, I am tackling a todo list project but facing a challenge in finding a vanilla Javascript solution to remove a list item once it has been clicked. Adding user input as list items was relatively simple, but I have come to realize that this specif ...

How can you locate and emphasize specific text within various elements using JavaScript?

Created a script to highlight linked text in another HTML page. <p>Click <span class="f1"><a href="#myModal" data-reveal-id="myModal">here</a>/span></p> <div class="leftspread"> <p class="table-caption"& ...

Error: Attempting to access property 'mouseX' of an undefined object was unsuccessful

Currently, I am utilizing AmCharts to generate a graph displaying payments made over time. The configuration setup for AmCharts seems accurate. Just to mention, I do not possess expertise in Javascript. Utilizing AmCharts 3.18.3.free The complete conso ...

How can I submit multiple dropdown menus when they are changed?

I recently added Four dropdown menus on my index.php page. <select name="filter_month" class="filters"> <option>Select a Month</option> <option value="1">January</option> <option value="2">February</optio ...

How to select child elements of the <video> tag using jQuery

I'm currently in the process of updating the src attributes for the <source> elements within my <video> container. Initial Markup <video id='myVidID' class='video-js vjs-default-skin' controls autoplay preload=&apo ...

What is the method for retrieving the Java List containing custom class objects defined within the <s:iterator> tag in a JSP file from within my JavaScript function?

Within my jsp file, I am retrieving a List of objects from my java action class (struts2) and displaying them. Now, I need to access these list objects within my javascript method. How can I achieve this? The code in mycode.jsp: <script type="text/jav ...