I'm using MVC, have standard scaffolded index.cshtml page.
My goal is to display the details on a modal box. I'm able to display the modal box however whatever I do the modal is always and always displayed on the top left side of the screen. I'm trying to manipulate it using css but it fails whatever I do it does not work
so what I have done is:
Index.cshtml
<div id="myModal" class="modal TestModal">
<div class="modal-dialog TestModal">
<div class="modal-content TestModal">
<div id="myModalContent" class="TestModal"></div>
</div>
</div>
</div>
1- Created a partialView
<div class="modal-header">
<h4 class="modal-title">Validation Error</h4>
</div>
<div class="modal-body">
<p class="text-warning">
<small>Please make an entry before save</small>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Ok</button>
</div>
2-Created the following method in my controller
public PartialViewResult DisplayModalFor(int id)
{
//var parent = _context.TOURNAMENTS_M.Include(x => x.TOURNAMENTS_D).First(x => x.TM_ROWID.Equals(Id));
return PartialView("_DetailsModal");
}
and finally I have the following function in my javascript file:
function PopUpModalFor(tmRowid) {
const id = tmRowid;
$.ajax({
url: "/TOURNAMENTS_M/DisplayModalFor",
type: "GET",
data: {
id: id
}
})
.done(function (result) {
$("#myModalContent").html(result);
$("#myModal").modal("show");
})
.fail(function () {
alert("I failed :'( ");
});
}
thoughts?
I have a weird problem here!
though I have included
<link rel="stylesheet" href="~/css/MyStyle.css" />
into my _Layout.cshtml, my CSS is not working completely.
for example I have
.YOLO {
background-color: green;
}
.Padded {
margin: 50px 100px 0 100px !important;
}
then I have modified my index.cshtml to look like this
<div class="Padded">
<p class="YOLO">THIS SHOULD BE GREEN</p>
<h2>Index</h2>
//More code..
however the p tag is not green what should I do?
I found this on here. But don't know whether it is working for you or not. Can you just try below? Anyway, by default, it should align into the middle.
#myModal{
text-align: center;
padding: 0!important;
}
.modal:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -4px;
}
.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}
Related
I am trying to learn PHP and I have created two types of users in my web app - 1. Alumni and 2. Admin. While I m logged in as Alumni and change my URL to ../admin , I m getting access to all admin functions which I should not. I can't seem to understand how to handle this. What I want is when I am logged in as Alumni and change my URL I want to be redirected to login.php of Admin . Below is my code :
index.php (admin)
<!DOCTYPE html>
<html lang="en">
<?php session_start(); ?>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title><?php echo isset($_SESSION['system']['name']) ? $_SESSION['system']['name'] : '' ?></title>
<?php
if(!isset($_SESSION['login_id']))
header('location:login.php');
include('./header.php');
// include('./auth.php');
?>
</head>
<style>
body{
background: #80808045;
}
.modal-dialog.large {
width: 80% !important;
max-width: unset;
}
.modal-dialog.mid-large {
width: 50% !important;
max-width: unset;
}
#viewer_modal .btn-close {
position: absolute;
z-index: 999999;
/*right: -4.5em;*/
background: unset;
color: white;
border: unset;
font-size: 27px;
top: 0;
}
#viewer_modal .modal-dialog {
width: 80%;
max-width: unset;
height: calc(90%);
max-height: unset;
}
#viewer_modal .modal-content {
background: black;
border: unset;
height: calc(100%);
display: flex;
align-items: center;
justify-content: center;
}
#viewer_modal img,#viewer_modal video{
max-height: calc(100%);
max-width: calc(100%);
}
</style>
<body>
<?php include 'topbar.php' ?>
<?php include 'navbar.php' ?>
<div class="toast" id="alert_toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-body text-white">
</div>
</div>
<main id="view-panel" >
<?php $page = isset($_GET['page']) ? $_GET['page'] :'home'; ?>
<?php include $page.'.php' ?>
</main>
<div id="preloader"></div>
<i class="icofont-simple-up"></i>
<div class="modal fade" id="confirm_modal" role='dialog'>
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Confirmation</h5>
</div>
<div class="modal-body">
<div id="delete_content"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id='confirm' onclick="">Continue</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="uni_modal" role='dialog'>
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"></h5>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id='submit' onclick="$('#uni_modal form').submit()">Save</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="viewer_modal" role='dialog'>
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<button type="button" class="btn-close" data-dismiss="modal"><span class="fa fa-times"></span></button>
<img src="" alt="">
</div>
</div>
</div>
</body>
<script>
window.start_load = function(){
$('body').prepend('<di id="preloader2"></di>')
}
window.end_load = function(){
$('#preloader2').fadeOut('fast', function() {
$(this).remove();
})
}
window.viewer_modal = function($src = ''){
start_load()
var t = $src.split('.')
t = t[1]
if(t =='mp4'){
var view = $("<video src='"+$src+"' controls autoplay></video>")
}else{
var view = $("<img src='"+$src+"' />")
}
$('#viewer_modal .modal-content video,#viewer_modal .modal-content img').remove()
$('#viewer_modal .modal-content').append(view)
$('#viewer_modal').modal({
show:true,
backdrop:'static',
keyboard:false,
focus:true
})
end_load()
}
window.uni_modal = function($title = '' , $url='',$size=""){
start_load()
$.ajax({
url:$url,
error:err=>{
console.log()
alert("An error occured")
},
success:function(resp){
if(resp){
$('#uni_modal .modal-title').html($title)
$('#uni_modal .modal-body').html(resp)
if($size != ''){
$('#uni_modal .modal-dialog').addClass($size)
}else{
$('#uni_modal .modal-dialog').removeAttr("class").addClass("modal-dialog modal-md")
}
$('#uni_modal').modal({
show:true,
backdrop:'static',
keyboard:false,
focus:true
})
end_load()
}
}
})
}
window._conf = function($msg='',$func='',$params = []){
$('#confirm_modal #confirm').attr('onclick',$func+"("+$params.join(',')+")")
$('#confirm_modal .modal-body').html($msg)
$('#confirm_modal').modal('show')
}
window.alert_toast= function($msg = 'TEST',$bg = 'success'){
$('#alert_toast').removeClass('bg-success')
$('#alert_toast').removeClass('bg-danger')
$('#alert_toast').removeClass('bg-info')
$('#alert_toast').removeClass('bg-warning')
if($bg == 'success')
$('#alert_toast').addClass('bg-success')
if($bg == 'danger')
$('#alert_toast').addClass('bg-danger')
if($bg == 'info')
$('#alert_toast').addClass('bg-info')
if($bg == 'warning')
$('#alert_toast').addClass('bg-warning')
$('#alert_toast .toast-body').html($msg)
$('#alert_toast').toast({delay:3000}).toast('show');
}
$(document).ready(function(){
$('#preloader').fadeOut('fast', function() {
$(this).remove();
})
})
$('.datetimepicker').datetimepicker({
format:'Y/m/d H:i',
startDate: '+3d'
})
$('.select2').select2({
placeholder:"Please select here",
width: "100%"
})
</script>
</html>
Update: I have tried putting the following code :
if (isset($_SESSION['username'])) {
if($_SESSION['username'] !== 'admin'){
session_destroy();
unset($_SESSION['username']);
header("location: login.php");
}};
but I can't seem to get it working. Can I know where to add this code to get it working ?
Easy use this -> PHP Session
Before you load the page check the sessions and if the user does not have rights to access the page redirect to any other page.
Example:
if($_SESSION['user_type'] == 'admin'){
go to admin page...
} else {
go to hell...
header('location: login');
}
I hope it was helpfull!
There are some ways to do it.
By the look of it you're not using any Framework and so, you don't have a routing system neither middleware methods. In this case what is there to do would be to always check if the authenticated user is an administrator or posses adimitrator privileges.
That is exactly the thing Dorvalla wrote on the comment of your question. In a way or another your system must have a flag which tells if the user is or is not an admin.
So if your users don't have an attribute "isAdmin" (or anything else you prefer) in the object. Do it.
Now you just need to always check if authenticated user is an admin and if it is not, just block access or filter what he/she can do at the selected file or view.
Optionaly you could create your own middleware where all PHP classes your system posses passes through there and them, it's easier to filter. That is the idea of a middleware.
Hope it helps you
Im using filtered divs and I want to change the flex-direction of each section only when that specific section is toggled, then go back to original styles when going back to "Show all"
Here is the link for the filtered divs
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_filter_elements
The W3 Schools code is not very good. It can be improved greatly but the use of data attributes, proper event listeners and event bubbling
All we need to to to get your "flex switch" happening is add/remove a class to the ".container" to indicate if filtered or not
var container = document.querySelector(".container");
//Add an event listener to the div containing the buttons
document.getElementById("myBtnContainer").addEventListener("click", function(event) {
//remove active class from previous active button
this.querySelector(".active").classList.remove("active");
//add active class to clicked item
event.target.classList.add("active");
//Add filitered to ".container" if "All" clicked, remove otherwise
container.classList.toggle("filtered", event.target.dataset.target !== "all")
//Display chosen elements
var elements = container.querySelectorAll(".filterDiv");
for (var i = 0; i < elements.length; i++) {
//Long version of below
//var categoryArray = elements[i].dataset.category.split(",");
//var hasTargetCategory = categoryArray.includes(event.target.dataset.target);
//elements[i].classList.toggle("show",hasTargetCategory);
elements[i].classList.toggle("show", elements[i].dataset.category.split(",").includes(event.target.dataset.target));
}
})
.filterDiv {
background-color: #2196F3;
color: #ffffff;
width: 100px;
line-height: 100px;
text-align: center;
margin: 2px;
flex: none;
}
.container {
margin-top: 20px;
display: flex;
flex-wrap: wrap;
}
/* Style the buttons */
.btn {
border: none;
outline: none;
padding: 12px 16px;
background-color: #f1f1f1;
cursor: pointer;
}
.btn:hover {
background-color: #ddd;
}
.btn.active {
background-color: #666;
color: white;
}
/*Class to change flex direction*/
.filtered {
flex-direction: column;
}
/*Hide elements without the show class*/
.filtered>.filterDiv:not(.show) {
display: none;
}
<div id="myBtnContainer">
<button class="btn active" data-target="all"> Show all</button>
<button class="btn" data-target="cars"> Cars</button>
<button class="btn" data-target="animals"> Animals</button>
<button class="btn" data-target="fruits"> Fruits</button>
<button class="btn" data-target="colors"> Colors</button>
</div>
<div class="container">
<div class="filterDiv" data-category="cars">BMW</div>
<div class="filterDiv" data-category="colors,fruits">Orange</div>
<div class="filterDiv" data-category="cars">Volvo</div>
<div class="filterDiv" data-category="colors">Red</div>
<div class="filterDiv" data-category="cars,animals">Mustang</div>
<div class="filterDiv" data-category="colors">Blue</div>
<div class="filterDiv" data-category="animals">Cat</div>
<div class="filterDiv" data-category="animals">Dog</div>
<div class="filterDiv" data-category="fruits">Melon</div>
<div class="filterDiv" data-category="fruits,animals">Kiwi</div>
<div class="filterDiv" data-category="fruits">Banana</div>
<div class="filterDiv" data-category="fruits">Lemon</div>
<div class="filterDiv" data-category="animals">Cow</div>
</div>
I didn't understand what you meant by "flexible steering", would it be to replace the phrase "Show all" with the active section? This can be done with jquery, but you would have to replace the element that houses the text.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="all">Show all</button>
<button type="button" id="cars">cars</button>
<script>
$("#cars").on("click", function(){
$("#all").text('Cars');
});
$("#all").on("click", function(){
$("#all").text('Show All');
});
</script>
Alternative without jquery
<button id="all">Show All</button>
<button id="cars" onclick="cars()">Cars</button>
<script>
function cars() {
document.getElementById("all").innerHTML = "Cars";
}
</script>
Alternative to build the tab without so much javascript and css
Bootstrap Collapse: You can use Bootstrap Colapse which already has a structure ready and you would only have to organize the HTML with the divs as per the documentation: https://getbootstrap.com/docs/4.0/components/collapse/
Javascript behavior: Like the previous one, this is a tabbed browsing API, which is identical to the code you are using, with the difference that here you would be using the Bootstrap structure and will not require many modifications, you should note the similarity between this and the previous one, in fact what changes is only the usability, the situations in which you will use one or the other, but the purpose is the same, both seek to hide elements.
https://getbootstrap.com/docs/4.0/components/navs/#javascript-behavior
I have ajax and javascript, now i am fetching this modal to another page or to another separate browser.
For now I can fetch the modal but I needed it to refresh the page before the modal will show. how can I do it without clicking refresh. I've done some research and I've seen setInterval function but how should i implement it through my code thanks! all I want is to not refresh the page before the modal will show.
Onto my modal form here it is, this is the code whereas after I submit the submit button
if ($count != 0) {
while($row = mysqli_fetch_array($data)) {
echo '<div id="myModal" class="modal" style="position:fixed; display: none; padding-top: 100px;
left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.9); ">
<div class="container" style="width: 100%">
<div class="card col-12" style="background-color: red; color: white;">
<div class="card-header">
<p><h3 class="text-center">Announcement</h3></p>
</div>
<div class="card-body text-center">
<h5>'.$row['additional_info'].'</h5>
<p>Please click refresh button to resume after the announcement</p>
</div>
</div>
</div>
<img class="modal-content" id="img01">
</div>';
$dataid = $row['id'];
}
}
here it is the script where I want to put the setInterval function for the page to automatically not refresh
document.getElementById('myModal').style.display='block';
for now it has no any special code that is just how I show the modal but it needed to be refresh
I expect the output of the modal should be display once i already click the submit button. and for my code the button was already click and i just want to insert the setInterval function for the modal to show without refreshing the page
refresh
<html>
<head>
<script src="addon/jquery/jquery.js"></script>
</head>
<body>
<div id="modalid">
</div>
<button onclick="ra()">REFRESH</button>
<script>
function ra() {
$.ajax({
type: "GET",
url: "testajax.php",
data: { val : "ann" },
dataType: "json",
success: function(data) {
if(data.status == "OK") {
document.getElementById("modalid").innerHTML = data.value
setTimeout( function() { document.getElementById('myModal').style.display = 'none'; }, 3000);
}
else {
alert(data.value)
}
}
});
}
</script>
</body>
</html>
ajax
<?php
$jStatus = "ERROR";
$jValue = "";
$val = filter_input(INPUT_GET, "val");
if($val == 'ann') {
$jStatus = "OK";
$jValue = "<div id='myModal' class='modal' style='position:fixed; display: block; padding-top: 100px;
left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.9); '>
<div class='container' style='width: 100%'>
<div class='card col-12' style='background-color: red; color: white;'>
<div class='card-header'>
<p><h3 class='text-center'>Announcement</h3></p>
</div>
<div class='card-body text-center'>
<h5>HELLLOOO</h5>
<p>Please click refresh button to resume after the announcement</p>
</div>
</div>
</div>
<img class='modal-content' id='img01'>
</div>";
}
$jsonReply = array( "status" => $jStatus, "value" => $jValue);
echo json_encode($jsonReply);
?>
is this what you want?
I'm trying to get this box to turn from "hitting endpoint" which it does when it's clicked to back to normal. But it does not seem to update its state.
html:
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<button type="submit" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> Hitting Endpoint.." class="btn btn-primary btn-lg" value="Hit Endpoint" id="submitButton" style="max-width: 1000px; height: 500px; margin-left: 250px; margin-right: 10px; margin-top: 20px; margin-bottom: 0px; width: 200px; height: 75px">Hit Endpoint</button>
</div>
</div>
js:
$("#submitButton").on("click", function () {
var request = $("#requestBox").val();
if (!request) {
alert("Please populate the request box with valid JSON");
return;
}
$("#submitButton").button('loading');
$.post('#Url.Action("Run")', { requestJson: request })
.success(function (data) {
var jsonPretty = JSON.parse(data);
alert("Was successful");
renderjson.set_max_string_length("none");
renderjson.set_show_to_level(2);
document.getElementById("responseBox").appendChild(renderjson(jsonPretty));
$(window).scrollTop($('#pBox').offset().top);
$("#submitButton").button('reset');
})
Using reset doesn't seem to be working. What am I doing wrong? Do I actually have to use setTimeout like the example here?
http://codepen.io/jmalatia/pen/HkmaA
Cheers
Working with the bootstrap v4.0.0-alpha is pretty awesome, here what I am looking for: I need to put modal box inside the container div, not on whole screen.
I tried with changing some builtin CSS classes and yeah some JavaScript :) like:
z-index: 1051;
Changing in right navBar but not satisfy with that is there, any simple solution?
Create a variable var mod and load modal in it;
var mod = $('.modal');
Create a div <div class="insidemodal"></div> inside container where you want to show the modal
Use Bootstrap 4 modal event listener, preferable show.bs.modal and put var mod = $('.modal'); inside it and load the modal in insidemodal selector when modal about to show.
$('#myModal').on('show.bs.modal', function () {
var mod = $('.modal'); //Create variable and load modal in it
$('.insidemodal').html(mod); //Load modal to `insidemodal` Selector
});
Make following Changes in Modal CSS
.modal-backdrop {
display:none //<---Kill the modal backdrop
}
.modal-backdrop.in {
opacity: 0;
}
.modal {
z-index: inherit !important; //<--overwrite modal default z-index: 1050
position: relative; //<change position from absoulte
}
So Final Code will be
JS
$(document).ready(function () {
$('#myModal').on('show.bs.modal', function () {
var mod = $('.modal');
$('.insidemodal').html(mod);
});
});
CSS
.title {
background: green;
color:#fff;
padding: 5px;
text-align:center;
border:1px solid;
}
.menu {
background: blue;
color:#fff;
padding: 5px;
text-align:center;
border:1px solid;
}
.insidemodal {
background: red;
border:1px solid;
padding: 5px;
}
.modal-backdrop {
display:none
}
.modal-backdrop.in {
opacity: 0;
}
.modal {
z-index: inherit !important;
position: relative;
}
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="title">This Is Title</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="menu">Left Menu
<br>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Modal</button>
</div>
</div>
<div class="col-sm-8">
<div class="insidemodal"></div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span>
<span class="sr-only">Close</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-secondary" data-dismiss="modal" aria-label="Close">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Working Fiddle Example
SideNote If you have multiple modals, Above CSS changes in Modal CSS can cause other modals to not behave properly, so use custom selector instead making changes in default modal selector.