Develop Reference

form not clearing properly after submit and also for hidden input

I'm using a parsley validator and somehow it affects my form. After submission, it won't clear all the inputs; especially hidden inputs. And when I tried to set some input value from javascript it won't show up.
I think it's because of my <form method="post" id="transaction_form">. I've tried to re-evaluate my HTML but still, it won't work properly.
$(document).ready(function () {
$("#cust_num").val(55555);
var exam_num = 12345;
var prod_num = 88998;
var prod_name = "Hello";
var prod_price = 150000;
var transactionTable = $("#transaction_table");
var trxprodcount = 0;
var subTotal = 0;
var endTotal = 0;
function clearinput() {
$("#transaction_form")[0].reset();
$("#transaction_form").parsley().reset();
//$('#get_productdata').attr('disabled', 'disabled');
$("#subtotal").html(0);
$("#endtotal").html(0);
}
clearinput();
function recount() {
subTotal = transactionTable.DataTable().column(3).data().sum();
$("#subtotal").html(subTotal);
endTotal = subTotal - (subTotal * $("#trx_disc").val()) / 100;
$("#endtotal").html(endTotal);
}
transactionTable.DataTable({
ordering: false,
responsive: true,
searching: false,
paging: false,
info: false,
fnRender: function (Obj) {
return "Rp" + Obj.Data[3];
},
drawCallback: function () {
recount();
},
});
$("#trx_disc").on("change", function () {
recount();
});
trxprodcount = trxprodcount + 1;
var exam_num = $("#cust_num").val() + "S" + trxprodcount;
var col_exam_num =
exam_num +
'<input type="hidden" name="hidden_exam_num[]" id="exam_num' +
trxprodcount +
'" class="exam_num" value="' +
exam_num +
'" />';
var col_exam_prod =
prod_num +
'<input type="hidden" name="hidden_exam_prod[]" id="exam_prod' +
trxprodcount +
'" value="' +
prod_num +
'" />';
var del_btn =
'<button type="button" name="del_prodtrx" id="' +
trxprodcount +
'" class="btn btn-danger btn-sm del_prodtrx" >Delete</button>';
transactionTable
.DataTable()
.row.add([col_exam_num, col_exam_prod, prod_name, prod_price, del_btn])
.draw()
.node();
$("#transaction_table").on("click", ".del_prodtrx", function () {
var row = $(this).parents("tr");
if ($(row).hasClass("child")) {
transactionTable.DataTable().row($(row).prev("tr")).remove().draw();
} else {
transactionTable.DataTable().row($(this).parents("tr")).remove().draw();
}
});
$("#transaction_form").on("submit", function (event) {
event.preventDefault();
if ($("#transaction_form").parsley().isValid()) {
var count_data = 0;
$(".exam_num").each(function () {
count_data = count_data + 1;
});
if (count_data > 0) {
clearinput();
} else {
$("#message").html(
'<div class="alert alert-danger">Customer/Product Kosong'
);
}
setTimeout(function () {
$("#message").html("");
}, 3000);
}
});
});
Live Example: https://jsfiddle.net/azissofyanp/9p7j1d6u/30/
And I'm very confused about it.

Uncaught SyntaxError: Invalid or unexpected token on Inline JS. JS script breaks on browser

