Probably I'm misunderstanding something about Fancybox v1 but have the following minor issue. First I'm calling fancybox via clicking a link:
$(document).ready(function() {
$(".href").click(function() {
$.fancybox.open({
href : $(this).attr("data-id"),
type : 'iframe'
});
});
});
This loads a simple PHP/HTML page with JS, to be populated into the Fancybox window:
<!DOCTYPE html><html><head><title></title></head>
<body>
<?php
# this is the fancybox content
echo "<script>var dcwrtext = 'random_text'; document.write(dcwrtext);</script> Some other content to show on fancybox.";
?>
</body></html>
The content appears without a problem, but the nuance is, the document.write value is echoed after the closing </script> tag: and this makes the content visible on the page, not the document.write() function. You can see this in the source code:
<body>
<script>var dcwrtext = 'random_text'; document.write(dcwrtext);</script>**random_text** Some other content to show on fancybox.
</body>
The problem seems to be with fancybox, if I use the document.write() on a standard HTML (not fancyboxed) page, as expected, it will correctly show 'random_text' on the page, inside <script></script> only. This is the source code:
<body>
<script>var dcwrtext = 'random_text'; document.write(dcwrtext);</script> Some other content to show on fancybox.
</body>
What I'd need is if I open the fancbox window, 'random_text' shouldn't appear literally after the closing </script> tag, but would be displayed only by the document.write() function.
This is how I tested:
main page:
<html>
<head>
<title></title>
<meta name="" content="">
<link rel="stylesheet" type="text/css" href="fancybox/source/jquery.fancybox.css?v=2.1.2" media="screen" />
</head>
<body>
<div data-id="fancy.php" class="href">open fancy</div>
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
<script type="text/javascript" src="fancybox/source/jquery.fancybox.js?v=2.1.3"></script>
<script>
$(document).ready(function() {
$(".fancybox").fancybox();
$(".href").click(function() {
$.fancybox.open({
href : $(this).attr("data-id"),
type : 'iframe'
});
});
});
</script>
<div id="theid" class="fancybox"></div>
</body>
</html>
and the page being opened in fancybox: fancy.php
<html>
<head>
<title></title>
</head>
<body>
<?php
$randomtext = "random_text";
echo "<script>var dcwrtext = '$randomtext'; document.write(dcwrtext);</script>Some other content to show on fancybox";
?>
</body>
</html>
[I had to include jquery-migrate-1.2.1.js because of an error [ Uncaught TypeError: Cannot read property 'msie' of undefined] when including newer versions of jquery with fancybox]
Related
I am getting the issue
Warning: Use of undefined constant otherInput - assumed 'otherInput'
(this will throw an Error in a future version of PHP) Warning: A
non-numeric value encountered
I know there is some issue with the quote.
What I am doing is, I have to click on the anchor tag called Click me one and sending the data-id in the script. I am getting the id value in the script but I am getting the error on $(".showme'+otherInput+'").show();
I am using WordPress and I have to use the below code in the function.php so I have to use my script inside the PHP tag.
This is the screenshot of the code
Here is the code
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.showme{display: none;}
</style>
</head>
<body>
<div class="clickme" data-id="1">Click me one</div>
<div class="showme showme1">this is example</div>
<?php
echo '<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(".clickme").click(function(){
var otherInput=$(this).data("id");
$(".showme'+otherInput+'").show();
});.
</script>';
?>
</body>
</html>
It looks like everything in your php block is all JQuery/Javascript.
Q: What do you even need the PHP block and the "echo" for?
Current:
<?php
echo '<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(".clickme").click(function(){
var otherInput=$(this).data("id");
$(".showme'+otherInput+'").show();
});.
</script>';
?>
Suggested change:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(".clickme").click(function(){
var otherInput=$(this).data("id");
$(".showme"+otherInput).show();
});.
</script>'
Just follow the regular js standard, and if you willing to implement your script inside the php code:
Replace your code with these changes:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.showme{display: none;}
</style>
</head>
<body>
<div class="clickme" data-id="1">Click me one</div>
<div class="showme showme1">this is example</div>
<?php
echo '<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(".clickme").click(function(){
var otherInput=$(this).data("id");
$(".showme"+otherInput).show();
//here otherInput js variable is just used as regular js variable inside the script, so no need to extra commas to call that js variable, just use it like you do in js files, and will work fine.
});
</script>';
?>
</body>
</html>
I have a div tag with many anchor tags in it. On clicking a lick it should open a php page in another div tag of the same page.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<header>
<h2>Test</h2>
</header>
<div class="topnav" id="myTopnav">
page1
page2
page3
page4
</div>
<div id="content" >
</div>
<script>
$(function(){
$("#myTopnav a").click(function(e){
e.preventDefault(); //To prevent the default anchor tag behaviour
var url = this.href;
$("#content").load(url);
});
});
</script>
</body>
</html>
I have a nav bar and on clicking the links it should load a php page in content div. I tried the above code but it does not work.
The Reason is that its a local file at your system, you need to set up a webserver.
If the problem exist further then you can add "Cross Origin" headers to the called php files.
If it's not working for you, try the full context and see what the error message might be:
$( "#content" ).load( url, function( response, status, xhr ) {
if ( status == "error" ) {
window.alert(xhr.status + " " + xhr.statusText);
}
});
Here my index.php page structure:
<?php
session_start();
include("lang/".$_SESSION['lang'].".php");
?>
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
<a href="#" data-module="home">
<div id="content"></div>
</body>
<script src="jquery.js"></script>
<script src="script.js"></script>
</html>
I have a piece of js code to load the right clicked module.
$('a[data-module]').click(function(event) {
event.preventDefault();
var module = $(this).attr('data-module');
$('#content').load('modules/' + module + '.php');
});
My problem is:
On each module page, I use $_SESSION variables. But with .load() jQuery function, it don't works anymore.
Do you have a reason for that ?
Thanks.
Attempting to run fineuploader right out of the box using the same code that's on the site.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Fine Uploader Demo</title>
<link href="custom.fineuploader-4.0.3.css" rel="stylesheet">
</head>
<body>
<div id="fine-uploader"></div>
<script src="custom.fineuploader-4.0.3.js"></script>
<script>
function createUploader() {
var uploader = new qq.FineUploader({
element: document.getElementById('fine-uploader'),
request: {
endpoint: 'server/handleUploads'
}
});
}
window.onload = createUploader;
</script>
</body>
</html>
Even before beginning to mess around with the endpoint.php I took a look at in a browser and I'm getting the following errors in Firebug:
ReferenceError: jQuery is not defined
}(jQuery));
custom....0.3.js (line 8012)
Error: Cannot find template script at ID 'qq-template'!
...ew Error(qq.format("Cannot find template script at ID '{}'!", options.templateId...
What am I missing?
jQuery library is missing in your code
add this in your head tag
<head>
.
.
.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
.
.
</script>
</head>
index.php
<html>
<head>
<script language="JavaScript" src="lol.js.php"></script>
</head>
<?php
//grab product id's who need to be showed
$pids = '1,2,3';
?>
<body onload="update_timers();">
lol.js.php
<script type="text/javascript">
function update_timers()
{
alert('hi');
}
</script>
I'm not sure what I'm missing, but this isn't poping up the alert window. Why is that?
Remove
<script type="text/javascript">
</script>
from the JS file.
The JavaScript error console in your browser should show these tags as syntax errors.
Also, as #Jared points out, you should send a content type header:
<?php header("Content-type: text/javascript"); ?>