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.
Related
i search any video and it display results from the youtube. now i want to display results through ajax. whenever i search for any video, it should display videos without reloading the page. i have written a little bit code of ajax. i dont know how to pass videos result in the ajax. below is the code.
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="search">
<div class="navbar-nav mr-auto">
<form action="fetch.php" method="POST" class="form-inline">
<input class="form-control mr-sm-2" type="text" name="vid" id="vid" placeholder="Search">
<button class="btn btn-success" type="submit" name="search" id="search">Search</button>
</form>
</div>
</div>
<div class="navbar-nav ml-auto">
<?php
if(isset($_SESSION['email']))
{
echo "<a href='logout.php'>Logout</a>";
}
?>
</div>
</nav>
<br>
<?php
if(isset($_POST['search']))
{
$query = $_POST['vid'];
}
$API_key = '';
$maxResults = 10;
$api_url = 'https://www.googleapis.com/youtube/v3/search?part=snippet&type=video&q='.urlencode($query).'&maxResults='.$maxResults.'&key='.$API_key.'';
$videoList=json_decode(file_get_contents($api_url, true));
echo "<div class='left-display'>";
echo '<iframe id="play-video" width="560" height="315" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
echo "</div>";
echo "<div class='right-display'>";
echo "<h4>Up Next</h4>";
foreach($videoList->items as $item)
{
if(isset($item->id->videoId))
{
echo '<div id="youtube-video">
<div>
<img class="image" width="240" height="150" src="https://i.ytimg.com/vi/'.$item->id->videoId.'/default.jpg" data="https://www.youtube.com/embed/'.$item->id->videoId.' ">
<p>'. $item->snippet->title .'</p>
</div>
</div>';
}
}
echo "</div>";
?>
<script type="text/javascript">
$('.image').click(function()
{
const value = $(this).attr("data");
$('#play-video').attr("src", value);
});
$(document).ready(function(){
$('#search').click(function(e){
var searchterm = $('#vid').val();
e.preventDefault();
$.ajax({
method: "POST",
url: fetch.php,
data: {search, searchterm},
datatype: "html",
success: function(data){
$('#youtube-video').html(data);
}
});
})
});
</script>
I can see a few possible issues with your code:
You've written $('#youtube-video').html(data); to append the results of the AJAX call into your page, but there is no element called "youtube-video" ready-made in your page, so there's nowhere for the data to go. You need a ready-made element to put the results into. (Your PHP code defines an element called "youtube-video" but it only outputs it during the AJAX request, so it's there in data - but you haven't processed that yet so it doesn't exist in the page at the time you try to use it.)
Your format for sending the data is wrong - to define a property called "search" it should be {search: searchterm}
You're not fully separating the PHP code which runs when the page loads from the code which runs when AJAX is called. The PHP code which tries to search will run every time you execute the page, so you could get errors when it first loads (because $query won't be defined) and also the response to your AJAX would have other bits of the page mixed up in it as well (including the static HTML sections).
Short of putting the AJAX-related PHP code into a separate file, the next best thing is to put it all into an if statement at the top of the script, and finish it with an exit() command so it doesn't output anything else it shouldn't.
$query = $_POST['vid']; looks for a parameter called "vid" which isn't being submitted b the AJAX request. You only send "search" in the AJAX request, which contains the query to search for, so you need to look for that in $_POST instead - i.e. $query = $_POST['search'];.
Your AJAX call sets the URL of the request to "fetch.php". It's not clear whether this is the name of the file containing the code you've shown us, or another file. But the code to search and display the videos is in the code you've shown us, so the URL needs to be the name of that file.
Here's a version of the code which resolves those problems (apart from number 5 because I can't tell if that's a mistake or not):
<?php
if(isset($_POST['search']))
{
$query = $_POST['search'];
$API_key = '';
$maxResults = 10;
$api_url = 'https://www.googleapis.com/youtube/v3/search?part=snippet&type=video&q='.urlencode($query).'&maxResults='.$maxResults.'&key='.$API_key.'';
$videoList = json_decode(file_get_contents($api_url, true));
echo "<div class='left-display'>";
echo '<iframe id="play-video" width="560" height="315" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
echo "</div>";
echo "<div class='right-display'>";
echo "<h4>Up Next</h4>";
foreach($videoList->items as $item)
{
if(isset($item->id->videoId))
{
echo '<div class="youtube-video">
<div>
<img class="image" width="240" height="150" src="https://i.ytimg.com/vi/'.$item->id->videoId.'/default.jpg" data="https://www.youtube.com/embed/'.$item->id->videoId.' ">
<p>'. $item->snippet->title .'</p>
</div>
</div>';
}
}
echo "</div>";
exit();
}
?>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="search">
<div class="navbar-nav mr-auto">
<form action="" method="POST" class="form-inline">
<input class="form-control mr-sm-2" type="text" name="search" id="vid" placeholder="Search">
<button class="btn btn-success" type="submit" name="submit" id="search">Search</button>
</form>
</div>
</div>
<div class="navbar-nav ml-auto">
<?php
if(isset($_SESSION['email']))
{
echo "<a href='logout.php'>Logout</a>";
}
?>
</div>
</nav>
<br>
<div id="videos"></div>
<script type="text/javascript">
$('.image').click(function()
{
const value = $(this).attr("data");
$('#play-video').attr("src", value);
});
$(document).ready(function(){
$('#search').click(function(e){
var searchterm = $('#vid').val();
e.preventDefault();
$.ajax({
method: "POST",
url: fetch.php,
data: {search: searchterm},
datatype: "html",
success: function(data){
$('#videos').html(data);
}
});
});
});
</script>
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 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">
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.
I am a newbi to webdesign/php and javascript and I am having a problem. Please look at this code:
<script type="text/javascript">
<!--
function thanksDiv(){
document.getElementById("myThanksDiv").style.display ='block';
}
function hideDiv(id){
document.getElementById(id).style.display='none';
}
//-->
</script>
<form id="contacts-form" method="post" action="email.php" target="myiframe">
<fieldset>
<div class="alignright">Send Your Message!</div>
</fieldset>
</form>
<iframe name="myiframe" id="myiframe" src="" width=1 height=1 style="visibility:hidden;position:absolute;"></iframe>
<div id="myThanksDiv" style="width:200px;height:150px;position:absolute;left:50%; top:20px; margin-left:-100px;border:1px solid black; background:#fff;display:none;padding:20px;">Thanks! <br />Your message was sent.</div>
and in email.php:
echo '<script type="text/javascript">'
, thanksDiv();'
, '</script>';
?>
The idea is that when I click on 'Send Your Message' I should see a box saying 'message was sent', but I don't.
If I don't go through the email.php page and I just call thanksDiv from the form submit link it works. Any idea why?
the javascript in your iframe is not on the same "scope" as your parent document where the function is defined.
In order to call it try:
echo '<script type="text/javascript">'
, 'parent.thanksDiv();'
, '</script>';
The difference is the "parent" which tells JS to look in the frame's parent for the function ;)
Please make sure all is on the same domain/port, otherwise you could violate the Same Origin Policy and it therefore might not work.
Edit
Here is a configuration that works fine on my machine (PHP5, Firefox):
test.html
<html>
<head>
<script type="text/javascript">
<!--
function thanksDiv(){
document.getElementById("myThanksDiv").style.display ='block';
}
function hideDiv(id){
document.getElementById(id).style.display='none';
}
//-->
</script>
</head>
<body>
<form id="contacts-form" method="post" action="email.php" target="myiframe">
<fieldset>
<div class="alignright">Send Your Message!</div>
</fieldset>
</form>
<iframe name="myiframe" id="myiframe" src="" width=1 height=1 style="visibility:hidden;position:absolute;"></iframe>
<div id="myThanksDiv" style="width:200px;height:150px;position:absolute;left:50px;top:20px; border:1px solid black; background:#fff;display:none;padding:20px;">Thanks! <br />Your message was sent.</div>
</body>
</html>
email.php:
<?php
echo '<script type="text/javascript">parent.thanksDiv();</script>';
?>
echo '<script type="text/javascript">'
, 'thanksDiv();'
, '</script>';
Missing ' in second line.
function thanksDiv(){
document.getElementById("myThanksDiv").style.display ='block';
}
this function should be there in email.php tooo. OR add it a separate page and include page there.
When you click on Send your message call
onclick="thanksDiv();";
All the content from the form page will be gone on the next page. So there is no longer a thanksDiv function. When you submit the form you are going to a different page entirely.
Calling the function directly works because you are still on that page.
Create a success.html page for instance and in email.php instead of echoing js do this:
header('Location: http://www.yoursite.com/success.html');
Which will redirect to success page.