I'm trying to use jquery to click a link in one div and have it open an HTML document in another div (named infoblock) that sits beside the original div. I found an example here but I can't get it to work. I found a couple other variations on the net, but still no luck. Part of the link needs to transmit a variable so I'm not sure if that's part of the problem. I tried attaching the click function to a div surrounding the link with an ID of "nav" as well as the link itself with an ID of "details". When I click on the link, it opens the correct page in the full window, not in the div it's supposed to go to. Thank you in advance for any help.
$(document).ready(function() {
$("#reservename").click(function() {
$("#infoblock").load("createhandle.html");
});
$("#uploadpic").click(function() {
$("#infoblock").load("uploadpic.php");
});
$("#deletechar").click(function() {
$("#infoblock").load("selectdelete.php");
});
$("#nav").click(function() {
$("#infoblock").load($(this).find("a").attr("href"));
return false;
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="charlist" class="block">
<b>Your Characters:<b>
<br>
<button id="reservename">Reserve A Name</button>
<button id="uploadpic">Upload A Picture</button>
<button id="deletechar">Delete</button>
<?php
$result5 = mysqli_query($con,"SELECT * FROM handle WHERE user='$handle' ORDER BY charname ASC");
while($row = mysqli_fetch_array($result5))
{
echo "<table>";
echo "<tr>";
echo "<td rowspan=5 align=left><img src='../pictures/" . $row['face'] . "' border=3></td>";
echo "<th align=left><a href='chat.php?charname=" . $row['charname'] . "'>" . $row['charname'] . "</a></th>";
echo "</tr>";
echo "<tr>";
echo "<th align=left><a href='choosepic.php?charname=" . $row['charname'] . "'>Choose Picture</a></th>";
echo "</tr>";
echo "<tr>";
echo "<th align=left><div id='nav'><a id='details' href='../details.html?charname=" . $row['charname'] . "'>Details</a></div></th>";
echo "</tr>";
if ($row['type'] == 'new'){
echo "<tr>";
echo "<th align=left><a href='createsheet.php?charname=" . $row['charname'] . "'>Create</a></th>";
echo "</tr>";
}
echo "<hr>";
echo "</table>";
}
?>
</div>
<p id="infoblock" class="block"></p>
You have to prevent the default behaviour when anchor tag is clicked In order to do that that you have to be listen for click on the anchor itself not div and return false in order to prevent its default behaviour. So your code will become like this
$('#details').click(function(e){
{
e.preventDefault(); //instead of this you can also return false
$("#infoblock").load($('#details').attr("href"));
}
});
This works for me:
$(document).ready(function(){
$('#details').click(function(e){
e.preventDefault();
$("#infoblock").html('<object type="text/html" data="'+$('#details').attr("href")+'" >');
});
});
Related
Can anyone suggest some alternative solution for this problem.
I've made a popup form which i use css and javascript to trigger the display to none or flex every time i click into a specific button which is great. But this method seems to not work on a table as you can see below i've done a simple query which i just fetch some of the essentials and included some buttons to use to trigger the popup form.
PHP/HTML CODE
<tbody>
<?php
$res=mysqli_query($link,"SELECT CONCAT(c.firstname, ' ', c.lastname) AS fullname, c.* FROM user_registration c");
while($row=mysqli_fetch_array($res))
{
echo "<tr>";
echo "<td>"; echo $row["id"]; echo "</td>";
echo "<td>"; ?> <img src="<?php echo $row["image"]; ?>" height="100" width="100"> <?php echo "</td>";
echo "<td>"; echo $row["fullname"]; echo "</td>";
echo "<td>"; echo $row["username"]; echo "</td>";
echo "<td>"; echo $row["id"]; echo "</td>";
echo "<td>"; echo $row["id"]; echo "</td>";
echo "<td>"; echo $row["id"]; echo "</td>";
echo "<td>"; echo $row["id"]; echo "</td>";
echo "<td>"; ?> <button class="btn btn-success" style="width: 100%">Accept</button><?php echo "</td>";
echo "<td>"; ?> <button class="btn btn-danger" style="width: 100%">Decline</button><?php echo "</td>";
echo "<td>"; ?> <button class="btn btn-success" style="width: 100%">View Message</button><?php echo "</td>";
echo "</tr>";
}
?>
</tbody>
JAVASCRIPT CODE
document.getElementById("declineB").addEventListener("click", function(){
document.querySelector(".popup3").style.display = "flex";
})
document.getElementById("closeDecB").addEventListener("click", function(){
document.querySelector(".popup3").style.display = "none";
})
When you have multiple elements with id declineB, document.getElementById("declineB") can actually only get the first element with id declineB. The effect you want will only appear when an element whose id is declineB. When click others, no click event will be triggered.
When you use css class, you can add click event to every html element of same class:
let elements = Array.from(document.getElementsByClassName('spacer'))
for (let element of elements) {
element.addEventListener('click', ...)
}
I want to make the delete option appear when the image is hover.i dont know how to do it.so guys please help me?my view is like this:
<?php include('inc/header.php');?>
<div class="main">
<?php
foreach ($view as $row) {
echo "<div class='grow'>";
echo "<img src='".base_url()."images/".$row->image."' >";
echo "</div>";
}//end for each
?>
</div>
<?php include('inc/footer.php');?>
My image already hovers but dont know how to embed the delete option within the image.
Add a delete div -
<?php include('inc/header.php');?>
<div class="main">
<?php
foreach ($view as $row) {
echo "<div class='grow'>";
echo "<div class='delete'><a href='#'>delete</a></div>";
echo "<img src='".base_url()."images/".$row->image."' >";
echo "</div>";
}//end for each
?>
</div>
<?php include('inc/footer.php');?>
Then in script write a code to show/hide delete div -
$('.grow').hover(function () {
$(this).find('.delete').show();
},
function () {
$(this).find('.delete').hide();
})
So i am trying to display data in sql server using PHP. I am using a sortable library i found online and this is my code:
echo "<table id='report' class='sortable'>";
echo "<thead><tr>";
echo "<th>A</th>";
echo "<th>B</th>";
echo "<th>C</th>";
echo "<th>D</th>";
echo "<th>E</th>";
echo "<th>F</th>";
echo "<th>G</th>";
echo "<th>H</th>";
echo "<th>I</th>";
echo "</tr></thead>";
echo "<tbody>";
for($i=0; $i<$tablerows; $i++)
{
echo "<tr>";
echo "<td>".$result[$i]['A']."</td>";
echo "<td>".$result[$i]['B']."</td>";
echo "<td>".$result[$i]['C']."</td>";
echo "<td>".$result[$i]['D']."</td>";
echo "<td>".$result[$i]['E']."</td>";
echo "<td>".$result[$i]['F']."</td>";
echo "<td>".$result[$i]['G']."</td>";
echo "<td>".$result[$i]['H']."</td>";
echo "<td>".$result[$i]['I']."</td>";
echo "<td><div class='arrow'></div></td>";
echo "</tr>";
echo "<tr>";
echo "<td colspan='5'>";
echo "<div id='nestedAccordion'>";
echo "<h2>COLUMN 1 ELABORATE</h2>";
echo "<div>";
echo "</div>";
echo "<h2>COLUMN 2 ELABORATE</h2>";
echo "<div>";
echo "</div>";
echo "<h2>COLUMN 3 ELABORATE</h2>";
echo "<div>";
echo "</div>";
echo "<h2>COLUMN 4 ELABORATE</h2>";
echo "<div>";
echo "</div>";
echo "<h2>COLUMN 5 ELABORATE</h2>";
echo "<div>";
echo "</div>";
echo "</div>";
echo "</td>";
echo "</tr>";
When my page is loaded, it can be sorted by the A-I headings in <th> tag. As you can see, in my 'for' loop my last tag has an arrow. I want that so if the user wants more information about the row, he can view that by clicking that arrow, and information that will be displayed is in: <td colspan='5'>
Here is the javascript/jquery:
$(document).ready(function () {
$("#report tr:odd").addClass("odd");
$("#report tr:not(.odd)").hide();
$("#report tr:first-child").show();
$(".arrow").click(function(){
$(this).parents("tr").next("tr").toggle();
$(this).toggleClass("up");
});
var parentDivs = $('#nestedAccordion div'),
childDivs = $('#nestedAccordion h3').siblings('div');
$('#nestedAccordion h2').click(function () {
parentDivs.slideUp();
if ($(this).next().is(':hidden')) {
$(this).next().slideDown();
} else {
$(this).next().slideUp();
}
});
$('#nestedAccordion h3').click(function () {
childDivs.slideUp();
if ($(this).next().is(':hidden')) {
$(this).next().slideDown();
} else {
$(this).next().slideUp();
}
});
});
The question and the problem i have is only either sortable for table or arrow will work. When i load the page, and i click on the arrow to view more information i can view it, but if i sort afterward, the data under the arrow is taken as its own row rather than part of the row it was selected from.
If i sort at start, and then click on arrow, the row below is hidden. I think the problem is in this chunk of code:
$(".arrow").click(function(){
$(this).parents("tr").next("tr").toggle();
$(this).toggleClass("up");
});
Since the next tr is for colspan? But how do i fix it?
I haven't worked much with php and javascript and was hoping to get some help. I want to be able to detect which button was clicked exactly. I'm creating one button per row but I don't know how to figure out what row the click was made in. This is what I have so far...
# Get all the table data from the database
$getData = mysqli_query($conn, "SELECT * FROM `query_table`") or die ("Error occured while selecting!");
// echo '<form method="post" action="index.php">';
echo '<table border="1">';
echo '<tr>';
echo '<td>Questions</td>';
echo '<td>Likes</td>';
echo '<td></td>';
echo '</tr>';
# Loop through each row and print out the question
while ($row = mysqli_fetch_array($getData)) {
echo '<tr>';
echo '<td>';
echo $row['Question'];
echo '</td>';
echo '<td>';
echo $row['Likes'];
echo '</td>';
echo '<td>';
?>
<input type="button" id="myButton" value="Like" onclick="myFunc(<?=$row['ID']?>)" />
<?php
echo '</td>';
echo '</tr>';
}
echo '</table>';
// echo '</form>';
echo '<p id="text"></p>';
mysqli_close($conn);
?>
<script type="text/javascript">
function myFunc(id) {
document.getElementById("text").innerHTML = id;
}
</script>
So far this prints out the row id where the button was clicked, but I don't suppose I can assign that parameter value directly to a php variable that I can then use for mysql queries. How is stuff like this normally done, please help.
<input type="button" data-id="<?=$row['ID']?>" value="Like" onclick="myFunc(this)">
and
<script type="text/javascript">
function myFunc(button) {
document.getElementById("text").innerHTML = button.getAttribute('data-id');
}
</script>
In JavaScript the token "this" refers to the context in which the code is running which in this case is the button. Store custom data in attributes prefixed with data- to ensure they are not disturbed - standard practise.
I have two buttons on one submit form but when I post the submit button it returns nothing;"ABOUT THE BUTTON"; the other data is retrieved WELL.
I have been using different names for the submit button but nothing works.. Could someone help me? thank you.
The FORM data is retrieved well but not the submit button value? i need the value to differ the condition
controller: admin.php
function submit_unitgroupwd(){
$this->access_chk(); //CHECK USER ACCESS
$sbm=$this->input->post('sbm'); // returns NOTHING
echo $_POST["sbm"]; // returns undefined index sbm
echo $_POST['sbm']; // returns undefined index sbm
var_dump($_POST); // returns all the post data bt the submit button
//echo var_dump($this->input->post("sbm"));
exit();
if($this->input->post('sbm') == "Update") {
// do update
} else {
// do delete
}
}
view:
echo "<form action=".site_url("admin/submit_unitgroupwd")." method=post id=form>";
echo "<div style='float:left;color:red;' id='res'></div>";
?><?php
foreach($q1->result_array() as $r1){
$bankname= substr($r1["bank"],0,3);
//echo $bankname;
echo "<input type=hidden name=dgroup value='".$dgroup."'>";
echo "<tr>";
echo "<td width=20% colspan=3 style='font-size: 16px;'>".strtoupper($r1["bank"])."</td>";
echo "</tr>";
echo "<tr>";
echo "<td width=100>".$group_[0]."</td>";
echo "<td><input type=text name='$bankname-utama' value='".str_replace(" ","",$r1["utama"])."' style='width: 100%;'></td>";
if ($r1["bank"] == 'ALL'){
echo "<td rowspan='1'><br><input type='checkbox' name='cek[]' id='cek[]' value='$bankname' ></td>";
echo "<input type=hidden name=_code$bankname value='".$r1["bank"]."'>";
echo "</tr>";
echo "</tr>";
continue;
}
echo "<td rowspan=".($dgroup + 1)."><br><input type='checkbox' name='cek[]' id='cek[]' value='$bankname' ><br><br><br><br><br><br><br>";
echo "<input type=hidden name=_code$bankname value='".$r1["bank"]."'>";
echo "</tr>";
$_alp = "a";
for ($_g=0; $_g<$dgroup; $_g++){
echo "<tr>";
echo "<td width=100>".$group_[($_g + 1)]."</td>";
echo "<td width=80%><input type=text name='$bankname-wd$_alp' value='".str_replace(" ","",$r1["wd$_alp"])."' style='width: 100%;'></td>";
echo "</tr>";
$_alp++;
echo "</tr>";
}
}
?>
>
<input type="submit" class="button" value='Update' name="sbm"/>
<input type="submit" class="button" value='Delete' name="sbm"/>
I'm not completely clear on your description of the problem, but you can't name both submit buttons the same.
You seem to think that push one or the other button will only submit THAT button's value, but in fact the second one is always submitted, because it is the last on the form.
So change your button names to "update" & "delete", and then you can check with
if(isset($_POST['update']))....
for example.
However, you might want to look around the internet for some cleaner examples of how to code what you are after.
You could simply use only the
<input type="submit" class="button" value='Update' name="sbm"/>
and use an anchor for the delete action,
echo "<a href ='controller_delete/$item_id' class='button'>Delete</a>
since you normally wont need other inputs on the delete action if you get my point.