Mr T Mr T - 4 years ago 131
HTML Question

Adding inline script to a jQuery html() return

I am using a for loop & jQuery output to html(). to output a JSON response to a html div.

In the for loop, I am transforming each result as follows into the output variable:

$.ajax(settings).done(function(response) {
var output = "";
for (i in response.Products) {
var productID = response.Products[i].ProductId;
var name = response.Products[i].Name;
var imagePath = response.Products[i].ImagePath;
var EAN = response.Products[i].EANBarcode;
var price = response.Products[i].PriceDescription;
var offer = response.Products[i].OfferPromotion;
var offerValid = response.Products[i].OfferValidity;
output += "<div class='uk-width-medium-1-4'> <div class='md-card'> <div class='md-card-head uk-text-center uk-position-relative'> <div class='uk-badge uk-badge-danger uk-position-absolute uk-position-top-left uk-margin-left uk-margin-top'>" + price + "</div><img class='md-card-head-img' src='" + imagePath + "'/> </div><div class='md-card-content'> <h4 class='heading_c uk-margin-bottom'>" + name + "<span class='sub-heading'>SKU: " + EAN + "</span></h4> <p>" + offer + "</p><p><i>" + offerValid + "</i></p><div class=\"uk-width-medium-1-4\"> <button class=\"md-btn md-btn-flat md-btn-flat-primary\" data-uk-modal=\"{target:'#modal_" + productID + "'}\">Add to inventory</button> <div class=\"uk-modal\" id=\"modal_" + productID + "\"> <div class=\"uk-modal-dialog\"> <div class='uk-modal-header'> <h3 class='uk-modal-title md-card-toolbar-heading-text'><i class='md-icon material-icons'>&#xE254;</i> QTY To Add</h3> </div><p class='uk-text-left'>How many <i><b>" + name + "</b></i> do you want to add to your home inventory : <br></p><div class='uk-text-center'> <form id='addToInventory'> </p><br><h2> <table class='uk-table uk-table-popup uk-table-hover-popup'> <tbody> <td class='uk-text-center' type='button' onClick='clicks_" + productID + "--;updateClickCount_" + productID + "();' id='push-'><i class='md-icon material-icons'>&#xE15B;</i></td><td class='uk-text-center' id='clickCount_" + productID + "'>1</td><td class='uk-text-center' type='button' onClick='clicks_" + productID + "++;updateClickCount_" + productID + "();' id='push+'><i class='md-icon material-icons'>&#xE145;</i></td></tbody> </table> </h2> <br></p><button id='addToInventory-submit' type='submit' class='md-btn md-btn-flat md-btn-flat-primary' value='ADD TO INVENTORY'>ADD TO INVENTORY</button> </form> <script type=\"application/javascript\">var clicks_" + productID + " = 1;var minimum = 1;function updateClickCount_" + productID + "() {if (clicks >= minimum) {document.getElementById('clickCount_" + productID + "').innerHTML = clicks_" + productID + ";} else {clicks_" + productID + " = 1;document.getElementById('clickCount_" + productID + "').innerHTML = clicks_" + productID + ";}}</script></div></div></div></div></div></div></div>";
}
console.log("response is: " + output);
$("#allResults").html(output);
$("#searchTerm").html(searchTerm);
});


The output works fine when I do not have the following in the output variable:

<script type=\"application/javascript\">var clicks_" + productID + " = 1;var minimum = 1;function updateClickCount_" + productID + "() {if (clicks >= minimum) {document.getElementById('clickCount_" + productID + "').innerHTML = clicks_" + productID + ";} else {clicks_" + productID + " = 1;document.getElementById('clickCount_" + productID + "').innerHTML = clicks_" + productID + ";}}</script>


But it breaks when I do add it as per the top code sample. I am looking at using the variable "clicks_productID" for the user to select a product quantity in a popup, before adding the product & qty to my database (not yet built).

Is there a better way of doing this (the results need to be different for each JSON return - which can be a variable response qty based on the submission)?

Answer Source

change

<script type=\"application/javascript\">var clicks_" + productID + " = 1;var minimum = 1;function updateClickCount_" + productID + "() {if (clicks >= minimum) {document.getElementById('clickCount_" + productID + "').innerHTML = clicks_" + productID + ";} else {clicks_" + productID + " = 1;document.getElementById('clickCount_" + productID + "').innerHTML = clicks_" + productID + ";}}</script>

to

<scr" + "ipt type=\"application/javascript\">var clicks_" + productID + " = 1;var minimum = 1;function updateClickCount_" + productID + "() {if (clicks >= minimum) {document.getElementById('clickCount_" + productID + "').innerHTML = clicks_" + productID + ";} else {clicks_" + productID + " = 1;document.getElementById('clickCount_" + productID + "').innerHTML = clicks_" + productID + ";}}</scr" + "ipt>

otherwise the interpreter will think the closing script tag in your string is the end of your script

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download