I know a lot of people have asked questions about selectors, but whatever I do looks right but still ends up not working. I have a list of actions. The actions are shown or hidden whenever their "folder" is clicked. I don't want them to hide again when the action itself is clicked...however they do. Can anyone see what my problem is? I've tried so many variations; maybe it's just late.
Relevant code:
func.js
$(function() {
$(".menuitems").hide();
$("#dmenu li").not(".menuitems li").click(function() {
$(this).children(".menuitems").slideToggle();
});
$(".menuitems").children("li").click(function() {
$.get("aux/" + $(this).text() + ".html", function(data) {
$("#content").html(data);
}, "text");
});
});
main.html
<div id="content">
All contents come here!!
</div>
<div id="leftnavigation">
<h3>Options</h3>
<ul id="dmenu" style="list-style-type:none; margin-left:-50">
<li>__Registration
<ul class="menuitems">
<li>FindExisting</li>
<li>CreateNew</li>
</ul>
</li>
</ul>
</div>
you want to look on all li elements that has a .menuitems inside it you could do something like:
$(function() {
$("#dmenu li:has(.menuitems)").click(function() {
$(this).children(".menuitems").slideToggle();
});
$(".menuitems").hide().find("li").click(function() {
$.get("aux/" + $(this).text() + ".html", function(data) {
$("#content").html(data);
}, "text");
return false;
});
});
Related
I add some html dynamically in data.html
<div class="d-flex " id="deviceSeearchRecords">
<div class="p-2 flex-grow-1 ">
<button type="button" class="btn deviceName " data-href="#Url.Content(string.Format(" ~/Devices/Details/{0} ", #item.ID))">
#item.FullName
</button>
</div>
</div>
After this I assume to use click event like this.
$('#searchResultContainer').html('');
$.getJSON('#Url.Action("Search", "Devices")', {
s: $('#searchStr').val()
},
function(data) {
if (data.success === true) {
$('#searchResultContainer').append(data.html);
$(document).on('click', '.deviceName', function(e) {
e.preventDefault();
e.stopPropagation();
// console.log('deviceName ' + $(this).data('href'));
window.location.href = $(this).data('href');
});
}
});
But when I click first time then nothing happens. On second click it works as it should.
I have tried to use focus() on div but if does not help.
This approach does not help as well jquery functions inside of dynamically generated html not working
What do I missing here?
Move your code to the outside
$(document).on('click', '.deviceName', function(e) {
e.preventDefault();
e.stopPropagation();
// console.log('deviceName ' + $(this).data('href'));
window.location.href = $(this).data('href');
});
Thanks to all!
I found my solution here
Is it possible to focus on a <div> using JavaScript focus() function?
So I just use a regular <a> within data.html and after this focus on the div with dynamically added data. And one click works!
$('#searchResultContainer').html('');
$.getJSON('#Url.Action("Search", "Devices")', {
s: $('#searchStr').val()
},
function(data) {
if (data.success === true) {
if (data.success === true) {
$('#searchResultContainer').html(data.html);
window.location.hash = '#searchResultContainer';
}
}
});
I am trying to create a function that will toggle optional inputs if chosen, here is what I have done so far:
HTML:
<div>
<input>
<a class="input-toggle" href="#"><span>Toggle Option</span><span>Close</span></a>
<div class="input-toggle-content">
<input name="">
</div>
</div>
JavaScript:
$('.input-toggle').each(function() {
$(this).next("div").hide().end();
$("span:last-of-type").hide();
$(this).on('click', function() {
$(this).next("div").slideToggle();
$("span:first-of-type").hide();
$("span:last-of-type").show();
});
});
So, the way it should work is when clicked on .input-toggle the div that is just next to it will be toggled and if clicked again the div will go away... I got this bit working, however, I want to also toggle <span>Toggle Option</span> with <span>Close</span> and I can't get it working... I don't know if the way I structured my function is correct?
Try,
$('.input-toggle + div.input-toggle-content').hide();
$(".input-toggle span:last-of-type").hide();
$('.input-toggle').click(function () {
$(this).next('div.input-toggle-content').toggle();
var spans = $('span', this);
spans.not(spans.filter(':visible').hide()).show();
});
DEMO
here you go: http://jsfiddle.net/jPe3A/
$('.input-toggle').each(function() {
$(this).next("div").hide().end();
$("span:last-of-type").hide();
$(this).on('click', function() {
$(this).next("div").slideToggle();
if($("span:first").is(':hidden')){
$("span:first").show();
$("span:last").hide();
}
else{
$("span:first").hide();
$("span:last").show();
}
});
});
I am using jquery UI tab for my project. Kindly check the html code
<div id="tabs">
<ul>
<li>General</li>
<li>Admin Products</li>
<li>Admin Category</li>
<li>Others(Admin)</li>
</ul>
<div id="tabs-1"></div>
<div id="tabs-2"></div>
<div id="tabs-3"></div>
<div id="tabs-4"></div>
</div>
when I click a tab, I get the form using ajax, which works well. Check the js code below which is taken from phtml file,
<script type="text/javascript">
$(function(){
// Tabs
$('#tabs').tabs();
//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);
$('.load_cont').click(function()
{
var groupname;
var id = $(this).attr('rel');
var gnameArr = id.split('||');
groupname = gnameArr[1];
//alert(gnameArr[1]);
var url = <?php echo BASE_URL; ?> + '/admin/settings/getqtips/gname/'+groupname;
//alert(id);
$.ajax({
type:'POST',
dataType:'json',
url:url+'/math/'+Math.random(),
data:'',
success:function(response)
{
if(response.MSG == 'DONE')
{
$("#"+gnameArr[0]).html(response.TPL);
$('div#'+gnameArr[0]+' #gname').val(groupname);
}
}
});
}
);
});
$(function(){
$('a#preload').click();
})
</script>
My requirement is, when ever I click on respective tab, I need to clear the html inside other tab. That is, if I click on tabs-2, the content from other tabs (tabs-1, tabs-3, tabs-4) should be clear. This one saves my validation on zend.
Kindly advice on this.
inside your success function empty all other divs
$('div[id^="tabs-"]').each(function(){ //search for all divs which id starts with 'tabs-'
if (this.id != gnameArr[0]) { //if this is not clicked one
$(this).empty(); //clear its content
}
});
or with falsarella's tip
$('.load_cont').click(function() {
var clickedEl = $('#'+gnameArr[0]);
...
success:functi...
$('div[id^="tabs-"]').not(clickedEl).empty();
...
Alternatively, you can set container elements with the same class, eg .container.
// Clear all container before you set the new one.
$('.container').html('');
how about something like this :
$('.load_cont').click(function(){
$('.load_cont').not($(this)).each(function(i,el){
$($(el).attr('href')).empty();
});
});
Select the divs that aren't the selected one, and clear them all:
$('#tabs > div:not(#' + gnameArr[0] + ')').empty();
I posted a question up yesterday that asked for some help on an image switching script I had written, thank you to all that helped me. I've extended the script and have run into a problem that I can't for the life of me spot where the problem is.
HTML:
<div id="feature-image">
<h1><span>A random heading</span></h1>
</div>
<div id="feature-links">
<a class="a1" href="#">1</a>
<a class="a2" href="#">2</a>
<a class="a3" href="#">3</a>
</div>
JS + Jquery:
$(function(){
$('#feature-links a').click(function() {
if ($(this).hasClass('a-active')) {
return false;
} else {
var image = $(this).attr('class');
switchToImg(image, function() {
$('#feature-links a .a-active').removeClass('a-active');
$('#feature-links .' + image).addClass('a-active');
});
}
});
function switchToImg(image){
$('#feature-image').fadeOut('300', function(){
$('#feature-image').css('background-image','url(images/main_' + image + '.jpg)');
$('#feature-image').fadeIn('300');
});
};
In the script I check for a click on an <a> tag, each <a> tag has a class of (a1, a2, a3 etc.). Also, the active <a> has a class of 'a-active'.
I'm attempting to check if a-active is set with this:
if ($(this).hasClass('a-active')) {
return false;
}
and cut the script there so that it doesn't fade in and out the same image. However, the image continues to fade in and out despite my return false on checking for the class a-active and returning false. I am sure the problem is in the section where I am using .addClass and .removeClass but my knowledge of Javascript and Jquery is to flaky for me to properly debug this.
Could someone cast a critical eye over this please?
Thanks in advance.
You have incorrectly passed an anonymous function to your switchToImg() function, which doesn't accept one.
Instead, try the following JS:
$(function() {
$('#feature-links a').click(function() {
if ($(this).hasClass('a-active')) {
return false;
} else {
var image = $(this).attr('class');
switchToImg(image);
}
});
function switchToImg(image) {
$('#feature-image').fadeOut('300', function() {
$('#feature-image').css('background-image', 'url(images/main_' + image + '.jpg)');
$('#feature-image').fadeIn('300');
});
$('#feature-links a.a-active').removeClass('a-active');
$('#feature-links .' + image).addClass('a-active');
};
});
Tested in jsFiddle.
EDIT: I removed the call to .stop(), it wasn't necessary and introduced a bug.
Try changing $('#feature-links a .a-active') to $('#feature-links a.a-active').
Space between a and .a-active means you're trying to match descendants of <a> with class a-active.
You can use :not selector to filter out active class.
$('#feature-links a:not(.a-active)')
The site is hostingcouponsclub.com. I want to add a text tip "Click to copy & open site" effect to the yellow coupon code, which is near the scissors. But the tooltip is not working when I put this code to my local environment. It's ok. I think maybe there is a conflict with the "Click to copy & open site" JavaScript. How do I correct it? Thank you. This is the tooltip code:
$(document).ready(function() {
$(".coupon-code").hover(
function() { $(this).contents(".coupontooltip").show(); },
function() { $(this).contents("span:last-child").css({ display: "none" }); }
);
});
Your HTML Markup in the site is,
<div rel="http://www.godaddy.com/" class="coupon-code hover">
BNX5246Lmg
<span class="coupontooltip" style="display: none;">Click to copy & open site</span>
</div>
<div rel="http://www.godaddy.com/" class="coupon-code hover">
BNX5246Lmg2
<span class="coupontooltip" style="display: none;">Click to copy & open site2</span>
</div>
Made these changes.
Took away display: none; from the coupontooltip css class
Change toolTipHover.js like this:
$(document).ready(function () {
$(".coupon-code").hover(
function () { $(this).find(".coupontooltip").show(); },
function () { $(this).find(".coupontooltip").hide(); }
);
});
Click here to see it working
.contents() doesn't work like that at all. Are you looking for $(".coupontooltip", this) and $("span:last-child", this) ?
Try using:
function() { $(this).find('.coupontooltip').show(); },
function() { $(this).find('span:last-child').css("display", "none"); }
as the arguments to the hover bind.
Try using
$(document).ready(function() {
$(".coupon-code").hover(
function() { $(this).children(".coupontooltip").show(); },
function() { $(this).children("span:last-child").css({ display: "none" }); }
);
});
The contents() and children() are same except that the former will get the text and comments nodes as well.