I have status id defined in my div tag which is present in a phtml file .Now, I need to fetch its value into the seprate javascript file.
I have use jquery push method for this.
Code in phtml file :
<table class="abc">
<tbody id="checkboxes">
<tr class="r<?php echo $item['id']; ?><?php echo ($item['status_low']?' status-low':''); ?>">
<td><input type="checkbox" name="item" class="row" statusid="<?php echo $item['status_id']; ?>"</td>
<td><?php echo $item['id']; ?></td>
<td><?php echo $item['title']; ?></td>
</tr>
</tbody>
</table>
Code in Javascript File :
var selected = [];
$('#checkboxes input:checked').each(function() {
if ($(this).checked) {
selected.push($(this).attr('statusid'));
}
});
console.log(selected);
When I print selected array, I get a blank output .
Can anyone tell me where am I going wrong ?
Just remove your if condition like bellow. Your selector is just for selected checkboxes, So you don't need that if anyway.
$('#checkboxes input:checked').each(function() {
selected.push($(this).attr('statusid'));
});
DEMO
Try this :-
var selected = [];
$("input[type='checkbox']").each(function(){
if($(this).is(':checked'))
{
selected.push($(this).attr('statusid'));
}
});
OR
var selected = [];
$("#checkboxes input[type='checkbox']").each(function(){
if($(this).is(':checked'))
{
selected.push($(this).attr('statusid'));
}
});
OR
var selected = [];
$("#checkboxes input[type='checkbox']:checked").each(function(){
selected.push($(this).attr('statusid'));
});
Change your JQuery code like this,
$('#checkboxes input:checked')
to
$("#checkboxes input[type='checked']")
your code is:::
var selected = [];
$("#checkboxes input[type='checked']").each(function() {
selected.push($(this).attr('statusid'));
});
console.log(selected);
"#checkboxes input:checked" selector already selecting checked checkboxes so you don't need to check if checkbox is checked or not. See here http://api.jquery.com/checked-selector/
var selected = $.map('#checkboxes input:checked',function(ck,i){
return $(ck).attr('statusid');
})
You could try this one
var selected = $('#checkboxes input:checkbox:checked.row').map(function () {
var cbId = this.id;
return cbId;
}).get();
Related
Hi i am trying to search on page table tbody, the search is should be like ctrl + F search this my html and php code:
Please refer the image and link linked below for the sources.
<table>
<thead>
<tr><td><input type="text" placeholder="Search Student id="searchStudent"> </td>
<td></td><td></td><td></td><td></td><td></td></tr>
</thead>
<tbody>
<tr>
<td>
<span><img src="<?php echo $gdScoreData['profile_pic']; ?>"/></span>
<p><?php echo $gdScoreData['student_fname'];?> <?php echo $gdScoreData['student_lname'];?></p>
<p><b>Hallticket</b> : S<?php echo $gdScoreData['student_pid']; ?>J<?php echo $jobID; ?></p>
</td>
<td></td><td></td><td></td><td></td><td></td></tr>
1st tr will close here php code is the above one in html it looks like shown in image:
<tr><td><span><img src="profile_pic/first_1479536519.jpg" width="50" /></span><p>Robert Smith</p><p><b>Hallticket</b> : S27J2</p></td></tr>
</tbody>
</table>
This my javascript code to search like ctrl + F
/* Search Student like ctrl+f start */
$("#searchStudent").on("keyup", function() {
var value = $(this).val();
console.log(value);
$("table tbody tr").each(function(index) {
if (index !== 0) {
$row = $(this);
var id = $row.find("td:first").text();
if (id.indexOf(value) !== 0) {
$row.hide();
}
else {
$row.show();
}
}
});
});
/* Search Student like ctrl+f end*/
Here is the source from where i have tried:
Source JS
i have modified your js fiddle code now it working jsfiddle.net/rFGWZ/3406/
$("#search").on("keyup", function() {
var value = $(this).val();
if(value!='') {
$("table tbody tr").hide();
}else{
$("table tbody tr").show();
}
$('table tbody tr td:contains("'+value+'")').parent('tr').show();
});
Basically your code is working but it is not picking up elements inside your tag
try adding the following:
var id2 = $row.find("b:first").text();
and changing this:
if (id2.indexOf(value) !== 0) {
Then search based on the bold content and it should work
You could try it like this and search on each part individually:
$id = $row.find("td:first");
var id2 = $id.find("b:first").text();
var id3 = $id.find("p:first").text();
if (id2.indexOf(value) !== 0 && id3.indexOf(value) !== 0) {
$("#searchStudent").on("keyup", function() {
var value = $(this).val();
if(value!='') {
$("table tbody tr").hide();
}else{
$("table tbody tr").show();
}
$('table tbody tr td:contains("'+value+'")').parent('tr').show();
});
I have resolved with this help.
Well im adding to database some records but i dont like the way i did and wanted to make something way easier for the user and better.
What i did was: http://i.imgur.com/AYrPyCn.jpg
And what i want is: http://i.imgur.com/aKNBTtO.jpg
Well i guess i know how to create the divs geting all the images from database and the horizontal scroll bar but what i dont know is when i select the image that id from image will appear on the input create by me.
Help needed.
Code from what i have:
<select name="id_artigo" id="attribute119">
<?php
do {
?>
<option value="<?php echo $row_artigos['id_artigo']?>" ><?php echo $row_artigos['id_artigo']?></option>
<?php
} while ($row_artigos = mysql_fetch_assoc($artigos));
?>
</select>
<div id="editimg"><p><img src="images/artigos/1.png" id="main" /></p></div>
Js:
$('#attribute119').change(function () {
$('#main').attr('src', 'images/artigos/' + $('#attribute119 :selected').text() + '.png');
});
You can use jQuery slideshow plugin like jcarousel or jssor.
Just do a google search on "jQuery slideshow" or "jQuery carousel".
I recommend you to use jcarousel.
Anas
Since you don't want it to look like a drop-down any more, replace the drop-down with a hidden field, which will hold the ID of the item they select:
<input type="hidden" name="id_artigo" />
(for testing you could use type="text" instead)
Give each of your images a data-id-artigo attribute:
<img class="artigo_img" src="images/artigos/1.png" data-id-artigo="1">
When an image is clicked, update the hidden ID's value:
$('.artigo_img').on('click', function() {
var idArtigo = $(this).data('idArtigo'); // get the artigo ID from the `data-` attribute
$('[name="id_artigo"]').val(idArtigo); // update the value of the hidden field
});
When the form is submitted, id_artigo will be equal to the selected item, just like before.
I see now that you just want to select 1 image, this answer is for selecting multiple images.
(not tested, so there might be some errors)
<style>
.img_holder
{
height:100px;
clear:both;
}
.floating_img
{
float:left;
width:100px;
height:100px;
}
.img_selected
{
border:1px solid black;
}
</style>
<div class="img_holder">
<?php
$img_id_arr = array();
do {
$selected = true; //<--implement if they are selected
$selected_class = '';
if($selected)
$img_id_arr[] = $row_artigos['id_artigo'];
$selected_class = ' img_selected';
}
?>
<div class="floating_img<?php echo $selected_class; ?>" onclick="toggle_img(<?php echo $row_artigos['id_artigo']; ?>);"><img src="images/artigos/<?php echo $row_artigos['id_artigo']; ?>.png" id="main" /></div>
<?php
} while ($row_artigos = mysql_fetch_assoc($artigos));
?>
<input typ="hidden" id="my_selected_images" name="my_selected_images" value="<?php echo implode(';',$img_id_arr); ?>">
<script>
function toggle_img(img_id)
{
var selected_imgs = $('#my_selected_images').value;
var img_arr = selected_imgs.split(";");
var found = false;
var new_arr = [];
for (i = 0; i < img_arr.length; i++) {
if(img_id == img_arr[i])
{
found = true;
//deselect img
}
else{
//leave other item untouched
new_arr.push(img_arr[i]);
}
}
if(!found)
{
new_arr.push(img_id);
//select img
}
$('#my_selected_images').value = new_arr.join(';');
}
</script>
</div>
i make a select box and i used clone to make dynamic select boxes but my cloned select boxes ids and names are the same how to change ids and name of cloned elements?here is my code:
<script type="text/javascript">
( function($) {
// we can now rely on $ within the safety of our "bodyguard" function
$(document).ready( function() {
$('#add_button').on('click', function() {
var selectClone = $('#event_2').clone(true); // make a copy of select
$('#some_target').append(selectClone); // append to clone select
});
});
}) ( jQuery );
</script>
<?
$strQuery1="SELECT event_id,event_name from events";
$result1 = $GLOBALS ['mysqli']->query ($strQuery1) or die ($GLOBALS ['mysqli']->error . __LINE__);
?>
<select id="event_2" name="event_2">
<? while($ors1 = $result1->fetch_assoc()) {
echo '<option value="'.$ors1['event_id'] .'" >' . $ors1['event_name'] . '</option>';
}
?>
</select>
<button type="button" value="Add" id="add_button">Add Events</button><br />
<div id="some_target">
</div>
i want next cloned element has id and name event_3 and so on how i do this?
This will take care of everything:
$('#secondevent').clone().attr('id', 'newid').attr('name', 'newname').appendTo( "#some_target" );
clone, assign new id, assign new name and apppend to element #some_target.
Fiddle
var selectClone = $('#event_2').clone(true);
selectClone.attr({ id: 'event_3', name: 'event_3'});
$('#some_target').append(selectClone);
This should work just fine:
selectClone.attr('id', 'newValue')
Right after appending it to the new location.
I have this problem. I can't figure what's wrong with my code. All i need to do is to hide the inline edit image button whenever the $principal_amt==$balance_amt but my code does nothing. Here's my code:
// Edit image button:
<td <?php echo $rowclass; ?>>
<?php echo $html->linkWithImage('Edit','cashadvance/update/' . $cashadvance["id"], array(), 'editicon.png', array('class' => 'try')); ?>
</td>
//JS:
$("#principal_amt").change(function(){
var principal = $("#principal_amt").val();
$("#balance_amt").val(principal);
if("#balance_amt" == "#principal"){
$('.try').show(true);
}
else{
$('.try').hide(true);}
});
you are comparing with the the ID's not there values in if("#balance_amt" == "#principal")
that should be :
$("#principal_amt").change(function(){
var principal = $("#principal_amt").val();
$("#balance_amt").val(principal);
if($("#balance_amt").val() == principal){
$('.try').show(true);
}
else{
$('.try').hide(true);}
});
you compare two different string:
if("#balance_amt" == "#principal"){
This means: if the string #balance_amt = #principal then.. but this is always false.
If I understand well your problem try to change to this your code:
$("#principal_amt").change(function(){
var principal = $("#principal_amt").val();
$("#balance_amt").val(principal);
if($("#balance_amt").val() == principal){
$('.try').show(true);
}
else{
$('.try').hide(true);
}
});
In this case is always true...
how can i access my td class via jquery
here is HTML code
<td class="selectable" id="shoes-<?= $color->id ?>" ></td>
<td><a href="?shoes=<?php echo $color->id; ?>" title="Select"
<?php if($shoes==$order->shoes){ ?> class="selected"<?php } ?>>
Here is jQuery Code
$('td.selectable a').click(function() {
var $parent = $(this).parent();
var data = $parent.attr('id').split('-');
var type = data[0];
var typeId = data[1];
if i alert (type); i receive nothing
could you help
now i got it solved but second part still problem
I am trying to switch my class it should show up while clicking on a link here is the html code
<td class="selectable" id="person-<?= $person->id ?>">
<a href="?person=<?php echo $person->id; ?>" title="Selecteren"
if($person==$order->person){ ?> class="selected"<?php } ?>><?php echo $person->name;?></a></td>
it works with span class and div class but with a class=selected does not work
$('#personAmount td.selectable a').click(function() {
var $parent = $(this).parent()
var data = $parent.attr('id').split('-');
var type = data[0];
var typeId = data[1];
switch(type){
case 'person':
$(this).prepend('<a class="selected"></a>');
break;
case 'color':
$(this).prepend('<div class="checked"></div>');
break;
default:
$parent.prepend('<span class="checked"></span>');
}
$('td a').click(function(e) {
var id = $(this).closest('tr').find('.selectable').attr('id');
var d = id.split('-');
var item_type = d[0];
var type_id = d[1];
alert(type_id);
alert(item_type);
});
working demo
In your code, the <td> that includes the <a> doesn't have id and class attributes. The click event won't be bound to that <a>
$(this).parent().prev();
You've got a hierarchy like this:
<td class="selectable"></td>
<td>
<a>
Using your current HTML:
Live Demo
$('td.selectable + td a').click(function() {
var $parent = $(this).parent().prev();
var data = $parent.attr('id').split('-');
var type = data[0];
var typeId = data[1];
alert(type);
});