Develop Reference

Why do my inputs on the page disappear after refreshing the page, but the inputs are saved in local storage in the console?

link to my web application: https://malekmekdashi.github.io/work_day_scheduler/
link to my github repo: https://github.com/malekmekdashi/work_day_scheduler
I cannot seem to solve this issue that I'm having. My goal is that whenever I refresh the page after inputting some values in the text box, the values will remain on the page along with local storage. However, I am unable to do so. If someone can be so kind as to help me solve this issue, I would greatly appreciate it. Here is a little example of the code that I'm working with
HTML:
<div class="row time-block" id="1">
<div class="col-md-1 hour" id="1">9am</div>
<textarea class="col-md-10 description" id="inputValue"></textarea>
<button class="saveBtn col-md-1"><i class="fa fa-save"></i></button>
</div>
Javascript:
$('.saveBtn').on('click', function() {
var inputValue = $(this).siblings('.description').val();
localStorage.setItem("inputValue", inputValue);
});
$('inputValue .description').val(localStorage.getItem('inputValue'));

Your selector is wrong in two ways.
Like in the comments already said: Your return will be an array. You have multiple ids inputValue with class description.
You want to select id inputValue, which means you need to use #inputValue. Also you need to combine them by leaving out the whitespace otherwise you search for childrens. Correct jQuery would be $('#inputValue.description')

Angular JS + Isotope: "sort by" throws error

I am trying to get Isotope 2.2.2 and Angular Isotope to work together. I have the grid working, and filtering works perfectly. My problem arises with Sorting.
I constructed json data similar to the one in his example, each item having a date and a name, and am using an angular ng-repeat to create the isotope items. As I said, this is all working, and filtering with buttons works like a charm.
According to the instructions, adding sorting works by adding a second button group like so:
<h4>Selector and Value-Based Sort</h4>
<div class="btn-group" opt-kind="" ok-key="sortBy">
<button type="button" class="btn btn-default" ok-sel=".name">Name</button>
<button type="button" class="btn btn-default" ok-sel="[date]" ok-type="integer">Date</button>
</div>
I did this, and tried many ways, but every time I add the ok-sel attribute, the whole thing takes a dive and I get an angular error in the console:
TypeError: $elem.find is not a function
I have tried removing and adding things, and even with one button, there are no errors (but of course the button does nothing) without the ok-sel attribute in the sort buttons.
Any suggestions?

Using thymeleaf variable in onclick attribute

In my current spring-boot project, I have one view with this html code:
<button type="button" class="btn btn-primary" onclick="upload()" th:utext="#{modal.save}"></button>
in the onclick attribute, the call for the function upload() should have one parameter, which value is stored in the thymeleaf variable ${gallery}.
Anyone can tell mehow to use the expression in the above command?
I already try this:
th:onclick="upload(${gallery)"
th:attr="onclick=upload(${gallery)"
None of this worked.

thymeleaf 3.0.10 th:onclick
thymeleaf variable not working
This should work:
th:attr="onclick=|upload('${gallery}')|"

I solve this issue with this approach:
th:onclick="|upload('${command['class'].simpleName}', '${gallery}')|"

This should work:
<button th:onclick="'javascript:upload(' + ${gallery} + ')'"></button>

In 3.0.10 version of Thymeleaf
use [[ ]] it's more easier , thymeleaf goes to inject the value in template
if the value is string no quote need
<button th:data-id="${quartzInfo.id}"
th:onclick="del(this,[[${quartzInfo.id}]]" type="button">
</button>

The older replies does not work in the new version of 3.0.10. Now you need:
<button th:data-id="${quartzInfo.id}"
onclick="del(this,this.getAttribute('data-id'))" type="button">
</button>

In fact this one is working too :
th:attr="onclick=${'upload('+gallery+')'}"

yes it's to late, but i hope this will help people who need it
try this
th:onclick="'upload('+${gallery}+')'"

If you are going to use attr, where there is a string the HTML will crash and you have to do the following, in case of string values.
th:attr="onclick=${'toggleContractLine('+ ''' + contract.id + ''' + ')'}"

Angular ui.bootstrap.buttons not updating after element remove

