Javascript document.GetElementById('iframe_id').src = 'link' working only once - javascript

so here's a very simple question but I'm having difficulties on solving it
see i have an iframe and i want to change it's src depending on the link that was clicked
here's the javascript code
function showOverlay(id)
{
var str1 = 'abstract.php?id=';
var link = str1.concat(id);
document.getElementById(id).style['display'] = "block";
document.getElementById(id).style['opacity'] = "1";
document.getElementById('abstract_frame').src = link;
}
function hideOverlay(el, evt)
{
if (el && evt)
{
el.style.display = evt.target == el ? 'none' : '';
}
document.getElementById('abstract_frame').src = '';
}
so I used document.getElementById('abstract_frame').src = link; to set the src then on the hideOverlay function I used
document.getElementById('abstract_frame').src = ''; to set the src back to a blank link.
so the problem is when I call on the showOverlay again to set another src link to the iframe with a different value i get a blank screen
here's the html/php
echo '<div class="SearchResults">';
echo " <span class='top'>";
echo " <a>";
echo " <h3>". strtoupper($title) ."</h3>";
echo " </a>";
echo " <br />";
echo " <h5 class='sub'>";
echo "Authors :";
$tags = explode('|',$run['author']);
foreach($tags as $i =>$key) {
echo '<a class="authors">Dr.'.$key.'</a>';
}
echo "<br><br>";
echo " </h5>";
echo " </span>";
echo " <span class='bottom'>";
echo " <span class='bottomLeft'>";
echo ($run['abstract'] != "" ? " <a class='options' data-articlenum='" . $run['reference_number'] . "' onclick='showOverlay(this.dataset.articlenum)'>Abstract</a><span style='margin:0px 5px;'>|</span>" : "" );
echo " <a target='_blank' href='view.php?filename=".strtolower($run['title'])."' class='options'>";
echo " Full Article";
echo " </a>";
echo " </span>";
echo " <div class='overlay' id='". $run['reference_number'] ."' onclick='hideOverlay(this, event)'> ";
echo " <iframe class='abstract' id='abstract_frame' style='padding:0px;' scrolling='no'>";
echo " </iframe>";
echo " </div>";
echo " <span class='bottomRight'>";
echo " <p class='label'>".$run['journal'].", ". $run['volume'] .", ". date("F, Y",strtotime($run['publication_date'])) ."# Pg.". $run['pages'] ."</p>";
echo " </span>";
echo " </span>";
echo " <br style='clear:both;'/>";
echo "</div>";
here's some visuals

Related

Why are my results not showing up from my database?

I have a program that displays authors book code and book title using php and
AJAX technology, but for some reason the data is not appearing in the table. I know my SQL code is correct as our instructor gave us the code for that, but something is preventing the data from appearing in the table. Any tips or suggestions would be appreciated!
<body>
<?php
$authorid = 0;
$authorid = (int) $_GET['authorid'];
if ($authorid > 0) {
require_once('dbtest.php');
$query = "SELECT * FROM author";
$r = mysqli_query($dbc, $query);
if (mysqli_num_rows($r) > 0) {
$row = mysqli_fetch_array($r);
} else {
echo "Title Not Returned<br>";
}
echo "<table border='1'><caption>Titles for </caption>";
echo "<tr>";
echo "<th>Book Code</th>";
echo "<th>Book Title</th>";
echo "</tr>";
$q2 ="SELECT wrote.author_number As ANo, wrote.book_code As BookCd, book.book_title As Title ";
$q2 .= " FROM wrote, book ";
$q2 .= " WHERE wrote.book_code=book.book_code ";
$q2 .= " AND wrote.author_number = ' ' ";
$q2 .= " ORDER BY book.book_title";
$r2 = mysqli_query($dbc, $q2);
$row = mysqli_fetch_array($r2);
while ($row) {
echo "<tr>";
echo "<td>" .$row['BookCd']. "</td>";
echo "<td>" .$row['Title']. "</td>";
echo "</tr>";
$row = mysqli_fetch_array($r2);
}
echo "</table>";
} else {
echo "<p>No Author ID from prior page</p>";
}
?>
</form>
</body>
The suspicious line is: AND wrote.author_number = ' '
Why is it empty?
Put a check after the second query:
$r2 = mysqli_query($dbc, $q2);
if (mysqli_num_rows($r2) > 0) {
echo "rows are Returned<br>";
} else {
echo "rows are Not Returned<br>";
}
$row = mysqli_fetch_array($r2);

Cannot read property value of null. No value on onclick

