I am working on a php code as shown below in which I have added ellipsis (...) after a particular word limit.
<?php
$programs = array();
foreach ( $xml_files as $file ) {
$xml = simplexml_load_file($src_dir."/".$file) or die('Unable to load XML');
$path_title_en = $xml->xpath('//StringAssetInfo[attrName="CASE_EPISODE_TITLE"]/value');
$path_description_en = $xml->xpath('//TextAssetInfo[attrName="CASE_DESCRIPTION_ENGLISH"]/value');
$programs[] = array( "episode_title" => (string)$path_title_en,
"description" => (string)$path_description_en;
}
$program["episode_title"] = substr($program["episode_title"],0,50).' <a href="">(...)</a>'; /* ellipsis is added after a particular word limit */
$program["description"] = substr($program["description"],0,100).' <a href="">(...)</a>'; /* ellipsis is added after a particular word limit */
?>
<table>
<tr>
<td style="width:8%; text-align:center;"><?php echo $program["episode_title"]; ?></td> /* Line A */
<td style="width:8%; text-align:center;"><?php echo $program["description"]; ?></td> /* Line B */
</tr>
</table>
Line#A display the following text:
Flooding Concerns in
ABCSGSGSGSGSGSG and
SHSHSGFASGXDS (...)
Problem Statement:
I am wondering what JS code I need to add so that on click of (...) , full text show up in the modal something like this.
I am working on a php code as shown below in which I have added ellipsis (...) after a particular word limit.
<?php
$programs = array();
foreach ( $xml_files as $file ) {
$xml = simplexml_load_file($src_dir."/".$file) or die('Unable to load XML');
$path_title_en = $xml->xpath('//StringAssetInfo[attrName="CASE_EPISODE_TITLE"]/value');
$path_description_en = $xml->xpath('//TextAssetInfo[attrName="CASE_DESCRIPTION_ENGLISH"]/value');
$programs[] = array( "episode_title" => (string)$path_title_en,
"description" => (string)$path_description_en;
}
$program["episode_title"] = substr($program["episode_title"],0,50).' <a href="">(...)</a>'; /* ellipsis is added after a particular word limit */
$program["description"] = substr($program["description"],0,100).' <a href="">(...)</a>'; /* ellipsis is added after a particular word limit */
?>
<table>
<tr>
<td style="width:8%; text-align:center;"><?php echo $program["episode_title"]; ?></td> /* Line A */
<td style="width:8%; text-align:center;"><?php echo $program["description"]; ?></td> /* Line B */
</tr>
</table>
Line#A display the following text:
Flooding Concerns in
ABCSGSGSGSGSGSG and
SHSHSGFASGXDS (...)
Problem Statement:
I am wondering what JS code I need to add so that on click of (...) , full text show up in the modal something like this.
Share Improve this question edited Jun 3, 2019 at 5:08 flash asked May 30, 2019 at 20:12 flashflash 1,51913 gold badges73 silver badges160 bronze badges 12- You are missing a lot of code here. You need a modal first of all. The plete strings will have to be stored somewhere or fetched from the server when the button is clicked. The anchors that you currently have do not link to anything and have no way of being linked back to the field it is associated with. – RugerSR9 Commented May 30, 2019 at 20:52
- Yeah, I agree I am missing a lot. I probably need a pointer to start. (..) is a hyperlink which on click, I want modal to show up. – flash Commented May 30, 2019 at 20:54
- 1 Wrote this for you, maybe it will point you in the right direction. w3schools./code/tryit.asp?filename=G4K28AX2Z9CY – RugerSR9 Commented May 30, 2019 at 21:06
- @RugerSR9 In the code above, the date is getting pulled from xml and displayed on the webpage. – flash Commented May 31, 2019 at 19:30
- 1 Yes, you just need to put your PHP in the correct spots in the sample code I provided above. – RugerSR9 Commented Jun 4, 2019 at 17:40
4 Answers
Reset to default 2 +50Here is my fully tested implementation of your string extraction and the required modal feature from the w3schools demo:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
.triggersModal {
padding: 50px;
border: solid 2px black;
margin: 50px;
cursor: pointer;
}
/* The Modal (background) */
#myModal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
#modalCloser {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
#modalCloser:hover,
#modalCloser:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<?php
$episodes = [
[
'episode_title' => 'Lorem Ipsum',
'description' => "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."],
[
'episode_title' => "The standard 'Lorem Ipsum' passage, used since the 1500s",
'description' => '"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea modo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."'
]
];
foreach ($episodes as $index => $episode) { ?>
<div class="triggersModal" data-index="<?php echo $index; ?>">
<div><?php
if (strlen($episode['episode_title']) <= 50) {
echo $episode['episode_title'];
} else {
echo substr($episode['episode_title'], 0, 50) , "(...)";
}
?></div>
<div><?php
if (strlen($episode['description']) <= 100) {
echo $episode['description'];
} else {
echo substr($episode['description'], 0, 100) , "(...)";
}
?></div>
</div>
<?php } ?>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span id="modalCloser">×</span>
<p id="modalFullTitle"></p>
<p id="modalFullDescription"></p>
</div>
</div>
<script>
// Transfer data from php to javascript
let episodes = <?php echo json_encode($episodes); ?>,
classname = document.getElementsByClassName("triggersModal"),
modal = document.getElementById("myModal");
// Bind value insertion and modal display to onclick event of every element with named class
for (let i = 0, len = classname.length; i < len; ++i) {
classname[i].onclick = function() {
let index = this.getAttribute('data-index');
document.getElementById("modalFullTitle").innerHTML = episodes[index]['episode_title'];
document.getElementById("modalFullDescription").innerHTML = episodes[index]['description'];
modal.style.display = "block";
}
}
// Close the modal
document.getElementById("modalCloser").onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>
You will need to replace my hardcoded input (above) with your file scrapings. To create your $episodes array and display the main layer's content with a single loop, use this inside the <body> tag where you want to display the clickable readmore boxes:
<?php
$episodes = [];
$index = 0;
foreach ($xml_files as $file) {
$xml = simplexml_load_file("{$src_dir}/{$file}");
if (!$xml) {
continue;
}
$episode_title = (string)$xml->xpath('//StringAssetInfo[attrName="CASE_EPISODE_TITLE"]/value');
$description = (string)$xml->xpath('//TextAssetInfo[attrName="CASE_DESCRIPTION_ENGLISH"]/value');
$episodes[] = ['episode_title' => $episode_title, 'description' => $description]; // used downscript to deliver data to clientside/js
?>
<div class="triggersModal" data-index="<?php echo $index; ?>">
<div>
<?php
if (strlen($episode_title) <= 50) {
echo $episode_title;
} else {
echo substr($episode_title, 0, 50) , "(...)";
}
?>
</div>
<div>
<?php
if (strlen($description) <= 100) {
echo $description;
} else {
echo substr($description, 0, 100) , "(...)";
}
?>
</div>
</div>
<?php
++$index;
}
?>
Things to notice:
- All of the click events are written in the script block instead of inside the html to keep things clean and readable.
- Using an ellipsis is only necessary if the string has enough length to merit it.
- Pass the data from php to js with
json_encode(). - Don't use
die(). - My preference is to not name variables (in php or js) that will only be used once. There are some exceptions, but this is my default philosophy.
- Since the lookup array (
episodes) is an indexed array, the only relevant value to pass from the clicked element is the index. Adata-attribute is a maintain the relationship between the main display and the data to be displayed in the modal. - Using
<table>tags to display non-tabular content is not remended. I have done very little to style the page & modal. I didn't want to depart too far from the demo that you supplied. - HTML elements that need to be identified should contain an
idfor easy location for javascript. Elements that occur in multiple locations should containclass. - After testing my script, there is no problem with displaying quoted text on the main page or in the modal.
- I tried to keep the syntax simple/readable, but I often prefer ternary operators (inline conditions) in my php and js. Some people prefer the shorthand
<?=and?>when displaying php. I'm cool with that too; choose whatever you like. - Last but not least, if your input strings are ing from insecure channels or if they contain html, it would improve the stability/security of your application to encode html entities using
htmlspecialchars($string, ENT_QUOTES, 'UTF-8')on any strings being displayed to the screen (after counting the string length, but before displaying). Here's a good reference: https://stackoverflow./a/1996141/2943403
Here is my source code transferred to a runnable Stackoverflow snippet:
// Transfer data from php to javascript
let lookup = [{"episode_title":"Lorem Ipsum","description":"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."},{"episode_title":"The standard 'Lorem Ipsum' passage, used since the 1500s","description":"\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea modo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\""}],
classname = document.getElementsByClassName("triggersModal"),
modal = document.getElementById("myModal");
// Bind value insertion and modal display to onclick event of every element with named class
for (let i = 0, len = classname.length; i < len; ++i) {
classname[i].onclick = function() {
let index = this.getAttribute('data-index');
document.getElementById("modalFullTitle").innerHTML = lookup[index]['episode_title'];
document.getElementById("modalFullDescription").innerHTML = lookup[index]['description'];
modal.style.display = "block";
}
}
// Close the modal
document.getElementById("modalCloser").onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
} body {font-family: Arial, Helvetica, sans-serif;}
.triggersModal {
padding: 50px;
border: solid 2px black;
margin: 50px;
cursor: pointer;
}
/* The Modal (background) */
#myModal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
#modalCloser {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
#modalCloser:hover,
#modalCloser:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="triggersModal" data-index="0">
<div>Lorem Ipsum</div>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the (...)</div>
</div>
<div class="triggersModal" data-index="1">
<div>The standard 'Lorem Ipsum' passage, used since the(...)</div>
<div>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore(...)</div>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span id="modalCloser">×</span>
<p id="modalFullTitle"></p>
<p id="modalFullDescription"></p>
</div>
</div>
</body>
</html>Another runnable snippet which has been adjusted to present cell text individually...
// Transfer data from php to javascript
let lookup = [{"episode_title":"Lorem Ipsum","description":"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."},{"episode_title":"The standard 'Lorem Ipsum' passage, used since the 1500s","description":"\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea modo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\""}],
classname = document.getElementsByClassName("triggersModal"),
modal = document.getElementById("myModal");
// Bind value insertion and modal display to onclick event of every element with named class
for (let i = 0, len = classname.length; i < len; ++i) {
classname[i].onclick = function() {
let index = this.getAttribute('data-index'),
content = this.getAttribute('data-content');
document.getElementById("modalText").innerHTML = lookup[index][content];
modal.style.display = "block";
}
}
// Close the modal
document.getElementById("modalCloser").onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
} body {font-family: Arial, Helvetica, sans-serif;}
.box {
padding: 50px;
border: solid 2px black;
margin: 50px;
}
.triggersModal {
cursor: pointer;
}
/* The Modal (background) */
#myModal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
#modalCloser {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
#modalCloser:hover,
#modalCloser:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="box">
<div class="triggersModal" data-index="0" data-content="episode_title">Lorem Ipsum</div>
<div class="triggersModal" data-index="0" data-content="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the (...)</div>
</div>
<div class="box">
<div class="triggersModal" data-index="1" data-content="episode_title">The standard 'Lorem Ipsum' passage, used since the(...)</div>
<div class="triggersModal" data-index="1" data-content="description">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore(...)</div>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span id="modalCloser">×</span>
<p id="modalText"></p>
</div>
</div>
</body>
</html>And here is a pastebin dump of an php execution of the above: https://pastebin./YnhNq6rD
You should use a modified demo to be able to use custom text in that modal. https://www.w3schools./code/tryit.asp?filename=G4QNZITEFN72
Then modify your code to be able to send full text in that modal window
<?php
$programs = array();
foreach ( $xml_files as $file ) {
$xml = simplexml_load_file($src_dir."/".$file) or die('Unable to load XML');
$path_title_en = $xml->xpath('//StringAssetInfo[attrName="CASE_EPISODE_TITLE"]/value');
$path_description_en = $xml->xpath('//TextAssetInfo[attrName="CASE_DESCRIPTION_ENGLISH"]/value');
$programs[] = array("episode_title" => (string) $path_title_en, "description" => (string)$path_description_en;);
}
foreach ( $programs as $program ) {
$episode_title = substr($program["episode_title"],0,50).' <a href="#show_full_title" onClick="showModal(\''.htmlspecialchars($program["episode_title"]).'\')">(...)</a>'; /* ellipsis is added after a particular word limit */
$description = $program["description"] = substr($program["description"],0,100).' <a href="#show_full_description" onClick="showModal(\''.htmlspecialchars($program["description"]).'\')">(...)</a>'; /* ellipsis is added after a particular word limit */
?>
<table>
<tr>
<td style="width:8%; text-align:center;"><?php echo $episode_title; ?></td> /* Line A */
<td style="width:8%; text-align:center;"><?php echo $description; ?></td> /* Line B */
</tr>
</table>
<?php } ?>
with adding an onClick handler to that tags which will call the showModal function with full text.
I just update your code with modal UI, Script and few logic to pass content to modal. Try this I hope it'll help you out. Thanks
var modal = document.getElementById("readMoreModal");
var btn = document.getElementsByClassName("readMoreModalTrigger")[0];
var closeBtn = document.getElementById("close");
// When the user clicks on <span> (x), close the modal
closeBtn.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
// Append Readmore content in modal
function readMoreMethod(text) {
document.getElementById("modal-content-append").innerHTML = text;
modal.style.display = "block";
}body {font-family: Arial, Helvetica, sans-serif;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
#close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
#close:hover,
#close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
} <?php
$programs = array();
foreach ( $xml_files as $file ) {
$xml = simplexml_load_file($src_dir."/".$file) or die('Unable to load XML');
$path_title_en = $xml->xpath('//StringAssetInfo[attrName="CASE_EPISODE_TITLE"]/value');
$path_description_en = $xml->xpath('//TextAssetInfo[attrName="CASE_DESCRIPTION_ENGLISH"]/value');
$programs[] = array( "episode_title" => (string)$path_title_en,
"description" => (string)$path_description_en;
}
$program["episode_title"] = substr($program["episode_title"],0,50).' <a class="readMoreModalTrigger" href="JavaScript:Void(0);" onclick="readMoreMethod('$program["episode_title"]')">(...)</a>'; /* ellipsis is added after a particular word limit */
$program["description"] = substr($program["description"],0,100).' <a
class="readMoreModalTrigger" href="JavaScript:Void(0);" onclick="readMoreMethod('$program["description"]')">(...)</a>'; /* ellipsis is added after a particular word limit */
?>
<table>
<tr>
<td style="width:8%; text-align:center;"><?php echo $program["episode_title"]; ?><a class="readMoreModalTrigger" href="JavaScript:Void(0);" onclick="readMoreMethod('tadsad sadsad asdasd asdas dsad ')" href="">(...)</a></td>
<td style="width:8%; text-align:center;"><?php echo $program["description"]; ?></td>
</tr>
</table>
<!-- The Modal -->
<div id="readMoreModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span id="close">×</span>
<p id="modal-content-append"></p>
</div>
</div>Here is the HTML/CSS/JS for you.
const trigger = document.querySelector(".trigger");
trigger.addEventListener("click", () => {
const fullTextSibling = trigger.previousElementSibling;
fullTextSibling.classList.add("active");
const closeModal = document.querySelector(".full_text > div > button");
closeModal.addEventListener("click", () => {
fullTextSibling.classList.remove("active");
});
});.full_text {
display: none;
}
.full_text > div {
min-width: 300px;
min-height: 100px;
background: white;
padding: 20px;
border-radius: 10px;
}
.full_text.active {
display: flex;
background: #80808069;
width: 100%;
height: 100vh;
position: fixed;
top: 0;
align-items: center;
justify-content: center;
}<div class="container">
Lorem, ipsum dolor
<div class="full_text">
<div>
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
<button>X</button>
</div>
</div>
<a href="#" class="trigger">(...)</a>
</div>