How can I reset the contents of a div generated by jQuery? - javascript

I am using the Onsen UI framework with jQuery and my HTML is like this in its initial state?:
<ons-scroller id="category-list">
</ons-scroller>
Then I have a function that populates this div:
function createElement(elementId,elementvalue)
{
var content = document.getElementById(elementId);
content.innerHTML=elementvalue;
ons.compile(content);
}
which is then called in the code as:
if (data.has_menu_category==2){
var htm='';
htm+='<ons-list>';
$.each( data.menu_category, function( key, val ) {
htm+='<ons-list-item modifier="tappable" class="row" onclick="loadmenu('+
val.cat_id+','+val.merchant_id+');">'+val.category_name+' <span style="float:right;">'+val.items_count+'</span></ons-list-item>';
});
htm+='</ons-list>';
createElement('category-list',htm);
}
The category-list is then populated with items. I cannot figure out however how to RESET that list back to initial state. Basically back to
<ons-scroller id="category-list">
</ons-scroller>
How can I do that?

You can simply set the html to an empty string.
jQuery way:
$('#category-list').html('');
core javascript way:
document.getElementById('category-list').innerHTML = '';

Related

Save toggleClass state of dynamically generated divs and store with Cookie/LocalStorage

I am trying to save my toggleClass state of multiple dynamically generated divs and store them with LocalStorage, so they're available either on page refresh or re-visiting the page. I stuck in the middle of my code and have no more ideas.
Any solutions i found here, will not work, either they refer to a single element or they use a mix of addClass/removeClass and save state.
Saving with Cookie would be an option too.
Html:
<div id="row_parent_41" class="parent">
<div id="page_41">
<span class="showhide" id="more_2"><img src="plus.png" /></span>
</div>
<div id="holder_41" class="child">stuff goes here</div>
jQuery:
var inactiveHolder = localStorage.getItem('child') == 'true';
$(".showhide").on('click', function() {
$(this).closest(".parent").find(".child").slideToggle().toggleClass('inactiveHolder');
$('.child').toggleClass('clicked', inactiveHolder );
return false;
});
Does this code work for you?
var inactiveHolder = localStorage.getItem('child');
// set initial state
if (inactiveHolder == 'true') {
$('.child').addClass('clicked');
}
// change localstorage and class
$('.showhide').on('click', function() {
var element = $(this).closest(".parent").find(".child");
$(element).slideToggle().toggleClass('clicked');
localstorage.setItem('child', $(element).hasClass('clicked'));
return false;
});

DIV not displaying all JSON retrieved data

Why is this code not displaying all the data. It cuts off the display.
<script type="text/javascript">
$(document).ready(function() {
var url = "http://xxxxxxx/integration/json_news.php";
$.getJSON(url, function(result) {
console.log(result);
$.each(result, function(i, field) {
var source = field.source;
var summary = field.summary;
var heading = field.heading;
var news_date = field.news_date;
$("#newsview").append("<tr class='even gradeA' width = '30px'><td><li><b>"+heading+" - "+news_date+"</b> <br />"+summary+"</i></li><br /></td></tr>");
});
});
});
</script>
This is the DIV I am calling the ajax code.
<!--NEWS PAGE -->
<div data-page="news" class="page cached">
<div class="page-content">
<div id="newsview"></div>
</div>
</div>
I am using IntelXDK and building a Framework7 hybrid application
Somehow I can figure out why this is so when I test on the mobile phone. Could it be that Framework7 doesnot display data beyond certain size? Or my code is faulty somehow.
Unfortunately your js-generated HTML is not valid.
You're appending table rows tr to div. They also contain li.
tr should be a child node of table and li should be a child node of ul or ol.
Also width = '30px' should be without spaces: width='30px'.
BTW, do you really want so narrow container for your content?
And you have closing </i> tag which does not have open <i> before.
I suggest the following:
$("#newsview").append(
'<div class="even gradeA"><b>'+
heading+ ' - ' +news_date+
'</b><br><i>' +summary+ '</i></div>'
);
And then use CSS to style it.

