I'm using an on change for a drop down menu to display information once a choice is chosen from the dropdown. This works fine in Firefox and Chrome but I have been hoodwinked into having to use ie8 and this on change does not seem to fire. Any help would be much appreciated. Its a mix of php and html the lower part is js which outputs info when chosen.
echo "<p><h2> To View a Route: </h2><br> Pick a routes name from the list and all its information can be viewed below the selection box.</p>";
echo "<p><FORM METHOD=\"post\" ACTION=\"controller.php\">";
echo "<select class=\"toggle-data\" name='selectallrouteinfo'>";
echo "<option value=\"\">Choose a Route </option>";
for ($i = 0; $i < sizeof($list1); $i++) { //going through each element of array and outputting route
if (is_string($list1)) {
echo "<option value=\"\" data-toggle = \"$id1\" >$list1</option>";
} else {
$space = " ";
$id = $list4[$i];
$id1 = "#" . $list4[$i];
echo "<option data-toggle = \"$id1\" value=\"$id\">" . $list1[$i] . $space . $id . "</option>";
$idHolder[$i] = $id; //array for holding ids so that it passing the correct id to my loops below
}
}
echo "</select></form></p>";
for ($k = 0; $k < sizeof($idHolder); $k++) { //my outer loop is going through the ids, fitting correct id to the div and dbm obj
echo "<div id=\"$idHolder[$k]\" style=\"display: none;\">
";
$allRouteInfo = $DBM1->getAllRouteData($idHolder[$k]);
for ($j = 0; $j < sizeof($allRouteInfo); $j++) { // my inner loop is going through each element of array and outpting all route info
if (is_string($allRouteInfo)) {
echo $allRouteInfo; //if theres no info, there is no array, it has returned a string
} else {
echo $allRouteInfo[$j]; //if there is arry, happy days
}
}
echo "</div>";
//below is a js/jquery script for outputting my choice in the select of route info
echo " <script>$('.toggle-data').on('change', function() { //jquery for printing my valuable info on change
var toggle = this.options[this.selectedIndex].getAttribute('data-toggle'),
toggle_class = 'unique_classname';
$('.'+toggle_class+', '+toggle).toggle().removeClass(toggle_class);
$(toggle).addClass(toggle_class);
}); </script>";
echo " </div>";
Related
Hi I am super new to php and coding in general and I have a question about updating my attribute with javascript. I currently have a loop which cycles through various assignmentNames. I need to update the id = popup-1 in order to have the loop be functional. Appreciate any help. Here is the PHP and script I have currently:
if($result = mysqli_query($link, $sql)){
if(mysqli_num_rows($result) > 0){
echo "Assignments";
while($row = mysqli_fetch_array($result)){
echo '<div class="popup" id="popup-1">';
echo '<div class="overlay"></div>';
echo '<div class = "content">' . $row['dueDate'] . $row['className'] . '</div>';
echo '<div class="close-btn content" onclick="togglePopup()">×</div>';
echo '<div class = "btn-group">' . '<button onclick="togglePopup()">' . $row['assignmentName'] . '</button>' . '</div>';
echo '</div>';
echo '<script type="text/javascript">','updateId();','</script>';
}
}
function updateId() {
//initialize the index with 1, the item with 0 index is already in webpage.
var i = 1;
//Add after the element
var oldID = document.getElementById("popup-1");
oldID.id = "popup-1"+i;
//Increment the index
i++;;
}
I have created a table with 3 columns and rows with the size of an array pulled from the database. I have got the value but I want to create a button inside the cells with the name from pname and when you click that button it will take you to the value of plink. I tried using <input type="button" value=" " onclick="window.open( )", but it doesn't seem to pass the arrays. I am sure there is an easier/ better way to do it with JavaScript, but I am not familiar with JavaScript. Please help me out. Here is my code.
I want the format 3 columns and infinite rows(based on the data).
<!DOCTYPE html>
$pname = array();
$plink = array();
$results = $wpdb->get_results("SELECT name, link FROM `wptable`);
if(!empty($results)) {
foreach($results as $row){
$pname[] = $row->name;
$plink[] = $row->link;
}
}
$num = 0;
echo "<table class='table'>";
echo "<tbody>";
echo "<br><br>";
$quant_row = count($pname)/3;
$quant_col = 3;
for ($count_row = 0; $count_row < $quant_row; $count_row++)
{
echo "<tr>";
for ($count_col = 0; $count_col < $quant_col; $count_col++)
{
echo "<td>";
echo $plink[$num];
echo "</td>";
$num++;
}
echo "</tr>";
}
echo "</tbody>";
echo "</table>";
?>
You just need to echo a button inside an anchor:
echo '<button type="button">' . $pname[$num] . '</button>';
try this.
echo "<td>";
echo "<button onclick=\"Document.getElementById('link$num').display=state$num? 'none' :'block';state$num=!state$num; \">". $pname[$num] ."</button><div id='link$num'>". $plink[$num]."<div>";
echo "";
when you click on $pname , you show the $plink. reclick and hide the content
I currently have three tables. One is housekeeping_employee, second one is housekeeping_benefit, and the third one is the housekeeping_employeebenefits. housekeeping_Employeebenefits is my table where a benefit is assigned/inserted to an employee. Here's my code for displaying the housekeeping_employee in a dropdown, displaying the housekeeping_benefit in checkboxes, and lastly the submit button for the employeebenefits to insert the benefits into the employee.
<?php
if(!isset($_POST['insert']))
{
echo "<br>";
echo "<form method ='POST' action='' >";
$ctr = 0;
$employee = mysqli_query($conn, "SELECT * FROM housekeeping_employee") or DIE("Could not Select");
echo "<select class='indent' name = 'Employee'>";
echo "<option>Select</option>";
while($listEmployee = mysqli_fetch_array($employee))
{
echo "<option value = ".$listEmployee['employeeid'].">".$listEmployee['firstname']."</option>";
}
echo "</select>";
echo "<br><br>";
echo "<div class='indent'>";
$benefits = mysqli_query($conn, "SELECT * FROM housekeeping_benefit")or DIE("SELECT Query not working.");
if(mysqli_num_rows($benefits))
{
while($row = mysqli_fetch_array($benefits))
{
$ctr++;
echo "<h6><input type = 'checkbox' name = 'benefits".$ctr."' value ='".$row['benefitid']."' >".$row['benefitname']." </input></h6> <br>";
if($ctr == 5){
echo"<br>";
$ctr=0;
}
}
echo "<br><input type='submit' class='btn btn-info' name='insert' value='Submit'/>";
}
echo "<input type='hidden' name='ctr' value='".$ctr."'/>";
echo "</form>";
}
else
{
$employeeid = $_POST['Employee'];
for($a = 1; $a <= $_POST['ctr'] ; $a++)
{
if(isset($_POST['benefits'.$a]))
{
$benefitid = $_POST['benefits'.$a];
//echo "INSERT INTO `housekeeping_employeebenefits`(`employeeid`,`benefitid`) VALUES('$employeeid','$benefitid')";
mysqli_query($conn, "INSERT INTO `housekeeping_employeebenefits`(`employeeid`,`benefitid`) VALUES('$employeeid','$benefitid')") or DIE("Insert query is not working");
echo "Employee to Benefits successful!";
}
}
}
?>
I did a join query so I can see the benefits under the employee. Here's my query
SELECT * FROM housekeeping_employee A,housekeeping_benefit B,housekeeping_employeebenefits C where (A.employeeid = A.employeeid and B.benefitid = C.benefitid) and A.employeeid = 2
My friend suggested that I use an onclick which I've never heard or used before so my main question is really far from what I have at the moment but here it is. So from my original code I plan to remove the code that displays all checkboxes of benefits and instead replace it with only displaying the checkboxes of benefits that the employee has. How do I do a trigger that will display the benefit checkboxes under the employee when I choose/click an employee from the dropdown?
EDIT:
If onclick is not what I need, what syntax/command do I need?
I have the following:
while($round < $counter)
<select name="picks[]" id="winner">';
echo'<option value="'.$row['team1'].'">'.$team1.'</option>';
echo'<option value="'.$row['team2'].'">'.$team2.'</option>';
echo'</select>';
echo'BY';
echo'<select name="score[]" id="score>';
echo'<option value="1">1</option>';
echo'<option value="2">2</option>';
echo'<option value="3">3</option>';
echo'<option value="4">4</option>';
echo'<option value="5">5</option>';
echo'<option value="6">6</option>';
echo'<option value="7">7</option>';
echo'<option value="8">8</option>';
echo'<option value="9">9</option>';
echo'<option value="10">10</option>';
Which along with some other code produces this
I would like to get the value of each select box score and selected team to display in a div at the bottom of the page before user clicks submit
I have managed to achieve this result:
using the code below but it only works with 1 team
function disp(){
var winner = document.getElementById("winner").value;
var score = document.getElementById("score").value;
document.getElementById("pickedDiv").style.cssText='background:#f0f0f0;width:60%; height:200px; border:thin solid black; border-raduis:10px;';
document.getElementById("picked").innerHTML="You are selecting: "+winner+" to win by "+score;
}
If someone could please give me some advise how I can modify the script above to get all selected teams and points to disp in div
First, get a select element of your choice:
var element = document.getElementById("winner");
For the text of the selected option, you need to use:
var option_text = element.options[element.selectedIndex].text;
And for its value:
var option_value = element.options[element.selectedIndex].value;
HOW TO IMPLEMENT:
In your case, assuming each winner and score have a unique id:
We will use the counter $i to achieve this
Be sure to define the $max variable to the number of times you want to loop
for ($i = 0; $i < $max; $i++)
{
// here we concatenate the counter to the id of the select element
// the first winner in the loop will have id winner0, the second winner1,
// and so on
echo '<select name="picks[]" id="winner' . $i . '">';
echo '<option value="'.$row['team1'].'">'.$team1.'</option>';
echo '<option value="'.$row['team2'].'">'.$team2.'</option>';
echo '</select>';
echo 'BY';
// here we concatenate the counter to the id of the select element
// the first score in the loop will have id score0, the second score1,
// and so on
echo '<select name="score[]" id="score' . $i . '">';
echo '<option value="1">1</option>';
echo '<option value="2">2</option>';
echo '<option value="3">3</option>';
echo '<option value="4">4</option>';
echo '<option value="5">5</option>';
echo '<option value="6">6</option>';
echo '<option value="7">7</option>';
echo '<option value="8">8</option>';
echo '<option value="9">9</option>';
echo '<option value="10">10</option>';
echo '</select>'
}
Our server-side code is ready. Now, lets get back to our client-side code.
We need a way to get all the elements that we generated previously.
We are going to need a loop:
for (var i = 0;;i++)
{
// note that our for doesn't have an exit condition.
// it will loop forever. we need a way to find out
// which is the last element, and break the loop
var winner = document.getElementById("winner" + i);
var score = document.getElementById("score" + i);
// if the element is not found, break the loop
if (winner == null || score == null)
{
break;
}
// get the text of the selected option
var winner_text = winner.options[winner.selectedIndex].text;
// get the value of the selected option
var winner_value = winner.options[winner.selectedIndex].value;
// here, you are ready to do whatever you please with the variables
// winner_text and winner_value
// now, lets get the score text and value
var score_text = score.options[score.selectedIndex].text;
var score_value = score.options[score.selectedIndex].value;
}
I am creating a messaging system for a website that I am making. Basically, it consists of clicking one button and two Ajax Requests afterwards. I am not even sure I am going about this the right way. On click of the button the first Ajax starts to call. The first ajax request loads a file that loads the style of the messages and retrieves them from a database. The problem I am having is that the first request sometimes takes to long to finish and the other request does not get complete. Another problem I am having is that if I put an "animation delay" type thing on it then it will look like the page it running slow. You can run an example at "http://www.linkmesocial.com/linkme.php?activeTab=mes" you must type or copy and past the whole length for it to work otherwise you will redirect to the login page. Any advice would be AWESOME! If there is some easier way to set up a messaging system please feel free to give me some advice or direct me to a tutorial. THANK YOU SO MUCH!
I would also like the know if this is a good practice. Please :)
My Original file. On click of class "mes_tab" a form is submitted. also the function mes_main() is called.
session_start();
$username = $_SESSION['user'];
$messages = mysqli_query($con, "SELECT * FROM messages WHERE recipient='$username'");
echo "<div id=\"mes_main-bar_top\" class=\"center\">Messages</div>";
echo "<div id=\"mes_main\">";
echo "<table id=\"mes_main-allView\" class=\"left\">";
echo "<td class=\"mes_tab-change\" >^</td>";
$from=array("","","", "", "", "", "", "");
for ($msgCount = 0; $msgCount < 8; $msgCount++){
$row = mysqli_fetch_array($messages);
$from[$msgCount] = $row['sender'];
for ($prev = 0; $prev < $msgCount; $prev++)
{
if ($from[$msgCount] == $from[$prev] )
{
$cont = true;
break;
}
}
if ($cont)
{
$cont = false;
continue;
}
if ($row['message'] == ""){
break;
}
echo "<tr><td class=\"mes_tab\" onclick=\"mes_main('" . $row['sender'] . "')\">";
echo "<h3 class=\"center\">" . $row['sender'] . "</h3>";
echo "<form id=\"" . $row['sender'] . "\" >";
echo "<input name=\"sender\" value=\"" . $row['sender'] . "\" hidden/>";
echo "<input name=\"id\" value=\"" . $row['id'] . "\" hidden/>";
echo "</form>";
echo "</td></tr>";
}
if ($msgCount == 8)
{
echo "<td id=\"mes_tab-change_bottom\" class=\"mes_tab-change\">V</td>";
}
echo "</table> <!-- end mes_main-allView -->";
echo "<div id=\"mes_main-mesView\" class=\"right\">";
echo "</div> <!-- end mes_main-mesView -->";
echo "</div> <!-- end mes_main -->";
mes_main() function from above. The two ajax functions inside are what I am referring to in the post above.
function mes_main(x)
{
var sender = x;
$( sender ).submit(function( event ) {
event.preventDefault();
});
ajax_req_mes("scripts/home/php/mes_load.php?" + sender , "mes_main-mesView");
ajax_req_mes("scripts/home/php/mes_content.php?" + sender ,"mes_content");
}
mes_load.php
the $sender var is created by passing the sender username through the URL. That is why I do php explode on the url.
session_start();
$username = $_SESSION['user'];
$url = "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
$sender = explode('?', $url);
$recieved = mysqli_query($con, "SELECT * FROM messages WHERE recipient='$username' AND sender='$sender[1]'");
$sent = mysqli_query($con, "SELECT * FROM messages WHERE recipient='$sender[1]' AND sender='$username'");
echo "<div id=\"mes_content\"></div>";
echo "<div id=\"mes_field\" class=\"right\"></div>";
mes_content.php
session_start();
$username = $_SESSION['user'];
$url = "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
$sender = explode('?', $url);
$recieved = mysqli_query($con, "SELECT * FROM messages WHERE recipient='$username' AND sender='$sender[1]'");
$sent = mysqli_query($con, "SELECT * FROM messages WHERE recipient='$sender[1]' AND sender='$username'");
echo "<table id=\"mesView-table\">";
$REC = array();
$SENT = array();
$ID = array();
for ($i = 0; $i < 25; $i++)
{
$rec = mysqli_fetch_array($recieved);
$sent = mysqli_fetch_array($sent);
if ($rec['id'] > 0)
{
$REC[$i] = $rec['id'];
}
if ($sent['id'] > 0)
{
$SENT[$i] = $sent['id'];
}
}
$ID = array_merge($SENT, $REC);
sort($ID);
for ($x = 0; $x < count($ID); $x++)
{
$key = $ID[$x];
$result = mysqli_query($con, "SELECT * FROM messages WHERE id = '$key'");
$res = mysqli_fetch_array($result);
if (in_array($key, $REC))
{
echo "<tr><td class='mes_recieved'>";
echo $res['message'];
echo "</tr></td>";
}
elseif (in_array($key, $SENT))
{
echo "<tr><td class='mes_sent'>";
echo $res['message'];
echo "</tr></td>";
}
}
echo "</table>";
Set async to false in your ajax requests!That's how the second one will wait for completing the first one and then start.
Also you can catch the on success and on error for the purposes you have.
Just use the "success" and "error" callbacks.
Also you could use the "done" callback
But, IMO, for that kind of problem I think a better alternative would be using Websockets
EDIT:
Here is some example of how you could do it:
jQuery.ajax({
type : "POST",
data : {msg:"your message"}
url : "http://fu.com/myfile.php",
success: function(response){
//Do something with your response
}
}).done(secondCall());
function secondCall(){
jQuery.ajax({
type : "POST",
data : {data:"data"}
url : "http://fu.com/myfile.php",
success: function(response){
//Do something with your response
}
});
}
EDIT2:
For visibility, here is a tutorial using websockets: http://www.sanwebe.com/2013/05/chat-using-websocket-php-socket