Change a variable in javascript after onclick

Change a variable in javascript after onclick - javascript

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);
}())
}

Related

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);

Ajax function onload

I use this code:
var selected = {
country_id: <?php echo (int)$country_id;?>,
state_id: <?php echo (int)$state_id;?>,
city_id: <?php echo (int)$city_id;?>
},
countryMap = '<?php echo $countryMap;?>',
stateMap = '<?php echo $stateMap;?>',
cityMap = '<?php echo $cityMap;?>';
$("select.event-shipping-country").off().on("change", function() {
var $self = $(this);
if(!$self.val()) {
$("select.event-shipping-state, select.event-shipping-city").find("option:gt(0)").remove();
}
countryMap = cityMap = stateMap = '';
$.ajax({
url: '<?php echo $this->url([ 'controller' => 'state', 'action' => 'get-states' ], 'shipping_c_a') ?>',
data: { id: $self.val() },
dataType: 'json',
success: function (result) {
$("select.event-shipping-state, select.event-shipping-city").find("option:gt(0)").remove();
selected.country_id = $self.val();
if(!result.length)
{
$("select.event-shipping-state").change();
return;
}
countryMap = $self.val() ? $self.find('option[value="' + $self.val() + '"]').text() : '';
var html = '';
for(var idx in result)
html += '<option ' + (selected.state_id == result[idx].id ? 'selected="selected"' : '') + ' value="' + result[idx].id + '">' + result[idx].name + '</option>';
$("select.event-shipping-state").append(html);
},
type: 'POST'
});
});
$("select.event-shipping-state").off().on("change", function() {
var $self = $(this);
cityMap = '';
$.ajax({
url: '<?php echo $this->url([ 'controller' => 'city', 'action' => 'get-cities' ], 'shipping_c_a') ?>',
data: { state: $self.val(), country: $("select.event-shipping-country").val() },
dataType: 'json',
success: function (result) {
$("select.event-shipping-city").find("option:gt(0)").remove();
selected.state_id = $self.val();
if(!result.length)
{
return;
}
var html = '';
for(var idx in result)
html += '<option ' + (selected.city_id == result[idx].id ? 'selected="selected"' : '') + ' value="' + result[idx].id + '">' + result[idx].name + '</option>';
$("select.event-shipping-city").append(html);
stateMap = $self.val() ? $self.find('option[value="' + $self.val() + '"]').text() : '';
},
type: 'POST'
});
stateMap = $self.val() ? $self.text() : '';
});
$("select.event-shipping-city").off().on("change", function() {
selected.city_id = $(this).val();
cityMap = $(this).val() ? $(this).find('option[value="' + $(this).val() + '"]').text() : '';
});
This function select states based on selected country. Problem is that I have only one country with ID 117. But even if I have only one default option selected I must select it again to and only than will show states, but I need that states loads on page loading by selecting country id 117.
Thank you.

