I have a problem selecting specific checkbox and putting higlight css for its div inside the mysql_fetch_array
here's my code
$count=1;
$query = mysql_query('SELECT * FROM thread');
while($row = mysql_fetch_array($query))
{
echo "<div class='row".$count."'><input type='checkebox' class='chk_box".$count."'> ".$row['title']."</div>";
$count++;
}
<script>
var count= "<?php echo $count?>";
for(var y=1;y<=count;y++){
$('.chk_box'+y).click(function() {
if(this.checked) {
$('.row'+y).addClass('backcolor');
}
else{
$('.row'+y).removeClass('backcolor');
}
});
}
</script>
Fixed som typos, added a DOM ready function, and changed the jQuery a bit, try that ?
$count=1;
$query = mysql_query('SELECT * FROM thread');
while($row = mysql_fetch_array($query)) {
echo "<div class='row".$count."'><input type='checkbox' class='chk_box".$count."'> ".$row['title']."</div>";
$count++;
}
<script type="text/javascript">
$(function() {
$('[class^="chk_box"]').on('click', function() {
$(this).closest('div').toggleClass('backcolor', this.checked);
});
});
</script>
as a sidenote, attaching event handlers inside for loops is usually not a very good idea.
Related
I have the code below and this code works, but only after clicking on selection option but code doesn't work when i change value when use arrow up and down.
I tried modification script, change option "click" to "change" but this solution doesn't work. Someone can help me ?
$select = $db_connect -> query("SELECT * FROM templates");
if($select -> num_rows > 0)
{
echo '<select id="subject" name="subject" class="form-select">';
while($row = $select -> fetch_assoc())
{
echo '<option id="'.$row["id"].'" value="'.$row['template_subject'].'">'.$row['template_subject'].'</option>';
?>
<script>
$("#subject #<?php echo $row['id']; ?>").on('click', function(){
if((this.id = "<?php echo $row['id'];?>") && (this.id != 1))
{
$("textarea").html("<?php echo $row['template_text']; ?>");
$("input[name='new_subject']").hide();
}
else
{
$("textarea").html("");
$("input[name='new_subject']").show();
}
});
</script>
<?php
}
echo '</select>';
}
Your problem is in the Javascript code.
<script>
$("#subject").change( function(){
var text = $( "#subject option:selected").val();
var id = $(this).children(":selected").attr("id");
if(id != 1)
{
$("textarea").html(text);
$("input[name='new_subject']").hide();
}
else
{
$("textarea").html("");
$("input[name='new_subject']").show();
}
});
</script>
remove the script from the while loop , put it at the end before </body> tag.
I am taking list of data from my database using a loop. I loop one div but the values change depending on what I have in the database. I will want to get the id of the link that i click on from the individual divs. below is my html codes...
<?php
$query = $student->conn->prepare('SELECT * FROM groups');
$query->execute();
$result = $query -> fetchAll();
$count = 0;
foreach ($result as $row) {
$count = $count + 1;
$groupName = $row['GpName'];
$groupAdmin = $row['GpAdmin'];
$groupPurpose = $row['GpPurpose'];
$output = "42";
echo "<div class='animated flipInY col-sm-4'>
<div class='tile-stats'>
<div class='icon'><i class='fa fa-tags'></i></div>
<div class='count'>$count</div>
<h3 id='groupName'>$groupName</h3>
<a id='$groupName' class='display' href='#'><p>Click here display group information.</p></a>
</div>
</div>";
}
?>
This is the jQuery code I use. it works in the console but it doesn't work on the page:
$('.display').on('click', function () {
$(this).next();
var id = $(this).prev().val();
alert(id);
});
The statement
It works in the console but it doesn't work on the page
makes me think you are using Ajax so that means you are binding an event to elements that do not exist. So use event bubbling or bind the events after you replace the content.
$(document).on('click', '.display', function () {
var id = $(this).prev().val();
alert(id);
});
I'm in the process of creating a 'drag-and-drop' ordering list, and I grabbed some code for an existing one and I need to modify it to fit my needs. However I do not fully understand exactly what the code is doing in order to modify it correctly.
Basically I have a php variable '$draft_id' that I need to pass into my updateList.php. If I just define $draft_id=0 within updateList.php it works fine, but I need to be able to pass this value in.
The code looks like:
(index.php)
<script type="text/javascript">
$(document).ready(function(){
function slideout(){
setTimeout(function(){
$("#response").slideUp("slow", function () {});
}, 2000);}
$("#response").hide();
$(function() {
$("#list ul").sortable({ opacity: 0.8, cursor: 'move', update:function() {
var order = $(this).sortable("serialize") + '&update=update';
$.post("updateList.php", order, function(theResponse){
$("#response").html(theResponse);
$("#response").slideDown('slow');
slideout();
});
}
});
});
});
</script>
...
<?php
include("connect.php");
$draft_id='0';
$query = "SELECT id, text FROM sort WHERE draft_id =" . $draft_id . " ORDER BY listorder ASC";
$result = mysql_query($query);
while($row = mysql_fetch_array($result, MYSQL_ASSOC))
{
$id = stripslashes($row['id']);
$text = stripslashes($row['text']);
echo "<li id='arrayorder_" . $id . "'>" . $text;
echo "<div class='clear'></div>";
echo "</li>";
}
?>
(updateList.php)
<?php
include("connect.php");
$array = $_POST['arrayorder'];
if ($_POST['update'] == "update"){
$count = 1;
//------------------------------------
$draft_id=$_POST['draft_id'];
//------------------------------------
foreach ($array as $idval) {
$query = "UPDATE sort SET listorder = " . $count . " WHERE id = " . $idval . " AND draft_id=" . $draft_id;
mysql_query($query) or die('Error, insert query failed');
$count ++;
}
echo 'Draft Order Saved!';
}
?>
So basically in the 'updateList.php' I'd like 'draft_id' to be taken from the $_POST array, but I'm not sure how to pass it correctly. Any help would be appreciated.
After some research I've figured out how pass this how it needs to be passed, so I figured I'd share in case anyone else needs it in the future. So my main issue was that I did not understand exactly how the $_POST array was being set.
In the Javascript there is a $.post that is using a variable 'order' which is defined above it. This is where the $_POST array is being passed. So by adding an additional condition you can pass additional variables in the $_POST array.
So I changed:
<script type="text/javascript">
$(document).ready(function(){
function slideout(){
setTimeout(function(){
$("#response").slideUp("slow", function () {});
}, 2000);}
$("#response").hide();
$(function() {
$("#list ul").sortable({ opacity: 0.8, cursor: 'move', update:function() {
var order = $(this).sortable("serialize") + '&update=update';
$.post("updateList.php", order, function(theResponse){
$("#response").html(theResponse);
$("#response").slideDown('slow');
slideout();
});
}
});
});
});
</script>
to:
<?php //this will later be pulled from another page, but for now
$draft_id='0'; //I just set it up for testing purposes.
$_POST['draft_id']=$draft_id;
?>
<script type="text/javascript">
$(document).ready(function(){
function slideout(){
setTimeout(function(){
$("#response").slideUp("slow", function () {});
}, 2000);}
$("#response").hide();
$(function() {
$("#list ul").sortable({ opacity: 0.8, cursor: 'move', update:function() {
//we will add &draft_id='the php variable $draft_id to the order variable'
var order = $(this).sortable("serialize") + '&update=update' + '&draft_id=<?php echo $draft_id; ?>';
$.post("updateList.php", order, function(theResponse){
$("#response").html(theResponse);
$("#response").slideDown('slow');
slideout();
});
}
});
});
});
</script>
This fixed my issue, hopefully this can help someone out in the future if they run into this same issue.
jQuery.ajaxSettings.traditional = true;
$(document).ready(function(){
$(".wijstoe").change(function(){
var id = $(this).children('#test').map(function() {
return $(this).text();
}).get();
var mw = $("option").val();
var opg = "Opgeslagen !";
$("#loading").css("display","block");
$.post("wijstoe.php",
{mw:mw, id:id},
function(data,status)
{
$("#loading").css("display","none");
$(this).children('#tester').html(opg);
});
});
});
HTML / PHP :
echo "<td>$row[2]</td>";
echo "<td id='test1'>";
echo "<div class='wijstoe'>";
echo "<div id='test' style='display:none;'>".$row[0]."</div>";
echo "<form><select>";
if($_SESSION['uname'] == 'admin') {
$querya="select uname from users";
$resulta = mysql_query($querya);
while ($rowa = mysql_fetch_row($resulta)) {
echo "<option>".$rowa[0]."</option>";
}
echo "</select></form>";
echo "<div id='tester'>DIDI</div>";
echo "</div>";
echo "</td>";
}
This does not get the text from id tester (DIDI) replaced by the text opgeslagen.
When I don't use $(this) it works but then it works for every div with id tester, i just want this specific div to have the text replaced.
So this works :
$(this).children('#tester').html(opg);
This does not work :
$('#tester').html(opg);
$.post("wijstoe.php",
{mw:mw, id:id},
function(data,status)
{
$("#loading").css("display","none");
$(this).children('#tester').html(opg);
});
The $(this) at the location listed will be the POST method.
Having multiple elements with the same ID is not a good practice. Change to a class when using on multiple elements.
var tester = $(this).find('.tester');
$.post("wijstoe.php",
{mw:mw, id:id},
function(data,status)
{
$("#loading").css("display","none");
$(tester).html(opg);
});
try
$(this).find('#tester').html(opg);
I am using jQuery to do an autocomplete and when I click 1 item on the list the input gets all the items of the list(even the < li >..< /li >)
This is the script which I call
if($_GET['q']) {
$queryString = $db->real_escape_string($_GET['q']);
if(strlen($queryString) >0) {
$query = $db->query("SELECT * FROM .... WHERE name LIKE '%$queryString%'");
if($query) {
while ($result = $query ->fetch_object()) {
echo "<li>$result->name</li>";
}
} else {
echo 'ERROR: There was a problem with the query.';
}
} else {
// Dont do anything.
} // There is a queryString.
} else {
echo 'There should be no direct access to this script!';
}
And this is the jQuery
<script type="text/javascript">
$(function() {
$("#ac3").autocomplete({
url:'searchcond.php',
select: function(event, ui) {
console.dir(ui);
event.preventDefault();
$("#ac3").text(ui.item.label);
}
});
});
</script>
Also when I type something it does not get it. I have to type it fast to get the correct query
I remember that jquery autocomplete wants just a list of key|values (one per line) response and not an UL-LI list:
EG:
echo "$key|$value\n";
while ($result = $query ->fetch_object()) {
echo "$result->name\n";
}
To fix the correct query, you can add an option to delay or the minChars before the search: http://docs.jquery.com/Plugins/Autocomplete/autocomplete#url_or_dataoptions
To get the text, try: $("#ac3").text(ui.item.label.text());