New on dev and JS following a (apparently) simple tutorial I got stacked in a silly problem, a function that has to select categories just adding or removing attributes.
It adds (and hides) but doesn't remove (and lets appear).
Function:
var showAndHideSongs = function(event, filter) {
// get all songs that match the genre of the filter
var songsByGenre = Array.from(
document.querySelectorAll('#playlist [data-genre="' + filter + '"]')
);
// if checkbox is checked, show songs
// otherwise, hide them
if (event.target.cheched) {
songsByGenre.forEach(function(song) {
song.removeAttribute("hidden");
});
} else {
songsByGenre.forEach(function(song) {
song.setAttribute("hidden", "true");
});
}
};
HTML:
<ol id="playlist">
<li data-genre="pop">
"Thank U, Next" by Arianna Grande
</li>
<li....
Checkboxes are dynamically created:
var renderCheckLists = function(genres) {
app.innerHTML =
"<h2>Filter Songs</h2><h3>By Genre</h3>" +
genres
.map(function(genre) {
var html =
"<label>" +
'<input type="checkbox" checked data-filter="' +
genre +
'" checked>' +
genre +
"</label>";
return html;
})
I tried literally everything but the solution
As I said it removes but looks like if "removeAttibute" doesn't work.
I tried the removeAttribute in a blank test project and actually works perfectly, so the problem is not there
Thanks in advance for the help
Related
I am trying to display the appropriate input for the correct icon displayed. I structured all of my elements as an object and created the key to match the id of the matching icon. I then created the element to the appropriate input to match.
My issue is, when I click on the icon, nothing outputs. I do not get any errors, my console.log is showing me the looped results.
Does anyone see what I am doing wrong? If you click on the blue Zillow icon, then the input with the placeholder "Zillow" should appear. The same thing with the Realtor one, except it be associated with the Realtor input/icon.
var reviewInputs = {
"zillow-review": '<input type="url" id="zillow-input" placeholder="Zillow">',
"realtor-review": '<input type="url" id="realtor-input" placeholder="Realtor">'
};
$('.review-icon-select').click(function() {
$('#review-site-edit-wrap').addClass('active');
var reviewIconClicked = $(this).attr('id');
$.each(reviewInputs, function(key, element) {
console.log('key: ' + key + '\n' + 'value: ' + element);
if (reviewIconClicked == reviewInputs) {
reviewInputs.forEach(function(site) {
$('#review-site-edit').append.reviewInputs[element];
});
}
});
//$(reviewIconClicked':contains("SomeText")').each(function () {
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li class="review-icon-select" id="zillow-review"><img src="https://s3.amazonaws.com/retain-static/www/zillow.jpg" alt="Zillow"></li>
<li class="review-icon-select" id="realtor-review"><img src="https://s3.amazonaws.com/retain-static/www/realtor.com.png" alt="Realtor.com"></li>
<div id="review-site-edit"></div>
You just need to check if the id of the clicked element is a property of your object.
No loop needed.
var reviewInputs = {
"zillow-review": '<input type="url" id="zillow-input" placeholder="Zillow">',
"realtor-review": '<input type="url" id="realtor-input" placeholder="Realtor">'
};
$('.review-icon-select').click(function() {
//$('#review-site-edit-wrap').addClass('active'); // Maybe used...
var reviewIconClicked = $(this).attr('id');
if(reviewInputs.hasOwnProperty(reviewIconClicked)){
$('#review-site-edit').find("input[type='url']").remove();
$('#review-site-edit').append(reviewInputs[reviewIconClicked]);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li class="review-icon-select" id="zillow-review"><img src="https://s3.amazonaws.com/retain-static/www/zillow.jpg" alt="Zillow"></li>
<li class="review-icon-select" id="realtor-review"><img src="https://s3.amazonaws.com/retain-static/www/realtor.com.png" alt="Realtor.com"></li>
<div id="review-site-edit"></div>
Instead of using
if (reviewIconClicked == reviewInputs) {
try
reviewInputs['reviewIconClicked']
I'm new in jquery mobile. I'm trying to do a dynamic split button list view.
The first button is working fine that means when it is clicked, the item list name is passed to the "gotoQuantity(this)" function. However, the second button is not working. That is the list view name is not being passed to "deleteItemFromList(this)" function.
Please how can I solve this problem?
Html:
<ul data-role="listview" data-filter="true" data-input="#myFilter" data-autodividers="true" data-inset="true" id = itemsList data-split-icon="delete">
</ul>
Script:
function loadMainList() {
//loads main items list
$("#itemsList").empty();
for (var key in mainList) {
itemToList = key;
$('#itemsList').append('<li><a onclick="gotoQuantity(this)">' + itemToList + '</a><a onclick="deleteItemFromList(this)">' + itemToList + '</a></li>');
};
$("#itemsList").listview('refresh');
}
function gotoQuantity(obj) {
alert($(obj).text());
}
function deleteItemFromList(obj) { //deletes item from main list
alert($("#itemsList").text());
}
When jQuery Mobile enhances the list, the split button text is removed and then added as the title attribute of the anchor. So your quick fix would be
function deleteItemFromList(obj) { //deletes item from main list
alert($(obj).prop('title'));
}
However, i would take SGA's approach from the comments and make the item id a data attribute of the LI and then use event delegation to create the handlers and retrieve the id:
$("#itemsList").empty();
for (var i=0; i<mainList.length; i++) {
itemToList = mainList[i];
$('#itemsList').append('<li data-id="' + itemToList + '">' + itemToList + '' + itemToList + '</li>');
};
$("#itemsList").listview('refresh');
$("#itemsList").on("click", ".goQuant", function(){
alert($(this).parent("li").jqmData("id"));
});
$("#itemsList").on("click", ".deleteItem", function(){
alert($(this).parent("li").jqmData("id"));
});
DEMO
I have created one html which contains search box. After searching, I'm getting the data in list. But when I click on that I'm getting the value of all list item by using this
var text = $(this).text(); method
In my app, if I click on one item only it should give me only that value of list item not other. I'm making a mistake somewhere, but I don't know where.
Here is my code:
HTML
<ul data-role="listview" class="ui-li-icon">
<li id="list"></li>
</ul>
And here is my JavaScript code:
function successCallback(responseObj)
{
// alert(JSON.stringify(responseObj));
form.reset();
dataj=JSON.stringify(responseObj);
len=dataj.length;
for(i=0;i<len;i++)
{
var output = "<ul>" + responseObj.merchants[i].imageFileName+ " " + "<font size=3 color=green>" + responseObj.merchants[i].merchantName + "</font>" +"</ul>";
$('#list').append(output);
}
$('#list').click(function() {
var index = $(this).index();
var text = $(this).text();
alert('Index is: ' + index + ' and text is ' + text);
});
}
So when I'm searching for some a item. I'm getting list of:
ab
abc
But when I clicked on it. I get value of both ab and abc. I just want only one value where I have clicked.
//replace your click event by below code
$('.ui-li-icon li').click(function() {
var index = $(this).index();
var text = $(this).text();
alert('Index is: ' + index + ' and text is ' + text);
});
$('#list').append(output);
I believer list is the id you are giving to list items i.e.
Now, this will confuse the browser because id should be UNIQUE and here you are giving this id to all the list items.
If you fix this, your problem should be resolved!
Or you could simply attach click event using this
$('.ui-li-icon li').click //Your click event handler
It's very difficult to understand what you are asking. From what I can tell you're looking for something like this:
$('#list li').on('click', function(){
alert("index: "+$(this).index() + " value: "+ $(this).text());
});
Here's a fiddle http://jsfiddle.net/Jw8qz/
I have the following bit of data(JSON) stored in a session:
Prescription: [{"medID":"id1","medName":"name1","medQty":"qty1","medDirec":"Directions1"}, {"medID":"id2","medName":"name2","medQty":"qty2","medDirec":"Directions2"}]
I want to get these information automatically "displayed" inside a Listview (jQuery Mobile) on page load, for this I have come up with the following:
$(document).ready(function () {
window.addEventListener('load', OnStorage, false);
});
function OnStorage(event) {
if (window.sessionStorage) {
var retrievedData = sessionStorage.getItem("Prescription");
var PrescriptionJSON = JSON.parse(retrievedData);
var prescLength = PrescriptionJSON.Length();
for (var i = 0; i < PrescriptionJSON.Length(); i++) {
var text = '<h2>' + PrescriptionJSON[i].medName + '</h2>' +
'<p><strong>Quantity: </strong>' + PrescriptionJSON[i].medQty + '</p>' +
'<p><strong>Directions: </strong>' + PrescriptionJSON[i].medDirec + '</p>'
$('<li />', {
html: text
}).appendTo("#summaryList ul");
//$("#summaryList").append(text);
//alert(retrievedData);
}
$('#summaryList').listview("refresh");
$('#summaryList').trigger("create");
}
}
When I uncomment //alert(retrievedData); I get the JSON inside an alert popup, but when I call //alert(PrescriptionJSON); (the parsed variable) I get something like [object, Object]. Nonetheless, I don't know if this is worth mentioning but just in case I am.
Basically I don't know what is wrong in the script above, because I don't get anything from the JSON data appended to the listview.
Just for reference I have this on my HTML side.
<ul id="summaryList" data-role="listview" data-inset="true">
<li data-role="list-divider" style="text-align:center">Prescription Summary</li>
</ul>
Please note that the length of the data (Prescription) will be dynamically created so the length may not always be 2 like the example above.
I have gone through a good 2 hrs researching online and have found similar questions but none could help me solve my problem. I've also had a look at http://www.copterlabs.com/blog/json-what-it-is-how-it-works-how-to-use-it/ and learned a few more things but still have not be able to work my way around my problem.
Any suggestions or questions are greatly welcomed!
var PrescriptionJSON = '[{"medID":"id1","medName":"name1","medQty":"qty1","medDirec":"Directions1"}, {"medID":"id2","medName":"name2","medQty":"qty2","medDirec":"Directions2"}]';
localStorage.setItem("PrescriptionJSON", PrescriptionJSON);
function OnStorage(event) {
if (window.localStorage) {
var retrievedData = localStorage.getItem("PrescriptionJSON");
var obj = $.parseJSON(retrievedData);
var li = "";
$.each(obj, function(key, value) {
li += '<li><h2>' + value.medName + '</h2><p><strong>Quantity: </strong>' + value.medQty + '</p><p><strong>Directions: </strong>' + value.medDirec + '</p></li>'
})
$('#summaryList').append(li).trigger("create");
$('#summaryList').listview("refresh");
}
}
I am having the drop down list by selecting the country sode the state drop down list populated dynamically using javascript
<div id="ddlState" class='selectBox'>
<span class='selected' id="StatesID">Select a State</span>
<span class='selectArrow'>▼</span>
<div class="selectOptions" id="stateSelectOption">
<span class="selectOption" id="ddlStateText" >Select a State</span>
</div>
</div>
on clicking country the state is populated for tht the code is below
$('#CountriesID').click(function () {
var items;
$('#CountriesID').removeClass("input-validation-error");
if (!$("select#CountriesID").val() == "Select a Country") {
document.getElementById("disableasterisk9").style.display = "";
}
else {
document.getElementById("disableasterisk9").style.display = "none";
}
var countryid = $('#CountriesID').text();
$.getJSON(
"#Url.Action("StateList1", "UserRegistration")" + '/' + countryid,
function (data) {
var items = "<span id='ddlStateText' class='selectOption'>Select a State </span>";
$.each(data, function (i, state) {
items += "<span id='ddlStateText' value='" + state.Value + "' class='selectOption'>" + state.Text + "</span>";
});
$('#stateSelectOption span').html(items);
}
);
});
the list is populated but the selection is not working properly it rendering all the state items in one span tag so for selecting any element all list get selected
I need that the individual element should get selected
What see in the code on this line is that you are adding your html inside the span, so just take away that:
$('#stateSelectOption span').html(items)
The line must look like this (it will insert the code inside the div and not the span):
$('#stateSelectOption').html(items)
I tested it on jsfiddle:
http://jsfiddle.net/uz2vf/