I have created a form within pop up I am using bootstrap pop up modal as the form is a bit long so once submitted the message is shown at the top of the form and when user submit's the form it stays at the bottom what I am looking here is when user submits the form it scroll to top so user can see the message though.
Is this possible? as of it is a pop up modal I am using please review my code below and figure if im doing something wrong.
$(document).ready(function() {
$('.reg-form').on('submit', function(e) {
$('#register').on('shown', function() {
$(this).scrollTop(0);
});
$('.load').fadeIn(500);
var formData = new FormData(this);
});
});
Here is the html for y pop up modal
<div id="register" class="modal" role="dialog">
<button type="button" class="close" data-dismiss="modal">
<img class="svg" src="<?php echo base_url(); ?>assets/images/modal-close.svg">
</button>
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Register With Us</h4>
</div>
<div class="modal-body">
//here is my form
</div>
</div>
</div>
</div>
yes, it's possible! just put it:
$('#register').animate({'scrollTop':0},800);
and I see you have wrong event name there, shown should be shown.bs.modal but nevermind that because you just have to change that line with my code above.
$("#regsiter").scrollTop(0);
Add the above line in submit function. You don't need to put it in on shown function.
Simplest is
window.scrollBy(-10000, -10000);
Related
I have a HTML code:
<div class="container">
<div class="row">
#foreach(var post in Model)
{
<div class="col-sm-8">
<div class="row">
<div class="post-body container shadow p-3 mb-3 rounded-3">
<h2>#post.Title</h2>
<p>#post.Description</p>
<button type="button" class="show-post-btn btn btn-secondary" data-bs-toggle="modal" data-bs-target="#wholePost" onclick="return showContent()">Show post...</button>
</div>
<div class="modal fade" id="wholePost">
<div class="modal-dialog modal-dialog-scrollable modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">#post.Title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<p>#post.Content</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sidebar col-sm-4">
col2
</div>
}
</div>
I want to make that to when I click on "Show Post" button modal window is open with corresponding content. Currently, if there is two blog posts clicking on button result in displaying content from the first post even If I click on button in the second blog post.
I want to make that when I click on "Show post" in first blog post modal window opens with content from first blog post and when I click on button in the second blog post modal window open with content from second blog post.
I even don't understand where I should make this, in c# code or with javascript. Please provide me theory not a code if you could because I would like to guess on my own how to make this. Sorry in advance if there is post like that already and great thanks for your help.
You could do it on JS but need to propagate HTML with some additional info
just some concept code for example:
<button onclick="showContent(#post.Id);">Show post...</button>
...
<div class="modal fade" id="wholePost_#post.Id">
JS file
function showContent(id){
$("#wholePost_"+id).show();
}
There are probably some more ways to do it.
The way bootstrap modals work is that the data-bs-target attribute in your button needs to have the same id as the modal so that's why it keeps opening the modal for your first element.
What you need to do is give each modal its separate id, so instead of #wholePost id for all of the modals it should be like #wholePost1, #wholePost2, ... .
I am showing notifications on modal with ajax call, ajax and php code is fine, It shows notifications on modal only first time, on second click at anchor it does not load "modal-dialogue" div and "modal-content" but it loads "modal fade modal-form in" div. When I debug it I saw display none on both above div's I know I can handle them with javascript, but I think that's not the solution.
What I am missing there, please guide
<a class="flag-list" href="#" data-toggle="modal" data-target="#user-flag">
<i class="icon-flag6"></i>' . esc_html__( 'Flag as inappropriate' ) .
</a>
<div class="modal fade modal-form" id="user-flag" tabindex="-1" role="dialog">
<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>
<h3 class="modal-title" id="flagModalLabel">
<?php echo esc_html__( 'Flag' ); ?>
</h3>
</div>
<div class="modal-body">
<form id="cs_flag_user">
<input type="hidden" name="name_one">
<input type="hidden" name="name_two">
<textarea></textarea>
</form>
</div>
</div>
</div>
</div>
It seems you may have a problem in server side, the code in your page, or any form submissions which changed may be the DOM, It will be easier to open the console and figure out exact problem.
A full demo for your code is running in Codepen here. I just replaced your php code with simple text, check it and leave your comment in case you need more help.
If you need to work with modal windows easily, I already wrote and open sourced modal windows wrapper plugin based on bootstrap4, you can find also demos and how to use here.
Try avoiding data-toggle="modal" data-target="#user-flag"
and use jquery to display and hide modals.
If notifications are loaded via ajax, then display modal inside success of that ajax.
Like the title says i have problem to getting the modal.on('hidden') event to run. I can open the modal without any problems. The code im using for it looks something like this:
var info = $('<img src="img/icons/info.png">');
info.attr('data-toggle','modal');
info.attr('data-target','#infoPopup');
The modal itself looks like this:
<div class="modal fade" id="infoPopup" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 id="popupHeader" class="modal-title"></h4>
</div>
<div id="popupBody" class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
It Opens perfectly fine but it seems like the hidden event is not triggert when I'm closing it by clicking beside the modal the close button or the X on the top right.
$('.modal.in').on('hidden',function(){
console.log('test');
});
The selected modal is the correct one when i'm trying to access it on the console with $('.modal.in'). So i'm not trying to get a callback on the wrong modal. I also tried it with $('.modal.in').on('hidden.bs.modal',func...). But i got the same result.
Thanks for your help.
for bootstrap 3 you need to use hidden.bs.modal
$('.modal.in').on('hidden.bs.modal', function () {
// do something…
})
if your modal is not in DOM on load this should rather work
$(document).on('hidden.bs.modal','.modal.in', function () {
// do something…
})
Instead of using .modal.in use the id of the modal that you want to fire the event with. If you want to use it for all modals just use .modal and not .modal.in and you will use on hidden.bs.modal
here is a fiddle Fiddle
$('#infoPopup').on('hidden.bs.modal',function(){
alert("Modal Closed");
});
I'm attempting to fill a modal with dynamic data based on a form input, without a page reload.
Step by step:
1) User will input a name and submit form on admin.php
2) Data is submitted via Ajax (ideally) and processed via editUser.php
3) Data is pulled from a mysqli database and put in a modal content
4) Modal is loaded (While still viewing the admin.php page) with no page reload, but with the dynamic content in the modal.
My code so far:
Form + Ajax:
<script src="http://malsup.github.com/jquery.form.js"></script>
<script>
// wait for the DOM to be loaded
$(document).ready(function() {
// bind 'myForm' and provide a simple callback function
$('#myForm').ajaxForm(function() {
alert("Thank you for your comment!");
});
});
</script>
<form id="myForm" action="query/editUser.php" method="post">
Name: <input type="text" name="name" />
<input type="submit" value="Submit Comment" />
</form>
editUser.php:
<script>
$(window).load(function(){
$('#myModal').modal('show');
});
</script>
<!-- Modal -->
<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">Modal title</h4>
</div>
<div class="modal-body">
--List data based on the form input from before
</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>
My current problem is that I do not know how to show the modal after the form is submitted.
You will notice I currently have no calls to my database, or filling any content on the modal, because that will come later. My goal right now is to make the modal show after the form is submitted (And doing this in a way where it is still possible to fill the modal before it is shown).
I'm stuck, have been trying to figure this out for awhile, and would much appreciate help.
Edit:
Here is a breakdown of what I have, and what I want.
Right now, I've got 2 pages: admin.php and editUser.php
The admin page holds the form on it, that when submitted uses "action" to post to the editUser page, which has the code for my modal.
When the form is posted, I want the modal to be dynamically filled with information (based on the input from the admin page) using a while statement pulling information from a database.
I then want the modal to show as an overlay on the admin page - this should all happen with absolutely no page refreshing.
I KNOW how to fill the modal with information dynamically, I KNOW how to call a modal, but I DO NOT know how to show the modal on my admin page, after submitting a form and then filling the modal that is saved on the userEdit page DYNAMICALLY.
If dialog is the ID of the <div class="modal"> that's going to receive the content,
$('#dialog').modal('show');
e.g.:
$.get(url).then(function(data) {
// fill "#dialog .modal-body" with content based on 'data'
...
$('#dialog').modal('show');
});
I have a button on my page that when it is pushed it triggers some javascript functions to occur, and one of those javascript functions to open a bootstrap modal, but I can't seem to get it to work. Here is my code... please help.
//elsewhere on the form is the button that triggers the javascript
Yes, cancel it
<!-- CANCEL A PO MODAL -->
<div class="modal hide fade" id="error-dialog" style="display: none;">
<div class="modal-header">
<a class="close" data-dismiss="modal">x</a>
<h3>Cancel Purchase Order?</h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
Yes, cancel it
Nevermind
</div>
</div>
$('.btn-danger').click(function(event) {
if(some random conditional statement){
//some stuff happens here
}
else{
//Show form validation error modal-- I know this part is triggered but the modal will not show
$("#error-dialog").modal("show");
}
});
$("#error-dialog").modal("show");
This is the correct way, your code simply has an error. Go in to Chrome Console and run this command, it'll work.
you're missing if () { part of the conditional statement
It's a bit hard to see what you want to do with this partial code, but here is a working code based on yours:
http://jsbin.com/oqomiv/1/edit