I have a webpage that can update a table live with AJAX. I have some problems with the onlick function.
Whenever I click the update button it shows on console
Cannot read property 'value' of null(…)bb # manageaccounts.php:184 onclick # manageaccounts.php:229
I checked it in my update.php file but the code is just fine. I tried to change the onclick function from onclick="(this.id)" to onclick="(this.firstname)" but none worked.
manageaccounts.php
<body>
<div class="wrapper">
<div id="data" class="table"></div>
</div>
<script type="text/javascript">
data();
function data() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "update.php?status=disp", false);
xmlhttp.send(null);
document.getElementById("data").innerHTML = xmlhttp.responseText;
}
function aa(a) {
firstid = "firstname" + a;
txtfirstid = "txtfirst" + a;
var firstname = document.getElementById(firstid).innerHTML;
document.getElementById(firstid).innerHTML = "<input type='text' value='" + firstname + "' id='" + txtfirstid + "'>";
midid = "middlename" + a;
txtmidid = "txtmid" + a;
var middlename = document.getElementById(midid).innerHTML;
document.getElementById(midid).innerHTML = "<input type='text' value='" + middlename + "' id='" + txtmidid + "'>";
lastid = "lastname" + a;
txtlastid = "txtlast" + a;
var lastname = document.getElementById(lastid).innerHTML;
document.getElementById(lastid).innerHTML = "<input type='text' value='" + lastname + "' id='" + txtlastid + "'>";
addid = "address" + a;
txtaddid = "txtadd" + a;
var address = document.getElementById(addid).innerHTML;
document.getElementById(addid).innerHTML = "<input type='text' value='" + address + "' id='" + txtaddid + "'>";
gendid = "gender" + a;
txtgendid = "txtgend" + a;
var gender = document.getElementById(gendid).innerHTML;
document.getElementById(gendid).innerHTML = "<input type='text' value='" + gender + "' id='" + txtgendid + "'>";
contid = "contact" + a;
txtcontid = "txtcont" + a;
var contact = document.getElementById(contid).innerHTML;
document.getElementById(contid).innerHTML = "<input type='text' value='" + contact + "' id='" + txtcontid + "'>";
updateid = "update" + a;
document.getElementById(a).style.visibility = "hidden";
document.getElementById(updateid).style.visibility = "visible";
}
function bb(b) {
var firstid = "txtfirst" + b;
var firstname = document.getElementById(firstid).value;
var midid = "txtmid" + b;
var middlename = document.getElementById(midid).value;
var lastid = "txtlast" + b;
var lastname = document.getElementById(lastid).value;
var addid = "txtadd" + b;
var address = document.getElementById(addid).value;
var gendid = "txtgend" + b;
var gender = document.getElementById(gendid).value;
var contid = "txtcont" + b;
var contact = document.getElementById(contid).value;
update_value(b, firstname, middlename, lastname, address, gender, contact);
document.getElementById(b).style.visibility = "visible";
document.getElementById("update" + b).style.visibility = "hidden";
document.getElementById("firstname" + b).innerHTML = firstname;
document.getElementById("middlename" + b).innerHTML = middlename;
document.getElementById("lastname" + b).innerHTML = lastname;
document.getElementById("address" + b).innerHTML = address;
document.getElementById("gender" + b).innerHTML = gender;
document.getElementById("contact" + b).innerHTML = contact;
}
function update_value(id, firstname, middlename, lastname, address, gender, contact) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "update.php?id=" + id + " & firstname=" + firstname + " & middlename=" + middlename + " & lastname=" + lastname + " &address=" + address + " & gender=" + gender + " &contact=" + contact + " & status=update", false);
xmlhttp.send(null);
}
function delete1(id) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "update.php?id=" + id + " & status=delete", false);
xmlhttp.send(null);
data();
}
</script>
</body>
update.php has the null value onclick <input type="button" id="update<?php echo $row["id"]; ?>" name="<?php echo $row["id"]; ?>" value="UPDATE" style="visibility: hidden;" onclick="bb(this.firstname)">
<?php
$conn = mysqli_connect('localhost', 'root','root', 'realestate');
if (!$conn) {
die("Sorry we're having some problems with the database. :(".mysqli_connect_error());
}
$status = $_GET["status"];
if ($status == "disp") {
$sql1 = "SELECT * FROM agents"; // check the change ere
$result=mysqli_query($conn, $sql1);
echo "<table>";
echo "<tr>
<th>Agent ID</th>
<th>Firstname</th>
<th>Middlename</th>
<th>Lastname</th>
<th>Address</th>
<th>Gender</th>
<th>Contact</th>
<th>Action</th>
</tr>";
while($row=mysqli_fetch_assoc($result)) {
echo "<tr class='da'>";
echo "<td>"; echo $row["id"]; echo "</td>";
echo "<td>"; ?><div id="firstname<?php echo $row["id"]; ?>"><?php echo $row["firstname"]; ?></div><?php echo "</td>";
echo "<td>"; ?><div id="middlename<?php echo $row["id"]; ?>"><?php echo $row["middlename"]; ?></div><?php echo "</td>";
echo "<td>"; ?><div id="lastname<?php echo $row["id"]; ?>"><?php echo $row["lastname"]; ?></div><?php echo "</td>";
echo "<td>"; ?><div id="address<?php echo $row["id"]; ?>"><?php echo $row["address"]; ?></div><?php echo "</td>";
echo "<td>"; ?><div id="gender<?php echo $row["id"]; ?>"><?php echo $row["gender"]; ?></div><?php echo "</td>";
echo "<td>"; ?><div id="contact<?php echo $row["id"]; ?>"><?php echo $row["contact"]; ?></div><?php echo "</td>";
echo "<td>"; ?><button id="<?php echo $row["id"]; ?>" name="<?php echo $row["id"]; ?>" onclick="delete1(this.id)">DELETE</button><?php echo "</td>";
echo "<td>"; ?>
<input type="button" id="<?php echo $row["id"]; ?>" name="<?php echo $row["id"]; ?>" value="EDIT" onclick="aa(this.id)">
<input type="button" id="update<?php echo $row["id"]; ?>" name="<?php echo $row["id"]; ?>" value="UPDATE" style="visibility: hidden;" onclick="bb(this.firstname)">
<?php echo "</td>";
echo "</tr>";
}
echo "</table>";
}
if ($status == "update") {
$id = $_GET["id"];
$first = $_GET["firstname"];
$mid = $_GET["middlename"];
$last = $_GET["lastname"];
$add = $_GET["address"];
$gend = $_GET["gender"];
$cont = $_GET["contact"];
$first = trim($first);
$mid = trim($mid);
$last = trim($last);
$add = trim($add);
$gend = trim($gend);
$cont = trim($cont);
$sql2 = "UPDATE agents SET firstname='$first', middlename='$mid', lastname='$last', address='$add', gender='$gend', contact='$cont' WHERE id=$id";
$result = mysqli_query($conn, $sql2);
}
if ($status == "delete") {
$id = $_GET["id"];
$sql3 = "DELETE FROM agents WHERE id=$id";
$result = mysqli_query($conn, $sql3);
}
?>
In your function bb, you are doing:
var firstid="txtfirst"+b;
var firstname = document.getElementById(firstid).value;
You are calling the function like:
onclick="bb(this.firstname)"
Now, this.firstname would be undefined as this is pointing to your button and the button does not have a property called firstname.
Also, when you do like
onclick="(this.id)"
Then inside your function, firstid would become "txtfirstupdate1" as the id of your button will be update + id and not just id. So, document.getElementById(firstid) would be actually null and that's the reason why you are getting this error.

