Using this code :
$("table > :not(thead) > tr.Selected").removeClass('Selected')
To find all table rows which have the class Selected and remove that class.
Plus, using this code :
var ReqID = $("table > :not(thead) > tr.Selected").attr('id')
Which is trying to find the ID off the row which has the class selected.
This code works perfectly until the table is reloaded using AJAX and then it all stops working and that line does not work.
Any ideas?
Thankss!
EDIT
More Code :
Here is the AJAX call :
function EditRequest()
{var ReqID = $("table > :not(thead) > tr.Selected").attr('id')
alert(ReqID);
$.post("a/outputresults2.php", {editdynamic: ReqID} , function(data){
$('#resultstable').html(data);
});
}
function Selected(x)
{
$("table > :not(thead) > tr.Selected").removeClass('Selected')
$('#'+x).toggleClass('Selected');
}
Here is the php that outputs the original and the table updated when its been AJAX'ed :
if($RequestID == $ID){
$requestrows.="
<tr id=\"$RequestID\" onClick=\"Selected($RequestID)\" class=\"Selected\" >
<td><input type=\"text\" id=\"MCode\" value=\"$ModCode\"></td>
<td><input type=\"text\" id=\"RName\" value=\"$RoomName\"></td>
..etc etc etc
</tr>";
}
}
if($RequestID != $ID){
$requestrows .=
" <tr id= \"$RequestID\" onClick=\"Selected($RequestID)\" >
<td>$ModCode</td>
<td>$RoomName</td>
... etc etc etc
</tr>";
}
}
echo($requestrows);
Also table being dynamically changed is called resultstable
Thanks
You probably need to call you event with a live click event that binds newly loaded object correctly:
$('#my_trigger').live('click', function() {
.. some code
})
would help to have more information from you on the exact way you are using this.
have a look at the jquery live docs
I suspect that this might be because jQuery abuses the innerHTML property. Your "ajax" response essentially destroys the existing DOM structure, when you are trying to replace the table.
To check if this is the reason, you should look at javascript console. Try using console.log() to check if elements you are selecting are actually there.
If you are trying to have a clicked row identified, you can do this:
$('#resultstable').on('click', 'tbody tr', function() {
$('#resultstable tr.Selected').removeClass('Selected');
$(this).addClass('Selected');
});
You no longer need to render that onClick event and you can get rid of function Selected(x)
edit: are you rendering the entire table just to get one row to be in edit mode? it's not very efficient, but if you are doing that, then your jquery script can be simplified to this:
$('#resultstable').on('click', 'tbody tr', function() {
$.post('a/outputresults2.php', {editdynamic: this.id}, function(data) {
$('#resultstable').html(data);
});
});
you can solve this by copying your js to reloading view outputresults2.php. On that way $(function(){}) triggered again.
Related
When my page opens I call a PHP file and output a form in the form of an echo.
A simplified example below:
echo "<table id='results'>";
echo "<form method = 'post'><input id='".$row['batchname']."'><button class='btn1'>Query this record</button></form>";
</table>
There will be many versions of the above form as table rows are pulled from the database.
I am usin AJAX to handle the output:
$(document).ready(function(){
$(".btn1").click(function(e){
e.preventDefault();
var bname = ("#<?php echo $row['batchname'];?>").val();
$post(
"somephp.php",
{name : bname},
function(response, status){
$("#results").replaceWith(response);
}
);
});
});
When I input an non PHP ID into the jQuery the AJAX work but I always post the first returned row for every form produced as the ids output in the PHP are the same. Can I echo PHP variable into jQuery like this? Is there a better way of getting dynamic ID's into jQuery.
Rather than hacking about like this, do it properly.
$(".btn1").click(function(e) {
e.preventDefault();
var form = $(this).parents("form");
var value = form.find("input")[0].value; // or something else here
});
Ive got a table with buttons:
and Ive set specific ID's to each one but I dont see how I can access them all from a JQuery script so i can set a specific get to each one of them.
Edit:
All of the buttons have unique ids:
Shown in google chrome inspect element :
When I click REMOVE i want the row to get removed. I can do this and have done this with PHP via GET however I dont want to have to refresh the page every time I remove one. I tested doing it with JQuery .GET and it works fine however I dont want to have to make a new script to have to delete every single row, rather do it dynamically by getting the ID of the row and removing the row that the REMOVE button is in. Ive tried multiple ways of doing this but all I do is fail.
This is the script that prints the data in the table
function print_data($info1,$info2,$info3,$info4,$info5,$info6,$info7,$info8){
echo"<tr><td id='notice1id$info8'>$info1</td><td id='noticename$info8'>$info2</td><td id='noticetype$info8'>$info3</td><td id='noticecontent$info8'>$info4</td><td id='noticeshow$info8'>$info5</td><td id='noticeedit$info8'><a href='admincp.php?edit=1&editid=$info6'><div class='btn btn-success'>Edit</div></a></td><td id='noticeremove$info8'><input type='button' id='remove$info8' value='remove' onclick='removeMe();' class='btn btn-danger' name='$info8'></td><td style='display:none;'><p id='getid' name='$info8' style='display:none;'></p></td><td style='display:none;'><script> function removeMe() { alert($info8);}</script></td><input id='noticeid$info7' class='form-control' style='display:none;' type='text' name='$info8' value=$info7></td></tr>";
?><?php
}
while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)){
print_data($row['NoticeID'],$row['NoticeName'],$row['NoticeType'],$row['NoticeContent'],$row['NoticeShow'],$row['NoticeID'],$row['NoticeID'],$row['NoticeID']);
}
JavaScript:
$(document).ready(function () {
var id = $("#getid").attr("name");
alert("#remove" + id);
$("#remove" + id).click(function () {
var getcontent = $("#noticeid4").val();
$("#notice1id5,#noticename5,#noticetype5,#noticecontent5,#noticeshow5,#noticeedit5,#noticeremove5").slideUp(300, function () {
// Animation complete.
});
});
});
I have been trying to figure this out for hours, switching it around every which way, but nothing seems to work. Each function works great individually, but I can't seem to get the .change function to fire when the check all button is clicked. What am I doing wrong?
The first function is from this: It selects all the checkboxes, but the change does not affect the second function.
The second function is from this: It changes the class of the divs (and therefore the css), but only if a single checkbox is checked/unchecked.
$(document).ready(function(){
(function() {
var checked = false;
$('button.check-all').click(function() {
checked = !checked;
$('input[class^="orgImgColl\["]').prop('checked', checked);
if (checked) $(this).text('Uncheck All');
else $(this).text('Check All');
});
})();
$('input[class^="orgImgColl\["]').change(function(){
if(this.checked){
$(this).children('table').removeClass('unchecked');
$(this).children('table').addClass('checked');
$(this).siblings('table').removeClass('unchecked');
$(this).siblings('table').addClass('checked');
$(this).parentsUntil('tr').removeClass('unchecked');
$(this).parentsUntil('tr').addClass('checked');
} else {
$(this).children('table').removeClass('checked');
$(this).children('table').addClass('unchecked');
$(this).siblings('table').removeClass('checked');
$(this).siblings('table').addClass('unchecked');
$(this).parentsUntil('tr').removeClass('checked');
$(this).parentsUntil('tr').addClass('unchecked');
}
});
});
here is the HTML/PHP
<div class=\"unchecked\">";
echo "<input class=\"orgImgColl[".$i."]\" style=\"float:right\" type=\"checkbox\" name=\"orgImgColl[]\" value=\"".$row['img_id']."\"/>
<table class="unchecked" id="imgList" cellspacing="0" cellpadding="3" width="90%">
etc.
Just so you know the $i in the input class is for debugging purposes, so you can ignore it.
It is because when you change the checked state using script the change event is not fired, the solution is to trigger the change event manually once the checked property is changed using .change() or .trigger('change')
(function () {
var checked = false;
$('button.check-all').click(function () {
checked = !checked;
$('input[class^="orgImgColl\["]').prop('checked', checked).change();
if (checked) {
$(this).text('Uncheck All');
} else {
$(this).text('Check All');
}
});
})();
Demo: Fiddle
You can improve the selector by changing only those checkboxes which are not in the desired state using something like (not tested)
$('input[class^="orgImgColl\["]')[checked?'not':'filter'](':checked').prop('checked', checked).change();
Demo: Fiddle
I have a a script that on click do a ajax call connect to the database get imagename and set the image name inside an < -img - > with the right path also it adds a hidden checkbox after it and then echo it.
i then take the ajax message returned and put it as div's HTML. my question is will i be able to preform more action on the inserted content..
The main goal is to be able to click on the image as if it were a checkbox(this part is already sorted for me) however no matter what i try i cant have a .click function works..
Here is the code.
This is the PHP part that echos the images.
if($_POST['updateIgallery'] == 'ajax'){
global $wpdb;
$table_name= $wpdb->prefix . "table_T";
$imagecounter = 1;
$toecho = '';
$currentselected = $wpdb->get_row("query");
preg_match_all('/\/(.+?\..+?)\//',$currentselected ['image_gal'],$preresualts); // images are stored with /image/.
foreach ($preresualts[1] as $imagename){
$toecho .= '
<img rel="no" id="JustantestID" class="JustaTestClass" src="'.site_url().'/wp-content/plugins/wp-ecommerce-extender/images/uploads/'.$imagename.'">
<input name="DoorIMGtoDeleteIDcheck'.$imagecounter.'" style="display:none;" name="DoorIMGtoDelete['.$imagecounter.']" value="/'.$imagename.'/" type="checkbox">
';
$imagecounter++;
}
echo $toecho;
}
This is the ajax part that send and receive and insert the HTML to the div:
$.ajax({
type: "POST",
url: "/wp-content/plugins/wp-ecommerce-extender/DB_Functions.php",
data: { updateIgallery: "ajax", CurrentDoorIDnum: $('#dooridforgallery').val()}
}).success(function(insertID) {
$("#ImgGalleryID").html(insertID);
});
This so far works what i am having trouble with is the following:
$("#JustantestID").click(function() {
//DoorImageGallery($(this).attr('id')); // the function i will use if the alert actually works
alert("kahdaskjdj");
return true;
});
I hope the question and the code is understandable.
Thanks in advanced.
When you replace element's html, all the elements inside it are removed and gone. That means the event handlers attached to them are removed as well.
You could try attaching an event handler to a higher level element that is static and permanent on your page. Without more info I am going to use document:
$(document).on( "click", "#yaniv", function() {
alert("kahdaskjdj");
});
$('img.JustaTestClass').bind('click', function() {
var checkbox = $(this).siblings('input[type=checkbox]');
if (!checkbox.is(':checked')) checkbox.attr('checked', true);
else checkbox.attr('checked', false);
});
Since the elements are dynamically inserted into the DOM with ajax, you have to delegate events to a parent element that actually exists when binding the click handler, which in this case looks to be #ImgGalleryID
$('#ImgGalleryID').on('click', '#yaniv', function() {
DoorImageGallery(this.id);
alert("kahdaskjdj");
});
Hi everyone I have been working on this particular problem for ages by now,plz help.
I have looked at jQuery: Refresh div after another jquery action?
and it does exactly what I want but only once! I have a table generated from db and when I click on delete it deletes the row and refreshes the div but after which none of my jquery functions will work.
$('#docs td.delete').click(function() {
$("#docs tr.itemDetail").hide();
var i = $(this).parent().attr('id');
$.ajax({
url: "<?php echo site_url('kt_docs/deleteDoc'); ?>",
type: 'POST',
data: 'id=' + i,
success: function(data) {
$("#docs tr.itemDetail").hide();
$("#f1").html(data); // wont work twice
//$("#docs").load(location.href+" #docs>*"); //works once as well
}
});
});
in my body I have
<fieldset class='step' id='f1'>
<?php $this->load->view('profile/docs_table'); ?>
</fieldset>
profile/docs reads data from db. <table id='docs'>....</table>
and my controller:
function deleteDoc() {
$id = $_POST['id'];
$this->load->model('documents_model');
$del = $this->documents_model->deleteDocument($id);
return $this->load->view('docs_table');
}
Thanks in advance!
Are you removing any expressions matching $('#docs td.delete') anywhere? If so, consider using $.live(), which will attach your function to ALL matching elements regardless of current or in the future; e.g.
$('#docs td.delete').live('click', function() {
// Do stuff.
});
http://api.jquery.com/live/
Try using bind() instead of click(). The click() method won't work on dynamically added elements to the DOM, which is probably why it only works the first time and not after you re-populate it with your updated content.
You should just have to replace
$('#docs td.delete').click(function() {
with
$('#docs td.delete').bind('click', function() {
Are you replacing the html elements that have the events on them with the data your getting through ajax? If you end up replacing the td.delete elements, then the new ones won't automatically get the binding.