Modal Bootstrap showing in all windows thats same email - javascript

Hi i dont know how i should do this. I made showing users in panel admin and its working correct even showing roles on button. Next step what i want to do is click and showing modal bootstrap and here i got problem i dont know how i can pass $user->email to title when i do this:
<form action="{{route('change')}}" method="post" role="form" class="form-horizontal">
{{ csrf_field() }}
<div id="myModal" class="modal fade" name="{{$user->email}}">
<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">Zmiana roli użytkownika o adresie E-mail:</br>
<b>{{$user->email}}</b>
</h4>
</div>
<div class="modal-body">
<p>Wybierz rolę dla użytkownika</p>
<select name="{{$user->email}}">
<option name="role_user">User</option>
<option name="role_moderator">Moderator</option>
<option name="role_admin">Admin</option>
</select>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Zamknij</button>
<input name="" type="submit" class="btn btn-primary" value="Zmień rolę"></input>
</div>
</div>
</div>
</div>
</form>
I have somethink like on screen and i want make change role in this modal.
In title modal is showing adress email but its showing only last in tables.
So maybe i must name this windows like {{$user->email}} becouse change roles i want base on email becouse its uniqe in database. I made change roles on checkbox but i trying do this better with nice view. I want do somethink like that admin show all user and button near them and he can click button and got info user->email and select. This select showing user role and admin can change and save it. And its showing in all user window last row from table user i mean i got last user admin with role admin so its showing in all window admin details.
Update 1:
I do like that:
<td><button class="btn btn-info wielkoscPrzycisku" name="{{$user->email}}" id="{{$user->email}}" data-toggle="modal" data-target="#myModal" href="#myModal" value="" data-user-email="{{$user->email}}">{{$roles->name}}</button></td>
Its button from i want get data.
Next jquery:
jQuery('#open-modal-button').click(function () {
user_email = jQuery(this).data('user-email');
jQuery('modal-title-email').html(user_email);
});
Next span button:
<span id="modal-title-email"></span>

I don't know exactly what the rest of your code says, so I'm kind of winging it, but what you could do is use jQuery and html data attributes on your table row and when looping through your user array you populate that and have something to grab easily with jquery.
<h4 class="modal-title">Zmiana roli użytkownika o adresie E-mail:</br>
<span id="modal-title-email"></span>
</h4>
<tr>
<td>Name</td>
<td>Email</td>
<td><button data-user-name="John">Admin</button></td>
</tr>
<script>
jQuery('#open-modal-button').click(function () {
username = jQuery(this).data('user-name');
jQuery('#modal-title-email').html(username);
});
</script>
When clicking the button that opens the modal you grab the data from the data attribute and then use jQuery html function to add it to your modal title.

Related

How to pass multiple variables in modal popup in php

I know this is an answered question HERE and I have tried the same solution, however I am not sure how to pass the values to modal popup which is on same page.
I have form where user inputs amount and clicks Pay button and user gets a popup getting a confirmation with the values and currency he/she is using.
I wnat to open popup after clicking a button , hence my code:
<form name="form" class="form-horizontal" action="signupinvestment.php" method="post" onsubmit="return validateForm()">
<button type="submit" class="btn btn-primary"><i class="fa fa-university"></i> Net Banking
<a class="open-my-modal" rel="dialog" data-toggle="modal" data-id="<? $amount_invest=$_GET['amount_invested']; echo $amount_invest;?>" data-prod-id="<? $currency=$_GET['currency'];echo $currency;?>" href="#mymodal" data-target="#myModal" >
<?php echo "<br> $order_id </br>";?>
</a></button>
</form>
<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-label="Close">
<span aria-hidden="true">×</span>
</button>
<table class="table table-hover table-bordered" >
<tr style=" background-color:#00AAAD; color:#FFF; ">
<div class="modal-body">
<div id='order-id'></div>
<div id='prod-id'></div>
<div id='sell-id'></div>
</div>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
And my JQuery Code:
$(document).ready(function () {
$('.open-my-modal').click(function(){
$('#order-id').html($(this).data('id'));
$('#prod-id').html($(this).data('prod-id'));
// show Modal
$('#myModal').modal('show');
});
});
I am not sure this $_GET is te right way to access those variables and secondly it doesn't open the popup skips to the next form.
I have rest of the codes, but its lengthy hence didnt pt its same as in the link above.
I know this looks very shabby but had to try before asking. Please help
Your modal is not a separate page, so if you need to get some data from your server (run the php scripts), then you have to add an ajax call to your server and receive that data, that will be passed to your modal via the JavaScript. The JavaScript passes the data to the modal, not the PHP. Because the Modal is not a separate page, and the modal is being opened by the JavaScript.
The only thing, that the JavaScript may lack some data, so you have to add an ajax call, to get that data from you server (php).
if you send that number to your server and after server response, you need the value then the server must put this value into a hidden input and then you show modal and read that data from the hidden input.
but if you need show modal before sending to server button type of form must be button not submit because submit button send data to the server and does not trigger javascript function. in this case, you need to submit the form or sending data to API from your modal.
anyway, you can access to textbox value using jquery.

JQuery Registration Form onclick popup

