This question already has answers here:
How do I change the text of a span element using JavaScript?
(18 answers)
Closed 6 years ago.
I have a FAQ list that works that way : there are several mini cards that contain a question (some text) and a button (let's say "see the answer"). When I click on the button, the answer to the question appears above the button. Then the button should not be a "see the answer" button, but a "close" one. I need a little help with that last part.
Here is what I have done :
<p>Question</p>
<div class="collapse" id="FAQ">
<div class="well">
Answer to the question
</div>
</div>
<a class="btn" role="button" data-toggle="collapse" href="FAQ" aria-expanded="false" aria-controls="collapseExample">See the answer</a>
Side question : since this is a list and I'm going to have several "See the answer/Close" buttons, I would say I'm not allowed to use an id to make it work, am I ?
You can dynamically set the text on the button by $(".btn").innerHTML = "new text to be displayed". Put this in your first click(function() {...}) function.
And no, never use the same id for multiple elements. Use classes instead. You can have multiple classes on one element. So for example you may have class="btn close" and then use toggleClass("close") to add it when it's not there, remove it when it is.
Related
This question already has answers here:
Find and replace specific text characters across a document with JS
(14 answers)
Closed 11 months ago.
<a href="/knowledgebase/category/community?language=tr" class="Category-Item">
<h4><span><i class="fas fa-comments"></i></span> Community</h4>
<p></p>
<span class="MoreArticles">8 Makaleler</span>
</a>
I want find and replace text under a class.
For example; Finding "Community" text and change to "Topluluk".
I writed a javascript language and i need do this for non-multilangual application.
Before:
<a href="blabla" class="**Category-Item**"><i class="blabla">Community</i>
After:
<a href="blabla" class="**Category-Item**"><i class="blabla">Topluluk</i>
from what i understood , you can select the element then change the inner text. if that's not what you ment please leave a comment.
let text = document.querySelector('h4');
text.innerText = "changed";
I am using this jquery plugin (Jquery Popup Overlay)
I have finally managed to have it working as expected, apart from the last step.
Once the pop up opens, there are 2 buttons. One is to close the window and one to progress with selected action(delete something in DB in this case).
I have this link to activate the window:
<a class="initialism basic_open btn btn-xs btn-danger" href="?page=suite-admin&action=delete-suite&id=5&site_id=1">delete suite</a></td>
This is the script to show the window:
$(document).ready(function () { $('#basic').popup({
escape: false,
blur: false, });});
What I need is , when pop up opens and i click on delete button this will progress with whatever is in .
I do not know much about Java, but i do really like this feature on my project.
Any help will be appreciated.
Thank you
Edit:
Forgot the actual pop up:
<div id="basic" class="well" style="display: none;">
<h4>Basic</h4>
<p>The dialog can be closed by pressing the <kbd>Esc</kbd> key, or by clicking on the background
<br> outside the content area, or by clicking on the Close button.</p>
<button class="basic_close btn btn-default">Close</button>
<button class="basic_close btn btn-danger">Delete Suite</button>
I think two possible answers (there are certainly more) to your problem can be found in this stackoverflow question: [How to create an HTML button that acts like a link?
To sum it up: One way would be to just use an <a> tag instead of <button>. That means you write:
<a class="basic_close btn btn-danger" href="?page=suite-admin&action=delete-suite&id=5&site_id=1">Delete Suite</a>
Is it possible to make a submit button that when I click it, it will get me to the for example <div id="Home"> without Javascript? I already tried with different ways but as always the first page is showing all tags from other ID's page's. I already have the Javascript code but I don't want to use, I want to do all this by simple HTML tags, if possible please help.
Instead of
<button type="submit">Submit</button>
why not do something like
submit
Give your div an id such as
<div id="#home">
and then the link should link to the #home.
<a href="#home">
That should work
Try it here
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_a_href_anchor
This question already has answers here:
How to find the closest event element
(2 answers)
Closed 7 years ago.
I opened post where i asked for assistance with jquery code:
How to find the closest event element
unfortunately, other user didn't read my issue.
I have A link. clicking on it will show/toggle div. my problem is that my div is not always located at the same level from the A link. sometimes the A link is 1 level upon the hide DIV. sometime it's 2 levels or more. sometime it's below it
how can I find the closest DIV, that contain the class ".hidebox", to the A link?
<a href="#" class="hideBox-tab " >show div</a>
$(".hideBox-tab").click(function(){
$(this)
.parent().parent()
.find(".hideBox")
.toggle();
return false;
});
If you and an <a> to show/toggle the div the <a> must be outside the div:
toggle and show div
<div class="hideBox">
Content here
</div>
Then you need to find in your HTML one tag that allways englobes a.hideBox-tab and div.hideBox.
For example: div.partial-content:
<div class="partial-content">
toggle and show div
<div class="hideBox">
Content here
</div>
</div>
And your JS will be like this:
$(".hideBox-tab").click(function(){
$(this).closest(".partial-content").find(".hideBox").toggle();
});
I created a snippet, take a look at it:
$(".hideBox-tab").click(function(){
$(this).closest(".partial-content").find(".hideBox").toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="partial-content">
toggle and show div
<div class="hideBox">
Content here
</div>
</div>
<div class="partial-content">
toggle and show div
<div>
<div class="hideBox">
Content 2 here
</div>
</div>
</div>
This solution works for one or more levels between a.hideBox-tab and div.hideBox.
This question already has answers here:
Attaching click event to a JQuery object not yet added to the DOM [duplicate]
(10 answers)
Closed 8 years ago.
I'm using multiple Bootstrap dropdown controls and need to set a value to an input field when a list item of a specific dropdown is selected. For example, say I have 3 dropdowns:
ulSaukContact
ulMoselContact
ulShipContact
All three are running on the server, and I need to get the value of each so I can save them somewhere. So I figured I should probably save the value of each to a hidden input field that I can reference later. Here is my attempted JS code for doing this:
$("#ulSaukContact li a").on("click", function () {
alert('sauk'); // <--- Alert is not shown
var elem = document.getElementById("inpSaukValue");
elem.Value = $(this).text();
});
and the accompanying markup
<div class="dropdown">
<button type="button" class="btn btn-default dropdown-toggle" id="btnSaukList" data-toggle="dropdown" runat="server"
style="width: 100%;">
<span style="padding-right: 250px;">Select a Saukville contact</span>
<span class="caret"></span>
</button>
<ul id="ulSaukContact" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" runat="server" style="width: 100%">
<!--NOTE: Intentionally left blank; li's are generated by code behind to populate users from Sharepoint.-->
</ul>
<input id="inpSaukValue" type="hidden" />
</div>
When I run the app and select a value in the Saukville dropdown, no alert is displayed. Note that the li's and a's within the ul is created on Form_Load so they can be populated with data. I think my selector is wrong. I cleared out my cached files in Chrome (which caused issues before) and I still do not see the alert.
Any advice appreciated (thanks for all the recent JS/BS/JQ advice)...
Because the elements don't exist at the time you're attempting to bind events to them, you need to delegate events to the containing element with on:
$("#ulSaukContact").on("click", "li a", function () {
...