How to hide / show visibility of HTML elements generating code from PHP?

I need to hide/show HTML elements in my code.
The page is generated in PHP.
Trying to semplify my code here you area a sample that show my troubles ...
echo '<button type="button" onclick="hide_show('.$n_images.')">Hide / show details</button>';
echo '<script language="javascript">';
echo 'function hide_show(n_images)';
echo ' {';
echo ' element = document.getElementById("details_0");';
echo ' if (element.style.visibility == \'visible\') {';
echo ' element.style.visibility = \'hidden\'';
echo ' }';
echo ' else {';
echo ' element.style.visibility = \'visible\'';
echo ' }';
echo ' }';
echo '</script>';
In this case the code is working and all it's fine.
My problem is that I've several elements to hide /show and so I need to substitute the line
echo ' element = document.getElementById("details_0");';
using a while and I don't know as generalize that code ...
My final code shoud be something like this .. .
echo '<button type="button" onclick="hide_show('.$n_images.')">Hide / show details</button>';
echo '<script language="javascript">';
echo 'function hide_show(n_images)';
echo ' {';
echo ' while (current_index < n_images ) {';
echo ' element = document.getElementById("details_0");'; --> this is the line I need to generalize !!!
echo ' if (element.style.visibility == \'visible\') {';
echo ' element.style.visibility = \'hidden\'';
echo ' }';
echo ' else {';
echo ' element.style.visibility = \'visible\'';
echo ' }';
echo ' current_index = current_index + 1;';
echo ' }';
echo ' }';
echo '</script>';
Any help / suggestions / example?
Thank you in advance!
Cesare
Hi Cesare to make it easier why not just use one php echo statement for your entire JavaScript. before your while loop, initialize current_index to 0. in your js in the line you need to generalize, getElementById("details_" + current_index)
echo '<button type="button" onclick="hide_show('.$n_images.')">Hide / show details</button>';
echo '<script language="javascript">';
echo 'var i = 0';
echo 'function hide_show(n_images)';
echo ' {';
echo ' while (current_index < n_images ) {';
echo ' element = document.getElementById("details_" + i);'; --> this is the line I need to generalize !!!
echo ' if (element.style.visibility == \'visible\') {';
echo ' element.style.visibility = \'hidden\'';
echo ' }';
echo ' else {';
echo ' element.style.visibility = \'visible\'';
echo ' }';
echo ' current_index = current_index + 1;';
echo ' i++;'; //increment variable i value...
echo ' }';
echo ' }';
echo '</script>';
just initialize counter like 'var i' and add that to ever id.

