What could be the reason that the MVC controller action method marked as HttpPost is not being triggered by an external JavaScript file?

Below is the View cshtml code that is relevant:

<tbody>
    @foreach (var job in Model.JobsList)
    {
        <tr>
            <th onclick="OnJobSelected('@job.JobID')">@job.JobTitle</th>
            <th>@job.Status</th>
            <th>@job.TaskCount</th>
            <th>@job.MostRecentTask</th>
        </tr>
    }
</tbody>

Here is the external javascript file that contains the function OnJobSelected:

function OnJobSelected(selectedJobID) {
    $.ajax({
        type: "POST",
        url: "JobsSummary/JobDetailsView",
        data: { selectedJobID: selectedJobID },
        error: function () {
            alert("fail");
        },
        success: function(){
        alert("success");
        }
    });
    }

Despite always displaying success, this code doesn't call the desired Controller ActionMethod:

[AllowAnonymous]
        [HttpPost]
        public ActionResult JobDetailsView(/*data from view*/string selectedJobID)
        {
            int i = 09;
            //Received JobID from View (Client)
            //Navigate to the appropriate view 
            return View();
        }

Answer №1

Make sure to use relative paths for the URLs. Here are a couple of examples:

url: "../TaskSummary/TasksSummaryDetailsView",

Or you can use a URL helper function for better readability:

url: '@Url.Action("TasksSummary", "TasksSummaryDetailsView")',

Answer №2

I successfully modified the ajax call by replacing the URL line with the provided code

url: 'TasksDetailsSummaryView'

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

Using React JS to send an object as an argument to an action function

How do I pass the "fields" object to the action "createPost" after creating it with validation in a form? Do I need to use "props" or could it be related to the dispatcher line? import React, { Component } from 'react'; import Header from ' ...

What steps should I take to ensure that the getElementsbyName function works properly on both Internet Explorer and Firefox browsers

Encountering a JavaScript error in IE but not in FF ("document.getelementsbyname(...).0.innerhtml is null or not an object": var oldVal = parseInt(document.getElementsByName("outSL")[0].innerHTML); //value pulled from the database Here is the asp.net c ...

Is there a way to determine if a JavaScript alert box is currently open in a browser using Ruby and Selenium? If so, what steps can be taken to close

During the process of transitioning between pages with Selenium functions, there are instances where a confirm box appears with options to click OK or cancel. What is the proper way to detect this box and dismiss it? Appreciate the help ahead of time! ...

A guide on transforming JSON data into HTML using Rails

I'm struggling with parsing JSON on a webpage. My webpage is designed with circles, where clicking on a circle triggers a call to the controller to retrieve specific information from a database and display it as graphs and text. The issue I'm fa ...

Angular 2 is throwing an error: Unhandled Promise rejection because it cannot find a provider for AuthService. This error is occurring

My application utilizes an AuthService and an AuthGuard to manage user authentication and route guarding. The AuthService is used in both the AuthGuard and a LoginComponent, while the AuthGuard guards routes using CanActivate. However, upon running the app ...

Having trouble with loading a new page on an HTML website

My website is successfully updating the database, printing all values, but for some reason the new page is not opening. The current page just keeps refreshing and I'm receiving a status of 0. Below is my code snippet: try{ console.log("here1 "+e ...

Clicking anywhere outside a popup menu in JavaScript will deactivate a toggle and hide it

I have three different menu options: home,Clinic, and About. When I click on the Clinic option, a Megamenu appears, and if I click on it again, the Megamenu is hidden. I want the Megamenu to hide when clicking anywhere on the webpage. The issue is that cu ...

Building module dependencies in the Dojo dojo

I'm in the process of utilizing the Dojo builder to compile a unified file that encompasses all the necessary modules for my application, excluding the application itself. Below is an illustration of a layer definition: layers: { 'dojo/dojo ...

Vue CLI configured with Webpack is experiencing malfunctions following a recent update to dependencies

I'm sharing my package.json details below: { "name": "x", "version": "1.0.0", "main": "index.js", "license": "MIT", "scripts": { "dev": "webpa ...

interactive vuetify navigation trail elements

Currently working on a vuetify project and I'm facing an issue with implementing breadcrumbs. The problem arises when clicking on a breadcrumb, as it deletes the ones that come after it in the list. I've tried some code snippets but could only ma ...

What is the process for selecting and clicking a specific div with a distinct class name in HTML

Hey there! I'm a beginner at coding with puppeteer and I have a question. How can I make my code click on this image: (image) The current code I have looks like this: const puppeteer = require('puppeteer'); (async () => { const bro ...

Why is the Axios instance/function not being passed the argument?

I am currently working on refactoring a next.js App that has a functioning axios call. However, I have encountered an issue with my new function not receiving arguments. The problem consists of two main components: my next.js page and an external custom m ...

KendoGrid encountered a JavaScript runtime error due to an invalid template

Having some trouble navigating the Kendo world and encountering an issue with a grid that is set to a JSON array data source. An error message stating "JavaScript runtime error: Invalid template" is displayed, specifically referencing null values in the d ...

How can I update the image source using Angular?

<div class="float-right"> <span class="language dashboard" data-toggle="dropdown"> <img class="current" src="us-flag.png" /> </span> <div class="dropdown dashboar ...

Attempting to remove my user profile, but encountering technical difficulties with my code

I am facing an issue with my ajax code while trying to delete a user. The problem is that the ID of the selected user is not being picked up by the ajax script. The delete option for the user is located within a table that is generated through another aja ...

Trouble with Directive - the watch function isn't functioning as expected

After spending countless hours and trying almost everything, I can't seem to get it to work... I have an Angular directive that calls another Angular directive. I need to handle events in the child directive. So my child directive looks like: ...

Send the output of an asynchronous ajax request to the designated function within the jQuery Validation plugin

Utilizing the jQuery Validation plugin (JVP) for server-side validations via ajax has been seamless, except for one hitch: JVP struggles with performing remote validation on blank fields. While it's easy to use its default required: true rule for sim ...

Exploring Selenium: Techniques for examining the source code of an unidentified function

I'm fairly new to using Selenium. I have come across this javascript code snippet and I am attempting to use Selenium to inspect the script, but I haven't had much luck so far. My main goal is to employ Selenium to access/inspect the script in or ...

Need help with functions in JavaScript?

I'm struggling with understanding some code related to javascript and angularjs. I came across this line - !function(a,b,c){}(x,y,z) - and I can't make sense of it. It's something new to me and I would appreciate any help in clarifying its p ...

Having difficulty transmitting extensive data in a Jquery ajax request

Hello, I'm currently working on a MVC4 application where I am saving values to a Database. However, I encountered an error stating: "The request filtering module is configured to deny a request where the query string is too long." I am using an Ajax ...