Im sorry for the title but i did not know how to frame a title for this question
Question:
i have a container div and two child divs.the first child div contains a numeric value which i want incremented every time the second child div is clicked
CODE:
<div class="container1">
<span class="like_counter">2</like>
<span class="like_unlike">Like</span><!--if the text within is like then on click it will change the inner text to unlike and increment the value in like counter by 1.if it is unlike it will decrement it by 1 and change inner text to Like-->
</div>
Note the first child selectors are not an option because it would affect every first child div
Answers, used prev function not very good, if the order of items changes, code stop working.
Try this:
$(".like_unlike").bind("click", function(e) {
e.preventDefault();
var likeCounter = $(this).siblings(".like_counter");
likeCounter.html(parseInt(likeCounter.html()) + 1);
});
You can use
$(this).prev()
And some more interesting sibling searches along-with others are listed here http://home.techphernalia.com/70480/HTML/Selector.html
It's called sibling. You can use
$(this).prev();
https://api.jquery.com/prev/
Related
I would like to make a li inputable after the page being execute. I want the li function close to word office format. I mean, when we write on first list then ENTER it, it would focus on second list and ect. and this is my code I've made before:
<div class="writeform">
<label class="subtitle">ingredients</label>
<ol>
<li><input class="formxyz globalwrite" id="ingred" name="ingred" placeholder="ingredients"></input>
</li>
</ol>
</div>
and this is the script in ajax
$('input#ingred').on('keydown',function(e){
if(e.which == 13) {
$('ol').append('<li><input class="formxyz globalwrite" id="ingred" name="ingred" placeholder="ingredients"></input></li>');
$('input#ingred').focus();
}
});
when I run this code, and write in the 1st line then I press ENTER, the second li shows up. But when I write in 2nd li and press enter, nothing appended. How can I make this append function work continously when I press ENTER key?
You cannot have duplicate uses of ID values - it is not valid HTML, and your selector for the input element would not work properly. The same thing would be true with using a class, even though it is valid to have multiple uses of a class, the selection would select all matching elements. You would need to generate a unique ID, or use a different selector to select the last input element, such as the jquery .last() selector.
If there are two ID selectors of the same name , jQuery only select the first one.
You should bind the keydown event using delegation method, like this:
Change this:
$('input#ingred').on('keydown',function(e) {
Into this:
$(document.body).on('keydown','input#ingred',function(e) {
Because the first syntax will not bind to elements which are created later (dynamically).
UPDATE
For more correct way, you should make it bind to class or name attribute rather than id, because id id originally for naming elements and should be unique.
I think this is what you need in correct way: :D
$(document.body).on('keydown','input.formxyz',function(e) {
or:
$(document.body).on('keydown','input[name="ingred"]',function(e) {
Good luck!
I am trying to create a section using dragula js just like this:
http://bevacqua.github.io/dragula/
What I want is, the drag and drop should be dynamic. So that on each drag and drop the position of each element should be saved. How can I do that?
I know it can be done with php and ajax. But no idea on how the position should be manipulated
This question can be broken down into 2 different problems.
How do I keep track of the order of elements?
From what I can tell, dragula does not have a concept of tracking positioning of elements. You will have to devise a way to identify the parent container and the draggable items element. (div in the example). If you need to create the parent containers dynamically, you will need to track their order too. If you have a predefined layout, then all you need to do is track elements order and what parent they belong too. (for example, left or right, if we use the dragula example).
Create an id for each draggable element. You will have something like this.
<div id="left">
<div id="element1">Some text</div>
<div id="element2">Some other text</div>
</div>
When an element is dropped you will need to capture the element that was dropped and it's order to the parent container. To do this, you can use the jQuery index function to find the new index relative to the parent container. You will then need to reorder the list as you have it saved on the server side.
draggableElements.on('drop',function(el)
{
var parentElId = $(el).parent().attr('id');
var droppedElIndex = $(el).index();
var droppedElId = $(el).attr('id');
$.ajax({
url: "itemDropped.php",
type: 'GET',
data: { parentIdParam: parentElId,
droppedIndexParam: droppedElIndex,
droppedIdParam: droppedElId }
}).done(function() {
//do something else
});
});
How do I save the ordering of the elements?
This depends on your requirements. If you are saving the heirarchy to a database you will need to save the parent container ID for each element, the order or position it is in and the elements ID.
To rerender the page with the elements in the same order they were dropped in you would simply loop over all the elements in each container and render them in the order they are saved.
Review this [http://codepen.io/rachelslurs/pen/EjKmLG]
Also other example mostly similar with your dragula js example
sample code for to check and customize
i have a code that displays event information from the database. the parent container's id is show_id. Inside show_id there is some hiden div event_more_details with contents thats only supposed to show when i hover on the parent div which is show_id (in my case am using mouseenter function). Here is the code:
$('.show_event').mouseenter(function(){
$('.event_more_details').fadeIn(500);
});
Problem is, if the php generates five events, when i hover on one event, the hidden div fades in all the other parent divs, too.
If I correctly understand your HTML structure, you can use this:
$('.show_event').mouseenter(function(){
$(this).siblings('.event_more_details').fadeIn(500);
});
.siblings() applies a selector to sibling elements. (docs)
After going through the jquery functions library i think i found an answer:
$('.show_event').hover(function () {$(this).find('.event_more_details').fadeIn(500);}, function () {$(this).find('.event_more_details').fadeOut(500);});
This works fine for me,by the way, #Ohad thanks alot 444 your help.
This is my first attempt at jQuery and I'm using a basic tutorial I found here: http://papermashup.com/simple-jquery-showhide-div/#
This is my current code and how the jQuery works: http://jsfiddle.net/mZQsu/
As you can see, when you click the '+/-' it opens all 4 of the tables/DIVs.
How can I modify this code to open just the relevant secondary table/div according to the original table?
(Please note the secondary tables are generated dynamically from PHP and SQL data)
Thanks.
P.S all my code is here http://jsfiddle.net/mZQsu/ instead of clogging up this question page :)
DEMO fiddle
$('.toggler').click(function() { // had to differentiate the main togglers with a new class
var ind = $(this).parents('tr').index()-1; // could change
$(".slidingDiv").eq(ind).slideToggle();
});
$('.show_hide').click(function() { // this are the 'togglers' inside the big menus
$(this).parents(".slidingDiv").slideToggle();
});
The best solution would be if you tag each of your div's with an id. E.g.
<div class="slidingDiv" id="ip_127_0_0_1">
and then modify the equivalent links to do
$("#ip_127_0_0_1").slideToggle();
so just the associated div gets expanded.
See my updated fiddle: http://jsfiddle.net/mZQsu/1/
You can use the index of the row, and toggle only the matching row of the other table using jQuery index and eq
See the relivant docs here:
jQuery index
jQuery eq
This should work:
$('.show_hide').click(function() {
$(this).parents(".slidingDiv").slideToggle();
});
Since the slidingDiv class is a direct parent of the show_hide link, I could have used "parent" rather than "parents". The latter provides more flexibility because it traverses all ancestors looking for the class.
Here is a modified code - http://jsfiddle.net/mZQsu/3/
I have added show-hide1, show-hide2, show-hide3, show-hide4.
And clicking on it opens respectively slidingDiv1, slidingDiv2, slidingDiv3, slidingDiv4.
When you are binding to an event: You can always grab that event target and reference it.
$('.show_hide').click(function(e) {
$(e.target).parent("div.slidingDiv").slideToggle();
});
.parent() is a good place to start, but .closest() also might work. That being said, this is the preferred way to go about it.
On a side note if you ever want to do the opposite you could use .not(e.target) and all the other elements except for the one your click will be called.
Since your html is PHP-generated, it should not be a problem to include unique IDs for both +- links and sliding divs, for example:
a href="#" class="show_hide" id="show_hide2"
And
div class="slidingDiv" id="slidingDiv2"
Then in your click function you get the index of the div that you want to open:
$(.show_hide).click(function(){
var $str = $(this).attr('id');
var $index = $str.charAt( $str.length-1 );
});
Now you can use index to open the div:
var divName = "#slidingDiv" + $index;
$(divName).slideToggle();
I have an HTML div:
<div id='text_icon_<?php $i++; ?>' class="text_icon">Some Text</div>
that I print inside a foreach loop. I am using ajax to handle the click() event on it and change its text to Done!, so I have an output like:
<div class="text">Done!</div>
If I run the loop 4 times and I click on one of the divs (i.e. the one with class text_icon) then only first one is working while the rest of the divs are not working.
Update:
Your update indicates the below is not the problem, the IDs are unique.
Without your jQuery code it's hard to help you debug, so here's an example of how it can be done:
HTML:
<div id='text_icon1' class='text_icon'>Div #1</div>
<div id='text_icon2' class='text_icon'>Div #2</div>
<div id='text_icon3' class='text_icon'>Div #3</div>
<div id='text_icon4' class='text_icon'>Div #4</div>
JavaScript code using jQuery:
$("div.text_icon").click(function() {
// Within the `click` handler, `this` points to the
// DOM element. If you're kicking off some ajax something,
// you'll probably be doing something like this:
// Grab `this` to a variable we can access from the
// `success` closure
var theDiv = this;
// Do our call
$.ajax({
url: "your_url_here",
success: function() {
// It worked, udate the div
$(theDiv).text("Done!");
}
});
});
Live copy
Original answer:
If you're really using "DIV id='text_icon' class="text_icon..../DIV", e.g.:
<DIV id='text_icon' class="text_icon">....</DIV>
...then the problem is that the id is not unique. ID values must be unique on the page (reference). That would seem to fit with the symptom you describe, with "only the first one" working. Most browsers, when given invalid HTML with multiple IDs, will use the ID on the first element in document order and ignore the remaining ones.
If you don't need the div to have an ID at all, you can just remove it. Otherwise, just ensure the ID is unique, e.g.:
<DIV id='text_icon1' class="text_icon">....</DIV>
<DIV id='text_icon2' class="text_icon">....</DIV>
<DIV id='text_icon3' class="text_icon">....</DIV>
<DIV id='text_icon4' class="text_icon">....</DIV>
As far as I can tell, you are giving your divs the same ID. Targetting multiple elements with the same ID is impossible, the IDs need to be unique.
Try this:
$i = 1;
foreach ($array as $al) {
echo "<div id='text_icon_$i'>blablabla</div>";
$i++;
}
Of course, you'll need to modify your jQuery code too to include a potentially unlimited number of such IDs (I don't know whether performance will be good this way, but I remember doing it once for a comments list on a blog).
Another way would be to use a common class rather than unique IDs :).
Apart from the arguments about unique IDs, could it also be that the click handlers need to be hooked up again after the ajax call? If so, it'd be better to use .live rather than .click.
$("div.text_icon").live("click",
function(event) {
var icon = $(this);
}
}