I am using Sweetalert2 and Bootstrap 5.1.3. I am trying to decorate the Sweetalert like below:
var htmlString = `
<div class="row"><div class="text-end col-6">ID:</div> <div class="text-start col-6">${data.id}</div></div>
<div class="row"><div class="text-end col-6">Name:</div> <div class="text-start col-6">${data.name}</div></div>
<div class="row"><div class="text-end col-6">Email:</div> <div class="text-start col-6">${data.email}</div></div>
<div class="row"><div class="text-end col-6">IsActive?</div> <div class="text-start col-6">${data.active}</div></div>
`;
And my Swal.fire block:
Swal.fire({
titleText: 'You sure to delete this user? ',
showDenyButton: true,
//showCancelButton: true,
confirmButtonText: 'Yes',
confirmButtonColor: 'green',
denyButtonText: 'No',
denyButtonColor: 'gray',
customClass: {
actions: 'my-actions',
confirmButton: 'order-1',
denyButton: 'order-2 right-gap',
},
html: htmlString,
focusDeny: true,
}).then((result) => {
if (result.isConfirmed) {
fetch(`${baseURL}/appUsers/${id}`, { method: "delete" });
var p = obj.parentNode.parentNode;
p.parentNode.removeChild(p);
Swal.fire('Deleted Successfully !!', '', 'success');
} else if (result.isDenied) {
Swal.fire('Changes are not saved', '', 'info')
}
})
Now the alert has a weird looking horizontal bar like this:
Question: How do I get rid of this?
If you can find a way to style the swal container element from the config, you can add style overflow-x: hidden value. Otherwise, you can include a CSS style, after I check the container class name you can use is .swal2-html-container
.swal2-html-container {
overflow-x: hidden;
}
https://codepen.io/david-yappeter/pen/NWwwyQg?editors=1111
// EDIT:
other solution, add m-0 class after row
<div class="row m-0"><div class="text-end col-6">ID:</div> <div class="text-start col-6">ID</div></div>
<div class="row m-0"><div class="text-end col-6">Name:</div> <div class="text-start col-6">NAME</div></div>
<div class="row m-0"><div class="text-end col-6">Email:</div> <div class="text-start col-6">EMAIL</div></div>
<div class="row m-0"><div class="text-end col-6">IsActive?</div> <div class="text-start col-6">ACTIVE</div></div>
or wrap it with class container
<div class="container">
<div class="row"><div class="text-end col-6">ID:</div> <div class="text-start col-6">ID</div></div>
<div class="row"><div class="text-end col-6">Name:</div> <div class="text-start col-6">NAME</div></div>
<div class="row"><div class="text-end col-6">Email:</div> <div class="text-start col-6">EMAIL</div></div>
<div class="row"><div class="text-end col-6">IsActive?</div> <div class="text-start col-6">ACTIVE</div>
</div>
Related
Hello there I've been trying to make custom turbo_confirm modal and i noticed a problem,
the modal pops up for a second and thing gets deleted I don't even have time to confirm it or cancel.
Here's my code:
There's my view with tailwind styling
//confirm_modal.html.erb
<div class="relative z-20 hidden" id="modal" data-controller="modal" data-action="keydown#window->modal#closeOnEsc" aria-labelledby="modal-title" role="dialog" aria-modal="true">
<div class="fixed inset-0 bg-gray-500 bg-opacity-75"></div>
<div class="fixed z-10 inset-0 overflow-y-hidden">
<div class="flex items-end sm:items-center justify-center min-h-full p-4 text-center sm:p-0">
<div class="relative bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:max-w-lg sm:w-full sm:p-6">
<div class="hidden sm:block absolute top-0 right-0 pt-4 pr-4">
<button type="button" class="bg-white rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500" data-action="modal#close">
<span class="sr-only">Close</span>
<%= icon "outline/x" %>
</button>
<button id="open-modal" class="sr-only" data-action="modal#open">Open</button>
</div>
<dialog id="turbo-confirm">
<form method="dialog" class="justify-between py-4 px-4">
<p class="flex">Are you sure?</p>
<div class="flex gap-2 justify-end">
<button class="button-secondary" value="cancel">Cancel</button>
<button class="button-danger" value="confirm">Confirm</button>
</div>
</form>
</dialog>
</div>
</div>
</div>
</div>
//modal_controller.js
import { Controller } from "#hotwired/stimulus";
// replaces basic confirm method with modal
Turbo.setConfirmMethod((message, element) => {
console.log(message, element)
let dialog = document.getElementById("turbo-confirm")
dialog.showModal()
return new Promise((resolve, reject) => {
dialog.addEventListener("close", () => {
resolve(dialog.returnValue == "confirm")
}, { once: true })
})
})
// Connects to data-controller="modal"
export default class extends Controller {
close() {
document.getElementById("modal").classList.add("hidden");
}
closeOnEsc(e) {
if (e.key === "Escape") this.close();
}
open() {
document.getElementById("modal").classList.remove("hidden");
}
}
And that's how I'm trying to use it:
<%= link_to "Delete", item_path(item), data: { action: "click->modal#open","turbo-method": :delete, turbo_confirm: "Are you sure?"}, class: "dropdown-item", role: "menuitem", tabindex: "-1" %>
Any ideas what's the problem?
Here is my code for design this UI
UI here
<div>
<div class="py-2 h4">
Profile Setting Page
</div>
<div class="row">
<div class="col-sm-2 bg-light py-2">
<div class="p-1" >
Basic Info
</div>
</div>
<div class="col-sm-10 bg-light">
<div class="pagecontainer">
<div class="d-flex justify-content-center align-items-center m-4">
<h1 class="display-3">Welcome to Settings</h1>
</div>
</div>
</div>
</div>
</div>
in the above code, use the 'pagecontainer' class for loading the partial UI. After clicking on 'Basic Info' button, partial view page loading but doesn't insert in pagecontainer class , it is refreshed and shows on same page like this,Image here
My JavaScript code is as,
//basic info
$("#basicinfo").click(function (e) {
e.preventDefault();
var href = $(this).attr("href");
$.get(href, function (data, status) {
$('.pagecontainer').html(data);
});
});
Try this way.
In your HTML just replace anchor tag href attribute with this javascript:void(0);
add one attribute it's up to whatever want you can add.
Like example I've added the data-url="/Profile/BasicInfo"
<div>
<div class="py-2 h4">
Profile Setting Page
</div>
<div class="row">
<div class="col-sm-2 bg-light py-2">
<div class="p-1" >
Basic Info
</div>
</div>
<div class="col-sm-10 bg-light">
<div class="pagecontainer">
<div class="d-flex justify-content-center align-items-center m-4">
<h1 class="display-3">Welcome to Settings</h1>
</div>
</div>
</div>
</div>
</div>
Jquery
//basic info
$("#basicinfo").click(function (e) {
e.preventDefault();
var href = $(this).data("url");
$.get(href, function (data, status) {
$('.pagecontainer').html(data);
});
});
Please remove href from tag a:
<div class="p-1" >
<a class="btn btn-dark w-100" id="basicinfo">Basic Info</a>
</div>
and in the javascript:
$("#basicinfo").click(function (e) {
e.preventDefault();
$.get("/Profile/BasicInfo", function (data, status) {
$('.pagecontainer').html(data);
});
});
I need to wrap all the childrens of the parent with a div. In the example below I managed to put a div tag after each parent but how do I put an end /div tag at the end of the chidrens.
I tried with document.createElement, and now with insertAdjacentHTML ..., what is the best way to fix this, or the best way to encode it?
var divs = document.getElementById("container").querySelectorAll('.activ-window *');
var elements = "";
divs.forEach(function(elem){
if (elem.firstChild) {
elements += elem.insertAdjacentHTML("afterbegin", '<div id="afterParent" style="display:block;">');
elem.insertAdjacentHTML("afterend", '</div>');
}
});
document.getElementById("demo").innerHTML = elements;
<div id="container" class="activ-window">
<div id="parent1">
<div id="child" ></div>
<div id="child" ></div>
</div>
<div id="parent2">
<div id="child" ></div>
<div id="paren3" >
<div id="child" ></div>
<div id="child" ></div>
<div id="child" ></div>
</div>
</div>
</div>
It should look like:
<div id="container" class="activ-window">
<div id="parent1">
<div id="afterParent" style="display:block;">
<div id="child" ></div>
<div id="child" ></div>
</div>
</div>
<div id="parent2">
<div id="afterParent" style="display:block;">
<div id="child" ></div>
</div>
<div id="paren3" >
<div id="afterParent" style="display:block;">
<div id="child" ></div>
<div id="child" ></div>
<div id="child" ></div>
</div>
</div>
</div>
</div>
Edit for Nick:
This is with text(see Parent1):
<div id="parent1">Parent1
<div id="child" >child1</div>
<div id="child" >child1</div>
</div>
I get it with your code
<div id="parent1">
<div id="afterParent" style="display:block;">
"Parent1"
<div id="child" >Child1</div>
<div id="child" >Child1</div>
</div>
</div>
It should look:
<div id="parent1">Parent1
<div id="afterParent" style="display:block;">
<div id="child" >Child1</div>
<div id="child" >Child1</div>
</div>
</div>
If you want to enclose all the divs beneath each parent in a new div, you can create a new div element, move all the non-text children to it, and then add that div as a child to the original parent:
const container = document.getElementById("container");
const parentDivs = container.querySelectorAll('.activ-window div[id^="parent"]');
for (let parent of parentDivs) {
// create a new div
let after = document.createElement('div');
after.id = 'after' + parent.id;
after.style.display = 'block';
// move the parent's non-text children to it
let children = parent.childNodes;
for (let i = 0; i < children.length; i++) {
if (children[i].nodeType != Node.TEXT_NODE) {
after.append(children[i]);
}
}
// and append it to the parent
parent.appendChild(after);
}
console.log(container.innerHTML);
<div id="container" class="activ-window">
<div id="parent1">
Parent1
<div id="child1"></div>
<div id="child2"></div>
</div>
<div id="parent2">
Parent2
<div id="child3"></div>
<div id="parent3">
<div id="child4"></div>
<div id="child5"></div>
<div id="child6"></div>
</div>
</div>
</div>
I've tried everything about that but i couldnt find a solution. On local, there's no problem. But when i publish to provider hosting. Memory leaking issue is coming out and IIS Recylcling every 75 seconds. I Used memory profiler but, no issue on local like i said. Here's my basecontroller code. Can it cause a memory leak?. And i use tags in layout. Maybe it causes a memory leak. If you want layout code i can add. For now, my basecontroller code be like;
public class BaseController : Controller
{
public BaseController()
{
GC.Collect(2, GCCollectionMode.Forced, true);
GC.WaitForPendingFinalizers();
}
internal void ShowErrorMessage(string message)
{
ViewBag.ErrorMessage = message;
}
public List<Categories> GetCategories()
{
var catserv = new CategoryService();
return catserv.GetAll().Where(x => x.Status == DataStatus.Active).ToList();
}
public List<Products> GetProducts()
{
var prodserv = new ProductService();
return prodserv.GetAll().ToList();
}
public bool CheckAdmin()
{
string username = User.Identity.Name;
var member = new MemberService();
var result = member.GetUserName(username);
if (result.Data.IsAdmin != 1)
return false;
else
return true;
}
public string SamePath()
{
return Request.UrlReferrer.PathAndQuery.ToString();
}
}
GetCategories method is being used for layout. I couldnt add viewmodel entity and i added this method below.
Check my admincontroller and layout.
[HttpPost]
public ActionResult Login(Member memb)
{
var memberservice = new MemberService();
var getMemberResult = memberservice.Auth(memb.UserName, memb.Password);
if (getMemberResult.HasError)
{
ViewBag.mesaj = getMemberResult.ResultMessage;
return View();
}
if (getMemberResult.Data.Status == DataStatus.Banned)
{
return RedirectToAction("BannedUser");
}
FormsAuthentication.SetAuthCookie(getMemberResult.Data.UserName, false);
return RedirectToAction("Anasayfa", "Magaza");
}
And my layout.. and actually it has var baseController = ViewContext.Controller as web2.Controllers.BaseController; on the top
<body>
<div class="banner_bg_main">
<!-- header top section start -->
<div class="container">
<div class="header_section_top">
<div class="row">
<div class="col-sm-12">
<div class="custom_menu">
<ul>
<li>Kusursuz Tasarım</li>
<li>Profesyonel Çalışmalar</li>
<li>Uygun Fiyat Politikası</li>
<li>Promosyon Ürünleri</li>
<li>Matbaa Ürünleri</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- header top section start -->
<!-- logo section start -->
<div class="logo_section">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="logo"></div>
</div>
</div>
</div>
</div>
<!-- logo section end -->
<!-- header section start -->
<div class="banner_section layout_padding">
<div class="container">
<div id="my_slider" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-sm-12">
<h1 class="banner_taital">%100<br>Fiyat Garantisi</h1>
<div class="buynow_bt">Sipariş Ver</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-sm-12">
<h1 class="banner_taital">Hemen Ürün<br>Siparişinizi Verin</h1>
<div class="buynow_bt">Sipariş Ver</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-sm-12">
<h1 class="banner_taital">Tamamen isteğe<br>UYGUN TASARIM</h1>
<div class="buynow_bt">Sipariş Ver</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#my_slider" role="button" data-slide="prev">
<i class="fa fa-angle-left"></i>
</a>
<a class="carousel-control-next" href="#my_slider" role="button" data-slide="next">
<i class="fa fa-angle-right"></i>
</a>
</div>
</div>
</div>
<div class="header_section pb-3">
<div class="container">
<div class="containt_main justify-content-center">
<div id="mySidenav" class="sidenav">
×
<a href=#Url.Action("Anasayfa","Magaza")>Anasayfa</a>
<a href=#Url.Action("Urunler","Magaza")>Ürünler</a>
#if (User.Identity.IsAuthenticated)
{
<a href=#Url.Action("Menu","Admin")>Admin Menü</a>
}
</div>
</div>
<div class="containt_main">
<span class="toggle_icon" onclick="openNav()"><img src="~/Content/images/toggle-icon.png"></span>
<div class="main">
<!-- Another variation with a button -->
#using (Html.BeginForm("Urunler", "Magaza", FormMethod.Get))
{
<div class="input-group">
#Html.TextBox("Ara", "", new { #class = "form-control", #placeholder = "Ürün Arayın", #type = "text" })
<div class="input-group-append">
<button class="btn btn-secondary" type="submit" style="background-color: #f26522; border-color:#f26522">
<i class="fa fa-search"></i>
</button>
</div>
</div>
}
</div>
<div class="header_box">
<div class="login_menu">
<!--<ul>
<li><a href="#">
<i class="fa fa-shopping-cart" aria-hidden="true"></i>
<span class="padding_10">Cart</span></a>
</li>
<li><a href="#">
<i class="fa fa-user" aria-hidden="true"></i>
<span class="padding_10">Cart</span></a>
</li>
</ul> -->
</div>
</div>
</div>
<div class="text-center mt-3">
<button class="btn btn-secondary dropdown-toggle mb-3" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Kategoriler
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
#foreach (var item in baseController.GetCategories())
{
<a class="dropdown-item" href="#Url.Action("Urunler","Magaza", new {#kategori = item.Id })">#item.CategoryName</a>
}
</div>
</div>
</div>
</div>
<!-- header section end -->
<!-- banner section start -->
<!-- banner section end -->
</div>
#RenderBody()
<div class="footer_section layout_padding">
<div class="container">
<div class="footer_logo"><img style="height:100px;" src="~/Content/img/logo.png"></div>
<div class="footer_menu">
<ul>
<li>
<li>Uygun Fiyat Politikası</li>
<li>%100 Memnuniyet</li>
</ul>
<br />
<ul>
<li>Anasayfa</h3></li>
</ul>
<br />
<ul>
<li><h3 style="color:white">Adres</h3>Rami Cuma Mah.<br /> Oruç Sk. No:20B<br />Eyüp/İstanbul</li>
</ul>
</div>
<div class="location_main">Whatsapp Hattı İçin Tıkla</div>
<div class="location_main"><img class="img-responsive" style="height:55px;" src="~/Content/img/instalogo.png" /></div>
</div>
</div>
<script src="~/Content/js/jquery.min.js"></script>
<script src="~/Content/js/bootstrap.bundle.min.js"></script>
<script src="~/Content/js/jquery-3.0.0.min.js"></script>
<script src="~/Content/js/plugin.js"></script>
<!-- sidebar -->
<script src="~/Content/css/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="~/Content/css/custom.js"></script>
<script type="text/javascript" src="~/Content/js/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#10"charset="utf-8"></script>
<script>
var counter = 0;
function openNav() {
counter++;
if (counter % 2 == 1)
document.getElementById("mySidenav").style.width = "250px";
else
document.getElementById("mySidenav").style.width = "0";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
#if (ViewBag.ErrorMessage != null || TempData["Fail"] != null)
{
<script>
swal.fire({
title: "Olmadı be",
text: '#ViewBag.ErrorMessage',
icon: "error",
});
</script>
}
#if (ViewBag.successtoindex != null)
{
<script>
swal.fire({
icon: 'info',
title: 'Hadi Anasayfaya Dönelim',
text: '#ViewBag.successtoindex',
button: 'Hadi Anasayfaya Dönelim!'
}).then(function () {
window.location = "/";
});
</script>
}
#if (ViewBag.success != null || TempData["Success"] != null)
{
<script>
swal.fire({
title: "Mükemmel",
text: '#ViewBag.success',
icon: "success",
button: "Aww yiss!",
});
</script>
}
#if (ViewBag.successadminmenu != null)
{
<script>
swal.fire({
title: "Başarılı",
text: '#ViewBag.successadminmenu',
icon: "success",
button: "Muhteşem!",
}).then(function () {
window.location = "menu";
});;
</script>
}
I have a view like this
View Code:-
<div class="col-md-3" style="background-color:white" id="Tabs">
<ul class="nav nav-tabs tabs-left">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
</ul>
</div>
<div class="col-md-9 tabs-left" style="background-color:white">
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<div class="panel-body fixed-panel">
<div class="row">
<div class="col-lg-3">
#Html.DropDownList("List", new SelectList(ViewBag.List, "ListID", "ListDescription"), "Select", new { id = "List1"})
</div>
Continue
</div>
</div>
</div>
<div id="menu1" class="tab-pane fade in active">
<div class="panel-body fixed-panel">
<div class="row">
<div class="col-lg-3">
#Html.DropDownList("List", new SelectList(ViewBag.List, "ListID", "ListDescription"), "Select", new { id = "List1"})
</div>
</div>
</div>
</div>
<div id="menu2" class="tab-pane fade in active">
<div class="panel-body fixed-panel">
<div class="row">
<div class="col-lg-3">
#Html.DropDownList("List", new SelectList(ViewBag.List, "ListID", "ListDescription"), "Select", new { id = "List1"})
</div>
</div>
</div>
</div>
</div>
</div>
"
Jquery To check for validation and close the tab and open the next tab:-
$('.nexttab').click(function (e) {
e.preventDefault();
var sectionValid = true;
section = $(this).closest('.tab-pane.fade');
$.each(section.find('input'), function () {
if (!$(this).valid()) {
sectionValid = false;
}
});
if (sectionValid) {
// collapse current section:
section.collapse('toggle');
// find and uncollapse next section:
section.next().find('.tab-pane.fade').collapse('toggle');
}
});
I have go to close the active tab by "section.collapse('toggle');" however not able to open the next on on clicking the next tab. Any help will be highly appreciated. I am still trying my hands at asp mvc,so i could have missed the obvious.
Try this. I cleaned up the tab markup a bit, wrapped it with a form (required by jquery validate) and used .tab() instead of .collapse().
See http://getbootstrap.com/javascript/#tabs for the relevant documentation.
$('.nexttab').click(function(e) {
e.preventDefault();
var sectionValid = true;
section = $(this).closest('.tab-pane.fade');
sectionValid = section.closest('form').valid();
if (sectionValid) {
// find and uncollapse next section:
$(".nav-tabs .active a").closest("li").next().find("a").tab("show");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<form>
<ul class="nav nav-tabs tabs-left">
<li class="active"><a data-toggle="tab" href="#home">Home</a>
</li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a>
</li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<div class="panel-body fixed-panel">
<div class="row">
<div class="col-lg-3">
</div>
Continue
</div>
</div>
</div>
<div id="menu1" class="tab-pane fade in active">
<div class="panel-body fixed-panel">
<div class="row">
<div class="col-lg-3">
</div>
</div>
</div>
</div>
<div id="menu2" class="tab-pane fade in active">
<div class="panel-body fixed-panel">
<div class="row">
<div class="col-lg-3">
</div>
</div>
</div>
</div>
</div>
</form>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
You should be using the .tab('show') instead of .collapse('toggle').