Modifying the InsertionMode of an MVC Ajax form using JavaScript?

Is it possible to modify certain MVC Ajax Form parameters like InsertionMode or LoadingElementId using client-side javascript?
If so, how can this be achieved?

Here is an example of a MVC ajax form :

@using (Ajax.BeginRouteForm("DevicesByObjectName", new AjaxOptions
{
    InsertionMode = InsertionMode.InsertBefore,
    UpdateTargetId = "Devices",
    LoadingElementId = "LoaderContents",
    OnSuccess = "MoreDevicesOnSuccess",
    OnFailure = "MoreDevicesOnFailure",
    OnBegin = "MoreDevicesOnBegin",
    OnComplete = "MoreDevicesOnComplete",
}))
{
    <div>
        @Html.AntiForgeryToken()
        <input type="hidden" value="@Model.Object.Id" id="ObjectId" name="ObjectId" />
        <input type="hidden" value="2" id="PageNumber" name="PageNumber" />
        <input type="hidden" value="" id="Filtering" name="Filtering" />

        <div class="center-block" style="max-width: 360px;">
            <input type="submit" value=" more" class="btn btn-primary btn-lg btn-block center-block" />
        </div>
        <div id="LoaderContents" class="ajax-loader center-block hidden"></div>
    </div>
}

Answer №1

CreateForm creates a <form> element with various data-xxx attributes determined by the AjaxOptions, as shown below:

<form ... data-ajax-loading="#LoaderContents" data-ajax-mode="before" ...>

You can access and modify these attributes using jQuery's .data() or .attr() functions. For instance, for the form that is generated by your helper:

console.log($('form').data('ajax-mode')); // outputs 'before'
$('form').data('ajax-mode', 'after'); // changes the insertion mode
console.log($('form').data('ajax-mode')); // now outputs 'after'

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

Interacting with PHP through JavaScript function calls

I am facing some frustration with my website due to an issue involving PHP. When I retrieve data from a PHP file, it returns a JSON list like this: {"Data":{"Recipes":{"Recipe_5":{"ID":"5","TITLE":"Spaghetti Bolognese"},"Recipe_7":{"ID":"7","TITLE":"Wurst ...

Executing a function from a JavaScript file within Robot Framework

It is possible to run javascript from a file. Run JavaScript ${CURDIR}/js_to_run.js However, I am wondering how to call a function by its name from this file? ...

Acquiring exclusive files from Laravel 8 storage directory using JavaScript

I find myself in a specific situation: Working with a Laravel 8 application. My users upload STL files, which are stored in the storage/app/users/{userid} directory. These STL files are private and not accessible to everyone as they are not located in the ...

Utilizing Browserify to Load Node.js Module

My current setup involves using Browserify to load a module in JavaScript. However, I keep encountering the following error: https://i.sstatic.net/vlrL1.png Despite my efforts, I can't figure out why this issue persists. I have a "package.json" file ...

Version 5.0.4 of Mui, when used with makeStyles and withStyles, is experiencing issues with applying styles to Mui

I've been diving into a react project using Mui v5.0.4 and encountered an unexpected issue with my custom styles. Initially, everything was functioning smoothly, but suddenly the styles I had defined were no longer appearing as intended in components ...

A guide on incorporating LINQ in the Microsoft ClearScript V8 platform

Currently, I am making use of microsoft.clearscript.v8 in ASP.Net Core MVC. The following code snippet can be found in my Home controller: public async Task<IActionResult> Index() { using (var engine1 = new V8ScriptEngine()) { engine1 ...

Why has the phrase "The current context does not contain the name 'ScreenshotImageFormat'" become obsolete?

Each month, I have a program that I use to test various website pages using Selenium testing. Afterwards, I upload the screenshots of the output to a specific location. This time, unexpectedly, the program encountered an error and suggested that I run the ...

Processing the retrieved object from Dropbox API using Node.js and Express

I've been attempting to carry out a simple task like uploading a file to Dropbox. The file uploads successfully, but I'm in need of the response that contains details such as the file name, size, and path. I understand that I'm getting lost ...

Should embedded class/object be serialized separately or as a string?

Currently, I am working on creating a MongoDB cache for the asp.net webapi output cache system. (Although I acknowledge that redis would be a more efficient option, I need to stick with MongoDB for now!) So, my implementation involves a class called Cache ...

Azure B2C Custom Attribute Graph API allows users to create and manage custom

Having trouble accessing custom attributes with the graph API. Currently utilizing Azure.Identity 1.5 package and Microsoft.Graph v4 package. var selects = $"givenName,surName,displayName,identities,mail,mobilePhone,{B2CHelper.GetCompleteAttributeNam ...

Understanding how to extract data from a nested JSON response in ASP.NET MVC

I retrieved data successfully from a simple json using this link and displayed it on the view with the code below. SpeciesController.cs using diversity.Models; using System; using System.Collections.Generic; using System.Linq; using System.Web; using ...

How can JavaScript be used to toggle the visibility of text on a webpage

Can anyone help me with a problem I'm having toggling text? I have a truncated text and I want to be able to switch back and forth between the truncated text and the original text on button click. Here is a link to the pen. var myButton = documen ...

Tips for handling ajax-based sub components in a Rails 3 application?

Currently, I am in the process of revamping a Rails 3 application and I'm faced with the challenge of incorporating ajax-based sub components. The specific scenario involves enhancing the 'dashboard' controller, which is currently rendered t ...

Store <td> in a variable

At the moment, I have a script that allows users to input an item name, along with its size, color, and other options. Each of these entries is saved as individual items with their custom specifications, such as a black t-shirt in large size. The script c ...

Unable to retrieve the value of ng-model using $scope

Having some trouble getting the ng-model value when clicking a button that triggers a function to add each ng-model value to an object. Interestingly, when trying to get the value of $scope.shipNameFirst, it shows up as undefined in the second example. I& ...

Managing JSON data structures

In the process of developing a Chrome extension that is intended to extract the YouTube video IDs of the top 3 search results based on an input string, I have encountered a roadblock. The current code snippet looks like this: var items = []; function get ...

Having trouble connecting the HTML file with the JavaScript file

This is my unique HTML file <!DOCTYPE html> <html> <head> <script src="ll.js"></script> </head> <body> <link rel="stylesheet" href="home.css"> ...

incorporating a dynamic parameter into the payload of an AJAX post request

I'm currently working on a function call where I want to extract the value of the variable data and place it in the data section of the function. However, despite my efforts, I haven't been successful so far. In PHP, I am attempting to retrieve t ...

The Express.js feature "app.use() mandates the use of middleware functions"

Currently, I am delving into learning Express.js 4 and Node, but I seem to have hit a roadblock with an error that has me stumped. I'm attempting to utilize the node-sass package to compile my sass code; however, I've encountered obstacles in ge ...

Unable to locate the source maps for the combination of Karma, Jasmine, TypeScript, and Webpack

In an attempt to test my TypeScript application thoroughly using Karma, Jasmine, and Webpack with code coverage, I have encountered some challenges. While I can successfully run tests, generating coverage seems to be a hurdle. The usage of karma-remap-cove ...