I have a set of Radio-bottoms, that is driven off a Array. for a Multi-Choice answer setup.
<div ng-repeat="option in options">
<div>
<button type="button" style="min-width: 100px" class="btn btn-default" ng-model="question.answer" btn-radio="'{{option.option_id}}'">{{option.option_text}}</button>
</div>
</div>
When I add to the array, things are good, mainly since the preset answer is lower than the new element in Options.
If I then delete one of the Options above the answer, and redefined the new Answer id.. the Radio buttons are not updated correctly. I know the answer is updated as I have it displayed on the screen. but the buttons are not updated.
UPDATE NEW PLUNKER!
I have done a plunker : http://plnkr.co/edit/2XWFwClewqtcXWPY8ZSK. As you can see if you select the different options the answer follows.. Now if you select the third option and remove the first or second option you will see that the answer will update but the check buttons is not updated right.
Can someone shed some light on this ?
Thanks in advance
Kim

With some genouros help from the ui team did I find that it was a simple type casting error.
$scope.cp.options[i].option_id = i + 1;
Should be
$scope.cp.options[i].option_id = "" + (i + 1);
I have updated the plunker if anyone need the full sample. Here

dynamic window.find not working with jQuery

I can't for the life of me figure out why this isn't working.
I want to search the current page for text using a search box. I googled and found this: http://www.javascripter.net/faq/searchin.htm . I implemented the code into my site, but it doesn't work. the function ( findString() ) works, but only when I hard-code a string (as in i can't use javascript or jquery to get the value of a text input). I made this fiddle: http://jsfiddle.net/alyda/CPJrh/4/ to illustrate the problem.
You can uncomment different lines to see what I've tested.

jQuery has a method :contains() that will make easier what you are looking for.
Take a look here: fiddle
$("button[type='submit']").click(function () {
var string = $('#search').val();
var matched = $('li:contains(' + string + ')');
matched.css('color','red');
console.log(matched);
return false;
});

I found a fix (sort of). It seems that the input needs to be placed well AFTER the content to be searched in the DOM. That means I've done the following:
<section class="content">
<h2>Fire</h2>
<h3>Fire Extinguishers</h3>
<ul>
<li>Model 240</li>
<li>Model C352, C352TS</li>
<li>Model C354, C354TS</li>
</ul>
...
<div id="navbar">
<ul>
...
</ul>
<input id="search" type="text" class="form-control pull-left" placeholder="Search for part number">
<button id="submit" type="submit" class="btn btn-default pull-left" style=" margin-top:6px;">Search</button>
</div>
as you can see, I've moved the input (which is in the navbar div) BELOW all of the text I want to search, and used CSS to programmatically place the navbar at the top of the page. I don't particularly like this setup (as it messes with the flow of content) but since I was looking for the quickest and simplest implementation of a single-page search, it will have to do.
I would still love to know why this happens, when the javascript is at the end of the DOM where it belongs...

In firefox I noticed that the fiddle (v4) as given in the question worked, but not in the way the asker expected it to.
What happens in firefox is that the function does find the value..: you have just entered it in the input-field. Then the browser's find method seems to hang in the 'context' of the input 'control' and doesn't break out of it. Since the browser will continue to search from the last active position, if you select anything after the input-field, the function works as expected. So the trick is not to get 'trapped' in the input-field at the start of your search.
A basic (dirty) example on how to break out of it (not necessarily the proper solution nor pure jquery, but might inspire a useful routine, since you now know the root of the problem in FF):
$( "button[type='submit']" ).click(function(){
var tst=$('#search').val(); //close over value
$('#search').val(''); //clear input
if(tst){ //sanity check
this.nextSibling.onclick=function(){findString( tst );}; //example how to proceed
findString( tst ); //find first value
} else { alert('please enter something to search for'); }
return false;
});
Example fiddle is tested (working) in FF.
PS: given your specific example using <li>, I do feel Sergio's answer would be a more appropriate solution, especially since that would never run line: alert ("Opera browsers not supported, sorry..."), but the proper answer to your window.find question is still an interesting one!
PS2: if you essentially are using (or replicating) the browser's search-function, why not educate the user and instruct them to hit Ctrl+F?
Hope this helps!

I had same problem in an angularjs app and I fix it by changing DOM structure.
my HTML code was something like this:
<body>
<div class="content" >
<input class="searchInput" />
<p>
content ....
</p>
</div>
</body>
and I changed it to something like this:
<body>
<div class="search">
<input class="searchInput" />
</div>
<div class="content">
<p>
content ....
</p>
</div>
</body>
Note: I'm aware that this topic is old.