I am a learner in Jquery coding, My task is to show/hide TABLE elements on clicking SPAN element. I tried with below mentioned Jquery code which is not working..
HTML code is:
foreach($array as $key => $arrValue) {
<span id="link<?=$count?>">$key</span>
<table id="tbl<?=$count?>">
foreach($arrValueas $key => $value) {
<tr><td>$value</td></tr>
}
</table>
}
My Jquery code is:
$(function(){
// To open/close field's group div
$("span").each(function (i){
i++;
$('#link' + i).click(function (i) {
$('#tbl' + i).toggle(800);
});
});
});
Pls avoid PHP open close tags issues in HTML code..
$("span").each(function (){
$(this).click(function () {
$(this).next('table').toggle(800);
});
});
try this
$(function(){
$("span").each(function (i){
(function(i) {
$('#link' + i).click(function() {
$('#tbl' + i).toggle(800);
});
}(i));
});
});
you don't need to increment the variable with i++ oyherwise you won't set the handler on the expected link element. Each() is already incrementing the variable i
Try this way to match two different element groups:
Here is jsFiddle.
var thumbs = $('ul.thumbHolder li');
var bigImg = $('ul.imgHolder li');
thumbs.click(function() {
var target = $(this).index();
bigImg.each(function(i){
if( i != target){
$(this).fadeOut(300);
}else{
$(this).fadeIn(300);
}
});
});
Related
I have a function that on click add/removes stuff from a SQL database.
I do a condition to check if it is refering to an add or remove and execute the code.
the add function works perfectly, but the remove not and its the same code, am i missing something obvious? And is this the best way to do this?
jquery:
//add card from list
$("#listcards a").click(function() {
if($(this).attr('add').length > 1) {
var value = $(this).attr('add');
$.post('searchc.php',{add:value}, function(data){
$("#add_result").html(data);
});
return false;
}
});
//remove card from list
$("#listcards a").click(function() {
if($(this).attr('rem').length > 1) {
var value = $(this).attr('rem');
$.post('searchc.php',{rem:value}, function(data){
$("#add_result").html(data);
});
return false;
}
});
html code:
<form id="listcards" method="post">
<input type='hidden' id='lcard' name='lcard' value=''>
<div>
bla bla -> imagem no + ? ou por algum efeito css+ | -<br>
coiso coiso + | -<br>
</div>
</form>
Do i also need to be in a form for the POST or a div would work too?
You've got two click handlers for the same elements, which could be causing a problem. You don't need to run both sets of code for each <a> element. Instead give the elements a class to show exactly what they do, and then limit your selectors to those elements
HTML:
+ | <a href="" class="remove" rem="bla bla">
Script:
$("#listcards a.add").click(function() {
var value = $(this).attr('add');
$.post('searchc.php',{add:value}, function(data){
$("#add_result").html(data);
});
return false;
});
//remove card from list
$("#listcards a.remove").click(function() {
var value = $(this).attr('rem');
$.post('searchc.php',{rem:value}, function(data){
$("#add_result").html(data);
});
return false;
});
You can use it like thisi will give only remove functionality. And oif possible add ajax.
$("#listcards .rem").click(function() {
var value = $(this).text();
if($(this).length()>1) {
$.post('searchc.php',{rem:value}, function(data){
$("#add_result").html(data);
});
return false;
}});
Suppose you don't have any card when you're loading this page 1st time. Then you click add new & a new card get's added to your html.
Now for this newly added card, the "remove" method doesn't get bind as that was loaded on page load (when this new card element was not present). Hence your remove method is not working for newly added cards.
So to make it work, you need to bing the remove method on new cards too. You can do that by keeping you remove part in a js function which you would call in "add" part after putting new card into html.
function removeCard(){
// first unbind the click event for all cards if any & then bind it
$("#listcards a").off('click');
//remove card from list
$("#listcards a").click(function() {
if($(this).attr('rem').length > 1) {
var value = $(this).attr('rem');
$.post('searchc.php',{rem:value}, function(data){
$("#add_result").html(data);
});
return false;
}
});
}
And you add part should be like this:
//add card from list
$("#listcards a").click(function() {
if($(this).attr('add').length > 1) {
var value = $(this).attr('add');
$.post('searchc.php',{add:value}, function(data){
$("#add_result").html(data);
removeCard(); // adding remove method here
});
return false;
}
});
Follow up your code,
$("#listcards a").click(function() {
var action = $(this).attr("add") ? "add" : "rem";
var value;
if(action == "add")
value = $(this).attr('add');
if(action == "rem")
value = $(this).attr('rem');
var param = {};
param[action] = value;
$.post('searchc.php',param, function(data){
$("#add_result").html(data);
});
});
Use onclick function to do this
It can help you out
+
-<br>
function addthis(addthis) {
if(addthis.length > 1) {
alert(addthis);
// $.post('searchc.php',{add:addthis}, function(data){
// $("#add_result").html(data);
// });
return false;
}
}
function removethis(remthis) {
if(remthis.length > 1) {
alert(remthis);
// $.post('searchc.php',{reb:remthis}, function(data){
// $("#add_result").html(data);
// });
return false;
}
}
I'm outputting several divs using php - each div has a different country name for the class.
I'm also outputting a variable using jquery which checks if content of a div has changed. That variable will also be a country name.
If the jquery variable matches a div class, I want that div to .show(), how can I do that?
This is my (horrible) attempt:
(function($) {
$(document).ready(function () {
$("#block1").bind("DOMSubtreeModified", function() {
message = $("#block1").html();
regiondiv = '.';
fullregion = regiondiv + message;
alert(fullregion);
if ($('.region-logos').hasClass(message)) {
$(fullregion).show();
} else {
$(fullregion).hide();
}
});
});
})(jQuery);
If I click on Canada for instance, it will show the .Canada div, but if I click on Spain after it, it's shows the .Spain div as well as the .Canada div. I.e once you click on more than one it just continues to show them all. It doesn't hide the divs if you haven't click on it.
var class = 'no-class';
$(document).ready(function () {
$("#block1").bind("DOMSubtreeModified", function() {
var regiondiv = '.';
var fullregion = regiondiv + class ;
$(".fullregion").hide();
class = $("#block1").html();
fullregion = regiondiv + class ;
$(".fullregion").show();
});
});
Not sure if I followed the question correctly. I assume you want to display a div if class of that div matches a variable in javascript. If so the you can try this:
(function($) {
$(document).ready(function () {
$("body").bind("DOMSubtreeModified", function() {
// Not sure how are you generating this jquery variable
var yourJqueryVariable;
// Check if class name exists
if ($(".yourJqueryVariable")[0]){
$(".yourJqueryVariable").show(); //or even $(".yourJqueryVariable").css('display','block');
}
});
});
})(jQuery);
(function($) {
$(document).ready(function () {
$("#block1").bind("DOMSubtreeModified", function() {
var message = $("#block1").html();
//ok so you have the variable to check
if($('.'+message).length > )) { //is there 1 or more of these classes in the DOM?
$('.'+message).each(function() { //there is, loop and show them all
$(this).show();
});
}
});
});
})(jQuery);
EDIT
Ok looking at your updated answer, assuming there are multiple .region-logos you need to perform your if else within a loop of those:
$('.region-logos').each(function() {
if($(this).hasClass(message)) {
$(fullregion).show();
}else {
$(fullregion).hide();
}
});
My algorithm:
I get the DIV text from php/SQL ($.get( "read.php"...)
APPEND contenteditable div with loaded text by jQuery
check the div value, if there is errors in text I make div red (assign class, $(this).addClass("fill_red");)
on every change of text - check and assign/remove class if needed.
Problem is: with preloaded text - everything is working.
But when I append div using JS - check function don't works.
I searched the web, maybe on() method helps me.
But what event?
It should be something like onload, onchange..?
(yes, I could make div generated by php and solve the problem, but I dont want full refresh)
Thank you!
part of code:
//texts load
$(function() {
$.get( "read.php", function( data ) {
var ionka = data.split(' ');
ionka.forEach(function(item, i, arr) {
var app_text = "<div id=\"segm" + i + "\" contenteditable role=\"textbox\">" + item + "</div>";
$("#textarea").append(app_text);
});
});
//checks
var intRegex = new RegExp('^[0-9/\]{5}$');
$('#textarea div').each(function(i,elem) {
if(!intRegex.test($(this).text())) {
$(this).addClass("fill_red");
}else{
$(this).removeClass();
}
});
// edit on change. Blur because of contenteditable
var segm_array = [];
$('#textarea div').each(function(i,elem) {
$(this).blur(function() {
if (segm_array[i]!=$(this).text()){
segm_array[i] = $(this).text();
if(!intRegex.test(segm_array[i])) {
$(this).addClass("fill_red");
}else{
$(this).removeClass();
}
}
});
});
You dont show much code here, but my guess is that you are trying to add class before new data is loaded into dom
$.get( "read.php" ).done(function( data ) {
// addClass etc
});
I have tried to call out my document.getElementByID to get the ID from my current form. But it doesn't hover out the specific text that i input rather than it output '​'. As reference from Tooltip/hover-text in an array, i have amended some stuff but still the tooltip text does not show.
Updated code-
In my html page:
<script>
$(document).ready(function ()
{
var tooltip_Text = $('#tooltip_Text');
var tooltip = $('#tooltip');
$('#Hobby').hover(
function()
{
tooltip.fadeIn(200);
},
function()
{
setTimeout ( function () {
tooltip.fadeOut(200); student.php();
}, 1000);
}
);
$('#Hobby').bind('change', function()
{
student.php('user has changed the value');
});
});
</script>
//my list/menu
<select name="OffenceName" id="Hobby" ><span id="Hobby"></span>
<?php $arr = array('', 'cycling', 'badminton', 'jetskiing', 'ice-skating');
for($i = 0; $i < count($arr); $i++)
{
echo "<option value=\"{$arr[$i]}\" {$selected}>{$arr[$i]}</option>\n";
}
?>
</select>
<tool id="tooltip" class="tooltip">
<?php $toolarr = array('','cycling is...', 'badmintion is...', 'jetskiing is...', 'ice-skating is...');
for($t = 0; $t < count($toolarr); $t++)
{
if($toolarr[t] == $arr[i])
{
echo "sample display";
}
}
<span id="tooltip_Text"></span>
I can't manage to call out the tooltip text below even if i try to get element by id instead of student.php(); Kindly advise.
You should not select the elements with the native javascript selectors but rather with the jQuery selectors. As is stands, your code cant work, because the methods you call only exist, if your elements are wrapped by the jquery Object.
So instead of
document.getElementById("Hobby").hover(...
use
$("#Hobby").hover(...
Your code should throw a couple errors like these:
TypeError: Object #<HTMLDivElement> has no method 'hover'
EDIT:
couple of errors:
//my list/menu is not a valid HTML-comment
student.php() is not valid either
Try this;
$(document).ready(function ()
{
$("#Hobby").hover(function(){
$("#tooltip").fadeIn("slow");
},
function(){
$("#tooltip").fadeOut();
});
$('#Hobby').change(function() {
$("#tooltip_Text").text("user has changed the value"); // or you can use .html("...") intead of .text("...")
});
});
How do i remove var icon element once i have appended it? the current method is not working.
i tried the way explained here but it didnt work.
JQUERY
$('#edit').toggle(function(){
$('#edit').text('Close');
var icon='<i class="icon-remove"></i>';
$('.para').append(icon);
}, function(){
$('#edit').text('Edit');
var $icon = $(icon).not('i');
$('.para').append($icon);
});
this doesnt work either
$('#edit').toggle(function(){
$('#edit').text('Close');
var icon='<i class="icon-remove"></i>';
$('.para').append(icon);
}, function(){
$('#edit').text('Edit');
var icon='.remove';
$('.para').remove(icon);
});
HTML/PHP
foreach ($users_tags as $key => $list) {
echo '<span>'.$list['tag_name'].'<span class="para"></span> </span>. ';
}
you can do it like that
('#edit').toggle(function(){
$('#edit').text('Close');
var icon='<i class="icon-remove"></i>';
$('.para').append(icon);
}, function(){
$('#edit').text('Edit');
var $icon = $('.icon-remove');
$icon.remove();
});