Develop Reference

How do I get cell values on click event from webpage tabs after the first one?

I have tried javascript and JQuery. I know how to write the code to get the cell values from my first tab but the same function does not work on the other tabs on my webpage. It seems as if the table in my other tabs is just a view. I am new to javascript and JQuery so think I might be missing something easy. I have used ".on" in my click function and that doesn't help. Here is the Javascript code and JQuery code, both work by grabbing the cell value I click but only for the first tab:
JavaScript
init();
function init(){
addRowHandlers('customerTable');
}
function addRowHandlers(tableId) {
if(document.getElementById(tableId)!=null){
var table = document.getElementById(tableId);
var rows = table.getElementsByTagName('tr');
var cid = '';
var name = '';
for ( var i = 1; i < rows.length; i++) {
rows[i].i = i;
rows[i].onclick = function() {
cid = table.rows[this.i].cells[0].innerHTML;
name = table.rows[this.i].cells[1].innerHTML;
alert('cid: '+cid+' name: '+name);
};
}
}
}
JQuery
$('#customerTable').find('tr').click(function() {
var $id = $(this).closest("tr")
.find(".custId")
.text();
var $name = $(this).closest("tr")
.find(".custName")
.text();
alert($name);
$('.defaultTextBox.text_custId:text').val($id);
$('.defaultTextBox.text_custName:text').val($name);
});
In the end my goal is to get the elements clicked and set the text in my text boxes to those values, which you can see I did in the JQuery, but it only works on my first page. I need the click in my table to work on all tabs. Thanks in advance!
Edit
<div id="removeCustomer" class="tabcontent">
<h3>Pick a customer to remove!</h3>
<div class="container">
<br />
<h2 align="center">Search here to find the customer you want to remove</h2><br />
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Search</span>
<input type="text" name="search_text" id="search_text" placeholder="Search by name, phone number, email, or state" class="form-control" />
</div>
</div>
<br />
<div class="result"></div>
</div>
</div>
The "removeCustomer" id is one of the tabs. So I have multiple tabs using the same, "result", which I think is the problem I just do not know how to solve it. If I Left out "result" it would not generate a table.
Here is the JQuery which uses a php file to connect to my database and get my data. And this is what generates result.
JQuery
$(document).ready(function(){
load_data();
function load_data(query)
{
$.ajax({
url:"fetchCustomers.php",
method:"POST",
data:{query:query},
success:function(data)
{
$('div.result').html(data);
}
});
}
$('input.form-control').keyup(function(){
var search = $(this).val();
if(search != '')
{
load_data(search);
}
else
{
load_data();
}
});
});
Thanks again.

how to use php foreach loops for buttons that trigger JavaScript functions

I am using js and php to build an app. I've used a foreach loop in php to create buttons for each row fetched from mysql table. Each button has a unique value (row id).
If someone clicks on of the buttons (each with unique id), there will be a total likes count that holds how many times a button is clicked.
If we have three buttons, and button 1 is clicked, then total likes will be increase by 1. if the same button is clicked again, then the value would decrease by 1.
However, if two buttons of different values are clicked, the total likes add.
When using js, I cant get each button id to pass to the js function loaded from the foreach loop. only the last button value loads to the js function.
Here is what i've tried. the js works but it doesnt apply to each button of the foreach loop.
My Code
<?php foreach($values as $value){
$value['button_id'];
<!-- button --->
<button id="button"
class="button-<?= $value['button_id']; ?>"
value="<?= $value['button_id']; ?>"
onclick="showUser(this.value)" >LIKE
</button>
<!-- button --->
} ?>
<script>
var i = parseInt(document.getElementById('button').value, 10);
var x = i;
function showUser(this.value) {
/// changing value //
if (x == i){
i++;
document.getElementById('button').value = i;
}
else {
i = x;
document.getElementById('button').value = i;
}
}
</script>
Here is an illustration explaining what I mean
Thanks in advance

