The jQuery notification box fails to appear on the screen

I am attempting to showcase a popup box from a div using the following code.

Despite successfully adding a record, the div does not show up. I have experimented with $("#div").html.

Script:

<script src="scripts/jquery-1.11.1.min.js "></script>
<script>
$(document).ready(function() {
   $('#users').submit(function() {
      $('#response').html("<b>Adding...</b>");
      $.post('controller_adduser.php', $(this).serialize(), function(data) {
         $('#response').html("<b>Adding...</b>");

         //// Show div Message box

      }).fail(function() {
         alert( "Posting failed." );
      });
      return false;
   });
});
</script>

DIV:

<div id="remote_modal" class="modal fade" tabindex="-1" role="dialog">
   <div class="modal-dialog">
       <div class="modal-content">
           <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
               <h4 class="modal-title"><i class="icon-accessibility"></i> Loading remote path</h4>
            </div>
            <div class="modal-body with-padding">
               <p>Added!!</p>
            </div>
            <div class="modal-footer">
               <button class="btn btn-warning" data-dismiss="modal">Close</button>
            </div>
         </div>
      </div>
   </div>

POPUP MESSAGE BOX

Answer №1

It seems like you are utilizing Bootstrap for your project. To make the modal appear, you will need to execute the .modal("show") command. Have you tried this approach? HTML:

<div id="remote_modal" class="modal fade" tabindex="-1" role="dialog">
   <div class="modal-dialog">
       <div class="modal-content">
           <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
               <h4 class="modal-title">
                     <i class="icon-accessibility"></i> 
                    <span id="response">Loading remote path</span>
               </h4>
            </div>
            <div class="modal-body with-padding">
               <p>Added!!</p>
            </div>
            <div class="modal-footer">
               <button class="btn btn-warning" data-dismiss="modal">Close</button>
            </div>
         </div>
      </div>
   </div>

JS:

<script src="scripts/jquery-1.11.1.min.js "></script>
<script>
$(document).ready(function() {
   $('#users').submit(function() {
      $.post('controller_adduser.php', $(this).serialize(), function(data) {
         $('#remote_modal #response').html("<b>Adding...</b>");
         $('#remote_modal').modal("show");
      }).fail(function() {
         alert( "Posting failed." );
      });
      return false;
   });
});
</script>

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

Split the string in JavaScript and then count the characters to decrypt

I am currently working on a task that involves splitting a string at every space. I have successfully achieved this using .split(" "), but now I need to determine the length of each individual string. My goal is to check if a given string includes a midd ...

When attempting to incorporate JSX or markup within React.js, the closing tags are mysteriously transformed into unreachable code

I am currently learning react-js and I have encountered a problem with my code. Whenever I try to add markup or JSX in the designated area 'write code', my text editor displays syntax errors, disables closing div tags, and even throws unreachable ...

How to display an HTML element conditionally with v-if based on a variable's value

Looking for a way to display a <div> element, including nested <div>s, based on the value of a variable. I'm currently using v-if, but open to better suggestions. I attempted wrapping the entire <div> in a <template v-if> as s ...

In node.js, there is no function called file.open for reading files

I'm trying to access a local text file (not through the web) in order to parse it into an array. However, I am encountering an error that says: "file.open is not a function" var app = require('express')(); var http = require('http&apos ...

Issues with functionality in VueJS - v-if and v-show are not functioning as expected

In the Vue DIV, there is a structure like this: <div class="row"> <div class="well chart-container"> <div id="chart" v-if="chartShown"></div> <h1 v-if="textShow ...

"Sending the real object as a parameter to a function when triggering an event

Whenever I click a button, I want to pass the 'contract' object into it. <td class="col-md-1" colspan="1" style="text-align: center; vertical-align: middle;"> <button class="btn btn-primary" data-ng-click="removeContract(ctrl.select ...

Having trouble removing lines from Router Link? Unfortunately, using style={{'textDecoration': 'none'}} doesn't seem to be doing the trick

Does anyone know why the text decoration is not working on my link when I use text-decoration none? Any solutions or suggestions would be greatly appreciated. Thank you in advance! Navbar.js file import React,{useState} from "react"; import { mak ...

Issue with the submission button not triggering onclick event correctly

I've been trying to add an onclick event to a submit button. I've searched various tutorial sites and followed all the suggestions, but none of them have solved the issue. Interestingly, when I include an alert in the function being called, it wo ...

Determine whether to create or update with a Node.js API

I have developed a nodejs API where users can add new entries by sending a POST request. If the entry already exists, it should be updated. However, I am facing an issue with the findOne() method from mongoose not triggering the update function as expecte ...

Determining if an element contains specific CSS properties and then applying those styles to its parent

I am trying to determine if the <img> element has inline CSS properties defined. If it does, I want to apply those CSS properties to its parent and remove the original CSS declaration. This is my attempt at solving the issue: var $el = $('.arti ...

Is it possible to incorporate a different website font into an email template?

Currently working on an email template and looking to match the font with my website. Is there a method to ensure my site's font carries over into the email template? Provided below is the HTML code: <!DOCTYPE html> <html> <head> ...

Utilizing jQuery in Selenium WebDriver - Converting a JSON Object to a WebElement

Currently, I am working with Selenium WebDriver and my goal is to execute jQuery code in order to locate certain elements. The code snippet I have written is as follows: public function uploadGrantDoc() { $script = "return $('#itemlist .grant_fi ...

Issue encountered while trying to access PHP script within table data utilizing Ajax

I have a small project that involves displaying different news articles. I need to incorporate the news_all.php file into the table data in dashboard.php without using the include('news.php) function. Instead, I am utilizing Ajax methods to achieve th ...

The navigation bar in Bootstrap 3.2 expands in size as you scroll past it

Whenever I reach the bottom of the page, the navigation bar suddenly enlarges. The navbar is located at the top of my code. I attempted moving the navigation to the bottom of the code... but it didn't fix the issue... Could someone please identify wha ...

Why does Chrome keep retrieving an outdated JavaScript file?

Lately, I've been facing a frustrating issue that I just can't seem to figure out. Every now and then, when I update the JavaScript or CSS files for my website hosted on Siteground, Chrome simply refuses to acknowledge the changes. While other br ...

The functionality of the Disable Button is currently not working, even though it was previously

Recently, I implemented a small jQuery script to disable buttons upon submission in order to prevent double-clicking. To achieve this, I assigned the button_disable class to my input buttons (as sometimes there are multiple buttons on a form) and included ...

Is it possible to render array items into separate divs using the .map() method without displaying commas?

After extensive searching, I have only come across solutions that involve using .join() to combine the items into a single string. const createCard = () => { const pokemonTypes = ['grass', 'fire', 'water']; return ...

Eliminating the GWT Window Padding in LibGDX

Explanation: I am currently in the process of deploying a LibGDX GWT application to the browser. Challenge: In the image below, you can see the top left portion of my GWT application showcased by the large black rectangle. The issue here is the unwanted ...

Tips for fixing the error "npm ERR! code ELIFECYCLE" on Windows platform

Currently, I am delving into the world of javascript and to enhance my knowledge, I have decided to set up webpack for a new project. The issue I am facing is that when I execute the "webpack script" from the package.json file, it runs smoothly. However, t ...

Incorporate Ng-Survey multiple times within one component

Incorporating the ng-surveys template into my Angular application via has been successful. However, I encountered an issue where when using the template selector *ngFor to display multiple surveys on the same page, the browser treats all the surveys as id ...