I have the following layout page:
<body scroll-spy="" class="theme-template-dark theme-amber alert-open alert-with-mat-grow-top-right solar-custom">
<main>
<div class="main-container">
<div class="main-content" autoscroll="true" bs-affix-target="" init-ripples="">
<section class="forms-basic">
<div ng-view class="view-animate view-fade">
</div>
</section>
</div>
</div>
</main>
</body>
I have an ng-view here in order to get html files on my code and place it's content inside here.
The problem I noticed is the following:
I have various textboxes from materialize which all should have an animation that kicks in on focus and blur.
However, I noticed that this animation does not occur on elements inside an ng-view.
One thing I noticed that there is a function on an js file that runs when the page loads.
$(function () {
$('[data-toggle="tooltip"]').tooltip(), $('[data-toggle="popover"]').popover(), $(".navbar-toggle").sideNav({
menuWidth: 260, closeOnClick: !0
}
);
var a = [".btn:not(.withoutripple)", ".card-image", ".navbar a:not(.withoutripple)", ".dropdown-menu a", ".nav-tabs a:not(.withoutripple)", ".withripple"].join(",");
$("body").find(a).ripples(), $(".form-control").each(function () {
$(this).val() && $(this).parent().addClass("filled"), $(this).bind("blur", function (a) {
input = $(a.currentTarget), input.val() ? input.parent().addClass("filled") : input.parent().removeClass("filled"), input.parent().removeClass("active")
}
).bind("focus", function (a) {
input = $(a.currentTarget), input.parent().addClass("active")
}
)
}
)
}
That code runs smoothly on load, and also when I click on a textbox that is on the main page (not in this example). BUT, if I add an input on the html that will be used as an ng-view, it does not run, which leads me to believe that when the js file runs, the ng-view is not rendered yet.
So, is there a way that I can get the ng-views to read all of materialize properties and not have these kinds of issues?
Related
How do I update content loaded with Jquery .load() with javascript?
I'm using two placeholders on every page: one with the navigation bar, and one with the main skeleton of the content, like this:
<body>
<div id="nav-placeholder">
</div>
<div id="content-placeholder">
</div>
</body>
The nav bar and content are both in seperate files and are loaded into the pages with an external javascript file like this:
$(function(){
$("#nav-placeholder").load("nav.html");
});
$(function(){
$("#content-placeholder").load("content.html");
});
So far, it all works nicely. Now, I'm trying to alter the content separately for each page (with JS)
Part of content.html is for example
<h2 id="subheader1">Title</h2>
I'm trying to change the #subheader1 content in the javascript file like so:
$(function(){
$("#nav-placeholder").load("nav.html");
});
$(function(){
$("#content-placeholder").load("content.html");
});
$(document).ready(function() {
document.getElementById("subheader1").outerHTML = "test" ;
});
but that doesn't work (this is aimed at all pages, but it still doesn't work). Probably because it's only seeing the placeholder DIV in index.html and not it's content?
I tried placing the subheader1 div in the index.html to test, and then it did work, but that would take away the efficiency of the placeholder.
Is there any way to do this (or another way to be more efficient with pages with the same (DIV) layout but different text?)
Thanks!
The load method is not synchronous, so
$(document).ready(function() {
document.getElementById("subheader1").outerHTML = "test" ;
});
is executed before the html is loaded in the page.
The doc suggest using a callback function.
it is executed after post-processing and HTML insertion has been performed
I had success using this in my js file:
$(document).ready(function() {
$(function(){
$("#nav-placeholder").load("./nav.html", function() {
document.getElementById("insideNav").outerHTML = "It works !" ;
});
});
});
with <h2 id="insideNav">Original Nav Bar</h2> in my nav.html.
I'm trying to contribute to a project that uses <script type="text/template"></script> for rendering the elements of a page.
My contribution is to change the elements of the page into react components. However when I order the react to render in a specific div with ReactDOM.render() I get an error saying
Uncaught Error: _registerComponent(...): Target container is not a DOM element.
I know that means that react doesn't find the div where to render so propably I will need to load the react script after the div, I've tried that but the error is there again.
I've tried loading the react script otherwise like this
<script type="text/template">
<ul class="new-component-template" id="xblocklist" >
</ul>
<script type="text/babel" src="path to react file"/>
</script>
but when I load the page the error is gone an the script is not loaded at all.
What I need is to load the script when the outer script is called, I.E can I write a function inside <script type="text/template"></script> that actually loads the react script inside.
UPDATE
var ListXblocks = React.createClass({
componentWillMount: function(){
this.setState({Problemstyle: this.props.Problemstyle})
fetch('http://192.168.33.10:8002/XBlocks/')
.then(result=>result.json())
.then(result=> {
this.setState({items:result})
})
},
render:function(){
return(
<div>
{
this.state.items.map((item)=>{return(
<li className="editor-manual" key={item.title}>
<button type="button" className="button-component" data-category="problem" data-boilerplate="">
<span className="name">{item.description}</span>
</button>
</li>)})
}
</div>
);
}
});
ReactDOM.render(<ListXblocks/>, document.getElementById('xblocklist'));
Script tag with type="text/template" doesn't do anything particularly and it just let browser to ignore what inside it. This approach usually uses by templating systems like handlebarjs and React doesn't support it. You can read more about this here. So if you put your React scripts also inside that, the browser is just going to ignore that as well.
Beacuse your ul tag is not a html element, document.getElementById('xblocklist') is going to return null. That's why you get "Target container is not a DOM element." error. So you have to get the html out of the script tag either manually or using JavaScript.
This behavior is happening on a intranet website structured for computer based training. I am using a function to change "id" name of a div using jquery on the fly on a single page.
$('#frameTextBg').attr('id','frameTextBg-horz');
It works fine. The problem is that when I navigate to another page, this functions continues to run and any page with div name #frameTextBg is being renamed to frameTextBg-horz.
I navigate to other pages using jquery to load pages inside a div. Note "var NextPage" is declared in each page by the authoring programs html export:
function NextPage() {
$('#content').load(nextPage)
};
How can I stop this function from running on other pages?
Thanks in advance.
Mark
Here are portions of the html markup relevant to the "outside" container that will load each page inside a div named #content.
...
<body class="mainBody" onLoad="resizeCBT();">
<div id="container">
<div id='content'></div>
<div id="footer">
<p id="footerP">LessonName</p>
<div id="footerPG">00 of 00</div>
<div id="footerNav"></div>
<div id="footerID" style="display:block" ></div>
<div id="control" name="control"><div>
</div>
<script type="text/javascript">
$('#content').load("Menu-0.htm");
$( "#control" ).load( "interface/control.htm #select1" );
document.getElementById('control').style.display="none";
</script>
</body>
...
Next are portions of the markup for a single page that runs the function to rename the id:
...
<script type="text/javascript">
var frame_id = 95675
var graphic_1 = "20.png"
var graphic_2 = ""
var nextPage = "a.htm"
var prevPage = "c.htm"
var thisPage = "b.htm"
var menuTitle = ""
var frameTitle = "title"
var sequence = 20
var totalFrames = 26
var manifestName = "No_Flash"
var instructText = ""
var audioFilename = ""
function runAfterPgLoad() {
$('#frameTextBg').attr('id','frameTextBg-off');
}
</script>
</head>
<body>
<div id="header">
<div id="header1"><h1 id="header1t">headerOne</h1></div>
<div id="header2"><h1 id="header2t">HeaderTwo</h1></div>
<div id="header3"></div>
</div>
<div id="GRAPHIC"><img src="20.png"></div>
<div id="TEXT" class="text">Text here.</div>
<div id="frameTextBg"></div>
<script type="text/javascript">
function NextPage() {
$('#content').load(nextPage)
};
function PrevPage() {
$('#content').load(prevPage)
};
document.getElementById('footerID').innerHTML = frame_id;
document.getElementById('footerPG').innerHTML = sequence + " of " + totalFrames;
if (typeof runAfterPgLoad == 'function') {
runAfterPgLoad();
}
</script>
</body>
</html>
Other pages DO NOT have the function:
function runAfterPgLoad() {
$('#frameTextBg').attr('id','frameTextBg-off');
}
Note that some markup has been omitted because this material cannot be disclosed. Sorry if I accidentally cut off any relevant markup.
You're using ajax to replace PARTS of your page. since you're not reloading the entire page, or using a normal "click to go to next page" system, that function will keep working until you tell it to stop, e.g.
var stop_it_already = false;
if (!stop_it_already) {
$('#frameTextBg').attr('id','frameTextBg-horz');
}
This isn't a definitive answer, because I'm still unclear about how exactly NextPage gets called.
You should never have different HTML elements with the same id. Since it's not something you're meant to do, I'm not even sure the specification for HTML says what should happen, so your page may behave differently on different browsers. Does $('#frameTextBg') represent all frameTextBg elements? Or does the browser only let it be one element and, if so, which one?
I used to work on a project which involved embedding lots of not-quite-identical copies of a website in another website. We had to change all the id attributes to CSS classes. Then, assuming all the frameTextBg elements are in different sections of the website, we could write $('.section-1 .frameTextBg'), $('.section-2 .frameTextBg'), etc.
Note "var NextPage" is declared in each page by the authoring programs html export
My client-side javascript is a little rusty, but I think that any declaration not inside a function definition just goes in the global scope anyway. This could cause problems with the latest copy of NextPage running instead of an earlier one. (But I can't tell because I don't see where NextPage is called from.)
You say you're reloading part of the page. Do you really need to reload the part with the <script> element?
I have the following code in a .tpl file ("comment_form.tpl"). This file is included in 3 different .tpl files ("file_a", "file_b" and "file_c") once each. And finally these 3 files are included in another .tpl file ("somefile.tpl").
<script type="text/javascript">
$(document).ready(function Hide() {
document.getElementById('div').style.display = 'none';
</script>
So basically, the "comment_form.tpl" is loaded thrice in "somefile.tpl" like so:
.....
</div><!-- .span9 -->
{include file="includes/file_a.tpl"} // includes "file_a.tpl" which already includes "comment_form.tpl" (which contains the code).
</div>
.....//some code
{include file="includes/file_b.tpl.tpl"} // "includes file_b.tpl" which already includes "comment_form.tpl" (which contains the code).
The issue is, the code works the first time. As in, out of the three places where the "comment_form.tpl" is loaded in "somefile.tpl", the target 'div' is hidden only the first time. At the next two places the form (div) isn't hidden.
I hope I am clear enough. What could be the reason??
It is perfectly legal to have multiple $(document).ready(function() {}) calls throughout your page.
It seems that you are hiding your element by ID. Note that IDs must be unique, and if you use the same ID multiple times (#div in your example), only ever the first is selected by getElementById(). That's what you are experiencing.
You must give each <div> a unique ID or group them together with a CSS class and hide the whole class.
Here is an example using a CSS class:
<div class="comment_form">some content</div>
<div class="comment_form">some content</div>
<div class="comment_form">some content</div>
<script type="text/javascript">
$(document).ready(function () {
$('.comment_form').css({'display' : 'none'});
}
</script>
By the way it's far more efficient to directly use CSS for the initial 'hidden' state of your <div>. There is no need to execute JavaScript on page load at all:
<style>
.comment_form { display: none; }
</style>
<div class="comment_form">some content</div>
You can still change the display property of your element later via JavaScript in an onClick event, for example.
Here's my issue.
I have a javascript function that update a div when i click the proper link. And it is working.
Since i have cliked the link my div content is updated with another Javascript. This time to close it.
Its fairly simple but i cant get it to work and i dont know why!
Here is the code that is in the page when it load for the first time
The div id config_window
<div id="config_window" class="config_window">
<div id="conception" class="conception">Conception et design graphique Zéro Gravité.
</div>
<div id="admin_btn"class="admin_btn">administration.</div>
<div id="test">test</div>
</div>
Now the Javascript that call for the update inside that div
<script language="javascript" type="text/javascript">
$("#admin_btn").click(
function(){
$('#config_window').addClass('config_open');
config_set('config_window','open','var')
}
);
</script>
So far it's working my div is getting updated and i see the new content. The new content is
<div id="conception" class="conception">Conception et design graphique Zéro Gravité.
</div>
<div id="admin_btn_x" class="admin_btn">Terminer.</div>
<script language="javascript" type="text/javascript">
$("#admin_btn_x").click(
function(){
$('#config_window').removeClass('config_open');
config_set('config_window','close','var')
}
);
</script>
i was expecting that same function to work but its not!! and i dont get why since the first one is.
Could it be becuse my second script is in the div that get updated??
Thanks!
I suspect it's because the element that the second handler is supposed to apply to doesn't exist until after the DIV is updated and the function applying the handler is executed before the DIV is updated -- therefore the handler is not applied. You might want to try using the live handlers for the click event so that it will apply to all elements matching the selector no matter when the element is added. You can add both handlers on page load and they will apply to the elements with those ids whether they are added dynamically or not.
<script type="text/javascript">
$("#admin_btn").live('click', function(){
$('#config_window').addClass('config_open');
config_set('config_window','open','var')
});
);
$('#admin_btn_x').live('click', function() {
$('#config_window').removeClass('config_open');
config_set('config_window','close','var')
});
</script>
Is there a reason you add divide the function into two scripts? I would change your script to something like this:
<script type="text/javascript">
$(document).ready(function() {
$('#config_window').hide(); // just in case
$('#admin_btn').bind("click", function() {
if($('#config_window').is(':hidden')){
$('#config_window').show();
config_set('config_window','open','var')
} else {
$('#config_window').hide();
config_set('config_window','close','var')
}
});
});
</script>