I have a very weird knockout js problem. What happens is that only the first tag in each div is rendered to the DOM, the others just ... don't. The werdest part is this: it does not produce any errors and the rest of the dom renders correctly, secondly it happens most but not all the time? Any guesses?
The template that is being rendered is this:
<div class="row">
<div>
<span data-bind="text: $data.topRows()[0].text() + $data.topRows()[1].text()" />
<input data-bind="value: $data.topRows()[0].inputText" /> <!-- this fails to go into the dom sometimes and every row past the first span and inside this div -->
</div>
<div>
<span data-bind="text: $data.topRows()[1].text()" /> <!-- this is renderdd -->
<input data-bind="text: $data.topRows()[1].inputText" /> <!-- this is not -->
</div>
</div>
I know this is not much to go on but well, I am speechless. RequireJs is used to require all the files.
You have various problems in your proposed snippet:
span elements don't work too well when self-closing, use <span data-bind="..."></span> instead;
you don't close the first comment correctly
as #ilya mentioned you probably want the value binding for inputs
you have a typo for the second input, it starts with <inputdata-bind... (missing a space there
If I fix those four problems your code will work fine.
You should use value binding instead of text for <input>
<span data-bind="text: $data.topRows()[0].text() + $data.topRows()[1].text()" />
<input data-bind="value: $data.topRows()[0].inputText" />
and
<span data-bind="text: $data.topRows()[1].text()" />
<input data-bind="value: $data.topRows()[1].inputText" />
JSFiddle DEMO
Related
I need to control hiding/showing certain spans. I found some examples here and the basic code works. Here is my jsfiddle. There are two topics and when the word more is clicked on, sub-topics are shown. The problem is that all of the sub-topics are shown, not just the ones under the topic that was clicked.
I know the problem is with the same class name being used for the two div sections and if I change the class name of one of them and duplicate the jquery it will work as I want. But this code is being created using a loop function in php and there isn't a set number of possible topics. I suppose I could change the php code to create unique class names but I don't know how to add the jquery code so it will check any number of possibilities. How can this be coded?
<script>
$("#kid-1").hide();
$("#kid-2").hide();
$("#kid-3").hide();
$(".more-kids").click(function() {
$("#kid-1").toggle();
$("#kid-2").toggle();
$("#kid-3").toggle();
});
</script>
<div class="information">
<span>Terms</span>
<span class="more-kids">more</span><br />
<span id="kid-1">First Child</span><br />
<span id="kid-2">Second Chlld</span><br />
</div>
<div class="information">
<span>Conditions</span>
<span class="more-kids">more</span><br /><br />
<span id="kid-3">Third Child</span><br />
</div>
If you are making id's that are numbers, that indicates you should probably be using a class instead. What you could instead do is change your id to a class being "kid". Then toggle the items by using $(this).nextAll(".kid").toggle():
$(".kid").hide();
$(".more-kids").click(function() {
$(this).nextAll(".kid").toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="information">
<span>Terms</span>
<span class="more-kids">more</span><br />
<span class="kid">First Child</span><br />
<span class="kid">Second Chlld</span><br />
</div>
<div class="information">
<span>Conditions</span>
<span class="more-kids">more</span><br /><br />
<span class="kid">Third Child</span><br />
</div>
I am creating a vue web app, I have a simple file input, but there is some logic, due to which someone can hide or show the file input. Problem is once you hide the file input, and show again, it removes the file name. File name does not show while variable still holds the file.
Here is some relevant code and fiddle demonstrating it.
<div id="app">
<button #click="switch1=!switch1">switch1</button>
<div v-if="switch1">
<h4>Select an image</h4>
<input type="file" #change="onFileChange">
</div>
</div>
When you use v-if, the input is not hidden, it's removed from DOM.
To hide an element, use v-show instead:
<div id="app">
<button #click="switch1=!switch1">switch1</button>
<div v-show="switch1">
<h4>Select an image</h4>
<input type="file" #change="onFileChange">
</div>
</div>
Changing <button> innerHTML seems to deactivate mdl-js-ripple-effect.
Use the method mentioned here to dynamically build a new element as the workaround or report this as a bug?
<body>
<button id="myButton" class="mdl-button mdl-js-button mdl-js-ripple-effect">OLD VALUE
</button>
</body>
JS:
window.addEventListener("load", () => {
document.getElementById("myButton").innerHTML = "new value";
});
http://codepen.io/anon/pen/KVvMOE
Tried the componentHandler.upgradeElement(button) on the existing element after setting new html, but as mentioned in the docs it's only good for new ones. Trying to reuse existing elements.
I when the component is parsed and upgraded by the MDL script, a lot of extra attributes are added to the outer node, and extra HTML added inside. That means both that setting the innerHTML will remove some of the necessary markup inside and that the upgradeElement will fail because of the markup that was added to the outer node.
You should try de-upgrading the button with componentHandler.downgradeElements first, then set the innerHTML, then call componentHandler.upgradeElement.
Some untested sample code:
function setText(element,newtext){
componentHandler.downgradeElements(element);
element.innerHTML=newtext;
componentHandler.upgradeElement(element);
}
setText(document.getElementById('myButton'),'new value');
I'm having a similar issue. I'm trying to add some card via innerHtml into the page. The card contains a radio button using the class mdl-radio.
Everything seems to work fine, but the radio button doesn't load the style. I'm seeing a simple radio button not the styled one. If I add the card to the page from the beggining the radio button looks OK, as expected.
Any comment is welcome, I'm not sure how to fix this.
main.innerHTML = '<!-- CARD PREGUNTA-->\
<div class="demo-cards mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet" style="margin: 0 auto; display: none;" id="pregunta_card">\
<div class="demo-updates mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--12-col-desktop">\
<!-- Contenido -->\
<div class="mdl-card__supporting-text mdl-color-text--grey-600">\
<h2 class="mdl-card__title-text" id="pregunta_card_title"></h2>\
<br>\
<br>\
<!-- Radio Button 1 -->\
<label id="opt1" class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option1">\
<input type="radio" id="option1" class="mdl-radio__button" name="options"/>\
<!-- intitial state checked using attribute checked -->\
<span class="mdl-radio__label" id="option1_value"></span>\
</label>\
</div>\
</div>'
I am using jsfiddle for the first time, and it doesn't seem to recognize the css styles. It also does not display the elements withing the tag.
Here is the saved jsfiddle page for it: http://jsfiddle.net/s5LXc/
Is there anything that I did wrong there to get the unexpected result that I did?
Thanks!
Check this working fiddle: http://jsfiddle.net/s5LXc/2/
You were missing your outermost DIV container with a class of "nav_bar".
Your HTML structure is also malformed in at least one place, such as (inverted SPAN and FORM tags):
<form name="form" method="post" id="header_search">
<span style='text-align: center; float: left;'>Search
<input type="text" size="10" id="search_string">
<input type="submit" value="Search"></input>
</form>
</span>
You show a class of 'nav_bar' but there is no such thing in your html.
You're using the wrong class in your nav container.
<div class="nav">
Instead of
<div class="nav_bar">
One thing's for sure: you reference the class nav_bar a lot in your css, but it doesn't appear in your html at all.
I have a page that is like this:
<div id="contBody">
<br />
<br />
<!-- Maybe more, it's a variable number of <br /> that can appear -->
<h1 id="header">Test</h1>
</div>
Since the number of <br /> before the <h1> varies I and I want to remove them programmatically, how I can do it using jQuery?
If you want to remove all of them before the h1 elements, do this:
$('br + h1').prevAll('br').remove();
Using the next-adjacent-selector[docs], this will find all <h1> elements that are preceded by at least once <br> element.
Then it uses the prevAll()[docs] method to select the previous <br> elements, and the remove()[docs] method to remove them.
You can find them all with .prevAll() and .remove() them, like this:
$("#header").prevAll("br").remove();