Change value of input with jquery under this class

jQuery:
$('.clickhere').click(function(e){
e.preventDefault();
$(this).closest('.row').children('.abc').hide(); // working
$(this).closest('.row').children('.abc').children('input').value = ''; // not working
$(this).closest('.bookingrow').children('.addressbox').children('input').value(''); // alternative - not working
});
html
<div class="row">
<div class='abc'>
<input type='text' class='unknown' />
</div>
<div class="clickhere">hide</div>
</div>
my target is if i click the "clickhere" class, content under "abc" class will hide and whatever content added by customer on those input box, they will be clear.
same html used multiple time on the same form. that's why using "$(this)".
any solution? what i am doing wrong?
Thanks in advance.
You need to use .val() to set the value, jQuery methods normally will return a jQuery object not a dom element reference so you would not have a properly called .value.
$(this).closest('.row').find('.abc input').val('');
So
$('.clickhere').click(function (e) {
e.preventDefault();
//cache the value of .row since it is used multiple times
var $row = $(this).closest('.row');
$row.children('.abc').hide(); // working
$row.find('.abc input').val('');
});

Add dynamic list items to dynamically created panel with a istview

I'am using jquery mobile 1.3.2 for my web project.
The following code creates a panel for all pages:
function injectPanelIntoAllPages(){
console.log("IncetPanel");
var panel = '<div data-role="panel" id="mypanel" data-position="left" data-display="push">' +
'<div><ul data-role="listview" id="history"></ul></div> </div>';
$(document).on('pagebeforecreate', '[data-role=page]', function () {
if ($(this).find('[data-role=panel]').length === 0) {
$('[data-role=header]').before(panel);
}
$(document).on('pagebeforeshow', '[data-role=page]', function () {
$(this).trigger('pagecreate');
});
});
}
Now i want to add (dynamically) list items to the listview in the panel, but it don't works.
For adding list items i use the following method:
function addToHistory(value) {
$("#history").append(
"<li id='history-element'>" + value + "</li>");
$("#history").listview("refresh");
}
What can i do to solve this issue?
Note that you're using same Id for both panel and listview. This isn't recommended, however, it still can work as long as you specify which element to target within active page.
Another note, you don't need to call any enhancement method once you append panels dynamically, since you append them on pagebeforecreate. They will be created/initialized by jQM on that event.
$(document).on('pagebeforecreate', function () {
if ($(this).find('[data-role=panel]').length === 0) {
$('[data-role=header]').before(panel);
}
});
To append elements into listview, you need to look for it into active page's. Otherwise, new elements will be added to first element with #history ID.
var listview = $.mobile.activePage.find("#history");
listview.append("elements").listview("refresh");
Demo

How to get text value in jquery?

I have three elements, which are sliding on the screen, i want to get the text of element which is currently showing on the screen, I tried .text() function, but this returns the text of all the s elements, is there any way using javascript or jquery to do this.
<div id="text">
<span style=" font-size:100px;text-align:center;">koko</span>
<span style=" font-size:100px;text-align:center;">abc</span>
<span style=" font-size:100px;text-align:center;">efh</span>
</div>
$(document).ready(function(){
$('#text').mouseover(function(){
var txt = $('#text span').text();
alert(txt);
});
});
demo or another here
code
$('#text > span').mouseover(function(){
var txt = $(this).text();
alert(txt);
});
Since you are using the cycle plugin, the active slide is given the class "activeSlide". You can get the text of the active slide by doing something like $('.activeSlide').text();
You can also set a callback in the options while initialising the cycle plugin. You can look at the options that you can set with cycle here: http://jquery.malsup.com/cycle/options.html
You will be able to use the "after" event callback in case you want to do something everytime the slide changes.
$(document).ready(function () {
$('#text').cycle({
after: function (currSlideElement, nextSlideElement, options, forwardFlag) {
alert($(nextSlideElement).text());
}
});
});

Categories