I have tooltip for each table row to show edit options. I make it visible using this code:
function popupFunction(p) {
var popup = document.getElementById("sp" + p);
popup.classList.toggle("show");
}
It's working well. But now the problem is how to hide it if I click any other places?
Here is my html:
<div class='popup' id='eds'>
<i class='fa fa-ellipsis-v' id =" + values.items[i].id + " onclick='popupFunction(this.id)'></i>
<span class='popuptext' id =sp" + values.items[i].id + ">
<div onclick='edit(this.id)' id =ed" + values.items[i].id + ">Edit</div>
<br/>
<div onclick='deleteFunction(this.id)' id =de" + values.items[i].id + ">Delete</div>
</span>
</div>
if show class makes an element to be rendred as tooltip, then removing it, should hide it.
document.getElementById(some_id).classList.remove("show")
should do the trick, i believe.
Related
I have button to show phone number if clicked with this code:
var shortNumber = $("#phone_ch").text().substring(0, $("#phone_ch").text().length - 12);
var onClickInfo = "_gaq.push(['_trackEvent', 'EVENT-CATEGORY', 'EVENT-ACTION', 'EVENT-LABEL', VALUE, NON-INTERACTION]);";
$("#phone_ch").hide().after('<div id="clickToShowPc" onClick="' + onClickInfo + '">' + shortNumber + 'X XXXXXXXX</div>');
$('section:has(div.price_c,div.contact_name_info,div#clickToShowPc)').addClass('xoom_c');
$("#clickToShowPc , #phone_cc").click(function() {
$("#phone_ch").show();
$("#phone_cc").hide();
$("#clickToShowPc").hide();
});
And I try to clone it with this code:
$( ".phone_c" ).clone(true , true).attr('class', 'phone_c col-lg-6').appendTo( ".main-section" );
And this is the original button HTML:
<div class="phone_c col-lg-12 col-md-12 col-sm-6 col-xs-12">
<span id="phone_ch" style="display: none;"> 012 73962304</span><div id="clickToShowPc" onclick="_gaq.push(['_trackEvent', 'EVENT-CATEGORY', 'EVENT-ACTION', 'EVENT-LABEL', VALUE, NON-INTERACTION]);"> 01X XXXXXXXX</div>
<div id="phone_cc">Show phone</div>
</div>
The button cloned but with showing the hidden elements and If I click it it will show the hidden element on the original one.
Can some one advise me with the correct code please?
I tried to search here and I found that I need to enable the
.clone(true , true)
in my code. And also I found something about duplicating ID's but it was not clear to me and I failed to solve my problem.
Thank you
When you clone your div ".phone_c", you will have multiple elements with the same ID. So, when you use the DOM Selector "#phone_cc", it will select the first one because it's how it works. If you had :
<span class="phone_ch" style=...
So you could use the DOM Selector ".phone_cc" and all elements with that class will be selected.
Now, you want to show and hide only elements "near" the cloned clicked element. To do that, you will have to use classes instead of IDs.
<div class="phone_c col-lg-12 col-md-12 col-sm-6 col-xs-12">
<span class="phone_ch" style="display: none;"> 012 73962304</span>
<div class="clickToShowPc" onclick="_gaq.push(['_trackEvent', 'EVENT-CATEGORY', 'EVENT-ACTION', 'EVENT-LABEL', VALUE, NON-INTERACTION]);"> 01X XXXXXXXX</div>
<div class="phone_cc">Show phone</div>
</div>
Then try to reach the parent element to reach the children :
var shortNumber = $(".phone_ch").text().substring(0, $(".phone_ch").text().length - 12);
var onClickInfo = "_gaq.push(['_trackEvent', 'EVENT-CATEGORY', 'EVENT-ACTION', 'EVENT-LABEL', VALUE, NON-INTERACTION]);";
$(".phone_ch").hide().after('<div class="clickToShowPc" onClick="' + onClickInfo + '">' + shortNumber + 'X XXXXXXXX</div>');
$('section:has(div.price_c,div.contact_name_info,div.clickToShowPc)').addClass('xoom_c');
$(".clickToShowPc , .phone_cc").click(function() {
var parent = $(this).parent();
$(".phone_ch", parent).show();
$(".phone_cc", parent).hide();
$(".clickToShowPc", parent).hide();
});
I hope this helps.
I am trying to access the parent element up to the button element to modify its css. I can access the span element via id. But when I try to go to the parent img it says undefined
Here is my html code
<button type="button" class="buttonLike">\
<img src = "../Image/thumbsUp.png" clas="test">\
<span class="postID" id=' + idPost + '>' + likesPost + '</span>\
</img>\
</button>\
and here is my jquery code that access the span element
$.each(result, function (index,data) {
var liked = data.liked;
if (liked == true) {
console.log($("#" + postId).parent("img").attr("src"));
}
});
How can i do this right.
img element is self-closing. try this:
<button type="button" class="buttonLike">\
<img src = "../Image/thumbsUp.png" clas="test">
<span class="postID" id=' + idPost + '>' + likesPost + '</span>\
</button>
and get it with jquery:
console.log($("#" + postId).parent().find("img").attr("src"));
I think you should not wrap the span inside the img. that will make more easy for you. But if you still want to. try this.
$("#postId").closest("img");
try using this
.parent().find('img').attr('src')
console.log($("#idPost").parent().find('img').attr('src'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="buttonLike">
<img src = "Image/thumbsUp.png" class="test">
<span class="postID" id='idPost'>likesPost </span>
</button>
I have closed the image and made the span as sibling of parent;
In this code snippet I have provided both jquery approach and pure js approach. Hope this helps.
//jquery approach
console.log($(".postID").siblings('.test').attr("src"));
//pure js
console.log(document.getElementsByClassName("postID")[0].previousElementSibling.getAttribute('src'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="buttonLike">
<img class="test" src="http://cdn3-www.dogtime.com/assets/uploads/gallery/goldador-dog-breed-pictures/puppy-1.jpg"/>
<span class="postID" id=' + idPost + '>' + likesPost + '</span>
</button>
I have a bootstrap modal dialog whose content is being dynamically set in button click based on what is selected by the user. I would like to display the selection as bold. However, when rendered it displays the bold tags (less than b greater than) and (less than forward slash b greater than) instead of text being bold.
JS
$("#SubmitBtn").click(function () {
var dropDownText = $("#DSLDropDownList option:selected").text();
$('#ConfirmationDialog').modal('show');
$('#ConfirmationMessage').text('You selected ' + '<b>' + dropDownText + '</b>'
)
-----------------------------------------------------------------------
HTML
<button type="button" id="SubmitBtn" class="btn btn-primary">Submit</button>
<div id="ConfirmationDialog" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div id="ConfirmationMessage"></div>
</div>
</div>
</div>
I would like it to display, You Selected followed by value of dropDownText in bold font. Instead it displays bold tags.
.text() renders given input as plaintext
Use .html() instead of .text():
$('#ConfirmationMessage').html('You selected ' + '<b>' + dropDownText + '</b>');
Example
var dropDownText = "foo";
$('#ConfirmationMessage').html('You selected ' + '<b>' + dropDownText + '</b>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<span id="ConfirmationMessage"></span>
$("#ConfirmationMessage").html("<b>You selected " + dropDownText + " </b>");
I have a common JQM popup across multiple pages. From each page, the contents of popup are refreshed using the data from page. On the first load of the page I can see the refreshed contents on popup. However, when I load new data onto popup div, I still get the older data on popup widget.
If I examine the innerHTML of the popup, it gives me new contents but cannot see them on the popup.
Here is my example code:
<body>
<div id="common-popup">
<div id="data-popup" data-role="popup">';
<p>Name: N/A<p>
<p>DOB: N/A <p>
</div> <!--Popup div ends -->
</div>
<div data-role="page" id="page1">
<input type='text' id='p1_name' value=''>Name: </input>
<input type='text' id='p1_dob' value=''>DOB: </input>
<button class="update-data" id="b1"/>
Watch Data
</div>
<div data-role="page" id="page2">
<input type='text' id='p2_name'>Name: </input>
<input type='text' id='p2_dob'>DOB: </input>
<button class="update-data" id="b2"/>
Watch Data
</div>
</body>
<script type="text/javascript">
$('.update-data').on('vclick', function(){
var id = $(this).id;
id = id.split('');
var htm = '<div id="data-popup" data-role="popup">';
htm += '<p>Name: ' + $('#p' + id[1] + '_name').val() +'<p>';
htm += '<p>Name: ' + $('#p' + id[1] + '_name').val() +'<p>';
$('#common-popup').html(htm).trigger('create');
});
</script>
In the above code if I examine the innerHTML using:
console.log("Common Inner Html: " + document.getElementById('common-popup').innerHTML);
I can see the updated contents, however when I open the pupup, I still see the older contents. Please let me know how to refresh the contents on popup
JS Fiddle: http://jsfiddle.net/bhavik89/49QwL/1/
In the Fiddle I can only see the initial contents, they are not refreshed upon the update
Instead of putting the popup in a DIV, just leave it under the body. Then when recreating it, leave the top level DIV there and just replace the contents:
<div id="data-popup" data-role="popup" data-theme="a" >
<div >
<p>Name: N/A</p>
<p>DOB: N/A </p>
</div>
</div>
Make sure your link has data-rel="popup":
Watch Data
Give your update button some text so we can see the button:
<button class="update-data" id="b1" >Update</button>
With this in place initialize the popup on document ready and then on the update button click, replace the popup HTML, call enhanceWithin() and finally call popup("refresh") to update the popup widget:
$(function(){
$("#data-popup").enhanceWithin().popup();
});
$(document).on("pagecreate", "#page1", function(){
$('.update-data').on('vclick', function(){
var id = $(this).prop("id");
id = id.split('');
var htm = '<div>';
htm += '<p>Name: ' + $('#p' + id[1] + '_name').val() +'<p>';
htm += '<p>DOB: ' + $('#p' + id[1] + '_dob').val() +'<p>';
htm += '</div>';
$("#data-popup").html(htm).enhanceWithin().popup("refresh");
});
});
Here is a working DEMO
HTML :
<div class ="cards">
<span id="cardtitle">
</span>
<span id="cardinfo">
</span>
</div>
J-QUERY:
function build() {
var content1 = "Coolio";
var content2 = "Coolio";
$(".cards").flippy({
color_target: "#F8F8F8",
duration: "500",
verso: $("#cardtitle").text(content1)
// another instance of verso here to add content2
});
}
I am using this jquery plugin for flip effect. My question is how do I achieve multiple contents. At the moment the plug only accepts 1 content.
Well, it seems like the Developer has made it so you've got to recreate the instance of the flip each time you'd like to apply new content, so you've got to make that a little more generic within a .click() handler.
Dependant on the Button or Navigation you've clicked on, ask it to load the appropriate content that it's tagged too, example:
<div id="content-one" style="display: none;">
Some first Example text
</div>
<div id="content-two" style="display: none;">
Second Example Text
</div>
<input type="button"
class="updateflip"
value="Display Content One"
data-contenttext="content-one" />
<input type="button"
class="updateflip"
value="Display Content Two"
data-contenttext="content-two" />
<script>
$(document).on('click', '.updateflip', function( event ) {
$('.cards').flippy({
color_target: "#F8F8F8",
duration: "500",
verso: $('#'+ $(this).data('contenttext') +'').text()
//E.g. $('#content-one').text(); shows "Some first Example text"
});
});
</script>
Demo Fiddle: http://jsfiddle.net/8TQFb/
Upon clicking a class of .updateflip it will look at it's data-contenttext attribute, which in turns points to an hidden <div /> within the page, thus brings up the hidden text. You could apply this further with having different colours too within the data-* attribute:
<input type="button"
class="updateflip"
value="Display Content Two"
data-color-target="#f1f1f1"
data-speed="2100"
data-contenttext="content-two" />
And thus, pass these button specific related attributes into the .updateflip handler as well to create something like in the demo below:
Demo Fiddle: http://jsfiddle.net/Hx5uQ/
Sorry guys, i got it to work. The plugin does take multiple elements. It was a misunderstanding on my part.
var content1 = "Coolio";
var content2 = "Coolio";
$(".cards").flippy({
color_target: "#F8F8F8",
duration: "500",
verso: '<span id="cardtitle">' + content1
+ ' </span><span id="cardinfo"> ' + content2 + '</span>'
});
I changed:
verso: $("#cardtitle").text(content1)
to: verso: '<span id="cardtitle">' + content1 + ' </span><span id="cardinfo"> ' + content2 + '</span>'