I have a piece of javascript which allows for the selection of multiple choices. An example of the html is this:
Pick an option:
<br><br>
<div id="dialogue_container"> </div>
<div id="Append"> And then this happens.</div>
<div class="inlinechoice-0" id="0">
<a class="question" id="1">Choice 1</a><br>
<a class="question" id="2">Choice 2</a><br>
<a class="question" id="3">Choice 3</a>
</div>
<div class="answer-1">
You picked 1.
<div class="inlinechoice-1" id="1">
<a class="question" id="4">Choice 4</a><br>
<a class="question" id="5">Choice 5</a><br>
</div>
</div>
<div class="answer-2">
You picked 2.
</div>
<div class="answer-3">
You picked 3.
</div>
<div class="answer-4">
You picked 4.
<div class="inlinechoice-2" id="2">
<a class="question" id="6">Choice 6</a><br>
<a class="question" id="2">Choice 7 (2)</a><br>
</div>
</div>
<div class="answer-5">
You picked 5.
</div>
<div class="answer-6">
You picked 6.
</div>
<br><br>
<FORM>
<INPUT TYPE="button" onClick="history.go(0)" VALUE="Refresh">
</FORM>
Then I have some javascript here:
$('div[class*=inlinechoice').on('click','.question', function(e) {
var $this = $(this),
$id = $this.prop('id');
$("#dialogue_container").append($('.answer-' + $id).contents());
});
$('div[class*=inlinechoice').on('click', function(a) {
var $this = $(this),
$cid = $this.prop('id');
$('.inlinechoice-' + $cid).hide();
});
And then a little bit of CSS here:
div[class*='inlinechoice-'] { cursor: pointer; }
div[class*='answer-'] {display:none}
div[class*='append']{display:none}
The way it works is that all of the inlinechoice/answerclass/append class begin as hidden. As the user clicks the options, the javascript puts the appropriate answers into the dialogue_container div in the order that they are selected. However, I would like to add a final touch, and that is to show the contents of the append div once there are no more choices available to the user. I need to check the contents of the dialogue_container to see if there are any active inlinechoices(i.e. non hidden ones), and if there are none, then I can set the append div to be shown. I'm thinking the solution will be something like suggested here, but I'm not sure how to apply this to the contents of the dialogue container, as they are dynamic.
Thanks.
Codepen here
Edit: New Codepen here. I've added the following code to the first question onclick event and it's appending correctly to choices which have no nested choices (i.e. choices 2 and 3) in them, but not choice 1 (which has additional questions). I think rather than searching the entire contents of #dialogue_container, I need to just look at the contents of the last select #answer, however, this is proving a bit tricky.
$foo = $("#dialogue_container").append($('.answer-' + $id).contents());
$str = $foo.html();
$term = "question";
$index = $str.indexOf($term);
if($index != -1){
//Do Nothing
}
else{
$('#append').show();
}
Edit: Is there a particular reason why this works:
$foo = $("#dialogue_container").append($('.answer-' + $id).contents());
But this doesn't?
$('.answer-' + $id).contents();
I'm guessing it's something to do with using .contents() combined with a class rather than a div, but I'm not sure how to instruct the script to return just the contents of the last clicked answer class.
If I add the following in, I can get an alert to return the correct contents, but I don't want to hardcode the answer-id class like this:
alert($('[class*="answer-2"]').eq(0).html());
I've tried:
alert($('[class*="answer-"]' + $id).eq(0).html());
To try and pick up the correct answer class, but it doesn't return anything. I feel like I'm nearly there on this, but not quite!
Edit: Thanks to a little clarification here, I finally managed to figure this out! I'll add the answer below.
Missing ] in your attribute selector
$('div[class*=inlinechoice]').on('click', '.question', function(e) {
// -----^-----
var $this = $(this),
$id = $this.prop('id');
$("#dialogue_container").append($('.answer-' + $id).contents());
});
$('div[class*=inlinechoice]').on('click', function(a) {
// -----^-----
var $this = $(this),
$cid = $this.prop('id');
$('.inlinechoice-' + $cid).hide();
});
CODEPEN
So it turns out that the order in which I called things mattered (you'd think I'd be able to figure something like this out by now).
Adding the following into the javascript right after $id variable has been defined seems to have done the trick:
//This is the append code which adds the contents of the append div when there are no more choices.
$str = $('.answer-' + $id).html();
$index = $str.indexOf("question");
if ($index != -1) {
//Do Nothing
} else {
$('#append').show();
}
Codepen
Related
when i trigger this jquery event, other element in other row of table got triggered as well which i want to prevent
$(document).ready(function(){
$(".Trigger_modi").delegate("a", "click",function(e){
e.stopPropagation();
var tnp = $(this).attr('id');
window.alert("tnp: "+tnp);
document.getElementById('modi_i').value=tnp;
$('#myDiv').html('<input type="button" name="modify" id="mD" value='+tnp+' onclick="modiTest.jsp">');
$('.inner_element_1').html('<input type="text" name="subject" value="">');
$('.inner_element_2').html('<h2 > yahoo</h2>');
$('.inner_element_3').html('<h2>yahoo</h2>');
$('.inner_element_4').html('<h2>yahoo</h2>');
$('.inner_element_5').html('<h2>yahoo</h2>');
var t = document.getElementById('modi_i').value
window.alert("t: "+t);
event.stopImmediatePropagation();
});
});
This is jquery function that would be triggered if i click "a" tag.
and this would make table look like this ↓↓↓↓↓↓↓↓
This is description of what is happening
<div class="Trigger_modi"> <div class="inner_element_2"><a id="<%=i %>">수정</a></div></div>
and this html code is wrapped by for loop which i suspect that it might be reason why i am getting trouble with
anyone suggest i could try?
<a class="Trigger" id="<%=idx %>"> <%=subject %></a>
<div class="Slider slideup">
<div id="Actual"><!-- 누르면 본문내용 보게됨. -->
</form>
<jsp:useBean id="bdao" class="Bob.Community.CommunityDAO" scope="session"></jsp:useBean>
<jsp:useBean id="bdto" class="Bob.Community.CommunityDTO"></jsp:useBean>
<div class="inner_element_1"><%=content %></div>
<div class="Trigger_modi"> <div class="inner_element_2"><a id="<%=i %>">Modify</a></div></div>
<div class="">
<div id="Actual_modi">
</div>
</div>
<div class="inner_element_3">Delete</div>
<div class="inner_element_4"></div>
<div class="inner_element_5"></div>
</div>
</div>
**
Edit 1) it works, appreciate for all you comment, reply
**
i first suspected that the problem was caused by for loop, and it turned out to be right.
[assume for loop loops 5times.]
when for loop finished and in javascript function triggers, the inner_element_(number) --> all 25 element(for loop 5 times * 5element) is set to same html tag for each number of element. i change it to something like <div class="inner_element_<%=idx%>"> which makes possible for 25 element to have a different class value individually. and it works fine. thanks
**
Edit 2) All I did to make it completely work fine : turned out Integrity problem
**
<div class="inner_element_(number) to <div class="inner_element_<%=idx %>
$('.inner_element_(number)') to $('.inner_element_'+tnp)
and i delete e.stopPropagation();
event.stopImmediatePropagation();
and i change $(".Trigger_modi").delegate("a", "click",function(e){ to $(".Trigger_modi").click( function (frm) {
$('.inner_element_1').html('<input type="text" name="subject" value="">');
$('.inner_element_2').html('<h2 > yahoo</h2>');
$('.inner_element_3').html('<h2>yahoo</h2>');
$('.inner_element_4').html('<h2>yahoo</h2>');
$('.inner_element_5').html('<h2>yahoo</h2>');
var t = document.getElementById('modi_i').value
In the above code you are assigning html to all .inner_element_1, .inner_element_2, .inner_element_3, .inner_element_4 and .inner_element_5 which jQuery will look all element with class inner_element_[1-5] of the whole page. So it may not raised another row event, it may just simply a HTML binding logic error in this case.
Try to revise your function as follow:
$(".Trigger_modi").each(function () {
var $Trigger_modi = $(this);
$Trigger_modi.delegate("a", "click",function(e){
e.stopPropagation();
var tnp = $(this).attr('id');
window.alert("tnp: "+tnp);
document.getElementById('modi_i').value=tnp;
$('#myDiv').html('<input type="button" name="modify" id="mD" value='+tnp+' onclick="modiTest.jsp">');
$Trigger_modi.find('.inner_element_1').html('<input type="text" name="subject" value="">');
$Trigger_modi.find('.inner_element_2').html('<h2 > yahoo</h2>');
$Trigger_modi.find('.inner_element_3').html('<h2>yahoo</h2>');
$Trigger_modi.find('.inner_element_4').html('<h2>yahoo</h2>');
$Trigger_modi.find('.inner_element_5').html('<h2>yahoo</h2>');
var t = document.getElementById('modi_i').value
window.alert("t: "+t);
event.stopImmediatePropagation();
});
Edit 1 -
Please wrap the above code inside a $(document).ready() and also revise the first 3 lines as follow:
$(".Trigger_modi").each(function () {
var $Trigger_modi = $(this);
$Trigger_modi.find("a").on("click", function(e){
....
Edit 2 -
After looked into your noticeList.jsp, I think you have to revise all your elements that contain the id attribute inside the for loop since it is not allowed to contains 2(or more) elements share the same id in HTML.
Also, since you are looping via for(int i= (n-1) ;i<=(n-1)+x;i++), it is not allowed in HTML that using digit only in the id attribute, so you have to revise your a element as follow as well:
<div class="Trigger_modi"> <div class="inner_element_2"><a id="<%=i %>" data-id="<%=i %>">Modify</a></div>
After that, you could give a class name for your td as follow:
<td class="TriggerCell">
<form name=f>
And revise the code in edit 1 as follow:
$(".TriggerCell").each(function () {
var $TriggerCell = $(this);
$TriggerCell.find(".Trigger_modi a").on("click", function(e){
var tnp = $(this).attr("data-id");
....
Try the following
$(document).ready(function(){
$(".Trigger_modi").on("click","a",function(e){
e.stopPropagation();
var tnp = $(this).attr('id');
window.alert("tnp: "+tnp);
document.getElementById('modi_i').value=tnp;
$('#myDiv').html('<input type="button" name="modify" id="mD" value='+tnp+' onclick="modiTest.jsp">');
$(this).parent().find('.inner_element_1').html('<input type="text" name="subject" value="">');
$(this).parent().find('.inner_element_2').html('<h2 > yahoo</h2>');
$(this).parent().find('.inner_element_3').html('<h2>yahoo</h2>');
$(this).parent().find('.inner_element_4').html('<h2>yahoo</h2>');
$(this).parent().find('.inner_element_5').html('<h2>yahoo</h2>');
var t = document.getElementById('modi_i').value
window.alert("t: "+t);
event.stopImmediatePropagation();
});
});
This application have 2 components, a HTML page which contain some element and a JavaScript to generate buttons.
I will try to give out a simplify example in the question for now, but if there's something unclear then i would upload the full code later.
I am using HandleBar.js to generate different contents in the html but don't worry if you don't have any idea about this plugin i will make another non-handlebar.js version.
Consider the Html part looks like below:
HandleBar.js version
//example:
//{{feedId}} = 0t454g465754754h456
//{{url}} = www.jegdo.co.uk
{{each}}
<div class="feedIdChecker">{{feedId}}</div>
<div class="{{feedId}}-EditRegionUrl" >{{url}}</div>
<button class="output-{{feedId}}">Output</button>
{{/each}}
Then i have a JQuery function which would output the url
var feedId = $(".feedIdChecker").html();
$('".output-'+feedId+'"').click(function(){
var postUrl = $('".'+feedId+'-EditRegionUrl"').html();
console.log(postUrl );
});
});
}
I found there's no way to identify which button is which. Since i need to declare the var feedID outside the button, it would always get the first feedID it founds and append to all buttons, how may i solve it? Please tell me if this question is confuse, i will try to explain it in a better way.
There's lots of people trying to help me but it seem i need to give out some more details in order for better understanding:
Javascript:
var initRegionEdit = function(){
var feedId = $(".feedIdChecker").html();
$(".CTHK").click(function(){
var postUrl = ($(this).prev('div').html());
})
}
HTML
<div class="EditRegionUrl" >{{url}}</div>
<div class="feedIdChecker">{{feedId}}</div>
{{#if region}}
<span class="dropdown"><i class="fa fa-map-marker" aria-hidden="true" style="color:gray;"></i>
<span class="result-date result-date-region" type="button" data-toggle="dropdown">{{region}}
<span class="caret"></span></span>
<ul class="dropdown-menu" style="min-width:100px;text-align:center;">
<li class="CTHK" data-url="{{url}}" style=" margin-top: 0px !important;margin-bottom: 0px !important;">Hong Kong</li><div class="divider"></div>
<li class="CTTW" style=" margin-top: 0px !important;margin-bottom: 0px !important;">Taiwan</li><div class="divider"></div>
</ul>
</span>
{{/if}}
I wish above information can help
So when you select $(".feedIdChecker") you actually get an array of all matching elements, but as soon as you call .html it only gets you the first. So to solve your issue we need to loop over all the $(".feedIdChecker")s like so:
$(".feedIdChecker").each(function(i, e) {
var feedID = $(e).html();
$('.output-'+feedID).click(function(){
var postUrl = $("." + feedID + "-EditRegionUrl").html();
console.log(postUrl);
});
});
This will attach the click handler to each of the buttons.
You could use the handlebars.js each/index feature to do this:
<button id="whatever-{{#index}}"
class="output-{{feedId}}">
Output
</button>
I'm assuming you need an answer on how to apply a unique id to each button, not how to bind click handlers to them (which other people have answered anyway)
May this version be quicker and with less code.
$('[class*=output-]').click(function() {
var feedId = this.className.split("-")[1];
var postUrl = $('.EditRegionUrl-' + feedId).html();
alert(postUrl);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="feedIdChecker">1</div>
<div class="EditRegionUrl-1" >URL1</div>
<button class="output-1">Output1</button>
<div class="feedIdChecker">2</div>
<div class="EditRegionUrl-2" >URL2</div>
<button class="output-2">Output2</button>
Can you just put url in the button and a generic class:
<button class="output-{{feedId}} btn-class" data-url="{{url}}">Output</button>
and then
$('.btn-class').click(function(){
console.log($(this).data('url') );
});
Or even just without changing your markup at all
$("button").click(function(){
console.log($(this).prev('div').text());
});
I want to ask about multiple toggle into a for loop.
for example, when I click into a div, a toggle menu appear.
this is my code:
for (var i = 0; i < myObjectString.length; i++) {
var obj = JSON.parse(myObjectString);
document.getElementById("endorsment").innerHTML += "<div id='endor'>\n\
<div class='endo_"+ obj.Endorsment[i].lang + "' id='endo'>\n\
<div id='count'>"+ obj.Endorsment[i].ln + "</div>\n\
<div id='proglang'>"+ obj.Endorsment[i].lang +"</div>\n\
</div>\n\
<div class='contenthover_"+ obj.Endorsment[i].lang +"' id='contenthover'>\n\
<a class='delete'>\n\
<img src='http://icons.iconarchive.com/icons/icojam/blue-bits/16/symbol-delete-icon.png' />\n\
</a>\n\
<span class='devider'>-</span>\n\
<a class='mybutton'>\n\
<img src='http://icons.iconarchive.com/icons/custom-icon-design/flatastic-1/16/comment-icon.png' />\n\
</a>\n\
<span class='devider'>-</span>\n\
<a class='mybutton'>\n\
<img src='http://icons.iconarchive.com/icons/icojam/blue-bits/16/information-icon.png' />\n\
</a>\n\
</div>\n\
</div>";
$('.endo_'+ obj.Endorsment[i].lang).click(function () {
//$('#contenthover').toggle();
alert(obj.Endorsment[i].lang);
});
This LINK
Any one can help me?
You don't have to use your click code inside the for loop. That make no sense.. It will be inserted no. of times inside your document (DOM).
Use pseudo query selectors. That will definitely make your work easier.
$("[class*='endo']").click(function () {
//do something here.
$(this).next().toggle();
});
next() selector selects the next sibling from the DOM. I have made a wrapper class to improve your css. Take a look at the fiddle for better understanding.
if you remove the wrapper class you may find some problems displaying your "contenthover".
Here's is your updated fiddle.
http://jsfiddle.net/xK0nB1n/2jaLg60o/11/
How to get value from custom attribute to be used in if else condition?
I want to switch button between show & hide . if show button clicked it will hiden and the hide button showed. And also the same for opposites.
So i can do show hide for my divs.
Here's my codes
<div class="wrapper">
<a class="show_detail" target="1" style="display:block">+ Show</a>
<a class="hide_detail" target-hide="1" style="display:none">- Hide</a>
<div class="event_down" id="event_down1" style="display:none">
Content 1
</div>
<a class="show_detail" target="2" style="display:block">+ Show</a>
<a class="hide_detail" target-hide="2" style="display:none">- Hide</a>
<div class="event_down" id="event_down2" style="display:none">
Content 2
</div>
<a class="show_detail" target="3" style="display:block">+ Show</a>
<a class="hide_detail" target-hide="3" style="display:none">- Hide</a>
<div class="event_down" id="event_down3" style="display:none">
Content 3
</div>
</div>
CSS:
.show_detail{cursor:pointer; color:red;}
.hide_detail{cursor:pointer; color:red;}
JS :
$('.show_detail').click(function(){
var atribut_show = $('.show_detail').attr('target');
var atribut_hide = $('.hide_detail').attr('target-hide');
if (atribut_show == atribut_hide){
$('.hide_detail').show();
$(this).hide();
}
$('.event_down').hide();
$('#event_down'+$(this).attr('target')).show();
});
and here's MY FIDDLE need your help to solve it.
in order to get custom attributes their name must start with "data-". For example your custom attribute target would be "data-target". After that you can get them using something like $("#myElement").getAttribute("data-target").
You are getting object array list you have to get only the current object
Check updated fiddle here
"http://jsfiddle.net/p7Krf/3/"
$('.show_detail').click(function(){
var atribut_show = $(this).attr('target');
$('.hide_detail').each(function(element){
if($(this).attr("target-hide")==atribut_show){
$(this).show();
}
});
$(this).hide();
$('#event_down'+atribut_show).show();
});
The following javascript made it function for me. You should however consider calling your attributes data-target and data-target-hide as your specified attributes are not actually valid. It will function, but you could run into problems if you don't change the attribute names.
$('.show_detail').click(function(){
var atribut_show = $(this).attr('target');
$('.hide_detail[target-hide="'+atribut_show+'"]').show();
$(this).hide();
$('#event_down'+atribut_show).show();
});
$('.hide_detail').click(function(){
var atribut_hide = $(this).attr('target-hide');
$('.show_detail[target="'+atribut_hide+'"]').show();
$(this).hide();
$('#event_down'+atribut_hide).hide();
});
I have a hidden div with the details of a thumbnail that is visible on the page. When you click on the thumbnail, it should fadein or slideup the div with details.
I have set with jquery incremented ID's to each ".portfolio-item-details" to identify each one and then have set with jquery the same ID's to the href of the thumbnail.
<section id="portfolio1" class="portfolio-item-details hidden">content</section>
<a class="open-portfolio-item-details" href="#portfolio1" title="">
<img src="thumbnail.jpg">
</a>
<section id="portfolio2" class="portfolio-item-details hidden">content</section>
<a class="open-portfolio-item-details" href="#portfolio2" title="">
<img src="thumbnail.jpg">
</a>
Since this is done dynamically, how can I with jquery fadeIn or slideUp the ".portfolio-item-details" if the href is equal to the ID. Basically thumbnail with "#portfolio1" should slide up the div with "#portfolio1" on click.
This is my jquery code which to add the IDs and HREF is working perfectly but not working to slideUp or fadeIn the div with the same ID.
$(document).ready(function () {
var i=0;
$(".portfolio-item-details").each(function(){
i++;
var newID="portfolio"+i;
$(this).attr("id",newID);
$(this).val(i);
});
var i=0;
$(".open-portfolio-item-details").each(function(){
i++;
var newReadMoreHREF="#portfolio"+i;
$(this).attr("href",newReadMoreHREF);
$(this).val(i);
if ($(".portfolio-item-details").attr("id") == "newReadMoreHREF") {
$(this).fadeIn();
}
});
});
SOLUTION
Thanks to Austin's code, I was able to modify it to work with mine.
Check here: http://jsfiddle.net/jdoimeadios23/xpsrLyLz/
You want something like this?
HTML
<div class="image" value="1">
<img src="thumbnail.jpg" />
</div>
<div id="portfolio1" class="details">details</div>
<div class="image" value="2">
<img src="thumbnail.jpg" />
</div>
<div id="portfolio2" class="details">more details</div>
JS
$(document).ready(function () {
$('.details').fadeOut(1);
$(".image").click(function () {
var num = $(this).attr("value");
$("#portfolio"+num).fadeIn(1000);
});
});
JSFiddle Demo
You don't even need to bother with ID's so long as the next div below each image is it's details.
The problem is in this block
if ($(".portfolio-item-details").attr("id") == "newReadMoreHREF") {
$(this).fadeIn();
}
Because you're having two errors, the first one is that newReadMoreHREF is a variable, not a string in your HTML or a value to any variable and so on.
Second thing is, that in the variable declaration you're using "#portfolio"+i;, which would be good if you were about to select an element. But using it in the jQuery iif statement with .attr('id') will again cause a havoc.
The thing that you need is something like this
$(".open-portfolio-item-details").each(function(){
i++;
var newReadMoreHREF="portfolio"+i; // removed #
$(this).attr("href",newReadMoreHREF);
$(this).val(i);
if ($(".portfolio-item-details a").attr("id") == newReadMoreHREF) {
// you need to access the hyperlink in the element, not
// the element itself. this portfolio1 ID is of a hyperlink
// again here, this is referencing the main iterator.
$(this).fadeIn();
// are you sure you want to fade the .open-portfolio-item-details?
}
});
Removed the hash sign and then called the variable value to check against. It would execute to be true if the condition is true.
Try this:
HTML:
content
<section id="portfolio2" class="portfolio-item-details hidden">content</section>
<a class="open-portfolio-item-details" href="#portfolio2" title="">
<img src="thumbnail.jpg">
</a>
<div id="portfolio1" class="portfolio" hidden>Portfolio 1</div>
<div id="portfolio2" class="portfolio" hidden>Portfolio 2</div>
Jquery:
$('a.open-portfolio-item-details').on('click', function (e) {
e.preventDefault();
var id = $(this).attr('href');
$('.portfolio').hide();
$('.portfolio' + id).fadeIn();
});
Couldn't get the fiddle link for some reason.
Edit:
I don't know the name of the class that shows the content you want displayed, so as an example I'm using portfolio. Try putting this code into a fiddle