I dynamically create bootstrap 4 columns based on an array length. My array has 4 objects in it so it is printing 4 col-sm-3s.
That is being accomplished with this js:
for (var i = 0; i < allChars.length; i++) {
var num = Math.floor(12 / allChars.length);
$('#allCharsRow').append("<div class='col-sm-" + num + "' id='char-col" + i + "' data-toggle='tooltip' data-placement='top' title='" + allChars[i].toolTipTitle + "'><div class='card'><div class='card-header text-center text-white'> <h4 class='display-6'>" + allChars[i].class + "</h4></div>" + allChars[i].mainGif + "<div class='card-footer'><button class='btn btn-link text-white btn-block' id='charBTN" + i + "'>Choose " + allChars[i].class + "</button></div></div></div></div>")
}
That is all well and good until one of the objects is selected. I have a .fadeOut on button click.
$('#char-col0').fadeOut('slow');
So whichever column is chosen, that whole column disappears. Then the row recalculates and it doesn't look as good. Is there a way I can get the row to not recalculate - i.e. meaning can I get it to think there's still a column there but hide the contents of that column from the user?
I've tried not creating the columns dynamically. I've tried .hide('slow') instead of fadeOut...
.hide() transitions the element's CSS to display: none, which means it is completely removed from the page. What you really want to do is keep the element on the page (so that it keeps taking up space), but make it invisible to the user. In other words, you want to change its opacity to 0:
.fadeTo( "slow", 0 )
Here is the full API reference: https://api.jquery.com/fadeTo/
Related
I'm trying to put elements inside other elements dynamically using Javascript without refreshing the page, the AJAX part of it works and is functional. However for some unknown reason my code closes automatically.
Here is a snippet of the code, and you can see that it's no actually closed. But after running the code in a browser it is closed
HTML
<div id="Events">
Javascript
Get = document.getElementById("Events");
Get.innerHTML = "<div class='large-6 columns Pages' id='Page" + PN + "' style='background-color: #" + i + i + i + ";'>";
Get.innerHTML = Get.innerHTML + "<div class='large-6 columns Pages' id='Page" + PN + "' style='display: none; background-color: #" + i + i + i + ";'>";
The results on the page source are:
<div id="Page1" class="large-6 columns Pages" style="background-color: #000;"></div>
<div class="EventsClass"></div>
As you can see, this is a problem as I am trying to put elements inside elements. However I can't due to the closing tags.
I've search for a few hours and can't find a solution or even a cause to this.
There is NO closing tags, yet it is closed automatically. Is there a way to override this? Or bypass it?
From the documentation:
The innerHTML property sets or returns the HTML content (inner HTML) of an element.
Clearly, the content returned by this property has to be well-formed HTML and will definitely be rendered by browser with closing tags.
If you want to use elements inside elements and update the HTML of your desired GET object. Just create a normal string variable out of the content that you want to add and then sanitize it later on, and when you have the complete content that you desire, then update the .innerHTML with something like:
//content is a variable that just holds the string representing the HTML Content
var content = "<div class='large-6 columns Pages' id='Page" + PN + "' style='background-color: #" + i + i + i + ";'>";
content += "<div class='large-6 columns Pages' id='Page" + PN + "' style='display: none; background-color: #" + i + i + i + ";'>";
//close the divs or add more elements to the variable content
Get.innerHTML = content; //At the end.
I hope this gets you started in the right direction.
Ive been desperately trying to get this to work.
Iknow there are probably better ways to do this other than the way I am trying but its for an assignment and has to be done this way.
I am creating a simple shopping cart/ the cart does not have to add a total just get the items inside of the panel (if anyone knew how to add the price also that would be brilliant but not 100% necessary)
So I have displayed items of json using json and ajax, on page ready the items are on show as so (there are about 12 items):
so I have the panel hidden, when the user clicks on a button (the blue button) I want the json information and the json price to appear inside the panel.
here is a snip of one of the items from my json file (which is called result.json:
{
"appleitems":[
{
"Product_id":"Iphone5",
"Information":"Iphone 5 64GB",
"Imgpath":"image/iphone5.jpg",
"Price":"200.00"
}
]
}
This ishow my items are displayed:
$.getJSON('iproducts.json',function(products){
var output = "";
$.each(products.appleitems, function(i, product) {
output +=
"<div class=\"col-xs-12 col-sm-6 col-md-3\"><div class='panel panel-default'><div class='panel-footer'><h4 class='text-center'>"
+ products.appleitems[i].Product_id
+ "</h4></div>" + "<img src ='" + products.appleitems[i].Imgpath + "' style='width:100%;height:250px; display: block;' id='appleinfo_"
+ products.appleitems[i].Product_id + "' /><h5 class='text-center'>" + products.appleitems[i].Information
+ "</h5><div class='panel-footer'>`<button class='btn btn-primary btn-block' id='btnadd'>£" + products.appleitems[i].Price+"</button>`</div></div></div>";
});
$("#container").html(output);
});
and you will notice the button that I want clicked to display the json is btnadd:
<button class='btn btn-primary btn-block' id='btnadd'>£" + products.appleitems[i].Price+"</button>
so when the user clicks btn add I want the json "information" and "price" to display inside of the pannel cart:
<div class="panel panel-default">
<div class="panel-body" id="cart"></div>
I have started the script for this:
$(document).ready(function() {
//Hide alert when page loads
$("#cart").hide();
//get the item into the panel
$("#btnadd").click(function(event){
$.getJSON('result.json', function(add) {
...
});
});
});
First of all, You are having same Id value for all the buttons(inside the loop). Duplicate Id's are not valid. So may be you can remove that and add a css class to the button for the jQuery selection. Also i would recommend keeping the price and information in HTML5 data attributes on the button for easier read.
var output ="";
$.each(products.appleitems, function(i, product) {
output += "<div><div>"
output +="<button class='btn btn-primary btn-block addBtn' data-info='"+
product.Price +"' data-price='"+
product.Information +"'>£" + product.Price+"</button>";
output +="</div></div>";
});
And listen to the click event on this specific css class
$(function(){
$(document).on("click",".addBtn",function(e){
e.preventDefault();
var _this=$(this);
var c=_this.data("info") + " " +_this.data("price");
$("#cart").html(c);
});
});
Here is a working sample
I'm trying to put elements inside other elements dynamically using Javascript without refreshing the page, the AJAX part of it works and is functional. However for some unknown reason my code closes automatically.
Here is a snippet of the code, and you can see that it's no actually closed. But after running the code in a browser it is closed
HTML
<div id="Events">
Javascript
Get = document.getElementById("Events");
Get.innerHTML = "<div class='large-6 columns Pages' id='Page" + PN + "' style='background-color: #" + i + i + i + ";'>";
Get.innerHTML = Get.innerHTML + "<div class='large-6 columns Pages' id='Page" + PN + "' style='display: none; background-color: #" + i + i + i + ";'>";
The results on the page source are:
<div id="Page1" class="large-6 columns Pages" style="background-color: #000;"></div>
<div class="EventsClass"></div>
As you can see, this is a problem as I am trying to put elements inside elements. However I can't due to the closing tags.
I've search for a few hours and can't find a solution or even a cause to this.
There is NO closing tags, yet it is closed automatically. Is there a way to override this? Or bypass it?
From the documentation:
The innerHTML property sets or returns the HTML content (inner HTML) of an element.
Clearly, the content returned by this property has to be well-formed HTML and will definitely be rendered by browser with closing tags.
If you want to use elements inside elements and update the HTML of your desired GET object. Just create a normal string variable out of the content that you want to add and then sanitize it later on, and when you have the complete content that you desire, then update the .innerHTML with something like:
//content is a variable that just holds the string representing the HTML Content
var content = "<div class='large-6 columns Pages' id='Page" + PN + "' style='background-color: #" + i + i + i + ";'>";
content += "<div class='large-6 columns Pages' id='Page" + PN + "' style='display: none; background-color: #" + i + i + i + ";'>";
//close the divs or add more elements to the variable content
Get.innerHTML = content; //At the end.
I hope this gets you started in the right direction.
My application successfully creates elements and assigns them different (increasing) IDs.
Now my issue relies when the user deletes these elements (because they have the option to delete as well as create), the consistency of these IDs get broken therefore my application doesn't run well.
This Fiddle represents what I have so far. Just a textbox that appends its value and a few other elements inside a collapsible as many times as the user wants (For some reason my fiddle doesn't increment the alert value, but it works fine on my platform).
SCRIPT (Sorry the txt variable is too long)
$('#Add').click(function () {
if ($("#MedNameStren").val() != "") {
var value = $("#MedNameStren").val();
var noOfMeds = $('#NoOfMedicines').val();
//to check current value
alert(noOfMeds);
var text = '<div data-role="collapsible" data-collapsed="true" data-iconpos="left" data-content-theme="e">' + '<h2>' + desc + '</h2>' + '<div class="ui-grid-a">' + '<div class="ui-block-a" style="width:25%; margin-right:3%;">' + '<input id="quantity' + noOfMeds + '" class="quantity" type="text" placeholder="Quantity" />' + '</div>' + '<div class="ui-block-b" style="width:70%; margin-right:2%;"">' + '<textarea id="directions' + noOfMeds + '" class="directions" cols="40" rows="4" placeholder="Directions given by your GP." ></textarea>' + '</div>' + '</div>' + '<button key="' + vpid + '">Remove</button>' + '</div>';
$("#medListLi").append(text);
$('button').button();
$('#medListLi').find('div[data-role=collapsible]').collapsible();
$('#medListLi li').listview("refresh");
$('#medListLi').trigger("create");
document.getElementById("manuallyName").value = "";
noOfMeds++
$("#NoOfMedicines").val(noOfMeds);
}
else {
alert('Please Provide Medicine Name')
}
});
I am using a counter that neatly increments the ids of quantity and description like:
quantity0
quantity1
quantity2
..and so on, but once the following script is called...
//Deletes colapsible sets (Medicines) from the selected List
$('#medListLi').on('click', 'button', function (el) {
$(this).closest('div[data-role=collapsible]').remove();
var key = $(this).attr('key');
localStorage.removeItem(key);
var noOfMeds = $('#NoOfMedicines').val();
noOfMeds--
$("#NoOfMedicines").val(noOfMeds);
//location.reload();
});
depending on which element (collapsible) is deleted, the IDs stop being consistent. For example if the collapsible with id="quantity1" is deleted then the counter will go back to 1 (currently 2) and on the next addition the respective collapsible will get an id that's already taken, and unfortunately I don't need this to happen.
Maybe I'm making this sound more complicated that it is, but will appreciate any suggestions or ideas to solve this issue (if possible).
If more information is needed, please let me know.
Was brought to my attention that creating and deleting dynamic IDs can be done but keeping up with consistency of these IDs can be very tricky to work around it.
I've solved my own problem by simply creating a function that would keep count of the IDs from the amount of collapsibles inside my list and "renewing" the ID numbers on each Add and Delete.
I know that there's lot here on already on multiple click events being fired off, I think I've read them all but still can't see what's going wrong here.
Hope fully I'm missing something obvious that someone else can pick up easily...
Some background
My code works inside an Enterprise Social Networking platform and creates a BI dashboard for content analysis (about a 1000 lines of the stuff, mostly domain specific, so too much to post in it's entirety).
The part that is causing me grief is the function that builds the dashboard visualisation itself.
Here goes...
function makePage(){
$("#policyCount").text(policyCount);
var docTypes=getGlobalDocTypes(polOwners); //returns a constrained vocab array
var statusTypes=getGlobalStatusTypes(polOwners); //returns a constrained vocab array
$.each(polOwners,function(){ // polOwners is a global array that contains the BI data to be visualised
html=""
var ownerName = this.name.split(":")[1]; // name is a str in format "Owner:HR"
html += "<div id='" + ownerName + "' class='ownerData'>";
html += "<div class='ownerHeading'>" + ownerName + "</div>";
html += this.policies.length + " Policy documents maintained<br />"; // policies is an array of docs managed by owner
divIDReview = "dboard_" + ownerName + "reviewchart";
html += "<div id='" + divIDReview + "' class='dboardelement'></div>";
divIDType = "dboard_" + ownerName + "typechart";
html += "<div id='" + divIDType + "' class='dboardelement'></div>";
divIDStatus = "dboard_" + ownerName + "statuschart";
html += "<div id='" + divIDStatus + "' class='dboardelement'></div>";
html += "<div id='" + ownerName + "ToggleTable' class='toggletable' owner='" + ownerName + "'>";
html += "Click to display all " + ownerName + " documents<br /></div>";
html += "<div id='" + ownerName + "polTable' class='poltable'>";
html += getPolTable(this.policies); // Returns an HTML table of doc metadata
html += "</div>";
html += "</div>";
$("#owners").append(html); // When this function is called #owners is an empty div
$(".toggletable").mouseover(function(){
$(this).css({'cursor':'pointer','text-decoration':'underline'});
});
$(".toggletable").mouseout(function(){
$(this).css( {'cursor':'default','text-decoration':'none'});
});
$(".toggletable").each(function(i, elem){
$(elem).click(function(){
if ($(this).next(".poltable").css("display")=="none"){
// Currently hidden - so show
if (debug){console.log($(this).attr("id") + " was clicked")}
$(this).html("Click to hide " + $(this).attr('owner') + " documents<br/>");
$(this).next(".poltable").css("display","block");
} else {
if (debug){console.log($(this).attr("id") + " was clicked")}
$(this).html("Click to display all " + $(this).attr('owner') + " documents<br />");
$(this).next(".poltable").css("display","none");
}
});
});
// the next section calls functions that use the Google vis api to draw pie charts
drawPie(300,200, "Review Status", "Status", "Policies", getReviewStatus(this.policies), ["green","orange","red"], divIDReview);
drawPie(300,200, "Document Types", "Type", "Docs", getDocTypes(this.policies, docTypes), [], divIDType);
drawPie(300,200, "Document Status", "Status", "Docs", getStatusTypes(this.policies, statusTypes), [], divIDStatus);
});
}
Hopefully that's enough to illustrate the problem.
You'll see that the code builds a dashboard display for each polOwner consisting of three pie charts and an option to hide or display a table of underlying data.
I started by applying the click event to the .toggletable class. When that fired multiple times I used the method described on another answer here with the .each to attach a unique event to each instance of the class.
So, what happens?
There are currently 9 polOwners and at first glance, the click event only seems to be toggling the display state of every other table. The console log however shows that this is because it is firing 9 times for the first instance, 8 for the second, 7 for the third etc. with the odd numbers leaving the table in the alternate state (when this works the display will change to a .toggle animation).
For info, While I'm a text editor person, I do have a copy of MS Expression Web 4 which is a useful tool for error checking HTML. I've pasted in a copy of the entire generated markup (nearly 4000 lines) and can't see any bad nesting or structure errors.
Any ideas folks?
You've got some nested loops:
// jQuery each on polOwners
$.each(polOwners,function(){
// ... code that appends .toggletable class
// jQuery each on .toggletable class
$(".toggletable").each(function(i, elem){
// code that runs on the toggletable element
});
});
For each polOwner you are adding a div with the toggletable class. Then inside there you are looping through each div with a toggletable class and adding a click event.
This adds 1 click for the first polOwner, 2 for the second, three for the third and so on.
Move the toggletable each outside of the polOwner each and you should be good