I am facing an issue that has baffled and actually exhausted me for hours.
I have tried so many different things, have done and still doing various debugging techniques but I am very tired and would seek for some help of any kind.
I will post the very basics for start, in case someone has any helpful idea/suggestion to unstack me, and I might be adding further information or more code as we go if needed.
I am working on a Joomla site and on a custom component view I place an inline jQuery script at some point of my html output.
The problem is that while everything works well on my localhost, when I upload it online the javascript breaks in whatever point I try to create variables that contain html. Then the browser will auto-close the script tag with </script> and the rest of the js code will be output as html.
So for example, the following script:
<script>
(function($)
{
$(document).ready(function()
{
var loader = '<div id="loader"><div>';
});
})(jQuery);
</script>
will end up to something like below:
<script>
(function($)
{
$(document).ready(function()
{
var loader = '<div id="loader">';
</div></script>
});
})(jQuery);
</script>
*Another clue that I just got is that the issue seems to be when I upload this on Litespeed server.
I tested this on 2 different servers with Litespeed and then on 1 Apache.
The one on the Apache server works fine (like on my localhost).
This is my complete inline script, just in case anyone is in place to catch anything that I am missing.
(function($)
{
$(document).ready(function()
{
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
var obj = <?php echo json_encode($availableTags); ?>;
var searchForm = $('#adminForm');
var predefinedTags = $('.tags-cloud.popular-tags .li-item');
var searchTermId = '';
var oldSearchTermId = '';
var categories = <?php echo json_encode( $search_categories ); ?>;
var categoriesAction = '<?php echo (int)$sel_categories_option; ?>';
var list_limit = '<?php echo (int)$list_limit; ?>';
var list_limitstart = 0;
var list_order_by = '<?php echo $list_order_by; ?>';
var list_order_dir = '<?php echo $list_order_dir; ?>';
var menuItem = '<?php echo (int)$menuItem; ?>';
var show_image = '<?php echo (int)$show_image; ?>';
var show_date = '<?php echo (int)$show_date; ?>';
var which_date = '<?php echo $which_date; ?>';
var show_category = '<?php echo (int)$show_category; ?>';
var searchResults;
var loadMore = false;
var loader = "";
// Form submit
$(searchForm).on('submit', function(e) {
searchTermId = $('#sm-search-term-id').val();
e.preventDefault();
ajaxSearchArticles();
});
$('.search-order-selects').on('change', function(e) {
searchTermId = $('#sm-search-term-id').val();
list_order_by = $('#search-order').val();
list_order_dir = $('#search-order-dir').val();
list_limitstart = 0;
ajaxSearchArticles();
});
$(predefinedTags).on('click', function(e) {
searchTermId = $(this).attr('data-tagid');
$( "#sm-search" ).val( $(this).text() );
$( "#sm-search-term-id" ).val( searchTermId );
$( "#sm-search-description" ).html( '(' + $(this).attr('total_articles') + ' Total Articles)');
ajaxSearchArticles();
return false;
});
$('#search-results').on('click','#load-more-div', function() {
searchTermId = $('#sm-search-term-id').val();
list_limitstart = parseInt(list_limitstart) + parseInt(list_limit);
loadMore = true;
ajaxSearchArticles();
});
function appendResults() {
var html = '';
oldSearchTermId = searchTermId;
var l = parseInt(list_limit);
$(searchResults).each(function(i, e) {
var itemi = list_limitstart + i;
if (i < l) {
html += '<div id="artid-'+e.id+'" class="sm-search-result g-block s-item-'+itemi+'">';
html += '<div class="sm-search-result-content">';
if (show_image == '1') {
html += '<a href="'+ e.url +'" title="'+e.title+'" target="_blank">';
html += '<div class="smrc-image-holder"><img src="' + e.images + '" alt="'+e.title+'" /></div></a>';
}
html += '<div class="smrc-text-block"><h3>'+e.title+'</h3><p>'+e.introtext+'</p>';
if (show_date || show_category) {
html += '<div class="item-meta">';
if (show_date) {
var date = e.modified;
if (which_date === 'created') {
var date = e.created;
}
html += '<span class="item-date"><i class="fa fa-calendar-o" aria-hidden="true"></i> '+ date +'</span>';
}
if (show_category) {
html += '<span class="item-cat">in '+e.category +'</span>';
}
html += '</div>';
}
html += '</div></div></div>';
}
if (i === l) {
html += '<div id="load-more-div" class="sm-search-result load-more g-block">';
html += '<div class="sm-search-result-content" style="display: flex;align-items: flex-end;justify-content: center;height: 100%;">';
html += '<div class="load-more-results flex-item"><span>Load More...</span></div>';
html += '</div></div>';
}
});
html += '<div class="clear clearfix"></div>';
if (loadMore) {
$('#search-results').append(html);
} else {
$('#search-results').html(html);
}
loadMore = false;
}
// Autocomplete
$( function() {
var results = true;
$( "#sm-search" ).autocomplete({
minLength: 3,
source: obj,
focus: function( event, ui ) {
if (results) {
$( "#sm-search" ).val( ui.item.label );
}
event.preventDefault();
return false;
},
select: function( event, ui ) {
if (results) {
$( "#sm-search" ).val( ui.item.label );
$( "#sm-search-term-id" ).val( ui.item.value );
$( "#sm-search-description" ).html( '(' + ui.item.total_articles + ' Total Articles)');
}
event.preventDefault();
$(searchForm).submit();
return false;
},
response: function(event, ui) {
if (ui.content.length === 0) {
results = false;
var res = { label: "no results", value: 0 };
ui.content.push(res);
} else {
results = true;
}
}
}).autocomplete( "instance" )._renderItem = function( ul, item ) {
if (results) {
return $( "<li>" )
.append( "<div><strong>" + capitalizeFirstLetter(item.label) + "</strong> <small>(" + item.total_articles + " articles)</small></div>" )
.appendTo( ul );
} else {
return $( "<li>" )
.append( "<div>" + item.label + "</div>" )
.appendTo( ul );
}
};
});
// Ajax call
function ajaxSearchArticles() {
if (!searchTermId) {
$('#empty-message').text('No Tags Defined!');
setTimeout(function() {
$('#empty-message').text('');
}, 3000);
return false;
}
$('body').append(loader);
if (searchTermId !== oldSearchTermId) {
list_limitstart = 0;
}
var xhrRequest = {
'option' : 'com_rabattdatabase',
'task' : 'RabattAjax.ajaxReceiver',
'action' : 'customSearch',
'tagid' : searchTermId,
'orderby' : list_order_by,
'orderdir': list_order_dir,
'limit' : list_limit,
'limitstart' : list_limitstart,
'cats' : categories,
'itemid' : menuItem,
'catswhat': categoriesAction,
'<?php echo JSession::getFormToken();?>' : 1,
};
$.ajax({
context : this,
type : 'POST',
data : xhrRequest,
success : function(response) {
var response = $.parseJSON(response);
searchResults = response.data;
if (response.success == true) {
appendResults();
} else {
$('#search-results').html("<h4>We couldn't process your request!</h4>");
}
}
}); // End Ajax
}
})
})(jQuery);