<script>
var likes = new Array();
function calc(value) {
if(likes[value] == 0 || !likes[value]) {
likes[value]=1;
} else {
likes[value]=0;
}
var sum=0;
for(i=0; i<likes.length; i++) {
if(likes[i]==1){ sum ++ }
}
document.getElementById("total").innerHTML = sum;
}
</script>
<div id=total>0 </div>
<?php
$values = [1,2,3]; //here you can generate values
foreach($values as $value){
?>
<button id="button"
class="button-<?php echo $value; ?>"
value="<?php echo $value; ?>"
onclick="calc(<?php echo $value; ?>)" >LIKE
</button>
<?php
} ?>

<script>
var i = parseInt(document.getElementById('button').value, 10);
var x = i;
function showUser(this.value) {
/// changing value //
if (x == i){
i++;
document.getElementById('button').value = i;
}
else {
i = x;
document.getElementById('button').value = i;
}
}
</script>

img tag being added onto an already open img tag

Excuse the vague question title. Not entirely sure on how to word this.
Basically my issue stems from a bit of jquery in which when setting the data attr in the html the img tag shows some odd behavior as shown below.
<img src="images/gallery/
<img src="/images/gallery/bob.png" class="thumbnail" data="1">
" class="popupImage">
From what I am seeing is the class "popupImage" is not replacing the class "thumbnail" however the img tag nested in the outer img tag should be a seperate entity all together, my mind is baffled, and have been at this for hours and probably just need a new pair of eyes to look over it.
Any help would be greatly appreciated
This is the full html code and jQuery code for the gallery.
If I can provide anymore information who needs it please ask and I shall try and give some more where possible.
HTML
<?php
$data = $db->query("SELECT * FROM `gallery_items` ORDER BY id ASC");
//display query results
?>
<br /><br />
<?php
foreach($data as $item)
{
echo "<a data='".$item['id']."' class='noStyle'>
<img src='/images/gallery/".$item['image']."' class='thumbnail' data='".$item['id']."'>
</a>";
}
if(count($data) < 1){
echo "<p style='text-align: center;'><br /><br />No results found</p>";
}
?>
<div class="image">
<button class="prev" data="unset"><</button>
<img src='' class="popupImage">
<button class="next" data="unset">></button>
</div>
jQuery
$(".noStyle").click(function(){
loadPopup($(this).attr("data"));
});
offFocus();
function loadPopup(id){
imgSrc = "/images/gallery/"+$("a[data='"+id+"']").html();
$("div.background").fadeIn(400, function(){
$(".popupImage").attr("src", imgSrc);
$(".image").fadeIn(500);
reFocus();
setPrevNext($("button[data='"+id+"']"));
});
$(window).resize(function(){
reFocus();
});
function reFocus(){
$(".image").css({"left": (($(window).width()/2) - ($(".image").width()/2))+"px", "top": (($(window).height()/2) - ($(".image").height()/2))+"px"});
};
}/*close loadPopup */
function setPrevNext(buttonObj){
objects = $(".button");
firstObj = $(".button:first");
lastObj = $(".button:last");
prev = undefined;
next = undefined;
if(buttonObj.attr("data") == firstObj.attr("data"))
prev = lastObj;
else
prev = objects.eq(objects.index(buttonObj)-1);
if(buttonObj.attr("data") == lastObj.attr("data"))
next = firstObj;
else
next = objects.eq(objects.index(buttonObj)+1);
$(".prev").attr("data", prev.attr("data"));
$(".next").attr("data", next.attr("data"));
//next = buttonObj.next("button").attr("data");
//$(".next").attr("data", "next");
}
function offFocus() {
$(".background").click(function(){
$(".background").css({"display": "none"});
$(".image").css({"display": "none"});
});
};

Create a custom selected list

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>

JQuery on page load instead of click live()

