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'
});
Related
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
I have three div tags, on click of a link I want to reload the second div tag only instead of loading the complete page, I want to keep the first and third div tag as static and second div tag should be dynamic?
<div class="first">
<?php echo $data->hospital_name;?>
</div>
<div class ="second">
//content//
<div>
<div class ="third">
//content//
<div>
First of all you should make the difference between your divs by making their IDs unique as Billy said in the comment. Classes are used to make a common selector for all elements. Create your HTML like below:
<div id="first">
<?php echo $data->hospital_name;?>
</div>
<div id="second">
//content//
<div>
<div id="third">
//content//
<div>
Now to load data in only a particular div, you can use Ajax request in three ways using jQuery.
$('#second').load("load.php");
OR
$.post('load.php?param=value',function(data){
$('#second').html(data);
});
OR
$.get('load.php?param=value',function(data){
$('#second').html(data);
});
OR
$.ajax({
url:"load.php";
data: yourDataObject,
success: function(data){
$('#second').html(data);
}
});
Hope all above will help a little
You can try load
$(".second").load("yourhtml.html");
Give id to second div and then try following
#secondDivId::after {
content:"";
}
it will refresh the second div.
Try this it's working :
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#link").click(function(){
$(".second").load("abc.html");
});
});
</script>
</head>
<body>
<div class="first">
<a id="link" href="patientLogin/patientVisit_details/<?php echo $data->patient_visit_id;?>"><?php echo $data->hospital_name;?></a>
</div>
<div class ="second">
//content//
<div>
<div class ="third">
//content//
<div>
</body>
</html>
Here, abc.html is the file where your content exist that you want to display in <div class="second">...</div> on click the link.
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
I have a page which has 4 jquery UI tabs. The first tab just displays a message saying "HELLO". The 2nd, 3rd and 4th tabs have some html and php scripts running. All the pages are getting displayed properly. But say for example I am executing the php script on the 3rd tab by submitting a button. It does get executed but when the page reloads, I see the first tab flicker for a second and then the 3rd tab gets displayed. Same is the case for all the tabs. The first tab always gets displayed for a seconds and then it goes. Could you please let me know to add some code so that the 1st tab (or the div in which it is written ) is bypassed when other tab executes some php script.
My Javascript is as follows :
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(document).ready(function()
{
$("#menu ul li a").click(function(e) {
e.preventDefault();
$("#menu ul li a").each(function() {
$(this).removeClass("active");
});
$(this).addClass("active");
});
$("#menu").tabs({
fx: { height: 'toggle', opacity: 'toggle' }
});
});
My HTML code is as follows :
<div id="menu">
<ul>
<li><a href="#tab-1" onClick="window.location.href='#tab-1';return false;" >Welcome</a></li>
<li>Activation Response Generator </li>
<li>Decode Support Key</li>
<li>Decode Recovery Key</li>
</ul>
<div id="tab-1" >
<div id ="main">
<div align=center>
<table style="padding-top:20px;"> <tr>
<td style="padding-left:20px;"> <img src="Aruba_Networks_newLogo.png " /> </td>
<br/>
</div>
<?php session_start();$user = $_SESSION['usr'];?>
</br>
<tr>
<td> <font size ="6"> <b> <u> Welcome <?php echo $user; ?></u> </b> </font> </td>
</br>
</br>
<td> <font size ="6"> <b> <u> HAVE A GREAT DAY </u> </b> </font> </td>
</br>
</br>
<td> <font size ="6"> <b> Logout </b> </font></td>
</tr>
</div>
</div>
<div id="tab-2">
<div id= "main">
SOME HTML SUBMIT BUTTONS AND TEXTBOXES TO DISPLAY OUTPUT WITH PHP RUNNING IN THE BACKGROUND
</div>
</div>
<div id="tab-3">
<div id= "main">
SOME HTML SUBMIT BUTTONS AND TEXTBOXES TO DISPLAY OUTPUT WITH PHP RUNNING IN THE BACKGROUND
</div>
</div>
<div id="tab-4">
<div id= "main">
SOME HTML SUBMIT BUTTONS AND TEXTBOXES TO DISPLAY OUTPUT WITH PHP RUNNING IN THE BACKGROUND
</div>
</div>
</div>
Create a overlay div. Put this inside the body for the whole page, or inside a div with position: relative.
CodePen
.overlay {
position: fixed; /* or absolute if inside a div */
width: 100%; height: 100%;
background: white;
}
At some point, hide that div to show the underlying content. This would likely be in a document ready handler, or after an AJAX call.
$(document).ready(function(){ $('.overlay').fadeOut(); });
You can also spice it up, and put a loading message inside the overlay.
<div class="overlay">
<h1>Loading</h1>
</div>
.overlay h1 {
position: absolute;
top: 45%; /* nearly the center, good enough for a second of visibility */
text-align: center;
width: 100%;
}
so I am currently using a dialog box with an iframe inside (page from same domain) to return a value from the iframe to the page the dialog is on. Everything works great except when I submit a form. When i submit the search form and try to click the a's to get the value of the id to the input nothing happens. Heres an example of what im doing.
heres the page with the dialog
<html>
<head>
<script>
$(document).ready(function(){
$('a#booksearch_lnk').click(function(){
$('.choosebookbox').dialog('open').css('display','block');
$('#choosebookframe').contents().find('a.choosebook').click(function(){
// alert($(this).attr('id'));
$("#isbn").val($(this).attr('id'));
$('.choosebookbox').dialog("close");
});
});
});
</script>
</head>
<body>
<div class="choosebookbox" style="display:none">
<h4>Choose your first book</h4><div align="center" style="width: 500px; height: 500px"><iframe scrolling="no" id="choosebookframe" src="http://www.myurl.com/choosebook.php" width="100%" frameborder="0" height="100%"></iframe></div>
</body>
and here is the iframe page...
<html>
<head>
</head>
<body>
<div style="width:600px;height:600px;">
<form action="<?php echo $PHP_SELF;?>" method="get">
<input type="text" name="search" style="width:150px"/>
<input type="submit" value="search" class="orangebtnsm" />
</form>
<? if(isset($_GET['search'])){
$search = $_GET['search'];
echo "search for $search";
echo "<ul>";
echo "<li><a id='2345676898' class='choosebook'>Book 5</a>";
echo "<li><a id='1985563345' class='choosebook'>Book 6</a>";
echo "</ul>";
}
?>
<ul>
<li><a id="1234567898" class="choosebook">Book 1</a></li>
<li><a id="2345676898" class="choosebook">Book 2</a></li>
<li><a id="9854645645" class="choosebook">Book 3</a></li>
<li><a id="1985563345" class="choosebook">Book 4</a></li>
</ul>
</div>
</body>
</html>
I would say try using a future-proof event handler.
Swap
$('#choosebookframe').contents().find('a.choosebook').click(function(){...
With
$('#choosebookframe').contents().find('a.choosebook').live('click',function(){
I think the binding is being lost when the form is submitted.