Replace content of appended div in Fancybox only once

I have used fancybox and appended a text div content to every images. The text div content appended is working well.But as I click to next button, the text div content is appended twice for each images.How to append that div content only once ?
$('.proBox').fancybox({
thumbs : {
autoStart : true,
axis : 'x'
},
idleTime : 0,
buttons : [
'info', 'close','thumbs'
],
afterShow: function( instance, current ) {
var url = window.location.href;
var cat = url.substring(url.lastIndexOf('#') + 1);
var cats = cat.split('-');
catId= cats[0];
var toolbar = "<div id='tools'>"+$('#addscetion div').eq(this.index).html()+ "</div>";
var index=catId+$("[data-fancybox-index]").html();
$('.fancybox-slide').children(".imagecontainer").remove();
// This is the div content that I am appending
$(".fancybox-slide").append(toolbar);
$(".fancybox-slide").append($('#'+index).html());
},
caption : function( instance, obj ) {
return '<div><p class="fancy-nav"><a data-fancybox-prev title="Previous" tabindex="1">‹</a> <a data-fancybox-next title="Next" tabindex="2">›</a> <span data-fancybox-index></span> of <span data-fancybox-count></span> images</p>' + $(this).find('.caption').html() + '</div>';
},
onInit: function(instance) {
instance.$refs.container.on('touchstart', '[data-fancybox-info]', function(e) {
e.stopPropagation();
e.preventDefault();
instance.$refs.container.toggleClass('fancybox-vertical-caption');
});
instance.$refs.container.on('mouseenter', '[data-fancybox-info]', function(e) {
instance.$refs.container.addClass('fancybox-vertical-caption');
instance.$refs.caption.one('mouseleave', function(e) {
instance.$refs.container.removeClass('fancybox-vertical-caption');
});
});
instance.$refs.container.on('click', '[data-fancybox-captionimg]', function(e) {
$(".fancybox-image").attr("src",this.src);
});
instance.$refs.container.on('click', '[data-fancybox-captionbtn]', function(e) {
$('.fancyRightCont').slideToggle('slow');
});
}
});

