I have a function that is replacing placeholders in a string of HTML with content from JS objects:
function inputCards() {
$('#maincontent').empty();
storyQuests.name.forEach(function(val, i) {
var formattedCard = mainCardHTML.replace('%questName%', storyQuests.name[i])
.replace('%questChapter%', storyQuests.chapter[i])
.replace('%questImg%', storyQuests.img[i])
.replace('%questDescription%', storyQuests.description[i])
.replace('replaceBox', storyQuests.check[i]);
$('#maincontent:last').append(formattedCard);
})
}
This is how the code is now, the problem I ran into is that I am using materialize and the checkbox code on a card is:
<div class="card-action">
<form action="#">
<p>
<input type="checkbox" id="replaceBox" />
<label for="replaceBox" class="white-text">Complete!</label>
</p>
</form>
</div>
Everything on the page is going OK, except when it loads all the cards ALL of the checkboxes when clicked only effect the checkbox in the first card! So I assumed this was because they all had the same ID of "replaceBox". So I added this to solve it:
.replace('replaceBox', storyQuests.check[i]);
(Actually I started with something else that didn't work at all, tried several other ways and eventually gave up and created an additional item in my object to hold the checkbox IDs that that is referencing:
check: ['box0', 'box1', 'box2', 'box3', 'box4', 'box5', 'box6', 'box7', 'box8', 'box9', 'box10', 'box11', 'box12', 'box13', 'box14', 'box15', 'box16', 'box17', 'box18', 'box19', 'box20', 'box21', 'box22', 'box23', 'box24', 'box25', 'box26', 'box27', 'box28', 'box29', 'box30', 'box31', 'box32', 'box33', 'box34', 'box35', 'box36', 'box37', 'box38', 'box39', 'box40', 'box41', 'box42']
However, even though the .replace works on everything else, on these IDs it doesn't seem to, it stops ALL checkboxes from working and the console shows this error:
GET file:///A:/sites/mysite-com/undefined
net::ERR_FILE_NOT_FOUND
So ultimately, how do I replace the words "replaceBox" with different values, or honestly any other solution to allow each checkbox to be checked independently. I thought about removing any ID at all on the checkboxes but I feel I'll need them in the future as I plan on making a way for people to login and have it save the checked state of each card.
EDIT 1:
The mainCardHTML code:
var mainCardHTML = "<div class='col hide-on-small-only m3'> </div>" +
"<div class='col s6'>" +
"<h5 class='header xvred-text'id='replaceMe'>%questName%</h5>" +
"<h6 class='header xvblue-text'id='replaceMe'>%questChapter%</h6>" +
"<div class='card horizontal hoverable'>" +
"<div class=card-image><img id='replaceMe' src=%questImg%></div>" +
"<div class='card-stacked xvred'>" +
"<div class='card-content xvblue'>" +
"<p id='replaceMe'>%questDescription%" +
"</div>" +
"<div class=card-action>" +
"<form action=#>" +
"<p><input id='replaceBox' type=checkbox>" +
"<label class=white-text for='replaceBox'>Complete!</label>" +
"</form>" +
"</div>" +
"</div>" +
"</div>" +
"</div>" +
"<div class='col hide-on-small-only m3'> </div>"
The storyQuests object(The actual object is way to long to post here for readability so I replaced the strings):
var storyQuests = {
name: ["43 strings", "43 strings", "..."],
chapter: [43 numbers, 43 numbers, ...],
img: ["43 strings", "43 strings", "..."],
description: ["43 strings", "43 strings", "..."]
check: ["box0", "box1", "..."]
}
First a little note, review the HTML code of mainCardHTML, there are two <p> elements unclosed (no </p>) and some of the html attributes don't have the ' in their values.
In your storyQuests object, you don't have the comma before the check field. It's probably a typo pasting the code in the question, but verify it.
Javascript function replace by default only replace the first appearance of the word. In your case, you have two replaceBox on each card, so you should use...
.replace(/replaceBox/g, storyQuests.check[i]
With all this, your replacement code works without problem in fiddle...
https://fiddle.jshell.net/rigobauer/v8erbuur/
Related
I'm working on a website that makes a call to a database. It takes the JSON from the database and loops through a specific node -- appending HTML code to a div tag, which creates a Card for each database entry. I want to be able to have a Bootstrap Popover (or Tooltip) that appears when a Card is clicked (or hovered over if Tooltip). The Cards that are generated within the function fail to produce a Popover or Tooltip at all. If I append the same HTML code outside the function using JQuery, it works just fine. I'm unsure what is happening here.
Here's the function that loops through the database JSON and creates a card for each child.
function getWeekEvents(day, id) {
return firebase.database().ref(day).once('value').then(function(snapshot) {
var data = snapshot.val();
for (item in data) {
var event = data[item]["event"];
var loc = data[item]["loc"];
var time = data[item]["time"];
$("#" + id).append("<div class='card border border-primary week-cards-ann event-style' data-toggle='popover' data-content='Content' data-placement='right'>" +
"<div class='card-body my-lg-n3'>" +
"<div class='card-text my-lg-n1 float-left ml-lg-n3'>" +
"<p>" + event.substring(0,10) + "...</p>" +
"</div>" +
"</div>" +
"</div>");
}
});
}
The code below is outside any function and works just fine. It creates a card in the same way, but the Popover works.
$("#tuesday").append("<div class='card border border-primary week-cards-ann event-style' data-toggle='popover' data-placement='top' title='Hello'>" +
"<div class='card-body my-lg-n3'>" +
"<div class='card-text my-lg-n1 float-left ml-lg-n3'>" +
"<p>" + "...</p>" +
"</div>" +
"</div>" +
"</div>");
And I also have this part that is required for Popovers to work.
$(function () {
$('[data-toggle="popover"]').popover()
});
I also tried creating a Tooltip in the same way, instead of a Popover, but it resulted in the same problem. This lead me to believe that there may be something happening with the data-toggle attribute? I could be wrong. Does anyone have any thoughts?
I'm trying to implement client-side input validation for a datatables-editor that I'm rewriting. The form is created dynamically and then added to a bootstrap-modal.
I have encountered a problem where adding <pattern> and/or required doesn't result in any added functionality at all. The form just accepts the input and submits, and I'm quite confused as to why that is.
EDIT:
I have added the relevant code to a plunkr
I have now added the full project. Specifically the issue is connected to the _openEditModal function and _openAddModal function, where i generate the forms dynamically and add the pattern='patternVariable'.
The pattern for this example (however it doesn't work no matter what pattern I use):
^[a-zA-Z0-9\.]+$
Creating the form:
var data = "";
data += "<form name='altEditor-form' role='form'>";
for(var j = 0; j < columnDefs.length; j++){
data += "<div class='form-group'><div class='col-sm-3 col-md-3 col-lg-3 text-right' style='padding-top:7px;'><label for='" + columnDefs[j].title + "'>" + columnDefs[j].title + ":</label></div><div class='col-sm-9 col-md-9 col-lg-9'>";
if(columnTypes[j].type.includes("text")){
data += "<input type='" + columnTypes[j].type + "' id='" + columnDefs[j].title + "' pattern='" + columnPattern[j].pattern + "' title='" + patternErrMsg[j].msg + "' required name='" + columnDefs[j].title + "' placeholder='" + columnDefs[j].title + "' style='overflow:hidden' class='form-control form-control-sm' value='" + adata.data()[0][newaData[j].name] + "'>";
}
if(...){...}
data +="</div><div style='clear:both;'></div></div>";
}
data += "</form>";
As you can see I add the tags like so:
pattern='" + columnPattern[j].pattern + "' title='" + patternErrMsg[j].msg + "' required ...
The modal:
$('#altEditor-modal').on('show.bs.modal', function() {
$('#altEditor-modal').find('.modal-title').html('Edit Record');
$('#altEditor-modal').find('.modal-body').html(data);
$('#altEditor-modal').find('.modal-footer').html("<button type='button' data-content='remove' class='btn btn-default' data-dismiss='modal'>Close</button>\
<input type='submit' data-content='remove' class='btn btn-primary' id='editRowBtn'>Save Changes</input>");
I made sure that the button has type='submit' as I've read that this is what triggers the pattern-check.
editRowBtn code:
$(document).on('click', '#editRowBtn', function(e)
{
e.preventDefault();
e.stopPropagation();
that._editRowData();
});
To make sure that my code is actually adding the attributes to the input i checked the console:
Any help or advice is greatly appreciated as I'm kinda stuck here.
It's a little hard to read your examples (a plunkr would be nice :) ), but from what I can see, you've put your submit button outside your form.
That won't work, since the button won't know what it's submitting.
Try putting the submit button inside the form.
Alternatively, try using the form attribute on the submit button, which should reference the form ID. I've never used this myself, but according to MDN, it's part of the HTML5 spec.
Form attribute description from MDN:
The form element that the input element is associated with (its form owner). The value of the attribute must be an id of a element in the same document. If this attribute is not specified, this element must be a descendant of a element. This attribute enables you to place elements anywhere within a document, not just as descendants of their form elements. An input can only be associated with one form.
Below given is a fraction of code, which loads a table row dynamically through html. The table row has a textbox, which gets its value from the variable 'currentValue'. But if the content of 'currentValue' has a space in between, only the first word is displayed. Nothing after space is displayed in the textbox(In below code, only 'hello' is displayed). Please suggest some solutions other than setting value through separate javascript query.
currentValue = 'hello world';
tr.append("<td><input id="+ textBoxId1 + " class='MyTextBox1' type='text' name='parameter_label' value="+ currentValue +" maxlength="+stringMaxLength+"></input></td>");
Think about the HTML you're producing. Suppose currentValue has "something here":
<td><input id=someid class='MyTextBox1' type='text' name='parameter_label' value=something here maxlength=40</input></td>
<!-- Notice ---------------------------------------------------------------------^^^^^^^^^^^^^^ -->
Now it should be obvious what the problem is (and that there are two other problems): You don't have quotes around the value attribute's value. That's only valid when the value doesn't have spaces (or several other characters). More in the specification.
So we add them:
tr.append("<td><input id="+ textBoxId1 + " class='MyTextBox1' type='text' name='parameter_label' value='"+ currentValue +"' maxlength="+stringMaxLength+"</input></td>");
// Note -----------------------------------------------------------------------------------------------^------------------^
That assumes that currentValue will never have ' in it. If it might, you can use " instead:
tr.append("<td><input id="+ textBoxId1 + " class='MyTextBox1' type='text' name='parameter_label' value=\""+ currentValue +"\" maxlength="+stringMaxLength+"</input></td>");
// Note -----------------------------------------------------------------------------------------------^^------------------^^
That assumes currentValue will never have " in it, or that you've properly prepped currentValue (handling turning < and & into entities, as you must for all attributes, and also in this case turning " into ").
The other two problems are:
You're missing the ending > on your <input ...> element.
Remove the </input>. input elements are void elements, they never have closing tags.
So:
tr.append("<td><input id="+ textBoxId1 + " class='MyTextBox1' type='text' name='parameter_label' value='"+ currentValue +"' maxlength="+stringMaxLength+"></td>");
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