Why isn't the MVC AjaxOption displaying the spinner in the correct location?

I am attempting to display a spinner on an overlay within a partial view while loading another partial view. However, it is displaying where the div was originally declared.

Index.cshtml

<div id="DivEmailContainer" style="display:block" class="row">
    @Html.Partial("_DisplayContactEmail",Model)
</div>
<div id="spinnerdiv" style="display:none;">         
    <i class="fa fa-spinner fa-pulse fa-3x"></i>
</div>

_DisplayContactEmail.cshtml

<td class="">
     @Ajax.ActionLink(
           "Edit",
           "GetEditEmail",
           new { CommunicationLocation = commemail.Location },
           new AjaxOptions()
           {
                HttpMethod = "Get",
                UpdateTargetId = "DivEmailContainer",
                InsertionMode = InsertionMode.Replace,
                LoadingElementId = "spinnerdiv"
           },
           new { @class = "linkbutton" })

</td>

It's supposed to appear on top of the partial view.

What could be causing this issue?

jquerycssajaxasp.net-mvcasp.net-mvc-4

Answer №1

The option LoadingElementId should be set to the id of the element that you want to show while an Ajax call is made and until a response is received from the server. In this scenario, the id of a div element is being used below a partial view on your page. To have the spinner displayed above the partial view, you can simply rearrange the order of the divs:

<div id="spinnerdiv" style="display:none;">
    <i class="fa fa-spinner fa-pulse fa-3x"></i>
</div>
<div id="DivEmailContainer" style="display:block" class="row">
    @Html.Partial("_DisplayContactEmail",Model)
</div>

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

Refresh the PartialView only after clicking submit

I am struggling with updating only the contents of my partial view after clicking an input type="submit button. My goal is to refresh just the partial view and update it with the updated model from the controller code, without refreshing the entire page. S ...

javascriptjqueryasp.net-mvc-4razor

My HTML components are not showing alert messages at the top as expected

My application's alert message is supposed to stay on top of all other HTML elements as the page scrolls. However, it seems to be going behind certain components instead of staying on top like it should. This issue is puzzling because all components u ...

cssangularalert

Accessing the Server in Global.asax in ASP.NET MVC 4

As our ASP.NET MVC 4 application initializes, there is a need to determine how to configure a property on a particular Log4Net Appender, based on the specific context of the site. Is it possible to retrieve the '' segment during the initial load ...

asp.netasp.net-mvc-4razor

Navigate to the following input field upon a keyup event occurring within the table

I have a table that contains multiple input fields in a single row within a td element. I am trying to implement functionality that will automatically shift focus to the next input field when any number is entered. The code works perfectly without the tabl ...

javascriptjqueryhtml

varying perspectives in different browsers within my React application

I'm experiencing inconsistencies in the appearance of my website when viewed on Chrome mobile compared to Safari on an actual phone. Despite using prefixes for all my styles (WebKit, etc.) and incorporating normalize.css to address any issues, the dis ...

htmlcssreactjsresponsive-designcross-browser

Tips for extending hover duration in CSS

a:hover + #menu { display: block; position: fixed; } My CSS for a hover effect is causing the menu to disappear quickly once I move the mouse away. What steps can I take to fix this issue? Would utilizing JavaScript provide a better solution, and if so, ...

javascripthtmlcssmenuhover

Replacing text in the main navigation bar with sIFR

Could this menu layout be improved? <div class="navigation"> <ul id="nav-menu"> <li class="active"> <div class="sifr-r active"><a href="#" title="home" class="top-link"><span class="blue-small">01.</span& ...

htmlcsssifr

Strategizing button placement for maximum profit expansion

I am attempting to design a budget board using Bootstrap 4. Here is what I have done so far, and I want the buttons to look like the image below. I'm clueless on how to achieve this.. Current Output: Desired Output: .btn-warning { border: 1px s ...

cssbootstrap-4

Looking for a cool way to conduct polls!

My website features real-time monitoring capabilities. The page refreshes its content every second by calling a webform that returns XML data with updates. While this method is straightforward, it lacks elegance in my opinion. Here is the JavaScript code: ...

jqueryasp.netajaxsignalr

Resolving jQuery reference to an empty value in a textarea

I have been working on form validation to check for unfilled entries in my form, which includes inputs, textareas, and selects. While I was successful in validating the input fields, I encountered difficulties with the textarea (and haven't attempted ...

jquery

What are the essential PhoneGap environment variables for leveraging AJAX data services in a development setting?

We are in the process of creating a PhoneGap application and are currently facing a challenge with our data service setup. Here's the code snippet we are working with: $.post(rooturl + '/data/something', { a: 1 }, (res) => {}); The prob ...

javascriptajaxnode.jscordovaphonegap-plugins

Retrieving data from various checkboxes

Here are some checkboxes that I have: <input type="checkbox" class="calc" name="access[a]" value="1" /> <input type="checkbox" class="calc" name="access[b]" value="2" /> <input type="checkbox" class="calc" name="access[c]" value="3" /> & ...

jqueryajaxcheckbox

Ways to create a flexbox that can scroll and includes two divs that fill the entire screen

I need to create a flexbox layout with two divs that split the screen evenly. However, I want the flexbox to change direction from row to column and make each div full width and height of the screen when the viewport is smaller than 800px, creating a scrol ...

htmlcssresponsive-designflexbox

Creating a Cross Fade Animation effect with the combination of CSS and JavaScript

I've been attempting to create a similar animation using html and css. Below gif shows the desired outcome I am aiming for: https://i.sstatic.net/YsNGy.gif Although I have tried the following code, I have not been able to achieve the desired result ...

javascripthtmlcss

Real-time Updating of ChartJS Charts in Rails Using AJAX

I am currently working with Rails 5 and the latest version of ChartJS library (http://www.chartjs.org/docs/). My goal is to retrieve the most recent 20 items from the SensorReading model and update the Chart using setInterval and AJAX. I have successfull ...

javascriptjqueryruby-on-railsrubyajax

Display the query results on a separate blade

In my original attempt, I intended to display the results in a modal but later decided to show them in a different blade. My goal is to fetch all comments related to a post using its post_id. However, I encountered the following error: The GET method is no ...

javascriptjqueryhtmllaravelbootstrap-4

Disable the spinning animation of the Bootstrap spinner to keep it still and static

I am currently utilizing bootstrap 4 for my project. When a particular event starts, I have successfully managed to make the spinner spin with the code snippet below: <span class='spinner-border spinner-border-sm text-primary' role='statu ...

javascripthtmlcssbootstrap-4

What is the correct way to reference this data element in Ajax?

I am attempting to retrieve the elevation data for 732 meters from the JSON API response below: {"results":1,"data":[{"wind":{"degrees":200,"speed_kts":6,"speed_mph":7,"speed_mps":3,&quo ...

javascriptjqueryjsonajax

The alignment of buttons is not defined for ASP buttons and Bootstrap dropdowns

I'm having an issue with the placement of my ASP button and button dropdown list. The dropdown always appears below the other buttons, but I want it to be in the same row as the other buttons. Below is a screenshot showing the current layout of the b ...

c#cssasp.nettwitter-bootstrap

After implementing JsonSerializer converters, the data retrieved from FromBody is unexpectedly null

In my .Net 6 Startup file, I included the following converters: services.AddControllersWithViews().AddJsonOptions(options => { options.JsonSerializerOptions.Converters.Add(new DateTimeConverterFactory()); options.JsonSeri ...

c#asp.net.netasp.net-mvcasp.net-core