You can first remove appended html data from .fancybox-slide and then after append HTML like this
$(".fancybox-slide").html('');
$(".fancybox-slide").append(toolbar);
$(".fancybox-slide").append($('#' + index).html());
Try below code.
$('.proBox').fancybox({
thumbs: {
autoStart: true,
axis: 'x'
},
idleTime: 0,
buttons: [
'info', 'close', 'thumbs'
],
afterShow: function(instance, current) {
var url = window.location.href;
var cat = url.substring(url.lastIndexOf('#') + 1);
var cats = cat.split('-');
catId = cats[0];
var toolbar = "<div id='tools'>" + $('#addscetion div').eq(this.index).html() + "</div>";
var index = catId + $("[data-fancybox-index]").html();
$('.fancybox-slide').children(".imagecontainer").remove();
// This is the div content that I am appending
$(".fancybox-slide").html('');
$(".fancybox-slide").append(toolbar);
$(".fancybox-slide").append($('#' + index).html());
},
caption: function(instance, obj) {
return '<div><p class="fancy-nav"><a data-fancybox-prev title="Previous" tabindex="1">‹</a> <a data-fancybox-next title="Next" tabindex="2">›</a> <span data-fancybox-index></span> of <span data-fancybox-count></span> images</p>' + $(this).find('.caption').html() + '</div>';
},
onInit: function(instance) {
instance.$refs.container.on('touchstart', '[data-fancybox-info]', function(e) {
e.stopPropagation();
e.preventDefault();
instance.$refs.container.toggleClass('fancybox-vertical-caption');
});
instance.$refs.container.on('mouseenter', '[data-fancybox-info]', function(e) {
instance.$refs.container.addClass('fancybox-vertical-caption');
instance.$refs.caption.one('mouseleave', function(e) {
instance.$refs.container.removeClass('fancybox-vertical-caption');
});
});
instance.$refs.container.on('click', '[data-fancybox-captionimg]', function(e) {
$(".fancybox-image").attr("src", this.src);
});
instance.$refs.container.on('click', '[data-fancybox-captionbtn]', function(e) {
$('.fancyRightCont').slideToggle('slow');
});
}
});

How to append a dialog into a main div on your page on button click

I have a log in button that when a user clicks on it a terms and condition dialog pops up and overlaps the contents on a page as follows
TermsSuccess: function (result, context) {
var topTerms = findSetByInArray(result.Data, 'ParentId', 0);
var termsHTML = '<div id="terms"><ul class="termsList">';
for (var i = 0; i < topTerms.length; i++) {
var cls = (topTerms[i].isNew) ? 'newTerm' : 'Term';
termsHTML += '<li id=' + topTerms[i].ID + ' class=' + cls + '>'
termsHTML += topTerms[i].PageIndex + '. ' + topTerms[i].Detail;
termsHTML += getChildrenTerms(result.Data, topTerms[i].ID, topTerms[i].PageIndex + '. ');
termsHTML += '</li>';
}
termsHTML += '</ul></div>';
$(termsHTML).dialog({
modal: true,
resizable: false,
width: 400,
height: 600,
closeOnEscape: false,
open: function (event, ui) {
$(this).parent().children().children('.ui-dialog-titlebar-close').hide();
},
title: "Terms & Conditions",
buttons: [{
text: "Decline",
"class": 'btnDialog',
click: function () {
$(this).dialog("close");
}
},
{
text: "Accept",
"class": 'btnDialog',
click: function () {
betEvents.btnAccept_onClick();
$(this).dialog("close");
}
}]
});
}
I want this dialog to be appended to the following div on the page instead of it poping up over all the contents
<div id="mainarea"></div>
i tried to do something as the following but it doesnt work
function onClick(){
if $("#btnLogin").click(function(){
$('termsHTML').append('#mainarea');
});
}
your guidance will be appreciated.

