So i've a dropdown menu of my Languages, the HTML/JS output is like this:
<div class="dropdown-menu dropdown-menu-right show">
<a class="dropdown-item " ng-click="changeLang('1')">English</a>
<a class="dropdown-item " ng-click="changeLang('2')">Spanish</a>
<a class="dropdown-item active" ng-click="changeLang('3')">French</a>
the selected one in the code above is French, (class="dropdown-item active")
my PHP code in the controller is this:
<a class="nav-link dropdown-toggle text-muted waves-effect waves-dark" href="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="flag-icon flag-icon-fr"></i></a>
As you can see above, whenever i change the value of the dropdown menu, the icon still pointing to French (obviously because hardcoded)
how do i catch the active one and refer to it in my PHP code ?
You should definitely look into using JavaScript for this - my thought process would be to set a cookie defining the currently selected option and then appending some HTML to the element. This would eliminate the need to catch this server side and re-render the page. Plus it has the added benefit of sending the option to the server on every request in case you need to perform some other action with it.
Related
We have a field that is a dropdown and will display the user's alias. To emphasize it's a dropdown there's a class called caret that displays a triangle.
The code for this part is written in html like this.
<a
id="username"
href="#"
class="dropdown-toggle"
data-toggle="dropdown"
role="button"
aria-haspopup="true"
aria-expanded="false"
>**username will go here**<i id="caret" class="caret"></i>
</a>
The caret disappears when we assign a value to "username". I think it's because <i id="caret" class="caret"></i> is within that class.
So what I thought about doing to remedy this is add the class to string at the time of reassignment like so
$('#username').text(name);
$('#username').addClass("caret")
Clearly this is not the right approach, otherwise I wouldn't be asking this question. How can I keep the triangle from disappearing when the field is populated?
I also moved the class outside of id=username which messed up how the page displays.
<a
href="#"
class="dropdown-toggle"
data-toggle="dropdown"
role="button"
aria-haspopup="true"
aria-expanded="false"
><span id="username">**username will go here**</span><i id="caret" class="caret"></i>
</a>
$('#username').text(name);
Im building a chrome extension which injects CSS and JS to a particular website. I just wanted to know if there is any way to manipulate a variable element. As an example if I wanted to duplicate the user's username and place it somewhere else on the site. This is an example of such to the current DOM I have access to:
<span class="nav-user">
<li class="dropdown nav-item">
<img alt="Avatar" class="nav-user-avatar" src="usersimage.png">
<a aria-haspopup="true" href="#" class="dropdown-toggle nav-link" aria-expanded="false"> <span class="nav-username">Rbxntl</span>
</a>
<div tabindex="-1" role="menu" aria-hidden="true" class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">
<span>Logout</span>
</a>
</div>
</li>
</span>
To reiterate basically just to move this element somewhere else on the page that will allow it to work on all users when they have the extension installed, or possibly to duplicate and place the duplicate somewhere else. I have tried researching the problem but I cant seem to find the solution.
I'm using bootstrap 4.0 beta, which requires popperjs, which is v1.12.5 . jQuery is version 3.2.1, in jQuery.noConflict() mode. This is for a shopify theme, so to include javascript files it uses gulp-include directives in Shopify's Slate command-line tool. My include file looks like this:
// =require vendor/jquery-3.2.1.js
// =require vendor/popper.js
// =require vendor/bootstrap.min.js
When I try and use the Bootstrap Navbar dropdown toggle, I get the console error
Uncaught TypeError: Cannot read property 'jquery' of undefined
jQuery is working correctly in all the non-popper bootstrap functionality and custom jQuery javascript. However, jquery (with a lower-case q) is not defined when I type it in the console, but this is what popperjs uses on line 2325. If I edit the popperjs source and capitalize the q it still throws the same error.
For more context, You are getting this error because you are trying to use an invalid HTML element as your dropdown button. I got this error because i tried to use an anchor tag which had a button nested it, alongside the .dropdown-menu div
For example
This works
<button class="dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Thing 1</a>
<a class="dropdown-item" href="#">Thing 2</a>
<a class="dropdown-item" href="#">Thing 3</a>
</div>
But this doesn't
<a class="dropdown">
<button class="dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Thing 1</a>
<a class="dropdown-item" href="#">Thing 2</a>
<a class="dropdown-item" href="#">Thing 3</a>
</div>
</a>
You are passing an invalid DOM element to Popper.js somehow, if you update Popper.js to the latest version you'll get a better error message.
I am handling user management module where particular parts of web page have permissions to assigned users. So, I have to check if the logged in user has access to div or not based on the div id.
<div class="col-md-4">
<h4> I want to: </h4>
<a class="btn btn-large btn-primary dropdown-toggle"
href="#"
id="dropdownMenuLink"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
Select the action and get information
</a>
</div>
As i have several divs on each page , it is not viable to query for the element and then set the display style using jquery.
So, my requirement is to call a java script function which returns a Boolean value based on which a div can be displayed or not displayed. How can I achieve this?
To preface, sorry if the answer lies in the javascript but I'm currently taking a course online and haven't yet learned javascript so I can't troubleshoot too well there since my understanding is really lacking right now.
I have a bootstrap dropdown menu with nav-pills below. My issue is that when I click a link in my work dropdown and the href links to another spot on the page (single page website) the menu doesn't close out after clicking. If the href is empty with a "#" then it closes out. I can't for the life of me solve this.
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Work</a>
<ul class="dropdown-menu">
<li>
Work 1
</li>
<li>
Work 2
</li>
</ul>
</li>
Let me know if I'm missing anything (javascript?) this is my first post.
Not too sure of the source of the problem but this is a nice work-around to forcefully close the dropdown menu.
<script>
//Can go in a sperate .js file as well
function closeDropdowns() {
$(".dropdown-toggle").each(function() {
$(this).attr("aria-expanded", false);
$(this).parent("li").removeClass("open");
});
}
</script>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Work</a>
<ul class="dropdown-menu">
<li>
Work 1
</li>
<li>
Work 2
</li>
</ul>
When ever the link is clicked set back the.
aria-expanded to true on the main anchor tag with class dropdown-toggle
$('ul.dropdown-menu li a').on('click',function(){
$(this).closest('li.dropdown').find('a.dropdown-toggle').attr('aria-expanded','false');
});