prevent page to reload jquery - javascript

The code is working fine for me if the page is completely loaded But the issue is if the page is in loading mode I click on the link it reloads again how I prevent it from reloading.
$(document).ready(function(){
$('#myModal').on('show.bs.modal', function (e) {
e.preventDefault();
var key = $(e.relatedTarget).data('id');
$('#loadingmessage').show();
$.ajax({
type : 'post',
url : 'test.php',
data : 'key='+ key,
success : function(data) {
$('.modal-body').html(data);
},
complete: function() {
$('#loadingmessage').hide();
}
});
return false;
});
});
My Html is here
<a href='' data-toggle='modal' data-target='#myModal' data-id='1:2:3:4'>UP</a>
If page is completey loaded and i click on this the ajax call is works fine but when page is loading if i clcik the page starts reloading again how i prevent it to reload.
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Check Server Status</h4>
</div>
<div class="modal-body">
<div id="loadingmessage">Checking...</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

<a href='#' data-toggle='modal' data-target='#myModal' data-id='1:2:3:4'>UP</a>

Related

Modal Dialog is Loaded But Invisible

I tried to make a modal. I use AJAX to show the modal but the modal is invisible. When I use the button's trigger with data-toggle and data-target, the modal is showing up visible.
This is what I have tried to do
Check that all script is correctly loaded
Tried to reorder script
Delete fade class in modal and the modal visible but with bad UI
Change bootstrap version but result is same
This is my code
AJAX
$("body").on("click", ".btn-show", function (event) {
event.preventDefault();
var me = $(this),
url = me.attr("href"),
title = me.attr("title");
$("#modal-title").text(title);
$.ajax({
url: url,
dataType: "html",
success: function (response) {
$("#modal-body").html(response);
$("#modal").modal("show");
},
});
});
HTML Modal
<div class="modal fade" id="modal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header" id="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="modal-title">Form Input</h4>
</div>
<div class="modal-body" id="modal-body">
</div>
<div class="modal-footer" id="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary" id="modal-btn-save">Save
changes
</button>
</div>
</div>
</div>
</div>
SS modal exists but is not visible:
There are no errors with the modal, and the $("#modal").modal("show"); displays the modal just fine (see code snippet below),
Since the code snippet below works fine, it seems clear that the original code's "success" function is never called:
success: function (response) {
$("#modal-body").html(response);
$("#modal").modal("show");
}
I suggest adding an error function to the ajax parameters:
error: function (jsXHR, textStatus, errorThrown) {
// handle error here
}
From the jQuery docs:
error
Type: Function( jqXHR jqXHR, String textStatus, String errorThrown )
A function to be called if the request fails.
function showModal() {
$("#modal-title").text('Sample Title');
$("#modal-body").html('Sample Response');
$("#modal").modal("show");
}
<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<!-- scripts needed by Bootstrap -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<body class="p-2">
<button onclick="showModal()">Show Modal</button>
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header" id="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="modal-title">Form Input</h4>
</div>
<div class="modal-body" id="modal-body">
</div>
<div class="modal-footer" id="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary" id="modal-btn-save">Save
changes
</button>
</div>
</div>
</div>
</div>
</body>
I just fix this problem on Laravel Voyager Admin.
This is because I just declare two times bootstrap scripts.

bootstrap open modal from another page and javascript file

i try open modal from another page and javascript file and got only black screen
javascript file
$('.myModal').on('click',function(){
$.ajax({
type: "POST",
url : base_url +"/Time",
data: "_token=HZNyRybabXWcTwp4kbeVpVsUGiuiYzFBDdiRJtZk" ,
success: function(response)
{
console.log(response);
$('.Stime').html(response);
}
});
});
home page
<div class="Stime"></div>
<!-- Button trigger modal -->
<button type="button" class="myModal" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModals">
Launch demo modal
</button>
modal page
Time.html
<!-- Modal -->
<div class="modal fade" id="myModals" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
i dont know why i got only black screen

How to pass data-id variable from modal to php page

