The following function appends on-click a div containing an image, to each main div from the "edit" class.
I need to insert on-click a div into each subdiv from c.$k class. All the sub-divs from c1/c2 class have unique ids.
Basically I need to display a rrdtool created graph inside each sub-div which represents a device with unique IP. (the id of the sub-div)
In other words I need to get the id from each class c.$k div and use it as 'ipx' on var y,
then insert a new div class='graph' into each class c.$k div. So we can ignore the second parameter from my function (ipx) as it's not relevant. I need to use the "children" ids from div class='edit'.
This is the first time when I'm using jquery and any help is more than welcome.
function edit_mode(idname,ipx) {
var x = document.getElementById(idname);
$(x).toggle( "fade" );
// var subdivid = $("#idname").children("div");
var y = 'http://domain.com/index.php?ip='+ipx;
$("#"+idname+" img:last-child").remove();
$("<div class='graph'><img src='"+y+"'></div>").appendTo(x);
};
The PHP code:
$k=1;
$t="";
while($row = mysql_fetch_array($result)){
if ($row['id'] != $t) {
if ($t != "") {echo "</div>";}
echo "<div onclick=\"edit_mode('".$row['idDevice']."','".$row['IP']."')\">".$row['name']." ".$row['IP'] ."</div><br><div class=\"edit\" id=\"".$row['idDevice']."\">";
$t = $row['id'];
$k = 1;
}
echo "<div id=\"".$row['IP']."\" class=\"c".$k."\"><form method=\"post\" action=\"edit.php?idDevice=".$idDevice."\">";
.................................................................
echo "</form></div>";
$k = 1+($k % 2);
}
I've done this:
function edit_mode(idname) {
var x = document.getElementById(idname);
$(x).toggle( "fade" );
var subdivid = $.map($('#idname > div'), function(child) { return child.id; });
var y = 'http://domain.com/index.php?ip='+subdivid;
$("#"+idname+" img:last-child").remove();
var el = document.createElement('div');
el.className="graph";
el.innerHTML = '<img src='+y+'>' ;
document.getElementById(subdivid).appendChild(el);
This is doing exactly what I want, except that is working for one parent div with one child. The question would be now: how can I modify this function to work when I have dynamically created arrays of divs (idname) with children (subdivid).
Thank you
From what I can see the second parameter to edit_mode is the id of the sub div with class c.$k, so you can use it for appending the div with image
function edit_mode(idname,ipx) {
var x = document.getElementById(idname);
$(x).toggle( "fade" );
// var subdivid = $("#idname").children("div");
var y = 'http://domain.com/index.php?ip='+ipx;
$("#"+idname+" img:last-child").remove();
$("<div class='graph'><img src='"+y+"'></div>").appendTo('#' + ipx);
};
Related
I am trying to make a text box that when you type in it, it pulls up suggestions underneath that come from a recordset. For some reason when you type in the field, I only get the first letter. It think it has to do with the json_encode part. When I changed the array to be just text: "Brainpop","Google", etc. it worked fine. Any thoughts? This is the coding I based it off of:
https://www.w3schools.com/howto/howto_js_autocomplete.asp
<script type="application/javascript">
function autocomplete(inp, arr) {
/*the autocomplete function takes two arguments,
the text field element and an array of possible autocompleted values:*/
var currentFocus;
/*execute a function when someone writes in the text field:*/
inp.addEventListener("input", function(e) {
var a, b, i, val = this.value;
/*close any already open lists of autocompleted values*/
closeAllLists();
if (!val) { return false;}
currentFocus = -1;
/*create a DIV element that will contain the items (values):*/
a = document.createElement("DIV");
a.setAttribute("id", this.id + "autocomplete-list");
a.setAttribute("class", "autocomplete-items");
/*append the DIV element as a child of the autocomplete container:*/
this.parentNode.appendChild(a);
/*for each item in the array...*/
for (i = 0; i < arr.length; i++) {
/*check if the item starts with the same letters as the text field value:*/
if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
/*create a DIV element for each matching element:*/
b = document.createElement("DIV");
/*make the matching letters bold:*/
b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
b.innerHTML += arr[i].substr(val.length);
/*insert a input field that will hold the current array item's value:*/
b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
/*execute a function when someone clicks on the item value (DIV element):*/
b.addEventListener("click", function(e) {
/*insert the value for the autocomplete text field:*/
inp.value = this.getElementsByTagName("input")[0].value;
/*close the list of autocompleted values,
(or any other open lists of autocompleted values:*/
closeAllLists();
});
a.appendChild(b);
}
}
});
/*execute a function presses a key on the keyboard:*/
inp.addEventListener("keydown", function(e) {
var x = document.getElementById(this.id + "autocomplete-list");
if (x) x = x.getElementsByTagName("div");
if (e.keyCode == 40) {
/*If the arrow DOWN key is pressed,
increase the currentFocus variable:*/
currentFocus++;
/*and and make the current item more visible:*/
addActive(x);
} else if (e.keyCode == 38) { //up
/*If the arrow UP key is pressed,
decrease the currentFocus variable:*/
currentFocus--;
/*and and make the current item more visible:*/
addActive(x);
} else if (e.keyCode == 13) {
/*If the ENTER key is pressed, prevent the form from being submitted,*/
e.preventDefault();
if (currentFocus > -1) {
/*and simulate a click on the "active" item:*/
if (x) x[currentFocus].click();
}
}
});
function addActive(x) {
/*a function to classify an item as "active":*/
if (!x) return false;
/*start by removing the "active" class on all items:*/
removeActive(x);
if (currentFocus >= x.length) currentFocus = 0;
if (currentFocus < 0) currentFocus = (x.length - 1);
/*add class "autocomplete-active":*/
x[currentFocus].classList.add("autocomplete-active");
}
function removeActive(x) {
/*a function to remove the "active" class from all autocomplete items:*/
for (var i = 0; i < x.length; i++) {
x[i].classList.remove("autocomplete-active");
}
}
function closeAllLists(elmnt) {
/*close all autocomplete lists in the document,
except the one passed as an argument:*/
var x = document.getElementsByClassName("autocomplete-items");
for (var i = 0; i < x.length; i++) {
if (elmnt != x[i] && elmnt != inp) {
x[i].parentNode.removeChild(x[i]);
}
}
}
/*execute a function when someone clicks in the document:*/
document.addEventListener("click", function (e) {
closeAllLists(e.target);
});
}</script>
<script>
//now put it into the javascript
var software_list = <?php echo json_encode($types2, JSON_UNESCAPED_SLASHES), "\n"; ?>;
</script>
<?php
$query1 = "SELECT software_name from software";
$result = mysqli_query($sdpc_i, $query1);
$types = array();
while ($row = $result->fetch_assoc()) {
$types[] = '"'.$row['software_name'].'"';
}
$types2 = implode(",",$types);
?>
<div class="autocomplete"><input type="text" name="software_name" id="myInput" class="form-control col-md-8" value="" required></div><script>
autocomplete(document.getElementById("myInput"), software_list);
</script>
</div>
I have a form that asks a user to give a device type a name and say how many attributes they would like to assign to that device type. That form calls the below php files which uses a loop to create the desired number of attributes.
I have used the name="attribute".$i in order to be able to identify each attribute on the next php page to send the information to a database.
<?php echo $_POST['device-name']; ?>
<?php
$num=$_POST['number-of-attributes'];
$num=intval($num);
for($i=0; $i<$num; $i++) {
newAttribute($i);
}
function newAttribute($i) {
echo ("<div id=\"new-attribute\">");
echo ("<h3>New Attribute</h3>");
echo ("<label for=\"attribute".$i."\">Name</label>");
echo ("<input id=\"attribute\" type=\"text\" name=\"attribute".$i."\">");
echo ("</div>");
}
?>
However I also want the user to be able to click for example:
<div id="small-button">New Attribute</div>
and create another set of fields to define an attribute.
How would I do this?
Thanks in advance
Using javascript/jquery on the client-side:
var template = "<div class=\"new-attribute\">"
+ "<h3>New Attribute</h3>"
+ "<label for=\"attribute\">Name</label>"
+ "<input id=\"attribute\" type=\"text\" name=\"attribute\">"
+ "</div>";
$(document).ready(function() {
// The DOM has loaded
$("#small-button").on('click', function() {
// The user clicked your 'New Attribute' button
// Append a new attribute to the <body> with `template` we defined above:
$(body).append(template);
});
});
Note: I changed id="new-attribute" to class="new-attribute" since there will be more than 1.
You would need JavaScript for said job. In your HTML document, at the end of the body element add the following script element:
<script type="text/javascript">
var numberOfAttributes = 1;
function newAttributeFields(e) {
// Creates the div
var div = document.createElement('div');
div.id = 'new-attribute';
// Appends the fields
div.innerHtml = '<h3>New attribute</h3><label for="attribute' + numberOfAttributes + '">Name</label><input id="attribute" type="text" name="attribute' + numberOfAttributes + '">';
// Appends it to the body element
document.getElementsByTagName('body')[0].appendChild(div);
// Increments the number of attributes by one
numberOfAttributes = numberOfAttributes + 1;
}
var smallButton = document.getElementById('small-button');
// When the 'small button' is clicked, calls the newAttributeFields function
smallButton.addEventListener('click', newAttributeFields, false);
</script>
I Have to delay my redirection by few seconds. When I try to do this It is not working. I have attached my Javascript and php below. can anyone please help me to solve the problem.window location not working.
<script type="text/javascript">
// constants to define the title of the alert and button text.
var ALERT_TITLE = "Answer";
var ALERT_BUTTON_TEXT = "Ok";
// over-ride the alert method only if this a newer browser.
// Older browser will see standard alerts
if(document.getElementById) {
window.alert = function(txt) {
createCustomAlert(txt);
}
}
function createCustomAlert(txt) {
// shortcut reference to the document object
d = document;
// if the modalContainer object already exists in the DOM, bail out.
if(d.getElementById("modalContainer")) return;
// create the modalContainer div as a child of the BODY element
mObj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div"));
mObj.id = "modalContainer";
// make sure its as tall as it needs to be to overlay all the content on the page
mObj.style.height = document.documentElement.scrollHeight + "px";
// create the DIV that will be the alert
alertObj = mObj.appendChild(d.createElement("div"));
alertObj.id = "alertBox";
// MSIE doesnt treat position:fixed correctly, so this compensates for positioning the alert
if(d.all && !window.opera) alertObj.style.top = document.documentElement.scrollTop + "px";
// center the alert box
alertObj.style.left = (d.documentElement.scrollWidth - alertObj.offsetWidth)/2 + "px";
// create an H1 element as the title bar
h1 = alertObj.appendChild(d.createElement("h1"));
h1.appendChild(d.createTextNode(ALERT_TITLE));
// create a paragraph element to contain the txt argument
msg = alertObj.appendChild(d.createElement("p"));
msg.innerHTML = txt;
// create an anchor element to use as the confirmation button.
btn = alertObj.appendChild(d.createElement("a"));
btn.id = "closeBtn";
btn.appendChild(d.createTextNode(ALERT_BUTTON_TEXT));
btn.href = "#";
// set up the onclick event to remove the alert when the anchor is clicked
btn.onclick = function() { removeCustomAlert();return false; }
}
// removes the custom alert from the DOM
function removeCustomAlert() {
document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer"));
}
function handler(var1,quizId,isCorrect,score) {
alert(var1);
//var id = parseInt(quizId);
quizId++;
var points=10;
if(isCorrect=='true'){
score=score+points;
var string_url="quiz.php?qusId="+quizId+"&score="+score;
setTimeout('window.location =string_url',5000) ;
}
else{
var string_url="quiz.php?qusId="+quizId+"&score="+score;
setTimeout('window.location =string_url',5000) ;
}
}
</script>
while($row1=mysql_fetch_array($result1)){
?><input type="radio" name="answers" value="<?php echo $row1['answers'];?>" onclick="handler('<?php echo $row1["feedback"]; ?>',<?php echo $qusId;?>,'<?php echo $row1["isCorrect"]; ?>',<?php echo $score;?>)
"/ ><?php echo $row1['answers']; ?><br/>
<?php
} ?>
The first parameter of setTimeout should be a function. Try wrapping it with an anonymous function like so:
setTimeout(function() {
window.location = string_url
}, 5000);
try this:
`setTimeout("createCustomAlert(txt);", 3000);`
I actually converted the html checkboxes into images(below is the code), now the checkboxes have 3 states one for checked, one for unchecked and one for null,
now i want to add a DRAG feature to it like if we select unchecked and drag on other checkboxes, the other checkboxes should get this value, i meam the image must be changed.
Here is an example on this link http://cross-browser.com/x/examples/clickndrag_checkboxes.php , this example is without images but i want the same thing to happen with images.
Any help will really make my day, Thanks!
here is the code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
var inputs;
var checked = 'checked.jpg';
var unchecked = 'unchecked.jpg';
var na = 'na.jpg';
function replaceChecks()
{
//get all the input fields on the funky_set inside of the funky_form
inputs = document.funky_form.getElementsByTagName('input');
//cycle trough the input fields
for(var i=0; i < inputs.length; i++)
{
//check if the input is a funky_box
if(inputs[i].className == 'funky_box')
{
//create a new image
var img = document.createElement('img');
//check if the checkbox is checked
if(inputs[i].value == 0 )
{
img.src = unchecked;
inputs[i].checked = false;
}
else if(inputs[i].value = 1 )
{
img.src = checked;
inputs[i].checked = true;
}
else if(inputs[i].value = 2 )
{
img.src = na;
inputs[i].checked = true;
}
//set image ID and onclick action
img.id = 'checkImage'+i;
//set name
img.name = 'checkImage'+i;
//set image
img.onclick = new Function('checkChange('+i+')');
//place image in front of the checkbox
inputs[i].parentNode.insertBefore(img, inputs[i]);
//hide the checkbox
inputs[i].style.display='none';
}
}
}
//change the checkbox status and the replacement image
function checkChange(i)
{
if(inputs[i].value==0)
{
inputs[i].checked = true;
inputs[i].value = 2;
document.getElementById('checkImage'+i).src=na;
}
else if(inputs[i].value==1)
{
inputs[i].checked = false;
inputs[i].value = 0;
document.getElementById('checkImage'+i).src=unchecked;
}
else if(inputs[i].value==2)
{
inputs[i].checked = true;
inputs[i].value = 1;
document.getElementById('checkImage'+i).src=checked;
}
}
setTimeout(function(){replaceChecks();}, 0);
</script>
</head>
<form name="funky_form" action='checkkkkkkkkkkkkkkkkkkkkkkkkk.php' method='POST'>
<table id="table1" border=1px cellpadding=1px cellspacing=1px>
<tr>
<th>D/T</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
<th>10</th>
<th>11</th>
<th>12</th>
<th>13</th>
<th>14</th>
<th>15</th>
<th>16</th>
<th>17</th>
<th>18</th>
<th>19</th>
<th>20</th>
<th>21</th>
<th>22</th>
<th>23</th>
<th>24</th>
</tr>
<?php
$days = array('SUN');
foreach($days as $key=>$val)
{
print "<tr>";
print"<th>$val</th>";
for($i=0; $i<24; $i++){
print "<td>";
print " <input type=\"checkbox\" id=\"${val}${i}\" name=\"sun${i}\"
class=\"funky_box\" />";
print "</td>";
}
print "</tr>";
}
$days = array('MON');
foreach($days as $key=>$val)
{
print "<tr>";
print"<th>$val</th>";
for($i=0; $i<24; $i++){
print "<td>";
print " <input type=\"checkbox\" id=\"${val}${i}\" name=\"mon${i}\"
class=\"funky_box\" />";
print "</td>";
}
print "</tr>";
}
?>
</table>
</form>
It really is quite simple, bind an event to mousedown and not click, set a variable to indicate that the button is held down and at the same time check/uncheck the current checkbox etc.
Set another event to the mouseenter event of any checkbox, then check it the mousebutton is held down, and set the state to the same as the first checkbox where the mousebutton was first pressed down.
var state = false, mouse=false;
$('checkbox').on({
click: function(e) {
e.preventDefault();
},
mousedown: function(e) {
this.checked = !this.checked;
state = this.checked;
if(e.which === 1) mouse = true;
},
mouseup: function(e) {
if(e.which === 1) mouse = false;
},
mouseenter: function(e) {
if (mouse) this.checked = state;
}
});
Here's a fiddle to show how : FIDDLE
This will still have some bugs in it, and will need some additional checks etc. but it's basically how it's done.
I'm not going to go through all your code with bits of PHP and javascript sprinkled in it, you should probably have set up a fiddle with the HTML and some images if that is what you wanted, so you'll have to figure out how and where to switch the images yourself, but that should be pretty straight forward
There are several ways to add event listeners. The following concept can also be used using jQuery (and personally what I prefer).
object = document.getElementById("objectName");
$(object).bind('dragstart', eventStartDrag);
$(object).bind('dragover', eventStartDrag);
$(object).bind('drag', eventDragging);
$(object).bind('dragend', eventStopDrag);
And there are jQuery shortcuts such as:
$(object).mousedown(eventMouseDown);
$(object) is the object you want to listen for the event. Not all browsers support event capturing (Internet Explorer doesn't) but all do support event bubbling, so I believe the most compatible code is adding the event listener without jQuery.
object.addEventListener('mousedown', eventStartDrag, false);
According to this post, the preferred way of binding an event listener to a document in jQuery is using .on() rather than .bind(), but I have not tested this yet.
Hope this helps.
I guess that jQuery Draggable and Droppable could help you.
SAMPLE CODE
One more SAMPLE without drag and drop that is more similar to your example with regular checkboxes.
updated
i'm having 2 pages. An index page connected to a js file. This js file containing ajax code fetching data from database.
this is my js file
$(document).ready(function() {
// getting links from db andshow sub_menu div //
$(".menu_item").mouseover(function(){
$(this).addClass("selected").children().slideDown(500,function(){
var id = $(".selected").attr("id");
var ajax= false;
ajax = new XMLHttpRequest();
var qst = "?id="+id;
ajax.open("GET","ajax/get_sub_cats.php"+qst);
ajax.onreadystatechange = function(){
if(ajax.readyState == 4 && ajax.status == 200){
$(".sub_menu[title="+id+"]").html(ajax.responseText);
}
}
ajax.send(null);
});
});
// hiding sub_menu div //
$(".menu_item").mouseout(function(){
$(this).removeClass("selected").children(".sub_menu").slideUp(500);
});
// keeping sub_menu div visible on mouse over //
$(".sub_menu").mouseover(function() {
$(this).stop();
});
// clicking sub menu link in the menu //
$(document).delegate("a#subCatLink","click",function(){
alert("test");
});
// document ready end
});
and this is get_sub_cats php file used to fetch links from db
<?php
require('../_req/base.php');
$id = $_REQUEST['id'];
$getSubcatsQ = "select * from sub_cats where Main_Cat_ID = '$id'";
$getSubcatsR = mysql_query($getSubcatsQ);
$numrows = mysql_num_rows($getSubcatsR);
while($row = mysql_fetch_array($getSubcatsR)){
?>
<a id="subCatLink" href="products.php?id=<?php echo $row['Sub_Cat_ID']; ?>"><?php echo $row['Sub_Cat_Name']; ?></a><br />
<?php
}
mysql_close($connect);
?>
clicking links coming from the other php file using ajax is not working at all
Sorry, maybe this will help, maybe not. But...
Why don't you use something like this:
jQuery
$(".menu_item").mouseover(function(){
var id = $(".selected").attr("id");
var qst = "?id="+id;
var html = '';
$.getJSON('ajax/get_sub_cats.php'+qst, function(data){
var len = data.length;
for (var i = 0; i< len; i++) {
html += '<a id="subCatLink'+data[i].Sub_Cat_ID+'" href="products.php?id='+data[i].Sub_Cat_ID+'">'+data[i].Sub_Cat_Name+'</a>';
}
$(".sub_menu[id="+id+"]").html(html);
});
});
PHP
require('../_req/base.php');
$return = array();
$id = $_REQUEST['id'];
$sql = "select * from sub_cats where Main_Cat_ID = '$id'";
$result = mysql_query($sql);
while($ln = mysql_fetch_array($result)){
$return[] = $ln;
}
echo json_encode($return);
ok try this
$(document).delegate("click","a",function(){
var target = $(this).attr("href");
alert(target);
});
That should, as a test, show the href for every link on your page. If that works, put all the links you want to show in a div. Then call it with
$('#divID').delegate("click","a",function(){
var target = $(this).attr("href");
alert(target);
})