I want to create modal popup dynamically when the buttons click event fires.
I am adding bootstrap panels with dropable facility using jquery by clicking on html button. works fine.
Css:-
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/font-awesome.css" rel="stylesheet">
Html :-
<body>
<div id="modalarea">
// modal's html will be added here.
</div>
<div class="col-md-12" style="background: -webkit-linear-gradient(#E5F2F6,#CDE8F0);margin-bottom: 20px;">
<button class="btn btn-default pull-right" name="addpanel" id="btn_addpanel" value="Add Panel" type="button">Add Panel</button>
</div>
<div class="col-xs-4 col-sm-2 col-md-2" id="sidebar">
<div class="list-group" id="external-events">
<a href="#" class="list-group-item external-event label label-primary ui-draggable" id="draggable1" ><img src="images/areachart.png" /></a>
</div>
</div><!--/.sidebar-offcanvas-->
<!--chart area -->
<div class="col-xs-8 col-sm-10 col-md-10" id="chartarea">
<div class="row" id="chartrow">
// here dropable panels will be added on button click
</div><!--/row-->
</div><!-- end chart area -->
Input to store state of panels
<input id="countpanels" name="countpanels" type="text" style="display:none;"/>
<input id="dragblename" name="dragblename" type="text" style="display:none;"/>
<hr>
Javascript and jquery
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/draggable.js"></script>
<script>
var dividofpanel='';
var divdragingimage
var thisdragable= '';
$('#btn_addpanel').click(function()
{
var totalcountofpanels=$('#countpanels').val();
if(totalcountofpanels=='')
{
// no panels exist
totalcountofpanels=1;
$('#countpanels').val(parseInt(totalcountofpanels));
}
else
{
// panels already exist
totalcountofpanels=parseInt(totalcountofpanels)+1;
$('#countpanels').val(parseInt(totalcountofpanels));
}
var chartpanel='';
var modalarea='';
var chartpanelfull=$('#chartrow').html();
var modalareafull =$('#modalarea').html();
for(var divid =(totalcountofpanels-1);divid<totalcountofpanels;divid++)
{
chartpanel='<div class="col-xs-8 col-lg-6"><div class="panel panel-default" id="divpanel'+totalcountofpanels+'"><div class="panel-heading demo2" id="divpanelheading'+totalcountofpanels+'"><a class="fa fa-close pull-right" style="top:-5px" href="#" id="panelclose'+totalcountofpanels+'"></a><a data-toggle="modal" data-target="#modal'+totalcountofpanels+'" class="fa fa-cogs pull-right" style="top:-5px" href="#" id="panelsetting'+totalcountofpanels+'"></a></div><div class="panel-body chartareaclass demo" id="divpanelbody'+totalcountofpanels+'">Your Charting Area.</div></div>';
chartpanelfull=chartpanelfull+chartpanel;
modalarea='<div class="modal fade" id="modal'+totalcountofpanels+'" role="dialog"><div class="modal-dialog modal-lg"><div class="modal-content" id="modalcontent'+totalcountofpanels+'" style="border: rgba(0, 0, 0, 0.2) 3px solid; background:-webkit-linear-gradient(#E5F2F6,#CDE8F0);"><div class="modal-header title-chart" style="border-bottom: 3px solid #fff;" id="modalheader'+totalcountofpanels+'" ><button type="button" class="close" data-dismiss="modal">×</button><h4 class="modal-title" id="modalheader'+totalcountofpanels+'">Modal Header</h4></div><div class="modal-body" id="modalbody'+totalcountofpanels+'"><div class="col-md-2" style="padding-left: 0px;padding-right: 0px;"><div class="nav-side-menu"><div class="menu-list" id="modalmenulist'+totalcountofpanels+'"><ul id="menu-content" class="menu-content collapse out"><li data-toggle="collapse" data-target="#menutarget1'+totalcountofpanels+'" class="collapsed active"> Set data <span class="arrow"></span></li><ul class="sub-menu collapse" id="menutarget1'+totalcountofpanels+'"><li class="active">CSS3 Animation</li><li>Bootstrap Model</li></ul><li data-toggle="collapse" data-target="#menutarget2'+totalcountofpanels+'" class="collapsed"> Services <span class="arrow"></span></li> <ul class="sub-menu collapse" id="menutarget2'+totalcountofpanels+'"><li>New Service 1</li> <li>New Service 3</li></ul><li data-toggle="collapse" data-target="#menutarget3'+totalcountofpanels+'" class="collapsed"> New <span class="arrow"></span></li><ul class="sub-menu collapse" id="menutarget3'+totalcountofpanels+'"><li>New New 1</li><li>New New 3</li></ul><li>Profile</li><li>Users </li></ul></div></div></div><div class="col-md-5" style="border-left: 1px solid #fff;"><div class="row" id="modalrow'+totalcountofpanels+'"></div></div><div class="col-md-5 thumbnail"><div id="mychartdiv" style="height:200px;width:400px;"></div></div></div><div class="modal-footer" style="border:1px"><button type="button" class="btn btn-primery" data-dismiss="modal">Close</button></div></div></div></div>';
modalareafull=modalareafull+modalarea; //html of modal will be added in modalarea div tag at top of the body
// Every chart panel contains the WRENCH ICON as hyperlink that calls the Unque modal.
}
$('#modalarea').html(modalareafull);
$('#chartrow').html(chartpanelfull);
});
</script>
Its showing me error :-
jquery-1.12.4.js:10254 XMLHttpRequest cannot load js/bootstrap.min.js.
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https,
chrome-extension-resource.
Please Add your Jqueries in header section.
Related
I can't seem to figure out why bootstrap's modal window isn't popping up.
I've looking into other similar questions and I still can't get it to work.
I've tried the process of elimination and try to eliminate all my scripts (except the bootstrap script) and it still won't open. Same with my CSS files. I also had inputted manual code for a modal window (before I incorporated bootstrap) so I was worried that the id="modal" from other modals would interfere. I deleted those too and nothing worked.
Here is my codepen, I've commented the sections the modal window code starts: https://codepen.io/eylenkim/pen/KKwMPLm
HTML:
<!--
-- fix other <a> tags // fix navigation
--fix "exit" for contact pop up (mobile)
-- center the Contact dialog box on viewport in mobile
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Art By Eylen | Shop</title>
<meta name="description" content="Browse Eylen's art portfolio to view work created with 35mm photography, blockprinting, and acrylic.">
<meta name="author" content="Eylen Kim">
<!-- data-src
––––––––––––––––––––––––––––––––––––––––––––––––––- -->
<link href="subpage-stylesheet.css" rel=stylesheet type="text/css">
<link href="StyleSheet.css" rel=stylesheet type="text/css">
<link href="skeleton.css" rel=stylesheet type="text/css">
<link href="otherCss/normalize.css" rel="stylesheet" type="text/css">
<link href="otherCss/font-awesome.css" rel=stylesheet type="text/css">
<link href="bootstrap-4.3.1-dist/css/bootstrap.css" rel=stylesheet type="text/css">
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" type="text/css">
<!-- Mobile Meta
––––––––––––––––––––––––––––––––––––––––––––––––––-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- Favicon
––––––––––––––––––––––––––––––––––––––––––––––––––-->
<link rel="icon" type="image/png" href="photo/favicon1.png" />
</head>
<!-- Menu // Hamburger Bar
––––––––––––––––––––––––––––––––––––––––––––––––––-->
<nav class="navigation">
<a href="#" class="menu-icon">
<i class="fa fa-bars"></i>
</a>
<ul class="main-navigation" role="navigation">
<div id="nav-x" class="menu-icon">⨯</div>
<li>
<div href="index.html">
Home</a>
</li>
<li>
<div href="portfolio.html">
Portfolio</a>
</li>
<li>
<div class="trigger" style="height: 100%;padding: 10px 0 10px 10px;">
About Me
<div class="modal">
<div class="modal-content" style="height: 95%; max-height: 600px;padding: 2rem 4.6rem;">
<span class="close-button">×</span>
<h3>
Hello,<br>I'm Eylen!
</h3>
<img id="about-me-pic" src="photo/meee.JPG">
<p style="font-size: .75em; height: 44.3%; padding-top: 15px;">This art website is my passion project. I have coded my own platform to showcase & sell my art. What a treat to have you here on this site!<br><br> The mediums I work with: 35mm film photography, acrylic (canvas & glass), polymer clay (earrings), and printmaking.
<br><br>
In my free time I like petting my cat, tickling some gnarly tunes on the bass/electric guitar, coding, playing video games, and doing art stuff.<br><br>
</p>
</div>
</div>
</div>
</li>
<li style="height: 100%;padding: 20px 0 10px 7px;">
<p class="about-me-desktop" onclick="document.getElementById('id01').style.display='block'" style="position: relative;top: -3px;">Contact
</p>
<div class="w3-container">
<div id="id01" class="w3-modal">
<div class="modal-content-contact-portfolio">
<span class="close-button" onclick="document.getElementById('id01').style.display='none'" >×</span>
<h3 style="margin-bottom: 0px;">
Contact Me
</h3>
<p>
<div class="contact-us-form" style="font-size: .7em;">
<form action="https://formspree.io/eylenkim#gmail.com" method="POST">
<div class="row" style="z-index: 9999999;">
<div class="six columns">
<input class="u-full-width" type="text" placeholder="Name" id="nameInput" name="Name" requiprintmaking>
</div>
<div class="six columns">
<input class="u-full-width" type="email" placeholder="Email" id="emailInput" name="Email" requiprintmaking>
</div>
</div>
<textarea class="u-full-width" placeholder="Message" id="messageInput" name="Message" requiprintmaking style="height: 160px;margin-top: 20px;line-height: 17px;padding-top: 8px;"></textarea>
<input class="button u-pull-right" type="submit" value="Send" style="color: black;"><br><br><br>
</form>
</div>
</p>
</div>
</div>
</div>
</li>
</ul>
</nav>
<header>
<div class="container fade-in">
<div class="row">
<a href="index.html">
<h1 class="one-third column u-pull-left">Art By <span><br></span><span id="h1-title-span"> Eylen</span></h1>
</a>
<h2 class="one-third column u-pull-left" id="portfolio-title-desktop">| Shop</h2>
<h2 class="one-third column u-pull-left" id="portfolio-title-mobile">
<span>──<br></span>Shop
</h2>
<div class="about-contact-text" class="one-third column u-pull-right">
<a href="index.html">
<p class="about-me-desktop">Home</p>
</a>
<span class="trigger">
<p class="about-me-desktop">
About Me
</p>
<div class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<h3>
Hello,<br>I'm Eylen!
</h3>
<img id="about-me-pic" src="photo/meee.JPG">
<p>This art website is my passion project. I have coded my own platform to showcase & sell my art. What a treat to have you here on this site!<br><br> The mediums I work with: 35mm film photography, acrylic (canvas & glass), polymer clay (earrings), and printmaking.
<br><br>
In my free time I like petting my cat, tickling some gnarly tunes on the bass/electric guitar, coding, playing video games, and doing art stuff.<br><br>
</p>
</div>
</div>
</span>
<p class="about-me-desktop" onclick="document.getElementById('id02').style.display='block'">
Contact
</p>
<div class="w3-container">
<div id="id02" class="w3-modal">
<div class="modal-content-contact">
<span class="close-button" onclick="document.getElementById('id02').style.display='none'" >×</span>
<h3 style="margin-bottom: 0px;">
Contact Me
</h3>
<p>
<div class="contact-us-form">
<form action="https://formspree.io/eylenkim#gmail.com" method="POST">
<div class="overlap-text">
<div class="overlap-text-base-contact">
<h2 class="load two-thirds column">Contact</h2>
</div>
</div>
<div class="row" style="z-index: 9999999;">
<div class="six columns">
<input class="u-full-width" type="text" placeholder="Name" id="nameInput" name="Name" required>
</div>
<div class="six columns">
<input class="u-full-width" type="email" placeholder="Email" id="emailInput" name="Email" required>
</div>
</div>
<br>
<textarea class="u-full-width" placeholder="Message" id="messageInput" name="Message" required style=" height: 100px;
margin-top: 10px;
line-height: 17px;
padding-top: 8px;"></textarea>
<br><br>
<input class="button u-pull-right" type="submit" value="Send"><br><br><br>
</form>
</div>
</p>
</div>
</div>
</div>
</div>
</div>
</header>
<body class="top" id="top">
<section class="grid-wrapper">
<div class="filter-controls">
<div class="control fade-in">Filter By:
<select class="filter-field form-control">
<option value="">None</option>
<option value="prints">Prints</option>
<option value="earrings">Earrings</option>
<option value="commissions">Commisions</option>
</select>
</div>
</div>
<div class="grid bootstrap-on fade-in" style="flex-direction: row !important;">
<!------ Product w/ Carousel ---------------------------------------------------------------------->
<div class="card item" data-color="earrings">
<div class="price-tag">$10</div>
<div id="earrings1" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="image" class="d-block w-100 crop-shp" alt="...">
</div>
<div class="carousel-item">
<img src="image" class="d-block w-100 crop-shop" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#earrings1" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#earrings1" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="card-body">
<h5 class="card-title">Carousel</h5>
<p class="card-text">I want to potentially add the ability to click on the carousel images for the pop up modal</p>
</div>
</div>
<!------ Product w/ Modal Window ---------------------------------------------------------------------->
<div class="card item" data-color="prints">
<div class="price-tag" data-toggle="modal" data-target="#exampleModal">$10</div>
<img src="image" class="card-img-top crop-shop" alt="Print" data-toggle="modal" data-target="#exampleModal">
<div class="card-body">
<h5 class="card-title">(Modal Window)</h5>
<p class="card-text">I want the modal window to pop up when clickin on the image</p>
</div>
</div>
</div>
<!-- Modal ------------------------------------------------------------------------------------>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Cute Earrings</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>THIS IS THE MODAL!</p>
Buy
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</select>
</section>
<!----- Muuri Filtering ----->
<script>
document.addEventListener('DOMContentLoaded', function () {
var grid = null,
wrapper = document.querySelector('.grid-wrapper'),
searchField = wrapper.querySelector('.search-field'),
filterField = wrapper.querySelector('.filter-field'),
sortField = wrapper.querySelector('.sort-field'),
gridElem = wrapper.querySelector('.grid'),
searchAttr = 'data-title',
filterAttr = 'data-color',
searchFieldValue,
filterFieldValue,
sortFieldValue,
dragOrder = [];
// Init the grid layout
grid = new Muuri(gridElem, {
dragEnabled: false,
layout: {
fillGaps: true
}
});
// Filter field event binding
filterField.addEventListener('change', filter);
// Sort field event binding
sortField.addEventListener('change', sort);
// Filtering
function filter() {
filterFieldValue = filterField.value;
grid.filter(function (item) {
var element = item.getElement(),
isSearchMatch = !searchFieldValue ? true : (element.getAttribute(searchAttr) || '').toLowerCase().indexOf(searchFieldValue) > -1,
isFilterMatch = !filterFieldValue ? true : (element.getAttribute(filterAttr) || '') === filterFieldValue;
return isSearchMatch && isFilterMatch;
});
}
});
</script>
<script src="js/muuri.js"></script>
<script src="https://unpkg.com/web-animations-js#2.3.2/web-animations.min.js"></script>
<!--Modal - Dialog Boxes -->
<script type="text/javascript"> const modals = Array.from(document.querySelectorAll('.modal'));
const triggers = Array.from(document.querySelectorAll('.trigger'));
var closeButton = document.querySelector(".close-button");
//if a trigger is clicked then...
for (const trigger of triggers) {
trigger.addEventListener('click', toggleModal);
}
// .. then toggle it's modal
function toggleModal(event) { event.target.closest('.trigger').querySelector('.modal').classList.toggle("show-modal"); }
// check if the clicked element is a modal, or in a modal
function windowOnClick(event) {
if (modals.some((modal) => modal.contains(event.target))) {
toggleModal();
}
}
</script>
<script>
function closeButton() {
document.getElementByClass('id02').style.display='none'
}
</script>
<!----- JS files ----->
<script type="text/javascript" src="js/scripts.js"></script>
<script type="text/javascript" src="js/singlenav.js"></script>
<script type="text/javascript" src="js/scrollreveal.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload#12.4.0/dist/lazyload.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<i class="icon-chevron-up"></i>
<!----- Lazy Load ----->
<script>
(function() {
function logElementEvent(eventName, element) {
console.log(
Date.now(),
eventName,
element.getAttribute("data-src")
);
}
var callback_enter = function(element) {
logElementEvent("🔑 ENTERED", element);
};
var callback_exit = function(element) {
logElementEvent("🚪 EXITED", element);
};
var callback_reveal = function(element) {
logElementEvent("👁️ REVEALED", element);
};
var callback_loaded = function(element) {
logElementEvent("👍 LOADED", element);
};
var callback_error = function(element) {
logElementEvent("💀 ERROR", element);
element.src =
"https://via.placeholder.com/440x560/?text=Error+Placeholder";
};
var callback_finish = function() {
logElementEvent("✔️ FINISHED", document.documentElement);
};
ll = new LazyLoad({
elements_selector: ".lazy",
load_delay: 300,
threshold: 0,
// Assign the callbacks defined above
callback_enter: callback_enter,
callback_exit: callback_exit,
callback_reveal: callback_reveal,
callback_loaded: callback_loaded,
callback_error: callback_error,
callback_finish: callback_finish
});
})();
</script>
<!----- Scroll To Top ----->
<script>
$(window).scroll(function() {
if ($(this).scrollTop() >= 600) { // If page is scrolled more than 50px
$('#return-to-top').fadeIn(200); // Fade in the arrow
} else {
$('#return-to-top').fadeOut(200); // Else fade out the arrow
}
});
$('#return-to-top').click(function() { // When arrow is clicked
$('body,html').animate({
scrollTop : 0 // Scroll to top of body
}, 500);
});
</script>
</body>
</html>
There are 2 separate issues that are preventing the modal from showing up.
1) The first issue is with your code
The bootstrap library you use returns 404.
How to check if it's happening for you?
Open your browser's inspector, and press CTRL+SHIFT+I
You will see:
Failed to load resource: the server responded with a status of 404 () eylenkim/fullpage/bootstrap-4.3.1-dist/css/bootstrap.css
In fact, this happens for a lot of your relative URLs.
Solution
Replace links to Bootstrap libraries with working ones, eg. from https://getbootstrap.com/
The ones I used in my testing of your code:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 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.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
See gist for minimum code sample for a modal here: https://codepen.io/edwin-chua/pen/rNaLOEg
Once you fix the link problem, you will run into the second issue.
2) The second issue is with your stylesheet
Once you fixed your code as I suggested, you get a dark overlay with no modal.
Removing the reference to https://eylenkim.github.io/ArtByEylen/StyleSheet.css allows the modal to show up, so something in here is interfering with the modal's css.
Here is a working pen: https://codepen.io/edwin-chua/pen/QWwEyyZ
Separate Problem
You seem to have imported some libraries twice, once in the Codepen UI, and once in the HTML file. This will cause you debugging headaches. Make sure you only import them once. Since you are building an entire webpage, I suggest putting all of it in the HTML file.
also see JS tab
And
Further Comments
This section of code seems to be for closing the modal? If so, it probably isn't required, as Bootstrap automatically binds the click events.
<!--Modal - Dialog Boxes -->
<script type="text/javascript"> const modals = Array.from(document.querySelectorAll('.modal'));
const triggers = Array.from(document.querySelectorAll('.trigger'));
var closeButton = document.querySelector(".close-button");
//if a trigger is clicked then...
for (const trigger of triggers) {
trigger.addEventListener('click', toggleModal);
}
// .. then toggle it's modal
function toggleModal(event) { event.target.closest('.trigger').querySelector('.modal').classList.toggle("show-modal"); }
// check if the clicked element is a modal, or in a modal
function windowOnClick(event) {
if (modals.some((modal) => modal.contains(event.target))) {
toggleModal();
}
}
</script>
I am having trouble displaying information on my popup page. I created main view where the user clicks a card and it should trigger a modal to display required information (including partial view) through ajax, however that partial page should be displayed through a controller but the action result within a controller is not triggered at all despite the fact that I have specified the data-url withing my java-script function.
Here is my index page:
<div id="pageContainer">
<div class="container">
<!--Boxers Cards-->
<div class="row text-center default-div-top-padding">
<div class="col-lg-3 col-md-6 mb-4 rounded fighter-card" id="FighterDetails">
<a id="popup-button" data-url="#Url.Action("FighterDetails", "RankingsController")" data-toggle="modal" data-target=".fighter-modal">
<img class="card-img-top" src="http://nyfights.com/wp-content/uploads/2017/12/Screen-Shot-2017-12-11-at-5.10.25-PM.png" alt="" />
<div class="card-body fighter-card-body-color" style="border-bottom: 2px solid rgb(255, 172, 0)">
<div class="card-title fighter-card-title">Vasyl Lomachenko</div>
<ul class="fighter-card-information">
<li>
<div class="fighter-card-information-title">Belts: </div>
<div class="fighter-card-information">WBA, WBO, IBF, WBC</div>
</li>
<li>
<div class="fighter-card-information-title">Record:</div>
<div class="fighter-card-information">11-1-0 9KO</div>
</li>
</ul>
</div>
<div class="card-footer fighter-card-ranking-position fighter-card-footer-color">
<h1>1</h1>
</div>
<input type="hidden" name="popup=title" value="Fighter Details" />
</a>
</div>
</div>
<!--Boxers Cards End-->
</div>
</div>
<!--Modal-->
<div class="modal fade fighter-modal" role="dialog" aria-labelledby="gridSystemModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header blueBackground goldBorderBottom">
<button type="button" class="close" data-dismiss="modal" aria-label="close" data-toggle="tooltip" data-placement="left" title="close">
<span aria-hidden="true">
×
</span>
</button>
<span class="modal-title" id="gridSystemModalLabel"></span><br />
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="">
<div id="ajax-target-container"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
//AJAX Popup Control - Renders a popup with designed partial view
$("container").on("click", "#popup-button", function () {
//Set the URL
var url = $(this).attr('data-url');
//Set the title
var popupTitle = $(this).find($('input[name=popup-title]')).val();
$(".modal-title").text(popupTitle);
//Set a default spinner
$(".modal #ajax-target-container").append("<span class='blueText'><i class='fa fa-spinner fa-spin fa-3x fifteenPxSpacingRight'></i> Loading... </span>");
$.ajax({
type: "GET",
cache: false,
url: url,
success: function (data) {
$(".modal #ajax-target-container").empty();
$(".modal #ajax-target-container").html(data);
}
})
});
});
</script>
My Partial View:
<div class="row">
#using (Html.BeginForm("", "", FormMethod.Post, new { #id = "Fighter-Details" }))
{
#Html.AntiForgeryToken()
<div class="card-body fighter-card-body-color" style="border-bottom: 2px solid rgb(255, 172, 0)">
<div class="card-title fighter-card-title">Vasyl Lomachenko</div>
<ul class="fighter-card-information">
<li>
<div class="fighter-card-information-title">Belts: </div>
<div class="fighter-card-information">WBA, WBO, IBF, WBC</div>
</li>
<li>
<div class="fighter-card-information-title">Record:</div>
<div class="fighter-card-information">11-1-0 9KO</div>
</li>
</ul>
</div>
}
And my controller:
[HttpGet]
public PartialViewResult FighterDetails()
{
return PartialView("~/Views/Rankings/PartialViews/FighterDetails.cshtml");
}
Now when I click the card it will display only the top of the popup:
And that's it. Controller is not triggered at all so it's seems it is not going through the java script function but I'm not sure why.
Any help would be appreciated,
Thanks
In your JS code, it looks like you're missing the '.' before 'container' in the jQuery selector. Since 'container' is a class attribute, the proper jQuery selector is '.container'.
Try changing
$("container").on("click", "#popup-button", function () {
to
$(".container").on("click", "#popup-button", function () {
This is my first post here so please don't be mad at me if I'm doing something wrong.
Here is the case: Trying to add bootstrap 3 scrollspy functionality into my code on codepen and it's basically not working. Tried different solutions from stackoverflow, etc. and nothing helps.
Is there any good person who can take look into my code?
HTML:
<div class="container-fluid">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Patryk Jamróz</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active">About <span class="sr-only">(current)</span></li>
<li>Projects</li>
<li>Contact </li>
</ul>
</nav><!-- navbar -->
<div data-spy="scroll" data-target="#nav" data-offset="0">
<h3 class="text-center" id="about">about</h3>
<h3 class="text-center" id="projects">projects</h3>
<h3 class="text-center" id="contact">contact</h3>
</div>
CSS:
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.row {
margin-left: 0;
margin-right: 0;
}
body {
position: relative;
}
In codepen settings tab I included:
CSS:
bootstrap.min.css
JS:
jquery.min.js
bootstrap.min.js
Here is a link to my codepen: https://codepen.io/PatrykJamroz/full/RMZJva
First thing is you need to initiate the body and not a div tag so your body should have the following:
<body data-spy="scroll" data-target=".navbar" data-offset="0">
And not the:
<div data-spy="scroll" data-target="#nav" data-offset="0">
because the body is the thing that the scroll event is attached to so initiating a div does no good unless you are scrolling with that div.
Next you need to attach it the the .navbar or the nav itself would be the best practice. And also I see that you are using jquery 3 and this may cause an issue with bootstrap 3 so you may want to switch to jquery 2.
I think that you don't really undestand how bootstrap scrollspy actually work. You have to make the 'body' as the main scrollspy container! take a look:
$('body').scrollspy({
target: '#bs-example-navbar-collapse-1'
})
$('#scrollDiv').on('activate.bs.scrollspy', function () {
//Do stuff if there is a new event in scrollspy
})
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.row {
margin-left: 0;
margin-right: 0;
}
body {
position: relative;
}
<div id="scrollDiv" class="container-fluid" data-spy="scroll" data-target="#bs-example-navbar-collapse-1">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Patryk Jamróz</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active">About <span class="sr-only">(current)</span></li>
<li>Projects</li>
<li>Contact </li>
</ul>
</nav><!-- navbar -->
<div>
<div id="about" class="col-md-12">
<h3 class="text-center">about</h3>
<div class="row">
<div class="col-sm-6">
<img class="img-responsive center-block" src="https://thumb1.shutterstock.com/display_pic_with_logo/2877733/272163653/stock-photo-happy-young-man-wearing-glasses-and-smiling-as-he-works-on-his-laptop-to-get-all-his-business-272163653.jpg" alt="not me">
</div>
<div class="col-sm-6">
<h4>Mechanical Designer</h4>
<p><span><i class="fa fa-user-circle"></i></span> An open-minded, creative and focused on new tech solutions</br>
<span><i class="fa fa-tv"></i></span> Excellent knowledge of such tools as SolidWorks and SolidWorks Simulation</br
<span><i class="fa fa-check"></i></span> FCT, ICT, EOL test systems, rack cabinets, inline systems and sheet metal</br>
<span><i class="fa fa-language"></i></span> English language advanced both speaking and writing</br>
<span><i class="fa fa-graduation-cap"></i></span> AGH UST graduate - Master of Engineering in Mechanical Engineering</br>
<span><i class="fa fa-coffee"></i></span> Automotive, active lifestyle, IT</p>
</div>
</div>
</div>
</div> <!-- About section -->
<hr>
<div id="projects" class="col-md-12">
<h3 class="text-center">projects</h3>
<div class="row">
<div class="col-sm-4">
<div class="well">
<img class="img-responsive center-block" src="http://www.hawkridgesys.com/blog/wp-content/uploads/2018/01/01-Improving-Assembly-Performance-with-SpeedPak.png" alt="dron">
1st well
</div>
</div>
<div class="col-sm-4">
<div class="well">
<img class="img-responsive center-block" src="https://embedwistia-a.akamaihd.net/deliveries/678ea92af801e6c2d37e149980d62bcc38d7770b.jpg" alt="engine">
2nd well
</div>
</div>
<div class="col-sm-4">
<div class="well">
<img class="img-responsive center-block" src="https://blog.onu1.com/hubfs/solidworks-2018-3d-interconnect.png?t=1520267377858" alt="whatever">
3rd well
</div>
</div>
</div> <!-- Projects 1st row -->
<div class="row">
<div class="col-sm-4">
<div class="well">
<img class="img-responsive center-block" src="https://blog.onu1.com/hubfs/solidworks-2018-3d-interconnect.png?t=1520267377858" alt="whatever">
4th well
</div>
</div>
<div class="col-sm-4">
<div class="well">
<img class="img-responsive center-block" src="https://blog.onu1.com/hubfs/solidworks-2018-3d-interconnect.png?t=1520267377858" alt="whatever">
5th well
</div>
</div>
<div class="col-sm-4">
<div class="well">
<img class="img-responsive center-block" src="https://blog.onu1.com/hubfs/solidworks-2018-3d-interconnect.png?t=1520267377858" alt="whatever">
6th well
</div>
</div>
</div> <!-- Projects 2nd row -->
</div>
<hr>
<div id="contact" class="col-md-12">
<h3 class="text-center">contact</h3>
<h3 class="text-center">Don't hesitate to contact me at:</h3>
<div class="col-xs-12" style="height:5px;"></div>
<h4 class="text-center"><span><i class="fa fa-envelope"></i></span> jamroz.patryk#gmail.com</h4>
<h3 class="text-center">...or just fill the form below!</h3>
<div class="col-xs-12" style="height:5px;"></div>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">E-mail</span>
<input type="text" class="form-control" placeholder="Your E-mail address" aria-describedby="basic-addon1">
</div> <!-- email input-->
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Name</span>
<input type="text" class="form-control" placeholder="Your name" aria-describedby="basic-addon1">
</div> <!-- name input -->
<div class="input-group input-group-lg">
<span class="input-group-addon" id="basic-addon1">Message</span>
<input type="text" class="form-control" placeholder="Your message to me" aria-describedby="basic-addon1">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Send!</button>
</span>
</div> <!-- message input -->
</div>
<div class="col-xs-12" style="height:50px;"></div>
<div class="panel-footer text-center">Made by Patryk Jamróz. March 2018.</div>
</div><!-- Container fluid -->
In that way it work! Good luck, bye.
u can try whit jquery
$("#yourtarget").click(function() {
$('html, body').animate({
scrollTop: $("#yourDiv").offset().top
}, 2000);
});
Laravel view code:
<div class="modal fade" id="images" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×
</button>
<h4 class="modal-title">Upload Images</h4>
</div>
<div class="modal-body" id="modal-content">
<div class = "row">
<div class="col-sm-12">
<div class = "col-sm-6" align="center">
<div >
<a href = "#" class="upload" >
<img src="" width="250"
height="250" class="someClass">
<button type="button" align="center"><span class="glyphicon
glyphicon-upload"></span>Upload photo</button>
</a>
</div>
</div>
<div class="col-sm-6">
<h3>Image Guidelines</h3><br/>
Remember!!
<ul>
<li>Upload authentic product photos taken in bright lighting.</li>
<li>Use clear color images with minimum resolution of 1100x1100px.
</li>
<li> Maximum Images supported :- 5</li>
<li> Minimum Images required :- 1</li>
<li>Minimum Image Resolution :- 1100x1100</li>
<li>Image should be having pure white or light grey background.
</li>
<li>Image shouldn’t be blurred.</li>
<li>Product should occupy 80% of space in image.</li>
<li>Include all products in primary image (first image).</li>
</ul>
</div>
</div>
</div>
<div>
**<a href="#">
<img src="haghwaylitecontroller.jpg" alt="gemcamera"
style="width:150px" class="upload1">
</a>
<a href="#">
<img src="lightningswitchmodule.jpg" alt="gemcamera"
style="width:150px" class="upload1">
</a>
<a href="#" >
<img src="videodoorphone.jpg" alt="gemcamera" style="width:150px"
class="upload1">
</a>**
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-
dismiss="modal">CANCEL</button>
<button type="submit" class="btn btn-default" id="login"
onclick="javascript:validate()">SAVE</button>
</div>
</div>
</div>
This is my bootstrap code inside laravel view. It includes thumbails of images which is marked in block.On clicking with the images,the same image should display in the bootsrap body(ie., the clicked image should display on the image source tag which is inside the bootstrap body has the class name of someClass)
Script code:
<script type="text/javascript">
$(document).ready(function() {
$(document).on("click", ".upload1", function() {
var imageSRC = $(this).attr('src');
// alert(imageSRC);
$('#images').on('show.bs.modal', function () {
$(".someClass").attr("src", imageSRC);
});
</script>
This is the script code I have tried for my requirement.
Keep only this line once you store the value in imageSRC variable
$(".someClass").attr("src", imageSRC);
I am experimenting with bootstrap, angularjs. So I pushed nav-tabs inside modal-window and open this modal by a link's click. But I want to open appropriate tab straight on click. If i click on travel, I want to get to the travel tab etc. What I should use to solve this problem? Maybe I need to simulate click or something like this?
http://jsfiddle.net/3kgbG/1056/
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
<div class="hobbies">
hobbies & interests
</div>
<div class="row padding-top group-icons">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<a href="#" data-toggle="modal" data-target="#myModal">
football
</a>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<a href="#" data-toggle="modal" data-target="#myModal">
travel
</a>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<a href="#" data-toggle="modal" data-target="#myModal">
history
</a>
</div>
</div>
</div> <!--popUp container-->
<!-- Modal -->
<div id="myModal" class="modal fade popUp" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h2 class="h2-style">My Hobbies</h2>
<hr class="hr_line"/>
</div>
<div class="modal-body">
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#bartending" aria-controls="bartending" role="tab"
data-toggle="tab">bartending</a></li>
<li role="presentation"><a href="#football" aria-controls="football" role="tab"
data-toggle="tab">football</a>
</li>
<li role="presentation"><a href="#travel" aria-controls="travel" role="tab"
data-toggle="tab">travel</a>
</li>
<li role="presentation"><a href="#history" aria-controls="history" role="tab"
data-toggle="tab">history</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content" ng-controller="HobbiesCrtl">
<div role="tabpanel" class="tab-pane fade" id="{{hobby.id}}" ng-repeat="hobby in hobbies">
<div class="container padding-top">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<img src="{{hobby.img}}" alt=""
style="width: 70%; margin: 0 auto; display: block">
</div>
<div class="col-xs-12 col-sm-6 col-md-9 col-lg-9">
{{hobby.description}}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!--popUp container-->
<!--angular Ctrl-->
myApp.controller('HobbiesCrtl', function($scope, $http){
$scope.title = "my hobbies";
$http.get(window.location + 'js/hobbies.json').success(function(data) {
$scope.hobbies = data;
})
} );
this is my json file:
{
"id": "football",
"img": "http://images.fastcompany.com/upload/adidas-jabulani-ball.jpg",
"description": " ball with the foot to score a goal. Unqualified, the word football is understood to refer to whichever form of is the most popular in the"
},
{
"id": "travel",
"img": "http://thumbs.dreamstime.com/z/travelling-world-21448211.jpg",
"description": " ball with the foot to score a goal. Unqualified, the word football is understood to refer to whichever form of is the most popular in the"
},
As soon as you are using the same controller for the view and modal window, so they are sharing the same $scope.
You can create scope variable like activeTab, and set in on click:
<a href="#" data-toggle="modal" ng-click="activeTab == 'football'" data-target="#myModal">
football
</a>
In your modal window just toggle active class if scope variable activeTab has neccessary value:
<li role="presentation" ng-class="{active: activeTab == 'football'}"><a href="#football" aria-controls="football" role="tab"
data-toggle="tab">football</a>