I have a piece of HTML like this:
<body>
<div id="main" class="popup">
<h1> Webpage chatter </h1>
<button id="signOut">Sign Out</button>
<div id="welcome-section">
<div id="invalid-error-msg" class="invalid-input-text">
</div>
</div>
...
And a jquery script that modifies the id=invalid-error-msg element:
$("#invalid-error-msg").append("<p>Too short. Display name must be 6 or more characters.</p>");
The jquery does not find the invalid-error-msg id, but if I un-nest that div like below, it finds it and modifies it with no problem.
<body>
<!-- show a text box, a list of persons in chat, chat box, header title -->
<div id="main" class="popup">
<h1> Webpage chatter </h1>
<button id="signOut">Sign Out</button>
<div id="welcome-section">
</div>
<div id="invalid-error-msg" class="invalid-input-text">
</div>
Why is this happening? Is this normal behavior?
jQuery always finds an element as long as it exists in the rendered DOM. So you might want to check id="welcome-section" (which is the wrapper/parent) CSS. It must've been hidden or displayed none.
Related
so I have a page. there's a search bar. if the search bar has no text inputted, the page displays two partials, one for featured apps and one for most popular. but if someone inputs any text at all into the search bar then the featured apps and most popular apps partials disappear and the search results partial shows up. instead what happens is neither partials load. there's just a big blank space where they should be.
I tried doing this with jQuery but was having no luck. so now I'm back to trying to use dynamic partials but am also having no luck with that. if this can only be done with something like jQuery please let me know.
I was briefly trying to use a handlebar helper but I could not link it to the input id="searchApps" element without throwing an error because it keeps saying searchApps is undefined.
index.hbs (if this is missing any divs it's cause it's just part of the code)
<div class="col-2 offset-1">
<div class="column-side">
<div class="sidebar">
<input id="searchApps" type="text" placeholder="Search apps...">
{{!-- so once someone types the first character here the searchResults partial should render. and it should be dynamic so results should further refine with each additional character typed--}}
{{>sidebar}}
</div>
</div>
</div>
{{#if 'searchApps.length === 0'}}
<div id="searchResultsHomePage">
<div class="col-7 offset-1">
{{>searchResults}}
</div>
</div>
{{else}}
<div id="homePageNoSearch">
<div class="col-7 offset-1">
{{>featuredApps}}
</div>
<div class="most-popular-grid">
{{>mostPopularApps}}
</div>
</div>
{{/if}}
here is the jQuery I tried in the index.hbs file just before the </body> tag
<script type="text/javascript">
$('#searchApps').on('change', function(){
if ($(this).val() == ""){
<div id="homePageNoSearch">
<div class="col-7 offset-1">
{{>featuredApps}}
</div>
<div class="most-popular-grid">
{{>mostPopularApps}}
</div>
</div>
} else {
<div id="searchResultsHomePage">
<div class="col-7 offset-1">
{{>searchResults}}
</div>
</div>
}
});
</script>
so anyone know how I can do this?
thanks
I am looking for ways on how this HTML element is being hidden.
The HTML DOM on load looks like this for an example,
<div class="">
<header>
<!---->
<!---->
<!---->
</header>
</div>
After initiating a click event, the HTML DOM changes to this;
<div class="container">
<header>
<!---->
<div class="show"></div>
<!---->
</header>
</div>
Any suggestions on how its doing this? Also, is there a way to capture this live element? I have a click event elsewhere in the DOM that triggers the show element, I have also tried the on function but it shows as undefined. Bear in mind, this is not my own site.
I hope this makes sense, thanks let me know If I need to edit or suggest any changes
it's something similar to this, where class="show" or hide are css classes that set the element to display:none or block
this example is meant for demonstration only
div=document.querySelectorAll("div")
btn.addEventListener("click",()=>{
i=Math.floor(Math.random()*div.length)
console.log(div[i])
div[i].setAttribute("class","show")
})
.hide{display:none};
.show{display:block};
<div class="container">
<header id="h">
<div class="hide">a</div>
<div class="hide">v</div>
<div class="hide">x</div>
</header>
</div>
<button id="btn">show</button>
I'm trying to find a way to make a replace button on my page. I've looked around the web but all I found was a replace text script. What I want is to replace both the text in my h1 tag and the text in the article. If its possible to just replace the whole div with another div it would be great.
To explain a bit more accurate on my page: www.bravitus.com
I want at the "OM MIG" section, a button where I could switch out the content, for something else like some info about bravitus. I'd like a button to click that replaces only the orange section.
Here's a bit of my mark-up:
<div class="full-page" id="page-2">
<div class="container">
<h1 style="color:white;" >Hvem er jeg</h1>
<div class="columns eight"><article> Lorem ipsum </article>
</div>
I want to replace all content in the page-2, or just switch out the whole page-2 div with another.
Is that possible?
Here we go, a small demo on jsFiddle (http://jsfiddle.net/json/8cu34y4L/).
There are three buttons with the data-switch attribute. The attribute indicates what block inside the page-2 will be shown, when the button is clicked.
HTML
<button data-switch="#about_me">Click to read about me</button>
<button data-switch="#education">Click to show my education</button>
<button data-switch="#about_name_bravitus">Click to read about the name Bravitus</button>
<div id="page-2">
<div id="about_me" class="container">
<h1>This is about me section</h1>
<div>about me about me about me</div>
</div>
<!-- Hidden blocks that you show when the appropriate button is clicked. -->
<div id="education" class="container" style="display: none;">
<h1>This is about my education</h1>
<div>education education education</div>
</div>
<div id="about_name_bravitus" class="container" style="display: none;">
<h1>This is about the name bravitus</h1>
<div>bravitus bravitus bravitus</div>
</div>
</div>
JS (you need jQuery)
// Listening to a button click.
$('[data-switch]').on('click', function (e) {
var $page = $('#page-2'),
blockToShow = e.currentTarget.getAttribute('data-switch');
// Hide all children.
$page.children().hide();
// And show the requested component.
$page.children(blockToShow).show();
});
I'm not sure if I understood what you want.
But if you just want to replace all html inside page-2, you simply can do that (with jQuery):
var html = // Here comes your html
$('#page-2').html(html);
So im not sure if this is the correct way but what i ended up doing was this
function myFunction(){
document.getElementById("fisk").innerHTML = "Hvem er du"
}
<button onclick="myFunction()">Click me</button>
Now i just have to find a way to make it replace more than text. to replace divs and other tags all together.
Just add this link and execute the below code:
script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"
Click to read about me
Click to show my education
Click to read about the name Bravitus
<div id="about_me" class="container">
<h1>This is about me section</h1>
<div>about me about me about me</div>
</div>
<!-- Hidden blocks that you show when the appropriate button is clicked. -->
<div id="education" class="container" style="display: none;">
<h1>This is about my education</h1>
<div>education education education</div>
</div>
<div id="about_name_bravitus" class="container" style="display: none;">
<h1>This is about the name bravitus</h1>
<div>bravitus bravitus bravitus</div>
</div>
JS (you need jQuery)
// Listening to a button click.
$('[data-switch]').on('click', function (e)
{
var $page = $('#page-2'),
blockToShow = e.currentTarget.getAttribute('data-switch');
// Hide all children.
$page.children().hide();
// And show the requested component.
$page.children(blockToShow).show();
});
I have a php loop that print a lot of html in this form:
<div class="something">
...
<img class="prod-img" src="What-I-Need"/>
</div>
<div class="buttons" data-description="Some text here...">
<a class="activator">Click me!</a>
</div>
That piece of code is repeated many times. Usig jQuery I manage to get the description content using the parent selector just by:
$('.activator').click(function() {
alert($(this).parents('.buttons').data('description'));
})
Since $(this) have a parent with the field I need, that js code is working great, I wonder now, how can I retrieve the src content of the class prod-img? since is outside the parent div...
If they are grouped like this
<div class="container">
<div class="something">
...
<img class="prod-img" src="What-I-Need"/>
</div>
<div class="buttons" data-description="Some text here...">
<a class="activator">Click me!</a>
</div>
</div>
<div class="container">
.....etc....
You can get prod-img by using .closest() and .find()
var src = $(this).closest('.container').find('.prod-img').attr('src');
Otherwise you need to use .parent() .prev() and .find() which is very static making it harder to change the HTML markup without changing the code.
var src = $(this).parent().prev().find('.prod-img').attr('src');
I have 2 forms. One is a regular form (TestForm) and the other is inside a foundation tab.
Page 1:
<div class="columns small-8">
<form name="testForm">
</form>
</div>
<div class="row">
<div class="section-container tabs" data-section="tabs">
<section class="section active">
<p class="title">Gegevens</p>
<div class="content" data-slug="data">
<div ng-include src="'partials/user/UserData.html'"></div>
</div>
</section>
</div>
</div>
UserData.html (the tab):
<form name="debugForm"></form>
So the problem is below that I can't reach my debugForm. Does anyone know how to reach the form? (need to set validity)
Also when I trie to reach by going via the child scope:
$scope.$$childHead.debugForm
doesn't work.
The problem is that you can't access child scopes from a parent scope in angular.
I temporarily "solved" it by just not using the include and instead just put the html in there.
Still open for better suggestions though..
Try src="partials/user/UserData.html" (whithout ' )