Can anyone see what the problem is here? It keeps saying that the basket_text function is not defined but i don't know why?
HTML
<script type='text/javascript'>
document.write(basket_text());
</script>
first.js
function basket_text(){
var emptyBasketHTML = "<span class='header_text'>My Bag: (0 items) Total: £0.00</span>";
var populated = "<span class='header_text'><a href='/basket'>##ITEMS##</a><br />Total: ##VALUE##</span>";
//populated += "<input type='submit' value='Checkout' name='commit' class='go_botton header-checkout-button'>"
populated += "<form action='/basket'>";
populated += "<input type='submit' value='Checkout' class='header-checkout-button'>"
populated += "</form>";
return fc_basket_text_from_cookie(emptyBasketHTML,populated);
}
second.js
function fc_basket_text_from_cookie(empty_text, normal_text)
{
var basket = readCookie('bk');
if (basket)
{
var parts = decodeURIComponent(basket.replace(/\+/g, '%20')).split('|')
if (parseInt(parts[1]) == 0)
return normal_text.replace(/##VALUE##/g, parts[0]).replace(/##ITEMS##/g, parseInt(parts[1]));
// return empty_text
else
return normal_text.replace(/##VALUE##/g, parts[0]).replace(/##ITEMS##/g, parseInt(parts[1]));
} else {
return '';
}
}
function basket_text()
{
return fc_basket_text_from_cookie('<span>Your basket is empty (not used?)</span>', '<span>Items in basket: ##ITEMS##</span><div><span> </span><span>##VALUE##</span></div>')
}
Any insight is much appreciated?
Cheers
Related
I'm newbie in jquery And Data table,
I have problem when to set value for element input from another page using function.
this my 1st page code
{
data: "action_user",
targets: "action_user",
mRender: function (data_app, type_app, row_app) {
if (row_app["id_user"] !== null) {
var va_id_user = row_app["id_user"];
var va_user_name = row_app["user_name"];
var va_gender = row_app["gender"];
var va_address = row_app["address"];
var va_imei = row_app["imei"];
var va_phone = row_app["phone"];
var va_role_name = row_app["role_name"];
var va_email = row_app["email"]; //,supplier_name,supplier_code,address,contact_name,contact_num,status_supp
var va_status_user = row_app["status_user"]; // <a href='#'id='updateDataUser' onclick='javascript:myFunc(" + supplier_id + ")'><i class='fa fa-edit'title='Edit'></i></a>\n\
var data_users = {
id_user: va_id_user,
user_name: va_user_name,
gender: va_gender,
imei: va_imei,
phone:va_phone,
address:va_address,
role_name: va_role_name,
email: va_email,
status_user: va_status_user
};
return"<a id='updateDataUser' href='#' onclick='javascript:editUserFunc(" + JSON.stringify(data_users) + ")'><i class='fa fa-edit activeRecord' rel='13' title='Edit'></i></a>";
// return "<a href='" + data_pict_1 + " 'target='_blank' class='btn btn-info'>" + "<font color='#f2f2f2' size='2em'>" + "Display" + "</font>" + "</a>";
}
}
}
this my html code
<div id="div_add_pic" class="panel panel-default">
<form id="form_add_pic" name="form_add_pic" method="POST" action="">
<div id="form_add_user_response" class="resp"></div>
<div class="box-body">
<div class="form-group">
<label for="username" class="req">User Name :</label>
<input type="text" name="userName" id="userName" placeholder="User Name" class="form-control uppercase" />
</div>
</div>
</form>
</div>
this my function to set input value element .
function editUserFunc(data_users) {
var userName = data_users.user_name;
alert(userName);
$("#userName").val(userName);}
my function I change to
function editUserFunc(data_users) {
var userName = data_users.user_name;
alert(userName);
var oForm = document.getElementById("form_add_pic");
var set_userName = oForm.userName;
window.location.href = "index.jsp?url=user_layout& pages=add_user_form"
}
but I've got error
validation.js:1422 Uncaught TypeError: Cannot read property 'userName' of null
at editUserFunc (validation.js:1422)
at HTMLAnchorElement.onclick (index.jsp?url=user_layout&pages=list_users:1)
my console.log printscreen
how to call the element form on another page
I have tried it many times but I've been unsuccessful. Please help!
I think, you have to move all these functions inside
$(document).ready(function(){
//Replace with your code
})
Because your script may be there in top of html tags and while running these scripts, those html inputs are not loaded.
finally I use this code, to get parameter on url address bar
function getUrlQueryString(param) {
var outObj = {};
var qs = window.location.search;
if (qs != "") {
qs = decodeURIComponent(qs.replace(/\?/, ""));
var paramsArray = qs.split("&");
var length = paramsArray.length;
for (var i=0; i<length; ++i) {
var nameValArray = paramsArray[i].split("=");
nameValArray[0] = nameValArray[0].toLowerCase();
if (outObj[nameValArray[0]]) {
outObj[nameValArray[0]] = outObj[nameValArray[0]] + ";" + nameValArray[1];
}
else {
if (nameValArray.length > 1) {
outObj[nameValArray[0]] = nameValArray[1];
}
else {
outObj[nameValArray[0]] = true;
}
}
}
}
var retVal = param ? outObj[param.toLowerCase()] : qs;
return retVal ? retVal : ""
}
I have this code which seems to work perfectly fine till I add the last line. To the best of my knowledge the last line too has no mistake but I keep getting the error
firstProjectDifferent_style.html?_ijt=gs7id9qc5jeql1hvnl2cgn56i4:38 Uncaught TypeError: Cannot set property 'status' of undefined
at HTMLInputElement.updateData
Below is the entire code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSON Excercise</title>
</head>
<body>
<h1>Learn JSON</h1>
<div id="output">
<ul id="taskList">
</ul>
</div>
<script type="text/javascript">
var data = '[{"info":"Cut Grass","status":false},{"info":"Clean Room","status":true},' +
'{"info":"Go to Gyn","status":true},{"info":"Make Dinner Late","status":false}]';
var dataJSON = JSON.parse(data);
var output = document.getElementById("output");
var taskList = document.querySelector("#taskList");
for (var key in dataJSON){
var status = dataJSON[key].status?"checked":"";
var html = "<li>"+ dataJSON[key].info + "<input type='checkbox' value='" + dataJSON[key].info + "'" + status +"></li>";
taskList.innerHTML += html
}
addEvent();
function addEvent() {
var checkBoxes = document.querySelectorAll("#taskList li input[type='checkbox']");
for (var index in checkBoxes){
checkBoxes[index].onchange = updateData;
}
}
function updateData() {
var key = event.target.value;
console.log(key, event.target.checked);
dataJSON[key].status = event.target.checked; //This line is causing the problem
}
</script>
</body>
</html>
Your first issue is in this lines:
function updateData() {
var key = event.target.value;
Change to (the parameter is required):
function updateData(event) {
var key = event.target.value;
Second, you cannot access an array of object like this:
dataJSON[key]
Another issue is your taskList: i canged it to document.querySelector('#taskList')
I would suggest to use .filter().
The working code may be:
var data = '[{"info":"Cut Grass","status":false},{"info":"Clean Room","status":true},' +
'{"info":"Go to Gyn","status":true},{"info":"Make Dinner Late","status":false}]';
var dataJSON = JSON.parse(data);
var output = document.getElementById("output");
var taskList = document.querySelector("#taskList");
for (var key in dataJSON){
var status = dataJSON[key].status?"checked":"";
var html = "<li>"+ dataJSON[key].info + "<input type='checkbox' value='" + dataJSON[key].info + "'" + status +"></li>";
document.querySelector('#taskList').innerHTML += html;
}
addEvent();
function addEvent() {
var checkBoxes = document.querySelectorAll("#taskList li input[type='checkbox']");
for (var index in checkBoxes){
checkBoxes[index].onchange = updateData;
}
}
function updateData(event) {
var key = event.target.value;
dataJSON.filter(function(a, b) {
return a.info == key;
})[0].status = event.target.checked;
console.log(key, event.target.checked);
}
<h1>Learn JSON</h1>
<div id="output">
<ul id="taskList">
</ul>
</div>
I'm working on parsing JSON data and converting it to html form.
I'm using the javascript push function, which I thought would push the data into the array I've designated it to in the order I push it. However, whenever I push a new div element, it is automatically closed after being pushed making the html come out in a different order I want. Is there a way I can prevent this?
JavaScript:
$(function(){
var container = $('.panel-body');
var jsonObj = $.parseJSON('{"fields":[{"label":"Nafn form / Form name","field_type":"sFormName","required":false,"field_options":{"size":"small"},"cid":"c2"},{"label":"Spurning 1 ","field_type":"QuestionText","required":false,"field_options":{"size":"small"},"cid":"c5"},{"label":"Spurning 2","field_type":"QuestionCheckbox","required":false,"field_options":{"options":[{"label":"","checked":false},{"label":"","checked":false}]},"cid":"c9"},{"label":"Spunring 4","field_type":"QuestionRadio","required":false,"field_options":{"options":[{"label":"Val","checked":false},{"label":"VAl ","checked":false},{"label":"Val","checked":false}],"include_other_option":false},"cid":"c13"},{"label":"Spurning með multi","field_type":"QuestionMultiBegin","required":false,"field_options":{"options":[{"label":"","checked":false},{"label":"","checked":false}]},"cid":"c17"},{"label":"Spurning","field_type":"QuestionDropdown","required":false,"field_options":{"options":[{"label":"Val","checked":false},{"label":"Val","checked":false},{"label":"Val","checked":false}],"include_blank_option":false},"cid":"c21"},{"label":"Skráning","field_type":"Registration","required":false,"field_options":{"options":[{"label":"Notendanafn / Username"},{"label":"Lykilorð / Password"}],"include_blank_option":false},"cid":"c25"}]}');
var body = [];
var headerData = jsonObj.fields;
console.log(headerData);
for (var i = 0; i < headerData.length; i++) {
if(jsonObj.fields[i].field_type == "sFormName") {
body.unshift("<div class='panel panel-default panel-element'><div class='panel-heading'>" + jsonObj.fields[i].label)
} else {
body.push("<div class='panel panel-default panel-element'><div class='panel-heading'>" + jsonObj.fields[i].label);
}
if (jsonObj.fields[i].field_type == "QuestionText") {
body.push("<div class='panel-body'><textarea class='large-text form-control'></textarea></div>");
} else if (jsonObj.fields[i].field_type == "QuestionParagraph") {
body.push(jsonObj.fields[i].field_options.description);
} else if (jsonObj.fields[i].field_type == "QuestionDropdown") {
var data = jsonObj.fields[i].field_options.options;
body.push("<div class='panel-body'><div class='dropdown'><button class='btn btn-default dropdown-toggle' type='button' data-toggle='dropdown' id='dropdownMenu1' aria-haspopup='true' aria-expanded='true'>" + jsonObj.fields[i].field_options.options[0].label + "<span class='caret'></span></button>");
body.push("<ul class='dropdown-menu' aria-labelledby=dropdownMenu1'>");
for(var j = 0; j < data.length; j++) {
body.push("<li><a href='#'>" + jsonObj.fields[i].field_options.options[j].label + "</a></li>");
}
body.push("</ul></div></div>");
} else if (jsonObj.fields[i].field_type == "QuestionRadio") {
var data = jsonObj.fields[i].field_options.options;
body.push("<div class='panel-body'>");
for(var j = 0; j < data.length; j++) {
body.push("<div class='radio'><div class='controls'><input type='radio' name='radio'></input>" + jsonObj.fields[i].field_options.options[j].label);
}
body.push("</div></div></div></div>");
} else if (jsonObj.fields[i].field_type == "Registration") {
body.push("<div class='panel-body'>");
body.push("<div class='form-group'><form class='reg-form' role='form'><div class='form-group'><label for='email'>" + jsonObj.fields[i].field_options.options[0].label + "</label>");
body.push("<input type'email' class='form-control' id='email'></div>");
body.push("<div class='form-group'><form class='reg-form' role='form'><div class='form-group'><label for='pwd'>" + jsonObj.fields[i].field_options.options[1].label + "</label>");
body.push("<input type'password' class='form-control' id='pwd'></div>");
body.push("<div class='checkbox'><label><input type='checkbox'> Muna mig / Remember me</label></div></form></div>");
}
$(container).html(body);
}});
As you can see, I wrote the code assuming that I would have to push an ending div to each element that I'd opened, however that seems to be ignored.
The problem here is that you're trying to pass the body array to the html method, however you should instead concatenate all strings inside of it, the pass it.
Like so:
var htmlMarkup = body.reduce(function(){
return prev + current;
}, '');
or use 'join' as suggested by Hacketo, since it's less verbose:
var htmlMarkup = body.join('');
$(container).html(htmlMarkup);
I need to create text box using JavaScript. I coded as below:
<script>
function _(x) {
return document.getElementById(x);
}
function popuptxt() {
var i = _("no_room").value;
for(a = 1; a <= i; a++) {
my_div.innerHTML = my_div.innerHTML + "Room number for " + a + "<br><input type='text' name='mytext'+ i><br>"
}
}
<script>
HTML file:
<input type="text" style="width:200px;" id="no_room" onChange="popuptxt()" required>
<div id="my_div"></div>
It displays number of textbox when I type a number, but I need to clear them when I type another number.
Just reset the content of you block each time :
<script>
function _(x) {
return document.getElementById(x);
}
function popuptxt() {
my_div.innerHTML = "";
var i = _("no_room").value;
for(a = 1; a <= i; a++) {
my_div.innerHTML = my_div.innerHTML + "Room number for " + a + "<br><input type='text' name='mytext'+ i><br>"
}
}
</script>
Just add my_div.innerHTML = ""; before the for loop in popuptxt(). That way it will be cleared each time its called.
I have a Javascript function in my website. I don't know Javascript very well but, I want to modify it.
This section loads a third drop box, depending on the first two.
I want to modify it to disable the third one if the second drop box locatie's value is util.
jQuery( function () {
jQuery("#util, #loc").change( function() {
var locatie = jQuery("#loc").val();
var utilitate = jQuery("#util").val();
if ( (locatie!= '---') && (utilitate!='---') )
jQuery.getJSON("index.php?option=com_calculator&opt=json_contor&format=raw",{ locatie: locatie, utilitate: utilitate }, function (data) {
var html = "";
html += "<option name=den_contor value ='contor' >Alege Contorul</option>";
if ( data.success == 'ok' )
for (var i in data.val)
html += "<option name=den_contor value ='"+ i+"' >" + data.val[i]+ " </option>";
jQuery("#den_contor").html( html )
})
})
});`
Thanks,
Sebastian
This should work for you:
jQuery( function () {
jQuery("#util, #loc").change( function() {
var locatie = jQuery("#loc").val();
var utilitate = jQuery("#util").val();
if ( (locatie!= '---') && (utilitate!='---') )
jQuery.getJSON("index.php?option=com_calculator&opt=json_contor&format=raw",{ locatie: locatie, utilitate: utilitate }, function (data) {
var html = "";
html += "<option name=den_contor value ='contor' >Alege Contorul</option>";
if ( data.success == 'ok' )
for (var i in data.val) {
if (i != 'locatie' && data.val[i] != 'util') {
html += "<option name=den_contor value ='"+ i+"' >" + data.val[i]+ " </option>";
}
}
jQuery("#den_contor").html( html )
})
})
});
I added the line that starts with if (i != 'locatie' which checks to make sure that you are not looking at the locatie item and that the value is not util. If these are both true (ie. not locatie and not util) then we display the 3rd drop down.