Change this line:
$('termsHTML').append('#mainarea');
to
$(#mainarea).append(termsHTML);
and try again.
Explanation: $('termsHTML').append('#mainarea'); // here your selector is wrong

Change a variable in javascript after onclick

I'm pretty new in coding with javascript and i have this issue:
I have the uploadify configuration, where i have this line:
// <![CDATA[
$(document).ready(function() {
$('#file_upload').uploadify({
'uploader' : 'js/uploadify/uploadify.swf',
'script' : 'ajaxup.php<?php if(isset($_SESSION['user_id'])) { echo "?session_id=" . session_id() ; } ?>',
'cancelImg' : 'css/img/cancel.png',
'auto' : true,
'displayData' : 'speed',
'multi' : true,
'fileDataName' : 'uploaded',
'fileExt' : '*.jpg;*.gif;*.png;*.jpeg',
'fileDesc' : 'Image Files',
'queueSizeLimit' : 30,
'simUploadLimit' : 1,
'sizeLimit' : 5024*1024,
'scriptData' : {'postkey' : postValueVariable},
'onOpen' : function() {
document.getElementById('index_upload').style.cssText = 'width: 600px !important';
document.getElementById('ajax_allbbcodes').style.cssText = 'display:inherit;';
$("#ajax_bbcodes").animate({
width: "500",
height: "100"
}, 1000 );
$("#ajax_HTMLcodes").animate({
width: "500",
height: "100"
}, 1000 );
$("#ajax_DirectLinks").animate({
width: "500",
height: "100"
}, 1000 );
<?php if(DIRECT_LINK_SHOW == 1) { ?>
$("#ajax_DirectLinkToImgs").animate({
width: "500",
height: "100"
}, 1000 );
<?php } ?>
},
'onProgress' : function(event,ID,fileObj,data) {
var bytes = Math.round(data.bytesLoaded / 1024);
$('#' + $(event.target).attr('id') + ID).find('.percentage').text(' - ' + bytes + 'KB Uploaded');
document.getElementById('progressbarOver').style.cssText = 'display:inherit;';
$("#progressbar").animate({
width: data.percentage + "%",
height: "20"
}, 200 );
return false;
},
'onComplete' : function(event, ID, fileObj, response, data) {
old_guests = document.getElementById("testajax").innerHTML;
document.getElementById('testajax').innerHTML = old_guests + response;
myArrayBBCode = $('.ajax_BBCode');
oldbb = document.getElementById('ajax_bbcodes').innerHTML;
document.getElementById('ajax_bbcodes').innerHTML = oldbb + myArrayBBCode[myArrayBBCode.length-1].innerHTML + ' ';
myArrayHTMLCode = $('.ajax_HTMLCode');
oldbbHTMLCode = document.getElementById('ajax_HTMLcodes').innerHTML;
document.getElementById('ajax_HTMLcodes').innerHTML = oldbbHTMLCode + myArrayHTMLCode[myArrayHTMLCode.length-1].innerHTML + ' ';
myArrayDirectLink = $('.ajax_DirectLink');
oldbbDirectLink = document.getElementById('ajax_DirectLinks').innerHTML;
document.getElementById('ajax_DirectLinks').innerHTML = oldbbDirectLink + myArrayDirectLink[myArrayDirectLink.length-1].innerHTML + ' \r\n';
<?php if(DIRECT_LINK_SHOW == 1) { ?>
myArrayDirectLinkToImg = $('.ajax_DirectLinkToImg');
oldbbDirectLinkToImg = document.getElementById('ajax_DirectLinkToImgs').innerHTML;
document.getElementById('ajax_DirectLinkToImgs').innerHTML = oldbbDirectLinkToImg + myArrayDirectLinkToImg[myArrayDirectLinkToImg.length-1].innerHTML + ' \r\n';
<?php } ?>
},
'onAllComplete' : function(event,data) {
document.getElementById('progressbarOver').style.cssText = 'display:none;';
}
});
});
// ]]>
I need to have two buttons with onclick function or something, that when pressed, to change that postValueVariable to Yes or No . I tryed in many ways but didn't worked. Hope i'll find the answer here. Thank you in advance !

This should help get you started.
<button data-boolean='yes'>button one</button>
<button data-boolean='no'>button two</button>
window.postValueVariable = null;
updateValueVariable = function () {
window.postValueVariable = this.getAttribute('data-boolean');
alert('postValueVariable is now ' + window.postValueVariable);
};
var buttons = document.querySelectorAll('button');
for (var i = 0; i < buttons.length; i += 1) {
var button = buttons[i];
(function () {
button.addEventListener('click', updateValueVariable, false);
}())
}