I have a link on one page that goes to another route where when clicked I want to open modal. I am using bulma with Laravel. Currently when clicked it goes to that route and it shows plain html and not modal as it is supposed to. Any help is appreciated. Here is my code.
index.blade.php
<div class="host" id="q-consent">
<div>
Do you consent for us to use your information in accordance with our
privacy policy
</div>
</div>
privacy-policy.blade.php
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://unpkg.com/bulma-modal-fx/dist/css/modal-fx.min.css" />
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/bulma-modal-fx/dist/js/modal-fx.min.js"></script>
</head>
<body>
<div id="modal-fadeInScale-fs" class="modal modal-fx-fadeInScale">
<div class="modal-content modal-card">
<div>
<button class="modal-button-close delete" id="closecross" aria-label="close" style="float:right; margin-bottom: 20px;">Call Modal</button>
</div>
<section class="modal-card-body">
<div class="content">
<h1 class="has-text-centered">PRIVACY POLICY</h1>
<p>1. This Privacy Policy is an integral part of Terms and Condition of Use and the User shall
agree that he/she have read and understood and agreed to be bound by this Privacy
Policy by accepting Terms and Conditions of Use and/or use/access any of Protranslate
contents/services on the Platform. <br>
2. This Privacy Policy contains terms of use, disclosure and collection of User information. <br></p>
<div>
</section>
<footer class="modal-card-foot">
<button class="modal-button-close button is-success">Yes</button>
<button class="modal-button-close button" id="closebtn">Close</button>
</footer>
</div>
</div>
<script>
$("#lanuchModal").click(function() {
$(".modal").addClass("is-active");
});
$(".modal-close").click(function() {
$(".modal").removeClass("is-active");
});
$("#closebtn").click(function() {
$(".modal").removeClass("is-active");
});
$("#closecross").click(function() {
$(".modal").removeClass("is-active");
});
</script>
</body>
</html>
I see multiple issues with your code samples
References - In the below code you want to launch the element with an ID launchModal but your button does not have an ID
privacy-policy.blade.php
$("#lanuchModal").click(function() {
$(".modal").addClass("is-active");
});
index.blade.php
privacy policy
Swap the headers and JS
Add the JS and Imports to Index
Include the modal
So your Code should be like this
index.blade.php
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://unpkg.com/bulma-modal-fx/dist/css/modal-fx.min.css" />
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/bulma-modal-fx/dist/js/modal-fx.min.js"></script>
</head>
<body>
<div class="host" id="q-consent">
<div>
Do you consent for us to use your information in accordance with our
<button class="button is-primary is-large modal-button" data-target="modal" aria-haspopup="true" id="lanuchModal">Privacy Policy</button>
</div>
</div>
#include('privacy-policy.blade.php)
<script>
$("#lanuchModal").click(function() {
$(".modal").addClass("is-active");
});
$(".modal-close").click(function() {
$(".modal").removeClass("is-active");
});
$("#closebtn").click(function() {
$(".modal").removeClass("is-active");
});
$("#closecross").click(function() {
$(".modal").removeClass("is-active");
});
</script>
</body>
</html>
Privacy-policy.blade.php
<div id="modal-fadeInScale-fs" class="modal modal-fx-fadeInScale">
<div class="modal-content modal-card">
<div>
<button class="modal-button-close delete" id="closecross" aria-label="close" style="float:right; margin-bottom: 20px;">Call Modal</button>
</div>
<section class="modal-card-body">
<div class="content">
<h1 class="has-text-centered">PRIVACY POLICY</h1>
<p>1. This Privacy Policy is an integral part of Terms and Condition of Use and the User shall
agree that he/she have read and understood and agreed to be bound by this Privacy
Policy by accepting Terms and Conditions of Use and/or use/access any of Protranslate
contents/services on the Platform. <br>
2. This Privacy Policy contains terms of use, disclosure and collection of User information. <br></p>
<div>
</section>
<footer class="modal-card-foot">
<button class="modal-button-close button is-success">Yes</button>
<button class="modal-button-close button" id="closebtn">Close</button>
</footer>
</div>
</div>
I assume the privacy policy is static. If not you would need to use Ajax to load content to the Model
Whenever there's an href attribute HTML will redirect to the specified path. It's the expected behaviour unless of course, you use some javascript.
All the best
Related
I am opening a fancybox on click of a link.
This fancy box is having username and password which I want to authenticate on submit button click.(To simplify I have changed the fancybox to a submit button only as of now)
I have written a php code which should have displayed hello, either in fancybox or on the html page (not sure exactly where) but it is not being displayed.
How to get hello on click of submit button either in fancybox or on the html page?
I don't want to use ajax call, but if it is not possible without ajax call, how to use ajax in this case?
//p.php
<html>
<head>
<style>
#hidden-content-b
{
/* Custom styling */
max-width: 850px;
border-radius: 40px;
/* Custom transition - slide from top*/
transform: translateY(-50px);
transition: all .33s;
}
.fancybox-slide--current #hidden-content-b
{
transform: translateY(0);
}
</style>
<link rel="stylesheet" type="text/css" href="fancybox-master/dist/jquery.fancybox.min.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="fancybox-master/dist/jquery.fancybox.min.js"></script>
</head>
<body>
<h2>fancyBox v3.1 - Inline content</h2>
<form action = "p.php" method = "post">
<div class="grid">
<p>
<a data-fancybox data-src="#hidden-content-a"
href="javascript:;" class="btn">Open demo</a>
</p>
<div style="display: none;" id="hidden-content-a">
<center>
<h1><b>HTML</b></h1>
<input type = "submit" value = "Submit" name = "submit">
</center>
</div>
<?php
if(isset($_POST['submit']))
echo "hello";
?>
</div>
</form>
</body>
</html>
When you display some content using fancyBox, then it gets moved from its position and therefore it is not inside your form. You just have to change order
of the elements so that your content contains the form, for example:
<div class="grid">
<p>
<a data-fancybox data-src="#hidden-content-a"
href="javascript:;" class="btn">Open demo</a>
</p>
<div style="display: none;" id="hidden-content-a">
<form action="p.php" method="post">
<center>
<h1><b>HTML</b></h1>
<input type="submit" value="Submit" name="submit">
</center>
</form>
</div>
</div>
redirect form action to the same page and check if(isset($_POST['submit'])) at first
I had the same problem with .Net. You can attach FancyBox to your form with out moving your HTML.
FancyBox Documentation:
// Container is injected into this element
parentEl: "body",
So to answer the question use:
$('[data-fancybox]').fancybox({
parentEl: 'form'
});
// Or better yet, use ID's
$('#ID_to_open_link').fancybox({
parentEl: '#ID_of_form'
});
I have a php page that takes about 50 seconds to load. During that time I wanted the Bootstrap Progress Bar to run. But this runs only after the page loads.
Here is my code:
<head>
<title>Harvest Expense Report</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="dropdown.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://npmcdn.com/tether#1.2.4/dist/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
var progressBar = $('.progress-bar');
var percentVal = 0;
window.setInterval(function(){
percentVal += 2;
progressBar.css("width", percentVal+ '%').attr("aria-valuenow", percentVal+ '%').text(percentVal+ '%');
if (percentVal == 100)
{
var link = document.getElementById('nav-ask');
link.style.display = 'none'
}
}, 500); })
</script>
</head>
<body>
<!--Progress Bar-->
<div class="row">
<div class="col-md-12">
<div class="progress"id="nav-ask">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
0%
</div>
</div>
</div>
</div>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Choose a Month
</button>
<div class="dropdown-menu" select name="Dropdown_Month" id="month_dropdown" aria-labelledby="dropdownMenuButton">
<option class="dropdown-item" href="#" value="This">This Month</option>
<option class="dropdown-item" href="#" value="Last">Last Month</option>
</div>
</select>
</div>
<br>
<br>
<br>
<h3><?php echo date('M Y'); ?></h3>
<table class="table table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Expense</th>
</tr>
</thead>
<?php require_once( 'connection.php' );
$result= $api->getUsers();
$users=$result->data;
$range= Harvest_Range::lastMonth();
foreach($users as $key=>$value){
$user_id=$value->get("id");
$first_name=$value->get("first-name");
$last_name=$value->get('last-name');
$result_expenses=$api->getUserExpenses($user_id, $range);
$expenses_data=$result_expenses->data;
$total_cost=0;
foreach($expenses_data as $key=>$value){
if($value->get("is-locked")=="true"){
$total_cost=$total_cost+$value->get("total-cost");
}}
?>
<?php if($total_cost!=0){?>
<tbody>
<tr>
<td> <?php echo $first_name; echo " ".$last_name; ?> </td>
<td> $ <?php echo $total_cost; ?> </td>
</tr>
</tbody>
<?php }}?>
</table>
</body>
</html>
Here is the link to the PHP page. Any ideas on how can I run the progress bar before the page loads? Currently it loads after the page has fully loaded. I would like to run this as soon as a user enters the URL in the browser.
By default, PHP is only going to send the HTML/output to the browser when it's completely done. This is why you don't see the progress bar until the page has finished loading. There are two options to get around this:
You can use Output Buffering to send page content before your PHP script has finished. Depending on your server config this option may or may not work for you. Read about it here: http://php.net/manual/en/book.outcontrol.php
Change your page to use AJAX to dynamically update the page. When the page loads you will only show the progress bar. Then you make an AJAX call to another PHP script which will do the work necessary to get your data. When it's done it can return the data to the first page and you can use JavaScript/jQuery to hide the progress bar and update the page content.
You're better off going with option 2 as this is the more currently accepted web application standard.
I have a page and I want to show and refresh different ads on different locations. I'm getting response from PHP File successfully via AJAX but unable to append them to specific placements.
HTML CODE
<script>var ads = [];</script>
<div id="ad-728x90">fhhfgh</div>
<!-- Page Content -->
<div class="container">
<!-- Heading Row -->
<div class="row">
<div class="col-md-8">
<img class="img-responsive img-rounded" src="http://placehold.it/900x350" alt="">
</div>
<!-- /.col-md-8 -->
<div class="col-md-4">
<h1>Business Name or Tagline</h1>
<p>This is a template that is great for small businesses. It doesn't have too much fancy flare to it, but it makes a great use of the standard Bootstrap core components. Feel free to use this template for any project you want!</p>
<a class="btn btn-primary btn-lg" href="#">Call to Action!</a>
</div>
<!-- /.col-md-4 -->
</div>
<!-- /.row -->
<hr>
<!-- Call to Action Well -->
<div class="row">
<div class="col-lg-12">
<div class="well text-center">
This is a well that is a great spot for a business tagline or phone number for easy access!
</div>
<div id="ad-300x250" class="ads"></div>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
Javascript / jQuery code
<script type="text/javascript">ads.push("728x90", "300x250");</script>
<script>
$(document).ready(function()
{
function loadAds()
{
$.post('ads.php', { adID: ads }, function (e) {
if (e.status == 'error')
{
$('.ads').each(function ()
{
$(this).remove();
});
}
else if (e.status == 'ok')
{
var data = e.data;
$.each(data, function (adID)
{
$('#ad-' + adID).find('.ads').html();
});
}
}, 'json');
}
loadAds();
});
</script>
JSON Response:
{"status":"ok","data":{"728x90":"\r\n\t\r\n\t\t\r\n\t\t\t
728x90 ads</p>\r\n\t\t</div>\r\n\t</div>","300x250":"\r\n\t\r\n\t\t\r\n\t\t\t300x250 ads</p>\r\n\t\t</div>\r\n\t</div>"}}
The following should place data in proper id
$.each(data, function (adID, adHtml){
$('#ad-' + adID).html(adHtml);
});
The html shown in question doesn't show any children with class ads in <div id="ad-728x90"> so find('.ads') was removed
Question needs clarification of expected results if this doesn't work
I have created an array with 8 items.
Now on page 1 I have for each array-item a html link. Each array-item has a different color. When clicked on one of the 8 html links it will redirect to page 2. There I want that a div-background gets the color linked to an array item.
My php-code generates for each array item a classname: .feeling1, .feeling2, .feeling3, .feeling4, .feeling5, ...
Now this seemed easy by simply saying when clicked on an element with class name (for example) .feeling1 then change the background-color of the div (id="resultaat") on page 2. But apparently this code won't work...
Anyone a solution for this? Thanks in Advance.
Example of one array item:
[
"mood" => "social",
"number"=>"feeling4",
"name"=>"DOK FLEA MARKET",
"picture" => "images/treasures/social.png",
"about" => "Every Sunday till the end of September there's a flea market full with people selling their odds and ends, homemade stuff and art ",
"street"=>"Koopvaardijlaan 4",
"city"=>"GHENT",
"days"=>"opening days: Sunday",
"hours"=>"opening hours: 10:00AM-6:00PM "
],
Page 1:
<body>
<!--CONTAINER-->
<div id="container">
<!--HEADER-->
<header>
<h1 id="headertitel">PICK YOUR MOOD</h1>
</header>
<!--SECTION-->
<section id="middenstuk">
<ul class="list">
<?php foreach ($arr_artist as $key=> $artist) { echo "
<li class='".$artist[' number ']."'><a href='3.php?id=".$key."' class='feeling".$artist[' mood '].", trala'>".$artist['mood']."</a>
</li>"; } ?>
</ul>
<script>
$(".feeling").mousedown(function () {
$(this).addClass('slideright');
});
</script>
</section>
<!-- FOOTER -->
<footer>
<a class="linkhome1" href="4.php">
<div class="locatie"></div>
</a>
<a class="linkhome1" href="index.php">
<div class="home"></div>
</a>
</footer>
</div>
The Jquery code:
$(".feeling2").click(function () {
$("#resultaat").css("background-color", "red");
});
If interpret question correctly , two html exist. At "page1" click on <a> element should render specific element #resultaat background red at "page2" ?
Try
at "page1"
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.11.3.js">
</script>
</head>
<body>
<ul>
<li><a class="feeling2" href="page2.html">feeling 2</a>
</ul>
<script>
$(".feeling2").click(function (e) {
// pass settings to `page2` by appending `"?id=resultaat&background=red"`
// to `.feeling2` `.href`
e.target.href = e.target.href + "?id=resultaat&background=red";
});
</script>
</body>
</html>
at "page2"
<!DOCTYPE html>
<html>
<script src="jquery-1.11.3.js">
</script>
</head>
<body>
<div id="resultaat">
<img src="images/moods/lazy180.png" alt="Logo" />
<img src="" class="moodpics" alt="artist name" />
<!--<p>description</p>-->
<p class="about">about</p>
<p class="street">street</p>
<p class="city">city</p>
<p class="days">days</p>
<p class="hours">hours</p>
<a class = "vernieuwen" href="3.php?id=1" ><div class=""></div></a>
</div>
<script>
$(document).ready(function() {
// parse `location.search` `?id=resultaat&background=red` ,
// set at `click` of `.feeling2` at `page1`
var mood = location.search.slice(1).split(/=|&/);
// select element having `id` `resultaat` ,
// set `$("[id=resultaat]")` `css` `background`:`red`
$("["+mood[0]+"="+mood[1]+"]").css(mood[2], mood[3]);
})
</script>
</body>
</html>
I have found the solution for my "problem" simply by adding this code on page 2:
<div class="<?php echo $arr_artist[$artist_id]['number']?>" id="resultaat">
Actually I have an example code for HTML and jQuery:
Here is the HTML code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1' />
<script src='jquery.min.js'></script>
<script type='text/javascript' src='try.js'></script>
</head>
<body>
<div id="overall">
<br>hello<br>
</div>
<div id="endoverall"></div>
<input type="button" value="Add new Hello" id="button">
</body>
</html>
And the jQuery code:
$(document).ready(function() {
$('#button').click(function(){
var content = '<div id="overall"><br>hello<br></div>';
$('#endoverall').before(content);
});
$('#overall').click(function(){
alert('hello');
});
});
Basically I want the page in which whenever someone clicks on "Add new Hello" button, the #overall div should insert before endoverall and also as per jQuery, whenever someone clicks on that newly insert hello, it should give an alert of it.
The code I've given here is working and add the #overall div, but the alert is not working.
#ahren summed it all up for you, I'm only going to put in a bit more information.
1) You cannot have ids repeating multiple. id is unique to each element alone, thus we use classes so you would do:
var content = '<div class="overall">
2) You are adding new elements after the page load, in this case the newly created elements do not have the click handler binded to it, so we use the .on() method to add the event handler.
$(document).on('click','.overall',function(){
DEMO
Your code generated multiple elements with same ID. Remember that each ID must be unique.
Use same class if the functionality is going to be the same for all buttons.
You need to use event delegation to be able to attach the click event to newly created elements.
Example:
HTML:
<div id="wrapper">
<div class="common"><br>hello<br></div>
<div class="common"><br>hello<br></div>
<div class="common"><br>hello<br></div>
<div class="common"><br>hello<br></div>
<div class="common"><br>hello<br></div>
<div class="common"><br>hello<br></div>
<div class="common"><br>hello<br></div>
<div class="common"><br>hello<br></div>
<div class="common"><br>hello<br></div>
</div>
jQuery:
$("#wrapper").on("click", "div.common", function() {
alert('clicked');
});
DEMO