Develop Reference

Combine different content inside tag

I want to build such construction using jQuery:
<i class="fa fa-shopping-cart"></i>Add to cart
My jQuery code, which is responsible for this line, looks like that:
var a2 = $('<a>').attr("href", "add_to_cart:" + item['id']).text('Add to cart');
a2.addClass("btn btn-default add-to-cart");
var i1 = $('<i></i>');
i1.addClass("fa fa-shopping-cart");
a2.append(i1);
But result does not contain <i> element.
I tried to append <i> using .html function, but in this case text disappears.
How to make <a> element contain both tag and text after it?
Thanks for your answers

hahaha you forgot the last one...
$(".test").html(a2);
and the parent content
<div class="test"></div>
$(document).ready(function() {
var a2 = $('<a>').attr("href", "add_to_cart:").text('Add to cart');
a2.addClass("btn btn-default add-to-cart");
var i1 = $('<i>iiiiiiiiiiii</i>');
i1.addClass("fa fa-shopping-cart");
a2.prepend(i1);
$(".test").html(a2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test"></div>

Get next element with same class in jquery on click

I am trying to create the following.
I have a button and on click of that button i need to add some active class to a div, but i have 4 divs with same class. What am trying to create is like a Choose Bet system like when you click first time on button you choose the first bet, when second time the second, i have 4 bets.
My html structure is the below
<div class="game_paytable_bluebet_column game_paytable_column"></div>
<div class="three_bet_wrappaer">
<div class="game_paytable_greenbet_column game_paytable_column"></div>
<div class="game_paytable_orangebet_column game_paytable_column"></div>
<div class="game_paytable_redbet_column game_paytable_column"></div>
</div>
What i did so far with jquery see below
jQuery('.choose_bet_button').click(function(){
if(!jQuery('.game_paytable_column:first').hasClass('active_blue_bet')){
jQuery('.game_paytable_column:first').addClass('active_blue_bet');
}else{
jQuery('.game_paytable_column:first').removeClass('active_blue_bet');
jQuery('.game_paytable_column').next().addClass('active_blue_bet');
}
});
With this code it is getting 2 elements.
Any idea how to get a solution to this?
Thanks in advance.

Here is an interpretation, please see the comments for a breakdown.
jQuery('.choose_bet_button').click(function(){
// get all the elements that match your selector
var $columns = $('.game_paytable_column')
// get the currently active element
var $active = $columns.filter('.active_blue_bet')
// get the index of the active element relative to your columns
var index = $active.length ? $columns.index($active) : -1
// increment the index if there is a next element or reset to 0
var newIndex = ($columns.length > index + 1)
? index + 1
: 0
// remove the active class from all elements
$columns.removeClass('active_blue_bet')
// set the new active column
$columns.eq(newIndex).addClass('active_blue_bet')
});
.game_paytable_column {
width: 100%;
height: 40px;
margin: 4px;
background: #eee;
}
.active_blue_bet {
background: #bada55;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="game_paytable_bluebet_column game_paytable_column active_blue_bet"></div>
<div class="three_bet_wrappaer">
<div class="game_paytable_greenbet_column game_paytable_column"></div>
<div class="game_paytable_orangebet_column game_paytable_column"></div>
<div class="game_paytable_redbet_column game_paytable_column"></div>
</div>
<button class="choose_bet_button">choose</button>

Using :eq() you can achieve your requirement.
And initialize a counter and based on the counter add class in div.
And every four click make the counter 0.
Please check this snippet.
var _click = 0;
$('.choose_bet_button').click(function(){
if((_click % $(".game_paytable_column").length)==0){_click=0;}
$('.game_paytable_column').removeClass('active_blue_bet');
$('.game_paytable_column:eq('+_click+')').addClass('active_blue_bet');
_click++;
if($.trim($(".in_sight_area").html())==""){
$(".in_sight_area").html('<div class="top_bet_column_two top_bet_column game_paytable_column">New One</div>');
}
});
.active_blue_bet{
color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="in_sight_area"></div>
<div class="game_paytable_bluebet_column game_paytable_column">1</div>
<div class="three_bet_wrappaer">
<div class="game_paytable_greenbet_column game_paytable_column">2</div>
<div class="game_paytable_orangebet_column game_paytable_column">3</div>
<div class="game_paytable_redbet_column game_paytable_column">4</div>
</div>
<br/>
<button class="choose_bet_button">Choose Bet</button>
<div class="game_paytable_redbet_column game_paytable_column">5</div>

If you have a button... i.e.:
<button onclick="next()" >NEXT</button>
Seems quite simple:
// get all elements with class game_paytable_column
var columns = document.getElementsByClassName("game_paytable_column");
// counter to control the actual index
var counter = 0;
function next() {
// this selects the actual element and shows content
alert(columns[counter].innerHTML);
//and passes to next element
if (counter == columns.length - 1)
counter = 0;
// first if necessary
else
counter ++;
}
WORKING DEMO
That's all :)

Deleting and restoring divs toggle

I am trying to create a switch between a div being deleted and it being restored based on an Event trigger. I am using jquery. How do i do that using .click event?

Its simple lets say you will have 2 divs.
use this in in JS
$(document).ready(function() {
$("#div1").hide();
$("#div2").hide();
$('#button1').click(function() {
$("#div1").show();
$("#div2").hide();
});
$('#button2').click(function() {
$("#div1").hide();
$("#div2").show();
});
});
And HTML
<button id="button1" >Show Div1 </button>
<button id="button2" >Show Div2 </button>
<br><br>
<div id="div1" ><h1> Hello </h1></div>
<div id="div2" > <h1> Bye </h1></div>
See a live example here: http://jsfiddle.net/ptqdrr8t/1/

You can find a div and use it with jQuery to move it and also change the styling/content/classnames etc. But it's not always best for performance, you can also consider to show/hide the div instead as was suggested earlier.
An example here:
http://jsfiddle.net/web_nfo/57x4agL7/
Html:
<div id="removedItems"></div>
<div class="item">
<h3>Item1</h3>
<span class="remove">Remove</span>
</div>
jQuery:
$(document).ready(function(){
$('.item span.remove').click(function(){
// Find the item
var $item = $(this).parent();
// You can change the original item
$item
.addClass('removed')
.find('h3').append('<span>[removed]</span>');
// Move the item
$('#removedItems').append( $item );
});
});
Or if you are looking for another way (to really 'remove' the item first) you can store the whole $item object in an array, and use it later on to re-create something. Maybe something like this?
var history = [];
$('.item span.remove').click(function{
var $item = $(this);
history.push( $item );
$item.remove();
});
If you are creating an 'undo' function you also have to remember the position of the item (before it was removed) to put it back at the correct spot.

Possible to pass a value from HTML to javascript?

I have searched SO but i didnt really understand the answers related to this question and they were all related to JSP so im not sure if it applies to my usage.
I have a list of comments on a page and when a user click on "reply" the javascript code is executed, but the javascript function which is running needs to know which comment it is going to be working on in order to insert the reply form in the correct div. I have information about which comment im working on in the html code but i need to be able to access this information also in the external JS file.
Is there a way to send this information from html to javascript ?

[updated]
You can use data attribute of Jquery
See an example:
http://jsfiddle.net/9AJUJ/2/
html
<div id="div1"></div>
<button class="mydiv" data-info="1" >button 1</button>
<div id="div2"></div>
<button class="mydiv" data-info="2" >button 2</button>
js
//when document is load
$(function(){
$(".mydiv").click(function(){
$("#div" + $(this).data('info')).append('hello');
});
})

Asume this is your HTML code :
<article>
<header>
Posted by XYZ
</header>
<p>
This is a comment...
</p>
<footer>
<button type="button">
Reply
</buttuon>
</footer>
</article>
Here the JQuery code :
$(function() {
$('article>footer>button[type="button"]').click(function(){
$(this).parent().parent().append(/** HERE IS WHAT YOU APPEND **/);
});
});

Does each reply button have an ID that matches the comment ID? That would allow you to know which button was pressed (this.id or this.name) and would correspond to the related comments field.
your input would be
<input type="text" id="comments1">
and your button would be
<button type="button" id="button1">Click Me!</button>
in your button js you can do something like
var buttonID = this.id;
var commentID = 'comments' + buttonID.substring(6);
var commentObj = document.getElementById(commentID);

You need to edit the markup of the reply buttons.
<button class="reply-button" data-commentid="42">Reply</button>
<!-- ^ Add this attribute -->
In your event listener:
var commentId = this.dataset.commentid;

What I have done (so I don't know if it is the right way to do this), is I have create my html code by a php class and give and and id to each div like "div number" + "answers".
So my page htmml looks like:
<div id="0answers">
<h1 id="0title"> </h1>
<p id="0p"> </p>
</div>
<div id="1answers">
<h1 id="1title"> </h1>
<p id="1p"> </p>
</div>
<div id="2answers">
<h1 id="2title"> </h1>
<p id="2p"> </p>
</div>
And so have all the information you need for exemple modify the title n° 5 when someone click on the div n°3.
Is that that need?

So...
var i = 0;
var button = document.getElementById(i + 'button');
while(button){
var p = document.getElementById(i + 'p');
// and do what you want
++i;
var button = document.getElementById(i + 'button');
}

Dynamic HTML IDs (PHP, Java, and a bit of SQL)

I'm trying to create a web page which generates a series of unique DIV IDs, each displaying different content based off of the entries in an SQL table.
Each div has a "hide" and "show" button, which work independently when manually giving each div a unique name.
I can get the divs themselves to generate based on class names in PHP, which displays the divs correctly.
The problem lies in the "hide" and "show" buttons since they're controlled by JavaScript. The code is as follows:
for ($j = 0 ; $j < $rows ; ++$j)
{
for($i =0; $i < $rows2; $i++)
{
if (mysql_num_rows($ans) > 0) //check if widget table is empty
{
$widgetusr[$j] = mysql_result($ans,$j,'wname')or die(mysql_error()); //user's widget
$widgetstore[$i] = mysql_result($ans2,$i,'wname'); //store widget
if($widgetusr[$j] == $widgetstore[$i] && $widgetusr[$j] != 'Medieval Calendar') //check if user has already purchased the widget
{
echo "<div class=widget_container".$j%2 .">"; //container divs are named 1 and 0. j mod 2 should return either 1 or 0
?>
<!----Start of weather Widget--->
<!---Script for show/hide buttons weather widget--->
<script>
var widg = "<?php echo $widgetusr[$j]; ?>";
var id = "#" + widg;
$(document).ready(function(){
$("#hide1").click(function(){
$(id).hide();
});
$("#show1").click(function(){
$(id).show();
});
});
</script>
<button id="hide1">Hide</button>
<button id="show1">Show</button>
<!---End Script for show/hide buttons weather widget--->
<?php
echo "<div class = 'widget' id='$widgetusr[$j]'>
</div>
</div>
<!----End of Widget---> ";
}
}
else
{
echo "You have no widgets please visit <a href='store.php'> the store </a> to purchase some. <br/>"; //widget table is empty. Redirect to widget store.
}
}
}
?>
I tried to pass the php varriable (containing an SQL value) to JavaScript (which works successfully, I was able to print out "#financial widget" as an id name.), however neither the show, nor hide button works. The generated divs all have the correct names also.
If additional information is required please ask. I tried to be as general as possible.

You really only need one button. Change your php to render the following html
<div class="widget_container">
<button class="btn ">Hide</button>
<div class="widget">widget1</div>
</div>
<div class="widget_container">
<button class="btn">Hide</button>
<div class="widget">widget2</div>
</div>
<div class="widget_container">
<button class="btn">Hide</button>
<div class="widget">widget3</div>
</div>
and output the following Outside of the loop, ensuring jQuery is loaded:
<script type="text/javascript">
//Standar jquery doc ready event, fires when the dom is loaded
$(document).ready(function(){
//add an event listener elements with a class of "btn"
$('.btn').click(function () {
//"this" is the element click, so we find siblings of this with a class
//of "widget" and toggle its visibility
$(this).siblings('.widget').toggle();
//Change the text of the button the below is short hand for:
//if($(this).text() == "Hide"){
// $(this).text("Show");
//}else{
// $(this).text("Hide");
//}
$(this).text($(this).text() == "Hide" ? "Show" : "Hide");
});
});
</script>
Example
Some useful links:
http://learn.jquery.com/using-jquery-core/document-ready/
http://api.jquery.com/click/
http://api.jquery.com/siblings/
http://api.jquery.com/closest/
http://api.jquery.com/toggle/
http://api.jquery.com/text/
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
Example with fixed height widgets: http://jsfiddle.net/bdpm4/2/
Update 2
Perhaps a better way to do it: http://jsfiddle.net/bdpm4/3/

you should use class instead of id and dont put your $(document).ready() in the loop.
HTML:
<div class="widget_container">
<button class="btn hideBtn">Hide</button>
<button class="btn showBtn">Show</button>
<div class="widget">widget1</div>
</div>
<div class="widget_container">
<button class="btn hideBtn">Hide</button>
<button class="btn showBtn">Show</button>
<div class="widget">widget2</div>
</div>
JS:
$(document).ready(function(){
$('.btn').on('click', function (evt) {
var btn = $(evt.target);
btn.siblings('.widget').toggle();
btn.parent().find('.btn').toggle();
});
});
CSS:
.showBtn {
display:none;
}
here is an example: http://jsfiddle.net/xdA4r/4/