$("select.event-shipping-country").off().on("change", function() {
Above line will be called only on change of country.
Call the same function on document.ready() or document.onload also for first time loading and on change will remain same for change on country.
The way to do this is keep the whole code inside separate function and call that function on document.ready() or document.onload and on change of country also
function onCountryChange() {
var $self = $(this);
if(!$self.val()) {
$("select.event-shipping-state, select.event-shipping-city").find("option:gt(0)").remove();
}
countryMap = cityMap = stateMap = '';
$.ajax({
url: '<?php echo $this->url([ 'controller' => 'state', 'action' => 'get-states' ], 'shipping_c_a') ?>',
data: { id: $self.val() },
dataType: 'json',
success: function (result) {
$("select.event-shipping-state, select.event-shipping-city").find("option:gt(0)").remove();
selected.country_id = $self.val();
if(!result.length)
{
$("select.event-shipping-state").change();
return;
}
countryMap = $self.val() ? $self.find('option[value="' + $self.val() + '"]').text() : '';
var html = '';
for(var idx in result)
html += '<option ' + (selected.state_id == result[idx].id ? 'selected="selected"' : '') + ' value="' + result[idx].id + '">' + result[idx].name + '</option>';
$("select.event-shipping-state").append(html);
},
type: 'POST'
});
}
$("select.event-shipping-country").off().on("change", onCountryChange );
document.ready(function() {
onCountryChange();
});

Try Like This, Just pass ur code inside a function and call those function at document.ready()
var selected = {
country_id: <?php echo (int)$country_id;?>,
state_id: <?php echo (int)$state_id;?>,
city_id: <?php echo (int)$city_id;?>
},
countryMap = '<?php echo $countryMap;?>',
stateMap = '<?php echo $stateMap;?>',
cityMap = '<?php echo $cityMap;?>';
function onCountryChange(){
var $self = $(this);
if(!$self.val()) {
$("select.event-shipping-state, select.event-shipping-city").find("option:gt(0)").remove();
}
countryMap = cityMap = stateMap = '';
$.ajax({
url: '<?php echo $this->url([ 'controller' => 'state', 'action' => 'get-states' ], 'shipping_c_a') ?>',
data: { id: $self.val() },
dataType: 'json',
success: function (result) {
$("select.event-shipping-state, select.event-shipping-city").find("option:gt(0)").remove();
selected.country_id = $self.val();
if(!result.length)
{
$("select.event-shipping-state").change();
return;
}
countryMap = $self.val() ? $self.find('option[value="' + $self.val() + '"]').text() : '';
var html = '';
for(var idx in result)
html += '<option ' + (selected.state_id == result[idx].id ? 'selected="selected"' : '') + ' value="' + result[idx].id + '">' + result[idx].name + '</option>';
$("select.event-shipping-state").append(html);
},
type: 'POST'
});
}
$("select.event-shipping-country").off().on("change", function() {
onCountryChange();
});
function onStateChange(){
var $self = $(this);
cityMap = '';
$.ajax({
url: '<?php echo $this->url([ 'controller' => 'city', 'action' => 'get-cities' ], 'shipping_c_a') ?>',
data: { state: $self.val(), country: $("select.event-shipping-country").val() },
dataType: 'json',
success: function (result) {
$("select.event-shipping-city").find("option:gt(0)").remove();
selected.state_id = $self.val();
if(!result.length)
{
return;
}
var html = '';
for(var idx in result)
html += '<option ' + (selected.city_id == result[idx].id ? 'selected="selected"' : '') + ' value="' + result[idx].id + '">' + result[idx].name + '</option>';
$("select.event-shipping-city").append(html);
stateMap = $self.val() ? $self.find('option[value="' + $self.val() + '"]').text() : '';
},
type: 'POST'
});
stateMap = $self.val() ? $self.text() : '';
}
$("select.event-shipping-state").off().on("change", function() {
onStateChange();
});
function onCityChange(){
selected.city_id = $(this).val();
cityMap = $(this).val() ? $(this).find('option[value="' + $(this).val() + '"]').text() : '';
}
$("select.event-shipping-city").off().on("change", function() {
onCityChange();
});
$(document).ready(function () {
onCountryChange();
onStateChange();
onCityChange();
});

How can I use HTML tooltip with trigger:'both' in Google Charts

I have to show HTML tooltip (using Google Charts) when the user click an hover de column bars, I've coded this and it shows the tooltip when the user hover the column bar:
<script type="text/javascript">
var colores = ['#1D1E55', '#859DC4', '#6D165E'];
var indiceColorAsignado = 0;
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var propiedadCol = {
type: 'string',
role: 'annotation'
};
var dataTable = google.visualization.arrayToDataTable([
['Id', {'type': 'string', 'role': 'tooltip', 'p': {'html': true}}<?php
$aux = $encabezados;
$conta = 1;
foreach ($aux as $key => $value) {
if ($conta < 3) {
unset($aux[$key]);
$conta++;
};
}
$complementoEncabezado = "";
foreach ($aux as $key => $value) {
$complementoEncabezado .= ",'".$value."',propiedadCol";
}
$complementoEncabezado .= "],";
echo $complementoEncabezado;
?>
<?php
$renglodDeDatos = "";
$nombresToolTip = $encabezados;
unset($nombresToolTip['id']);
foreach ($datosAGraficar as $key => $value) {
$conta = 1;
foreach ($value as $llave => $valor) {
if ($conta != 2) {
if ($llave == "id") {
$valoresToolTip = $value;
unset($valoresToolTip['id']);
$renglodDeDatos .= "['".$valor."',contenidoHTML(".json_encode($nombresToolTip).",".json_encode($valoresToolTip).")";
} else {
$renglodDeDatos .= ",".$valor.",''";
}
}
$conta++;
}
$renglodDeDatos .= "],";
}
echo $renglodDeDatos;
?>
]);
var options = {
title: '<?php echo $titulo_grafica; ?> del PGD',
hAxis: {
title: '<?php echo $titulo_grafica ?>',
titleTextStyle: {
color: 'black',
bold:true,
},
},
vAxis: {
title: 'Porcentaje',
titleTextStyle: {
color: 'black',
bold:true,
},
},
// colors: ['#7F6FD2', '#94F29C', '#F8ECBC'],
// colors: ['#AF9965', '#DAC674', '#F3E79A'],
// colors: ['#EE7009', '#0A7AAC', '#504C4B'],
// colors: ['#0A19BB', '#02073A', '#4D5073'],
colors: colores,
// backgroundColor: {
// stroke: 'red',
// strokeWidth: 10,
// },
focusTarget: 'category',
selectionMode: 'multiple',
tooltip: {
isHtml: true,
},
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(dataTable, options);
google.visualization.events.addListener(chart, 'select', miFuncion);
var columnas = new Array();
function miFuncion() {
var selection = chart.getSelection();
var message = '';
for (var i = 0; i < selection.length; i++) {
var item = selection[i];
if (item.row != null && item.column != null) {
var str = dataTable.getFormattedValue(item.row, item.column);
message += '{row:' + item.row + ',column:' + item.column + '} = ' + str + '\n';
} else if (item.row != null) {
var str = dataTable.getFormattedValue(item.row, 0);
message += '{row:' + item.row + ', column:none}; value (col 0) = ' + str + '\n';
} else if (item.column != null) {
var str = dataTable.getFormattedValue(0, item.column);
var indice = columnas.indexOf(item.column);
if (indice != -1) {
columnas.splice(indice, 1);
for (var j = 0; j < dataTable.getNumberOfRows(); j++) {
dataTable.setValue(j, item.column + 1, '');
};
} else{
columnas.unshift(item.column);
for (var j = 0; j < dataTable.getNumberOfRows(); j++) {
dataTable.setValue(j, item.column + 1, (dataTable.getValue(j, item.column)).toString() + '%');
};
};
console.log('columnas '+columnas);
message += '{row:none, column:' + item.column + '}; value (row 0) = ' + str + '\n';
};
};
if (message == '') {
message = 'nothing';
};
console.log('You selected ' + message);
chart.draw(dataTable, options);
}
function contenidoHTML(nombresToolTip,valoresToolTip) {
var indiceObjeto = 1;
var toolTipHTML = '<div style="width:200px; text-align:justify; padding:5px 5px 5px 5px;">';
for(var elemento in nombresToolTip) {
if (indiceObjeto == 1) {
toolTipHTML += '<b>' + nombresToolTip[elemento] + ':</b> ' + valoresToolTip[elemento] +'<br>';
indiceObjeto++;
} else {
toolTipHTML += '<div style="background-color:'+ colores[indiceColorAsignado] +'; padding-left:5px; color:#FFFFFF;"><b>'+ nombresToolTip[elemento] +':</b> '+ (parseFloat(valoresToolTip[elemento])).toFixed(2) +'%</div>'
indiceColorAsignado++;
};
};
toolTipHTML += '</div>';
console.log('HTML '+toolTipHTML);
// return '<div style="width:200px; text-align:justify; padding:5px 5px 5px 5px;">Nombre <br><hr><div style="background-color:#1D1E55; padding-left:5px; color:#FFFFFF;"><b>Avance real:</b> 1000%</div><div style="background-color:#859DC4; padding-left:5px; color:#FFFFFF;"><b>Grado de cumplimiento:</b> 400%</div><div style="background-color:#6D165E; padding-left:5px; color:#FFFFFF;"><b>Avance promedio:</b> 250%</div></div>';
console.log('indiceColorAsignado '+ indiceColorAsignado);
indiceColorAsignado = 0;
return toolTipHTML;
}
}
</script>
How can I get both events(click and hover) in order to show the HTML tooltip? Thank a lot

Just set the option:
tooltip: {
isHtml: true,
trigger: 'both'
}

Validate on the name created via javascript

I have the form inside the Jquery-UI-Dialog.
I understand of how to validate all field in the form.
Using the plugin of this site
Example:
$(document).ready(function () {
$('#dialog').validate({
rules: {
category:
{
required: true
},
},
submitHandler: function (form) { // for demo
if ($('#ccategory').val() == 0){
document.getElementById('choose_own_text').innerHTML = "Please change here";
return false;}
// console.log($('#ccategory').val());
alert('valid form'); // for demo
return false; // for demo
}
});
});
But I have the id and name that I created via Javascript.
For example id="inputp"+j+"_id" where j is a number.
Now I want to validate this field but i have the error:
SyntaxError: missing : after property id
I use this method because I declare with the number the data.
How to correct this error for that I can use always this technique's validate.
$( "#wnd_Add" ).dialog({
autoOpen: false,
height: 'auto',
width: 350,
modal: true,
resizable:false,
buttons: {
"Add": function() {
var j=(parseInt(contapara)+1);
$('#formparam').validate({
rules: {
"inputp"+j+"_id":
{
required: true
},
},
submitHandler: {
contapara=(parseInt(contapara)+1);
document.getElementById("sorpara").innerHTML+="<li id=\"inputp"+contapara+"_id\" class=\"ui-state-default\"><span class=\"ui-icon ui-icon-arrowthick-2-n-s\"></span>"+$('#inputp'+contapara+'_id').val()+"</li>";
var $fm = $("#formparam");
$.get($fm.attr('${nextstep}'))
.done(function(data, ok){
var fr=$fm.serialize();
fr=fr.replace(/\&/g,"+%23+");
fr=replacew(fr,/\=/g, "%24+"); // //fr=fr.replace(/\=/g,"%24+");
if(document.getElementById("inputp"+contapara+"_visible").checked==false)
fr=fr+"+%23+inputp"+contapara+"_visible%24+off";
// data is the content of the response
document.location.href="index2?"+fr;})
.fail(function(data){
alert('call failed');
// call failed for some reason -- add error messaging?
});
// $( this ).dialog( "close" );
return false; },
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
$( this ).dialog( "close" );
}
});
I created a demo on Jsfiddle but not function because I have this error but may help
I hope the title of the question is correct...
UPDATE:
Now I have this script but I have the error SyntaxError: missing : after property id on
function(form) {
This is last script:
$( "#wnd_Addparam" ).dialog({
autoOpen: false,
height: 'auto',
width: 350,
modal: true,
resizable:false,
buttons: {
"Add": function() {
var j=(parseInt(contapara)+1);
var rules= {};
rules["inputp" + j + "_id"]=
{
required: true
};
$('#formparam').validate({
rules: rules,
submitHandler: {
function(form) {
contapara=(parseInt(contapara)+1);
document.getElementById("sorpara").innerHTML+="<li id=\"inputp"+contapara+"_id\" class=\"ui-state-default\"><span class=\"ui-icon ui-icon-arrowthick-2-n-s\"></span>"+$('#inputp'+contapara+'_id').val()+"</li>";
var $fm = $("#formparam");
$.get($fm.attr('${nextstep}'))
.done(function(data, ok){
var fr=$fm.serialize();
fr=fr.replace(/\&/g,"+%23+");
fr=replacew(fr,/\=/g, "%24+"); // //fr=fr.replace(/\=/g,"%24+");
if(document.getElementById("inputp"+contapara+"_visible").checked==false)
fr=fr+"+%23+inputp"+contapara+"_visible%24+off";
// data is the content of the response
document.location.href="index2?"+fr;})
.fail(function(data){
alert('call failed');
// call failed for some reason -- add error messaging?
});
return false; } },
});
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
$( this ).dialog( "close" );
}
});

You can't use a variable as a key in a object like that, instead you can do something like
var rules = {};
rules["inputp"+j+"_id"] = {
required: true
};
$('#formparam').validate({
rules: rules,
submitHandler: {
Ex;
var contapara = 3;
var regex, v, l, c, b;
$("#wnd_Addparam").dialog({
autoOpen : false,
height : 'auto',
width : 350,
modal : true,
resizable : false,
buttons : {
"Add" : function() {
var j = (parseInt(contapara) + 1);
var rules = {};
rules["inputp" + j + "_id"] = {
required : true
};
$('#formparam').validate({
rules : rules,
submitHandler : function(form) {
contapara = (parseInt(contapara) + 1);
document.getElementById("sorpara").innerHTML += "<li id=\"inputp"
+ contapara
+ "_id\" class=\"ui-state-default\"><span class=\"ui-icon ui-icon-arrowthick-2-n-s\"></span>"
+ $('#inputp' + contapara + '_id').val() + "</li>";
var $fm = $("#formparam");
$.get($fm.attr('${nextstep}')).done(function(data, ok) {
var fr = $fm.serialize();
fr = fr.replace(/\&/g, "+%23+");
fr = replacew(fr, /\=/g, "%24+"); // //fr=fr.replace(/\=/g,"%24+");
if (document.getElementById("inputp" + contapara
+ "_visible").checked == false)
fr = fr + "+%23+inputp" + contapara
+ "_visible%24+off";
// data is the content of the response
document.location.href = "index2?" + fr;
}).fail(function(data) {
alert('call failed');
// call failed for some reason -- add error
// messaging?
});
return false;
}
})
},
Cancel : function() {
$(this).dialog("close");
}
},
close : function() {
$(this).dialog("close");
}
});
$("#btn_Addpar").click(function() {
i = (parseInt(contapara) + 1);
$("#formparam").remove();
$("#wnd_Addparam")
.append('<form method="GET" name="formparam" id="formparam" action="${nextstep}">\
<input type="hidden" name="json_data" value="${json_data}">\
<input type="hidden" name="tag" value="${tag}">\
<table><tr><td><label>ID</label></td><td>\
<textarea class="expand" name="inputp'
+ i
+ '_id" id="inputp'
+ i
+ '_id"></textarea></td></tr>\
<tr><td><label>Type</label></td><td><select name="inputp'
+ i
+ '_type" id="inputp'
+ i
+ '_type">\
<option value="text">Text</option><option value="integer">Integer</option><option value="float">Float</option>\
<option value="list_values">List of values</option><option value="range">Range</option>\
<option value="selection_collapsed">Selection (collapsed)</option>\
<option value="selection_expanded">Selection (expanded)</option>\
<option value="subimage">Subimage selection</option>\
<option value="polygon">Polygon selection</option>\
<option value="horizontal_separator">Horizontal separator</option>\
</select></td></tr><tr><td><label> Description</label></td>\
<td><textarea class="expand" name="inputp'
+ i
+ '_description" id="inputp'
+ i
+ '_description"></textarea></td></tr>\
<tr><td><label>Value</label></td><td><textarea class="expand" name="inputp'
+ i
+ '_value" id="inputp'
+ i
+ '_value"></textarea></td></tr>\
<tr><td><label>Info (help)</label></td><td><textarea class="expand" id="inputp'
+ i
+ '_info" name="inputp'
+ i
+ '_info"></textarea></td></tr>\
<tr><td><label> Visible?</label></td><td><input type="checkbox" id="inputp'
+ i
+ '_visible" name="inputp'
+ i
+ '_visible" checked></td></tr></table></form>');
$("#wnd_Addparam").dialog("open");
});

Develop Reference

JavaScript is the programming language of the Web.

Change a variable in javascript after onclick - javascript

Related

form not clearing properly after submit and also for hidden input

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

Ajax function onload

How can I use HTML tooltip with trigger:'both' in Google Charts

Validate on the name created via javascript

Categories

Resources