I am trying to make a Javascript JQuery registration form pop-up on link click.
So I have this button:
REGISTER NOW
And I`m trying to make it pop-up a small simple html registration form that I can store in a hidden registration DIV. Example:
<div name="reg" style="visibility:hidden;">reg form</div>
I just need the simple registration form (Only full name and email) to pop-up (centered and mobile responsive) when that button is linked.
Can I get any help in doing this? Thank you.
I have tried with jquery dialog and almost everything found on Google, but it doesn't seem to work.
Thanks.
As suggested by Mihailo, you could use Bootstrap Modals to make it responsive (mobile, tablet and PC).
<a data-toggle="modal" data-target=".bs-example-modal-sm" role="button" class="">Launch demo modal</a>
<div class="modal fade bs-example-modal-sm" 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">Registration</h4>
</div>
<div class="modal-body">
<form name="reg-form">
<div class="form-group">
<label for="user-name" class="control-label">Full Name:</label>
<input type="text" class="form-control" id="user-name">
</div>
<div class="form-group">
<label for="email" class="control-label">Email Address:</label>
<input type="text" class="form-control" id="email">
</div>
</form>
</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>
Here is the thing, there is a modal template with header section, body section and footer section.
div class="modal fade bs-example-modal-sm"
If you remove fade, then the modal will not animate.
More information regarding bootstrap modals is here
Also, Please find the corresponding JsFiddle below:
https://jsfiddle.net/Manoj85/7egtc2ne/5/
Hope this helps!!
You should really be using a class or id on you register div instead, but you can show the form like this:
$('.cta').click(function() {
$('div[name="reg"]').css('visibility', 'visible');
})
Once you give your div a proper class/id, you can replace div[name="reg"] with .class or #id. Additionally, jQuery has several built-in functions for hiding and showing elements. To use these, you'll want to change visibility:hidden; with display:none;. Then, in the code I presented above, replace .css(...) with one of the following:
.show() is an immediate effect, and is the same as changing the display property to block. To remove again, use .hide().
.fadeIn(), as the name suggests, is more of a gradual fading effect. Opposite of .fadeOut().
slideDown() is similar to an "accordian" effect, where the element starts at 0 height and "grows". Opposite of .slideUp().
You can also use .toggle(), .fadeToggle(), or slideToggle(), respectively to alternate between showing and hiding the elements.
I've created this JSFiddle to demonstrate these effects.
Assuming you have a div called register, which you need to add, it will be like this:
<script>
$(".cta").click(function() {
$("#register").css("hidden", false)
})
</script>

Show new page as Modal with Javascript

I'm working on an Python Flask application, were I'm writing python program, HTML5 and making use of Bootstrap too.I'm struck with Javascript, because I'm new to it.
I've an table in my page, where "id" be assigned to an value. I can able to get the id value using
<script>
$("table tr").click(function(){
alert (this.id);
});
</script>
I wanted to send the "id" value to another page, and open the resulting page as Modal. Can you guide or share sample code for the same...?
If you have already downloaded bootstrap plugin then my answer would be very easier for you.
Earlier i have written same thing that you required in PHP (have a look). Whatever be the language its about JQUERY and HTML5.
You just trigger the following line using JQUERY then it will open the second page content in modal format.
<a data-toggle="modal" class="trigger" data-target="#yourid" href="second_page.php" ></a>
Trigger the above line as
$("table tr").click(function(){
$('.trigger').trigger("click");
});
Your second page content should be like
<div id="yourid" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Give a title name</h4>
</div>
<div class="modal-body">
<!-- Place your second page content here -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-xs" data-dismiss="modal">Close</button>
</div>
</div>
</div>
Please refer this link also. Correct me if am wrong

Dynamic Modal without refreshing page via Ajax

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');
});

bootstrap modals only firing once with remote datasource

I have a table with a list of items and each item has a <select> with a list of statuses. Here's the process.
When the status is changed, it should fire a modal.
The modal is pulling in ajax data and works fine.
The user can then click continue or cancel out of the modal box.
This works the first time, but as soon as the modal is dismissed, the modal won't load a second time. The data is updating - I can see it in the inspect element, but the modal itself isn't firing more than once.
Here's the relevant code:
HTML:
<select class="status form-control" data-id="14" data-ref="PT6F7SW514" name="status">
<option value="0" selected="selected">Pending</option>
<option value="1">Approved</option>
<option value="2">Rejected</option>
</select>
...
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal Goes Here</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">Send</button>
</div>
</div>
</div>
</div>
JS:
$(document).ready(function(){
$('.status').change(function(){
var status = $(this);
var val = $(status).val();
var id = $(status).attr('data-id');
var ref = $(status).attr('data-ref');
$('.modal-body').load('/ajax/status/' + ref + '/' + val);
$('#modal').modal();
});
});
Again, this is a table with multiple items, each of which has a .status select field. I can see in the console on the second attempt to fire the modal I'm getting the following error:
Uncaught TypeError: undefined is not a function
Associated to this line in the JS:
$('#modal').modal();
If I comment out $('.modal-body').load(), it works.
I tried rewriting it into a separate ajax call instead of using .load(), but I have the same problem there. It seems like as soon as I manipulate the '.modal-body' it looses the ability to fire the modal.
you can use
$('#modal').modal('show'); // or .modal('hide')
to show or hide a modal
I found the problem. it wasn't actually a problem with the modal. The view I was firing (using Laravel) also included <head> and <body> tags (the modal is meant for an email preview). This was breaking the functionality.

Categories