I have the following DELETE button that I am passing $userid through the data-id
<a href='#myModal' class='trash' data-id='".$userid."' role='button'data-toggle='modal'>
Delete</a>
I have the following modal
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Confirm Delete</h4>
</div>
<div class="modal-body">
<p>You are about to delete <b><i class="title"></i></b> record, this procedure is irreversible.</p>
<p>Do you want to proceed?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
Delete
</div>
</div>
</div>
</div>
And the following JS which gets the value of the DELETE button
$('.trash').click(function(){
var id=$(this).data('id');
$('#modalDelete').attr('href','delete_user.php?id=' + id);
});
I am trying to set the value of the "href" in the modal so that it can be passed to a php page called delete_user.php which deletes the user from the database. Anyone see where I am going wrong? I cannot get the href to go to the delete_user.php
you have mistake here data-id='".$userid."' should be data-id='<?php echo $userid;>'
<a href='#myModal' class='trash' data-id='<?php echo $userid;>' role='button'data-toggle='modal'>
Delete</a>
and for better approach, get rid of click function, use modal event and let bootstrap handle the rest
$(document).ready(function() {
$('#myModal').on('show.bs.modal', function(e) {
var id = $(e.relatedTarget).data('id');
alert(id);
$('#modalDelete').attr('href', 'delete_user.php?id=' + id);
});
});
Fiddle

Open Modal (bootstrap) from other html-file

I'm building a website using bootstrap. But i'm come to somewhat of an dead-end. i've created a modal from an given example (see below). As you might see, this is a modal taken straight from their website.
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Nieuwe Taak toevoegen</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
I open this dialog using a button.
<button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#myModal" >
But i want to keep my modals in seperate aspx/html-files. How can i open these modals when they are kept inside different html/aspx - files ?
example:
if the button is inside index.Html but the modal is inside newTaskModal.html, how would i open the modal? (If both are inside index.html, then there are no problems)
Note: I don't/can't use HTML5 (company-standards)
if you're using jquery, you could download the page using an ajax call:
$.ajax({
url: 'newTaskModal.html',
dataType: 'text',
success: function(data) {
alert(data);
// todo: add the html to the dom...
}
});
If you're building a single page application you might want to check out a framework designed to solve this type of problem:
durandal
Can you use PHP? If so there is simple solution.
Your index will be index.php and where you want to have your modal just place this code
<?php include "newTaskModal.html"; ?>
Also you could if you are using JQuery to load your html page into into a matched element.
$( "#result" ).load( "ajax/test.html", function() {
alert( "Load was performed." );
});
Go to http://api.jquery.com/load/ for more info.
STEP 1 Use below code for link:
<a class="btn btn-primary" data-toggle="modal" href="MyModal.html" data-target="#MyModal" data-backdrop="static">OPEN MODAL</a>
STEP 2 Use below code for modal window
<div class="modal fade" id="MyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog model-sm">`enter code here
<div class="modal-content"> </div>
</div>
</div>
STEP 3 Create MyModal.html and place some text.
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Title</h4>
</div>
<div class="modal-body">
Modal Contents
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-success">OK</button>
</div>
Note: This may not work local html. works only on server!

onclick $(document.body).append() is not working

here i want to show bootstrap modal on onclick event. Onclick event alert() is coming but $(document.body).append() (modal code) is not initializing it seems... i am not getting any error in console also...
this is my code...
(function() {
tinymce.create('tinymce.plugins.wpc', {
init : function(ed, url) {
ed.addButton('wpc', {
title : 'Add Contact Us form',
image : url+'/dd_note.gif',
onclick : function() {
alert("hii"); // it's coming on onclick event
$(document.body).append('<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">Forms List</h4> </div> <div class="modal-body"> <script> showForms("'+url+'"); </script></div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button data-dismiss="modal" type="button" class="btn btn-primary" onclick="addForm()">Add Page</button> </div> </div> </div> </div>');
$('#myModal').modal();
}
});
},
createControl : function(n, cm) {
return null;
},
});
tinymce.PluginManager.add('wpc', tinymce.plugins.wpc);
})();
can anyone suggest me what's going wrong with my code?
Thanks in advance
In your html there are is script tag and some browsers does not allow to add it as text so u have to create script dom element from javascript and then append it or try something like this:
to replace in your appending html:
<script> showForms("'+url+'"); </script>
to:
<script> showForms("'+url+'");</' + 'script>
to allow browser to know that it is script tag.
working demo for appending this html
Try this
(function() {
tinymce.create('tinymce.plugins.wpc', {
init : function(ed, url) {
ed.addButton('wpc', {
title : 'Add Contact Us form',
image : url+'/dd_note.gif',
onclick : function() {
alert("hii"); // it's coming on onclick event
$('body').append('<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">Forms List</h4> </div> <div class="modal-body"> <script> showForms("'+url+'"); </script></div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button data-dismiss="modal" type="button" class="btn btn-primary" onclick="addForm()">Add Page</button> </div> </div> </div> </div>');
$('#myModal').modal('show');
}
});
},
createControl : function(n, cm) {
return null;
},
});
tinymce.PluginManager.add('wpc', tinymce.plugins.wpc);
})();

Categories