I work on php and javascript. Now I want to call the javascript functionalities in my php code but it is now working. the code of php that execute the javascript code is
echo '<script type="text/javascript">
alert( document.getElementById("popup"));
document.getElementById("popup").style.display = "block";
document.getElementById("popup").classList.toggle("active");
</script>';
but the alert gives a null value and does not execute the code of html. the code of html is
<div class="popup" id="popup">
<div class="overlay"></div>
<div class="content">
<!-- <div class="close-btn" onclick="closePopup()">×</div> -->
<div class="row">
<div class="col-lg-12 col-md-9 col-sm-12">
<img width="200" height="200" src="https://cdn.dribbble.com/users/2469324/screenshots/6538803/comp_3.gif">
<h2 id="errorHead">fields are required</h2>
<p id="errorMessage">
All fields are required. fill all fields
</p>
<button style="background-color: darkgreen; width: 130px; margin-top: 5%;" class="btn btn-success radiusChange backgroundChange" onclick="closePopup()"> Close</button>
</div>
</div>
</div>
</div>
how I execute this code, basically it is the popup that I want to run. please give the way to solve this problem.
You have to wait for the document to be completely loaded before accessing its nodes.
May you try echoing the following ? You should get the #errorMessage content, ie you are now able to access the popup node and do your stuff
<script type="text/javascript">
window.onload = () => {
alert(document.getElementById("popup").querySelector("#errorMessage").innerText);
//you can deal with the popup node :)
};
</script>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Call JS Code</title>
<?php
echo '<script type="text/javascript">
alert("Execute Javascript Code");
</script>';
?>
</head>
<body>
</body>
</html>
Related
I have a button 'Generate PDF', and I want it to save some div elements as a PDF file. From what I read, I best use JavaScript, but I have zero experience with JS.
I already tried third party solutions like html2pdf, pdfmyurl, jsPDF, etc., but I didn't manage to get it to work like I want it.
This is the structure of the HTML file:
<!DOCTYPE html>
<html>
<head>
<title>This is my title</title>
</head>
<body>
<!-- HEADER -->
<div class="header">
<img src="../logo/logo_17.png" width="320" height="100" />
</div>
<!-- MENU -->
<div class="topnav" id="myTopnav">
Menu...
</div>
<!-- KOLOMMEN -->
<div class="row">
<!-- LINKSE KOLOM -->
<div class="prodtitle" id="htmlContent1">Title</div>
<div class="prodbuttons">
<a class="h2button" href="#">BACK TO LIST</a>
<button id="generatePDF" class="h2button">generate PDF</button>
</div>
<div class="prodinfotitle">Info/Description</div>
<div class="prodinfo" id="htmlContent2">
...some text
</div>
<div class="prodmaterialstitle">Materials/Ingredients</div>
<div class="prodmaterials">
...some text
</div>
<div class="gallery">
...image 1 (if available)
</div>
<div class="gallery">
...image 2 (if available)
</div>
<!-- RECHTSE KOLOM -->
<div class="side">
...
</div>
</div>
<!-- FOOTER -->
<div class="footer">
...footer
</div>
</body>
</html>
Now this is what I'm looking for:
When you click the 'Generate PDF' button, a PDF file should be created with the following div's: 'header', followed by the 'prodtitle' and then followed by 'prodinfotitle', 'prodinfo', 'prodmaterialstitle', 'prodmaterials' and the picture(s), if they're available.
The PDF should then be saved as '[prodtitle].pdf', so that every file has the right title.
Can somebody help me with this piece of code and how to set it up?
Thanks very very much!
Update:
Something I tried with my zero experience was this:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>
<script type="text/javascript">
var doc = new jsPDF();
var specialElementHandlers = {
'#editor': function (element, renderer) {
return true;
}
};
$('#generatePDF').click(function () {
doc.fromHTML($('#htmlContent1').html(), 15, 15, {
'width': 700,
'elementHandlers': specialElementHandlers
});
doc.fromHTML($('#htmlContent2').html(), 15, 15, {
'width': 700,
'elementHandlers': specialElementHandlers
});
doc.save('sample_file.pdf');
});
</script>
It didn't work because I got an empty pdf. I don't even know if the code is correct.
The danger from cut and paste any old code is it is usually OLD see stackoverflow.com/questions/65177003/… so your script works to build a fresh pdf well but it is not the content on the page just some new overwrite.
Simpler to stick with the HTML you have written before using hybrid methods.
So simply you need to exclude some content for print to pdf but retain the top and bottom.
You need to adapt the button so I suggest along the lines of
<div id="NoPrint">
<!-- MENU -->
<div class="topnav" id="myTopnav">
Menu...
</div>
<!-- KOLOMMEN -->
<div class="row">
<!-- LINKSE KOLOM -->
<div class="prodtitle" id="htmlContent1">Title</div>
<div class="prodbuttons">
<button class="h2button"><a class="h2button" href="#">BACK TO LIST</a></button>
<button id="generatePDF" onclick="print()" >generate PDF Print from Download Page</button>
</div>
</div>
</div NoPrint>
and add in the < head >
<style id="compiled-css" type="text/css">
#media only print {
#NoPrint {
display: none;
}
</style>
The page TITLE drives the offered pdf filename, thus more difficult to adjust <title>[prodtitle].pdf</title> although you could do that via scripting, but that's really a full can of worms in its own right, since the user decides the name to save to.
im trying to open a different webpage as a colorbox but i cant seem to figure it out.
Below is the webpage i want to open when a person clicks on the image.
<div class="album py-5">
<div class="container">
<div class="row">
<div id="projects" class="col-md-8 col-lg-6 shadow-sm">
<a href="project1.html" id="yourlink"><img class="img-fluid" src="img/mockup.png" alt="iPhone Mockup">
</a>
</div>
</div>
</div>
</div>
Below is the script i did.
<script>
"use strict";
$(document).ready(function(){
$('#yourlink').colorbox();
});
</script>
This is my first time trying to use colorbox so its a little confusing, thank you.
colorbox has a configuration atrtibute called "html" where you can provide html code for it to show. For example:
var code = $('div.py-5').html();
$('#yourlink').colorbox({html: code});
If you can modify the html to show, you could also check the colorbox examples as they include an inline HTML example.
Edit: Here's a working example:
var button = $("#clickme");
$(document).ready(function() {
var code = $("#myContent").html();
$("#clickme").colorbox({ "html": code })
});
#myContent {
display: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>Colorbox Examples</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
<style rel="https://www.jacklmoore.com/colorbox/example1/colorbox.css"></style>
</head>
<body>
<div id="myContent">
<p>Hello World from the content.</p>
</div>
Click me
</body>
</html>
I crated a small login form where I check the username in a external php file. After that I give back an error message or redirect to another site.
My problem is to show the error message. I want a short message above the login form if the username != „test“. In my script, the errormessage appears above the login form, but the login form jumps one row deeper.
Question 1:
How can a create a placeholder above the login form? So that the login form is fix?
Question 2:
Is it the right way to fill a JavaScrpt Variable in PHP as in my Code?
Thanks for your help!
< script >
var error_login;
if (error_login == 1) {
$('#errorText').show();
} else {
$('#errorText').hide();
} <
/script>
<?php
//debug
error_reporting(-1);
ini_set('display_errors', true);
session_start();
session_unset();
session_destroy();
?>
<!doctype html>
<html lang="de">
<head>
<title>Hello World</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
</head>
<body>
<?php include ("login.php"); ?>
<div class="container">
<div id="errorText" class="row justify-content-center">
Login failed!
<!-- This should be a placeholder -->
</div>
<!-- Formular Beginn -->
<div class="row justify-content-center">
<div class="col-md-6">
<form class="form" role="form" method="post" action="?login=1" accept-charset="UTF-8" id="login">
<div class="input-group" id="frmGrpBenutzer">
<input type="password" class="form-control input-lg" id="user" name="user" placeholder="Username" required autofocus>
<span class="input-group-btn">
<button type="submit" class="btn btn-primary btn-custom btn-lg" title="login" id="loginbtn"><span>Go</span></button>
</span>
</div>
</form>
</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</body>
</html>
Here the login.php file:
<?php
session_start();
if(isset($_GET['login'])) {
$user = $_POST['user'];
if ($user == "test") {
$_SESSION['username'] = $user;
header('Location: site2.php');
} else {
echo "<script>
var error_login = 1;
</script>";
}
}
There are a few possibilities. The easiest would be to set your div with an opacity:0 or visibility:hidden this will make it still take space in the document flow.
Another option, could be to set it's position:absolute this will prevent it to take space inside your login form. Doing this will make it overlap tough, so there would need to be a padding or margin to offset the content of the form.
As for setting your javascript variable with PHP, that's one way to do it yes, but your script already defines error_login... Another way to do it, is use a holder HTML element, give it an id, and a data-* attribute. This will make it very easy to read the information from code:
$('button').click(function() {
console.log($('#login_status').data('login-error'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="login_status" data-login-error="1"></div>
<button>Click me to get result</button>
You could also add all the data you want into a JSON string as the div's content, and parse it once the page loaded.
So I hope I'm asking this correctly.
I have content from a php file being loaded into an html page. The php file contains the info for a collapsible set. The popup does not work for the data sent back from the php file once i change the html of the popup div.
Is this because the content did not exist when the page was initially loaded? If this is the case, how do I go about loading this content. I'm really trying to keep the php off the main html pages if at all possible. Although I'm starting to realize this may not be possible. Any help with this would be greatly appreciated.
Here's my html page (this page is loaded after an initializing page is submitted)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>theClipboard: Count</title>
<link rel="stylesheet" href="../inc/stylez.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css"/>
</head>
<body>
<div id="container">
<div data-role="page" data-theme="b" id="countStartedPage">
<div data-role="header" data-position="fixed" class="ui-grid-c">
<div class="ui-block-a">
<a href="#categoryMenu" data-rel="popup" data-transition="slidedown"
class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-gear ui-btn-icon-left ui-btn-a">category</a>
<div id="loadCatMenuHere">
<!--<div id="categoryMenu" data-role="popup" data-theme="b">
<p>is it working</p>
</div>-->
</div>
</div>
<div class="ui-block-b">
<p>location menu</p>
</div>
<div class="ui-block-c">
Go Back
</div>
<div class="ui-block-d">
<p>validate counts</p>
</div>
</div>
<div data-role="main" id="countPageContent">
<h3> content goes here</h3>
</div>
<div data-role="footer" data-position="fixed">
<p class="centerText">copyright 2016 tosco(rs)2 all rights reserved</p>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<!--
<script src="countJS.js"></script>
-->
<script>
$(document).ready(function(){
console.log("page 2 loaded");
getCategoryMenu();
function getCategoryMenu() {
var getCatMenu = $.post('categoryMenu.php');
getCatMenu.done(function (data) {
console.log("received cat menu #categoryMenu.html: " + $('#categoryMenu').html());
$('#loadCatMenuHere').html(data);
console.log("#category menu data: " + data);
});
getCatMenu.fail(function (data) {
console.log("failed at getting cat menu:");
});
}
})
</script>
</body>
</html>
here's my php file i'm pulling from
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css"/>
<?php
include("../inc/connect.php");
session_start();
$buildFamMenu = $conn->prepare("select familyName from familyTbl order by familyPriority");
$buildFamMenu->execute();
$buildFamMenu->store_result();
$buildFamMenu->bind_result($family);
$buildCatMenu = $conn->prepare("select categoryID, categoryName from categoryTbl where family = ? order by categoryPriority");
$buildCatMenu->bind_param("s", $family);
$buildCatMenu->execute();
$buildCatMenu->store_result();
$buildCatMenu->bind_result($categoryID, $categoryName);
echo "<div id='categoryMenu' data-role='popup' data-theme='b'>";
echo "<div data-role='collapsibleset'>";
while ($buildFamMenu->fetch()) {
echo "<div data-role='collapsible'>
<h3>" .$family ."</h3>
<ul><li>test</li><li>test2</li><li>test3</li></ul>
</div>";
}
echo "</div></div>";
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
I believe that this may be due to the document object you're trying to reference not yet being loaded at the time of your reference.
I would wrap the $.post in a protective 'if != undefined' block with an else statement that recalls the function after an interval.
(some pseudo code):
if (myDiv is not undefined) { do stuff } else
{ setInterval(thisSameFunction, 2000); }
Trying to add content into individual div-containers I stumbled on the command .innerHTML, which I tried to implement accordingly. Strangely I get the following error:
*Uncaught TypeError: Cannot read property 'innerHTML' of null *
I'm running the code over my local Apache server if that makes any difference.
index.html
<html>
<head>
<title>Welcome</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="javascript.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="header">
<h1>Startseite</h1>
</div>
<div id="container">
<div id="left">
Navigation
</div>
<div id="content"></div>
<div id="right"></div>
<div class="clr"></div>
</div>
</body>
</html>
javascript.js
var navidiv = document.getElementById('left');
navidiv.innerHTML += "FirstElement";
Put it in window.onload
window.onload = function()
var navidiv = document.getElementById('left');
navidiv.innerHTML += "FirstElement";
}
The element has to be present in the DOM, before you can access it in JS
You have to ensure that your DOM elements have loaded before accessing them with javascript.
Since you are using jquery, your javascript can simply be
$(function() {
var $navidiv = $('#left');
$navidiv.html($navidiv.html() + 'FirstElement');
});
try this
html
<div id="header">
<h1>Startseite</h1>
</div>
<div id="container">
<div id="left">
Navigation
</div>
<div id="content"></div>
<div id="right"></div>
<div class="clr"></div>
</div>
javascript.js
$( document ).ready(function() {
var navdiv=$("#left").html();
$("#left").html(navdiv+"FirstElement");
});
see DEMO