Insert div id into script - javascript

I have a script where clicking on a particular div (eg id=packtoa) will (amongst other things) .addclass('show') to listview items with a class which matches the id of the div clicked.
Which works great, but then I'll want the next div (id=packfhag) to do the same thing, and then the next one. So I've got the same script many times in my js with just the id & class name changed.
I'm sure there's a stupidly obvious way to automate this so that any div with an id starting with "pack" will trigger this script, pull the div id, and insert it into the script where the name of the class is called.
And I'm sure I'm close with trying to adapt this script:
$("div[id^=pack]").each(function() {
var match = this.id.match(/\w+$/)[0];
$(this).addClass('show');
});
But I just can't crack it. Either something above is wrong, or I'm inserting it into the wrong place in the script:
// Tears of Ameratsu menu functions
$(document).bind('pageinit', function() {
// When link is clicked
$('#packtoa').click(function() {
// collapse the expansions menu
$("#expansionsmenu").click();
// hide everything except this expansion
$(".hidden").removeClass('show');
$(".packtoa").addClass('show');
// clear the search, and trigger a blank search
$('input[data-type="search"]').val('');
$('input[data-type="search"]').trigger("keyup");
});
});
What am I missing?

// for selecting div which starts with pack
// not recommended
$("div[id^='pack']");
The best option is to use class attribute, add class attribute to all those div, and then
$('.commonClass').addClass('show');
For Example :
// this is for testing
// say you click
$('#test').on('click',function(){
$('.testclass').addClass('show');
});
.testclass{
display:none;
}
.show {
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="testclass">div1</div>
<div class="testclass">div2</div>
<div class="testclass">div3</div>
<input type='button' value='Click me to view div' id='test' />

Related

Add class to anchor-link on other page

I've got a navigation set up with links to anchors on specific page.
This works when on that specific page, but how can I add the class when coming from another page on my site?
<script>
jQuery(function ($) {
$( document ).ready(function() {
$(".sub-menu > li > a").on("click", function(){
$("a.active").removeClass("curlink");
$(this).addClass("curlink");
});
});
});
</script>
Simply pass one more hidden input element say with id navigator
when you are clicking on a link with id #a1 then set this hidden element value to "a1"
Send this element with form
On receiver page check for value of this element say $("#navigator").val();
On the basis of the value of this, which is "a1" in this case, set CSS of link with id a1 whatever you want, using $("#a1").css();
Another method is that on every hyperlink add a GET parameter and receive on the receiver side and on the basis of its value set CSS.
Let's say there are 3 links with id a1,a2,a3
Add a parameter say cameFrom in href URL e.g. href=".../*.html?cameFrom=a1" for link a1 and href=".../*.html?cameFrom=a2" for link a2 and so on
On receiver page get its value by using this function:
function param(name){
return (location.search.split(name + '=')[1] || '').split('&')[0];
}
Use param(cameFrom) and get result.
Link to this function
There are many ideas/ways to achieve this, but if you have separate file which contains navigation code then you can do one way,
you can put in a hidden element with value of id of the <a> tag of menu of navigation. So when you land on the page and found that id value from the hidden field in jquery, you can make that <a> of navigation activated. I mean you can apply active class to that menu.
Tell me if this is not clear, I would try to make it simple.
In simple words,
Add one hidden element in your separate pages like <input type="hidden" value="about_us" id="nav-menu">
And in your master page,put jquery to get this value like:
var nav_menu = $('#nav-menu').val(); so in nav_menu you will have about_us as its value.
Now, in main master view file, you can write jquery to add active class for relevant manu like: $('.sub-menu > li > a').removeClass('active');$('#'+nav_menu).addClass('active');

Removing a html class won't detach removed class functionality using jQuery removeClass

I need to have an accordion element disabled until the user enters some stuff in another accordion element. I have this setting for the HTML:
...
<ul>
<li><a id="subject_link" href="#subject"> Paciente </a></li>
<li><a id="general_link" href="#general" class="disabled">Información General</a></li>
</ul>
...
It has a bunch of other elements but to make a point I think this will suffice.
Notice that general link has a "disabled" that is meant to prevent the user to go navigate into that part of the HTML without doing some stuff first. This is currently being done like this:
$(".disabled").click( function(){
$( "#subject_link").click()// Scroll screen to target element
alert("You need to enter subject ID first");
});
The above code alerts the user to enter the ID first and returns him to the corresponding accordion element. Then, when the user enters the subject id, I trigger the class removal:
if($("#tab0").valid()){
$.post( url , values);
// alert( "Data Loaded: " + str );
$("#general_link").removeClass("disabled");
$("#general_link").click();
The above removes the class successfully (both the markup "class=disabled" that no longer appears and styling suggest that) but clicking on the now not-disabled element still triggers the function meant for ".disabled" (alerts the user for missing ID and navigates to corresponding element).
What am I missing here???
Or use event delegation so when an event occurs the target element will be re-checked again against the selector. So use this instead:
$(document).on("click", ".disabled", function(){
$( "#subject_link").click()// Scroll screen to target element
alert("You need to enter subject ID first");
});
NOTE: the document here could be any of the parents of .disabled element. The closest that parent is the more quicker the ckeck will be. (I don't know about the rest of your HTML, so if you have that UL inside a DIV that can be selected then put that selector instead of document in the above code)
You have to use .off() method to detach that functionality:
$("#general_link.disabled").off("click");
$("#general_link").removeClass("disabled");

Put li attribut on a span

I am a beginner in the wonderful world of dev and I need help from you. Let me explain :
I have a menu that deploys when pressing on the burger and thus reveals three items .
On the one hand I am that when you click on an item the menu closes
And on the other hand I am cut the item to appear in the SPAN :)
$('li').click(function() { alert($(this).attr('id'));})
Thank you for your help.
DEMO JSFIDDLE
Envoy Everybody
simple as this : jsfiddle
added this
$('li').click(function() {
$('h1 + span').text( $(this).attr('id') )
$('#overlay').removeClass('open');
$('#toggle').removeClass('active');
})
also removed the class open from #overlay so after you click the li the menu closes, and removed the class active from the button so it changes from X to the hamburger lines . you can exclude these two lines if you don't need them
You successfully got the value of the id; now you just need to get the element you want to add it to, and add it.
Instead of putting the value in an alert, you'll use the value in jquery's text() function (assuming that you want the ID to be inside the <span> tag).
First, get the <span> element you want:
$('.top')
This gets all the elements with the class "top".
Now call the text() function (more info here: http://api.jquery.com/text/) on the element:
$('.top').text('your text here');
Instead of 'your text here', put the value of the ID in, like this:
$('.top').text($(this).attr('id'));

addClass/removeClass based on selected items data attribute

I'm a little stuck here. I have a ul menu of links. When a user selects from this list, I'm calling up content from another page with ajax. I want to grab a data attribute (data-flag) from the selected anchor and add that attribute as a class to the div that holds the ajax content (#fourteen). The adding class piece is working fine. However, when a new item is selected from the ul menu, I can't seem to remove the other classes from the content div. With each click, it just adds more classes.
Here's my code.
<ul id="langtest" class="tp_lang2">
<li>English</li>
<li>中文(简体)</li>
<li>Nederlands</li>
<li>Français</li>
</ul>
<div id="fourteen" class="cn">
<div id="content">
<div class="main-content">Content being served up here.
</div>
</div>
</div>
<script>
jQuery("ul#langtest li a").click(function() {
jQuery('#fourteen').load($(this).attr("href") + " #content");
jQuery('#fourteen').removeClass.not(this).attr("data-flag");
jQuery('#fourteen').addClass($(this).attr("data-flag"));
return false;
});
</script>
You just need to remove all class in the element like so :
// remove all class
jQuery('#fourteen').removeClass();
// then add class name with data flag selected anchor only
jQuery('#fourteen').addClass($(this).attr("data-flag"));
DEMO(inspect element to see the class actually added & removed)
Your removeClass seems not perfect. Do it like below.
jQuery('#fourteen').removeClass();
On dynamically added element you have to use delegate event binding.
jQuery(document).on("click","ul#langtest li a",function() {
jQuery('#fourteen').load($(this).attr("href") + " #content");
//also change your removeClass code
jQuery('#fourteen').removeClass();
jQuery('#fourteen').addClass($(this).attr("data-flag"));
return false;
});

Backbone.js – changes to li element don't display immediately

What I have in my template is just a bunch of divs and a list, consisting of multiple li elements. The use case is simple, the li elements are a dropdown and are displayed only on clicking a button. When the dropdown is visible and someone begins to type, the matching li element should be selected, or there should be a visual indication.
My approach is this, on a keyup event, I look for the typed word (this is quite easy) in the li elements. I find a few elements, which I've confirmed. Now, when I try to do something with these elements, nothing seems to happen WHILE the dropdown is open (right now, I'm trying to .toggle()) these elements. Now, when I click the button again (which showed the dropdown in the first place) (this click hides the dropdown), and then click the same button again to reveal the dropdown, voila! The values have been changed as they should be – the matching elements have been hidden/shown.
This has me stumped. For company policies, I can't upload the code up here, but I'll be very thankful if someone else has had this problem before and can help me out.
EDIT:
Code: function to change the dropdown on keypress, this is being fired correctly:
filterOptionsForKeypress: function (event) {
var typedString = this.$('input.filter-button-text').val(),
searchToken = _.trim(typedString.toLowerCase().replace(/ /g, '_')),
matchingLi = this.$("li[data-field^='" + searchToken + "']", this.$el), // makes no difference with or without the context, this.$el
that = this;
if (matchingLi && matchingLi.length) {
this.$(matchingLi[0]).html('kaka'); // this change shows only if the dropdown is hidden + shown again
console.log('trying to move focus', this.$(matchingLi[0]).attr('data-field'));
}
// this.$el.append('Some text'); -- this works, I see the changes as they happen
}
And the template looks something like this:
<div class="filter-button filter-option {{if !model.include}}button-red{{else}}button-green{{/if}} toggle-dropdown" data-dropdown-class="{{if !model.include}}button-red{{else}}button-green{{/if}}">
<div class="filter-button-text">${model.option}</div>
<div class="filter-drop"></div>
<div class="dropdown filter-dropdown">
<ul>
{{each model.config.options}}
<li data-field="${$value.op}" data-include='${$value.include}'>${$value.name}</li>
{{/each}}
</ul>
</div>
</div>
EDIT #2:
When the dropdown is open, this is how the html looks:
OPEN:
CLOSED:
So basically, apart from adding a few styles to the enclosing div and a class 'open', I don't see any differences.
The problem was that we're using a plugin for dropdown menus. So basically, what we saw on the screen wasn't what we found selecting with this.$(). The solution? Look globally and with a :visible filter voila, problem solved.

Categories