I have a website that uses the following script:
//==================== EXPAND ========================//
$('a.expand').live('click',function() {
var _hide = $(this).attr('data-hide');
$(this).addClass('activeSpan');
$(this).parent().find('.details-post').slideDown();
$(this).parents('li').find('.grid-reply').slideDown();
$(this).parents('li').find('.spanReply').slideDown();
$(this).parent().find('.textEx').html(_hide);
$(this).removeClass('expand');
if( $(this).hasClass( 'reply' ) )
{
$(this).parent().find('#reply_post').focus();
}
});
$('a.activeSpan').live('click',function() {
var _expand = $(this).attr('data-expand');
$(this).addClass('expand');
$(this).parent().find('.details-post').slideUp();
$(this).parents('li').find('.grid-reply').slideUp();
$(this).parents('li').find('.spanReply').slideUp();
$(this).parent().find('.textEx').html(_expand);
$(this).removeClass('activeSpan');
});
$('.optionsUser > li:last').css({'border':'none'});
This is used to display data when the user clicks on "expand". Instead of this, I want the text to appear automatically. How should I change the script? I have tried changing live('click' to live('load' but this doesn't work.
The site uses: https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
Thanks in advance.
This is the php code:
<!-- EXPAND -->
<a data-expand="<?php echo $_SESSION['LANG']['expand']; ?>" data-hide="<?php echo $_SESSION['LANG']['hide']; ?>" class="expand getData" data="<?php echo $key['id']; ?>" data-token="<?php echo $key['token_id']; ?>">
<?php echo $icon; ?>
<span class="textEx"><?php echo $_SESSION['LANG']['expand']; ?></span> <?php echo $typeMedia; ?>
</a>
And this is the sample html:
<a data-expand="Expand" data-hide="Collapse" class="expand getData" data="697" data-token="0f1966ac9d8529055f9b0e09c0a58a65cdf5d5e8"> <span class="textEx">Genişlet</span> </a>
Think of facebook or twitter, you click on expand and you get an area to reply to a post. At the moment I have to click to see the reply form, but I want that to appear by default.

You can use a custom event or simply trigger the click programmatically:
$(function(){//run on page load
$('a.expand').live('click',function() {
var _hide = $(this).attr('data-hide');
$(this).addClass('activeSpan');
$(this).parent().find('.details-post').slideDown();
$(this).parents('li').find('.grid-reply').slideDown();
$(this).parents('li').find('.spanReply').slideDown();
$(this).parent().find('.textEx').html(_hide);
$(this).removeClass('expand');
if( $(this).hasClass( 'reply' ) )
{
$(this).parent().find('#reply_post').focus();
}
});
$('a.activeSpan').live('click',function() {
var _expand = $(this).attr('data-expand');
$(this).addClass('expand');
$(this).parent().find('.details-post').slideUp();
$(this).parents('li').find('.grid-reply').slideUp();
$(this).parents('li').find('.spanReply').slideUp();
$(this).parent().find('.textEx').html(_expand);
$(this).removeClass('activeSpan');
});
$('a.expand').trigger("click");//trigger click on page load
$('.optionsUser > li:last').css({'border':'none'});
});

If you move the code from the anonymous function you're binding to a.expand to a named function, all you would need to do is invoke it on DOM ready, then you would also just pass the function to your a.expand handler.
$(function(){
$('a.expand').live('click', Expand);
Expand(); // Invoke function
$('a.activeSpan').live('click',function() {
var _expand = $(this).attr('data-expand');
$(this).addClass('expand');
$(this).parent().find('.details-post').slideUp();
$(this).parents('li').find('.grid-reply').slideUp();
$(this).parents('li').find('.spanReply').slideUp();
$(this).parent().find('.textEx').html(_expand);
$(this).removeClass('activeSpan');
});
$('.optionsUser > li:last').css({'border':'none'});
});
//Extracted function
function Expand() {
var _hide = $(this).attr('data-hide');
$(this).addClass('activeSpan');
$(this).parent().find('.details-post').slideDown();
$(this).parents('li').find('.grid-reply').slideDown();
$(this).parents('li').find('.spanReply').slideDown();
$(this).parent().find('.textEx').html(_hide);
$(this).removeClass('expand');
if( $(this).hasClass( 'reply' ) )
{
$(this).parent().find('#reply_post').focus();
}
}