submit dynamic form with javascript

When I want to submit a form with my js i always get this error:
Uncaught TypeError: Cannot read property 'submit' of null
its like the js doesnt find the form
Here the js code:
echo "<script language='javascript' type='text/javascript'>";
echo "function send(ak,id){";
echo "document.getElementById('java').submit(); ";
echo "document.write('submited');";
echo"}";
echo "</script>";
And here the php / html:
echo "<form id='java' method='post' action='reisegruppe.php' >";
echo "<input name='ak' type='hidden' />";
echo "<input name='id' type='hidden' />";
// Reisegruppe ausgeben
if ($result1->num_rows > 0) {
// Reisegruppe ID , von , nach ausgeben
$count = 1;
while($row1 = $result1->fetch_assoc()) {
echo "<br>" . "id: " . $row1["reisegruppe_id"].
" - <b> von: </b> " .'<b>'.'<input name="von" value='.$row1["von"].' size="5" />'.'</b>'. " " .
"<b>nach: </b>" .'<b>'.'<input size="5" name="nach" value='. $row1["nach"].'>'.'</b>'." ". "<br>";
echo "<a href='javascript:send(1,32)';>neu eintragen</a>";
while($row = $result->fetch_assoc()){
if($row1["reisegruppe_id"] == $row["FK_reisegruppe_id"]){
echo " - Name: " . $row["vorname"]. " " . $row["nachname"]. " " . "<br>";}
}
$sql = "SELECT reisegruppe_id, von, nach,teilnehmer_id, vorname, nachname,FK_reisegruppe_id FROM Reisegruppe JOIN Teilnehmer on FK_reisegruppe_id = reisegruppe_id";
$result = $conn->query($sql);
}
} else {
echo "0 results";
}
echo </form>;
comment this line because it is stop the from from submitting
echo "document.write('submited');";

unterminated string literal when use a php echo

I am using jQuery to produce some text that is coming from my Database.
However I keep getting the jQuery error:
unterminated string literal
My code in raw format looks like :
+ "<div class='operator-details'>"
+ "<strong>Operator:</strong> Stuart"
+ "<br />"
+ "<br /><strong>Phone:</strong> 01"
+ "<br />"
+ "<br /><strong>Contact:</strong> <a href='#'>x#x.com</a>"
+ "</div>"
+ "<div class='featured-venue'>"
+ "<p>Great venue to vistIt is a pleasure to feature it.</p>"
+ "</div>"
The jQuery code is :
+ "<div class='operator-details'>"
+ "<strong>Operator:</strong> <?php echo $venue->user_firstname; ?> <?php echo $venue->user_surname; ?>"
+ "<br />"
+ "<br /><strong>Phone:</strong> <?php echo $venue->user_telephone; ?>"
+ "<br />"
+ "<br /><strong>Contact:</strong> <a href='mailto:<?php echo $venue->user_email; ?>'><?php echo $venue->user_email; ?></a>"
<?php if($venue->venue_website) { ?>
+ "<br />"
+ "<br /><strong>Website:</strong> <a href='<?php echo $venue->venue_website; ?>' target='_blank'><?php echo $venue->venue_website; ?></a>"
<?php } ?>
+ "</div>"
<?php if($venue->venue_featured == 'Yes') { ?>
+ "<div class='featured-venue'>"
+ "<p><?php echo strip_tags($venue->venue_featured_text); ?></p>"
+ "</div>"
<?php } ?>
Is there any way I can correct this error?
Thanks

Categories