We Keep Coding

How to get dynamic generated id of a checkbox to see if checkbox is checked or not?

I am generating multiple checkboxes with $.each loop and I am giving them the dynamic id's. On clicking the checkbox, I want to pass the Id of the checkbox to a function and see which checkbox is clicked and show the alert box "I am clicked". The data coming from JSON object "questions".
startQuiz = function() {
$container = $('#container');
$quizArray = '';
$.each(questions, function(i, q) {
if(q.id == $index) {
$.each(q.options, function(j, a) {
$quizArray += '<ul>';
$quizArray += '<li>';
$quizArray += '<input type="checkbox" id="' + a.ans + '" onclick="clickFunc(\'' + q.id + '\', \''+ a.no +'\', \''+ a.ans +'\')"';
$quizArray += '" value="';
$quizArray += a.ans;
$quizArray += '" /><label for="' + a.ans + '">';
$quizArray += a.ans;
$quizArray += '</label></li>';
$quizArray += '</ul>';
});
}
});
$container.append($quizArray);
}
clickFunc = function($id, $no, $ans) {
$.each(questions, function(x, data) {
if(data.id == $id) {
$.each(data.correct, function(y, data2) {
if($('#'+$ans).is(':checked') && data2.no == $no) {
alert("I am clicked");
}
});
}
});
}

How to include correctly an autocompletion inside js script?

I try to include an autocompletion inside the js, but I don't exactly how to make that insite a js row of table.
There the element make.
note : $t is an increment element
$products_specification_ajax = OSCOM::link('products_specification_ajax.php');
$output = <<<EOD
<script type="text/javascript"><!--
var specification_row = $t; // increment element
// call token-input js for autocompletion : data list
$(document).ready(function() {
$("#specificationName' + specification_row + '").tokenInput("{$products_specification_ajax}" ,
{
tokenLimit: 1,
resultsLimit: 5,
onResult: function (results) {
$.each(results, function (index, value) {
value.name = value.id + " " + value.name;
});
return results;
}
});
});
-- create new js row with all element
function addSpecificationValue() {
html = '<tr id="specification-row' + specification_row + '">';
html += '<td>';
-- input autocompketion call
html += ' <input type="text" name="products_specification[' + specification_row + '][name]" value="" id="specificationName' + specification_row + '" class="form-control token-input" />';
html += ' <input type="hidden" name="product_specification[' + specification_row + '][specification_id]" value="" />';
html += '</td>';
//remove
html += ' <td class="text-md-right"><button type="button" onclick="$(\'#specification-row' + specification_row + '\').remove();" data-toggle="tooltip" title="Remove" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>';
html += '</tr>';
$('#specification tbody').append(html);
specification_row++;
}
</script>
EOD;
the result in html
<script type="text/javascript"><!--
var specification_row = 3;
$(document).ready(function() {
$("#specificationName' + specification_row + '").tokenInput("http://....../products_specification_ajax.php" ,
{
tokenLimit: 1,
resultsLimit: 5,
onResult: function (results) {
$.each(results, function (index, value) {
value.name = value.id + " " + value.name;
});
return results;
}
});
});
function addSpecificationValue() {
html = '<tr id="specification-row' + specification_row + '">';
//specification_name
html += '<td>';
html += ' <input type="text" name="products_specification[' + specification_row + '][name]" value="" id="specificationName' + specification_row + '" class="form-control token-input" />';
html += ' <input type="hidden" name="product_specification[' + specification_row + '][specification_id]" value="" />';
html += '</td>';
//specification_text
html += ' <td>';
html += '<div class="input-group"><span class="input-group-addon"><img src="language/en-gb/en-gb.png" title="English" /></span><textarea name="products_specification[' + specification_row + '][product_specification_description][1][text]" rows="5" placeholder="Text" class="form-control"></textarea></div>';
html += ' </td>';
// customers id
html += '<td>';
html += ' <select name="products_specification[' + specification_row + '][customers_group_id]" class="form-control"><specification value="0">text_customers_group</specification><specification value="0">Client normal</specification><specification value="1">Tarifs 1</specification><specification value="99">Tous les groupes clients</specification></select>';
html += '</td>';
//status
html += '<td>';
html += ' <select name="products_specification[' + specification_row + '][status]" class="form-control">Array</select>';
html += '</td>';
//remove
html += ' <td class="text-md-right"><button type="button" onclick="$(\'#specification-row' + specification_row + '\').remove();" data-toggle="tooltip" title="Remove" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>';
html += '</tr>';
$('#specification tbody').append(html);
specification_row++;
}

U need append that input with java to write document but need exact name for it or id to identify which one u write or you can change all input there is a property for inputs for autocompletion
How to insert value of dynamically created input boxes into database
https://www.w3schools.com/tags/att_input_autocomplete.asp
Set the value of an input field
Many helpful stuffs.

My JSON data is loading in twice using AJAX, it is only supposed to load once on click

I am using AJAX and Jquery to load a json object into my web page. It works great however 50-70% of the time it loads in the json data to my page twice, it appends the second set of data to my page, is there a good way to ensure that my data only loads once?
my initial thought was to make the json call synchronous instead of asynchronous but that doesn't sound right, is there a better way of doing it?
$('#myResource').click(function() {
$.getJSON("data/preachers.json", function(result) {
$.each(result, function(i, field) {
$("#preachers").append( function() {
var preacher = '<div class="box box1">';
preacher += '<div class="image">';
preacher += '<a href=' + '"' + (field.link) + '"' + ' target="_blank">';
preacher += '<img src= "img/resources/' + (field.image) + '" alt="' + (field.name) + '" class="resource_image">';
preacher += '</a>';
preacher += '</div>'; //class = image
preacher += '<div class="text">';
preacher += '<p><h2>' + (field.name) + '</h2>';
preacher += (field.details) + '</p>';
preacher += '</div>'; //class=text
preacher += '</div>'; //class=box
return preacher;
});
});
});
});

Try
$('#myResource').unbind('click').click(function(){
})...

try to disable a button after click
$('#myResource').click(function() {
$('#myResource').prop('disabled' , true); //<<<<<<<<<<<<<<<< here
$.getJSON("data/preachers.json", function(result) {
$.each(result, function(i, field) {
$("#preachers").append( function() {
var preacher = '<div class="box box1">';
preacher += '<div class="image">';
preacher += '<a href=' + '"' + (field.link) + '"' + ' target="_blank">';
preacher += '<img src= "img/resources/' + (field.image) + '" alt="' + (field.name) + '" class="resource_image">';
preacher += '</a>';
preacher += '</div>'; //class = image
preacher += '<div class="text">';
preacher += '<p><h2>' + (field.name) + '</h2>';
preacher += (field.details) + '</p>';
preacher += '</div>'; //class=text
preacher += '</div>'; //class=box
return preacher;
});
$('#myResource').prop('disabled' , false); //<<<<<<<<<<<<<<<<<<<<<<< here
});
});
});

with the help of some of the comments, the answer ended up being that i needed to unbind click at the beginning of the function, and leaving it unbound:
$('#myResource').click(function() {
$( "#myResource").unbind( "click" );
$.getJSON("data/preachers.json", function(result) {
$.each(result, function(i, field) {
console.log('load everything');
$("#preachers").append( function() {
var preacher = '<div class="box box1">';
preacher += '<div class="image">';
preacher += '<a href=' + '"' + (field.link) + '"' + ' target="_blank">';
preacher += '<img src= "img/resources/' + (field.image) + '" alt="' + (field.name) + '" class="resource_image">';
preacher += '</a>';
preacher += '</div>'; //class = image
preacher += '<div class="text">';
preacher += '<p><h2>' + (field.name) + '</h2>';
preacher += (field.details) + '</p>';
preacher += '</div>'; //class=text
preacher += '</div>'; //class=box
return preacher;
});
});
});
});

ReferenceError: display is not defined

I got this 'ReferenceError: display is not defined' where my script link are as below.
<script type="text/javascript" src="catalog/view/javascript/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="catalog/view/javascript/jquery/ui/jquery-ui-1.8.16.custom.min.js"></script>
I replace them with latest version 1.11.1 and tried with
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
But still there is Reference Error. What should i change my display function(Script):
function display(view) {
if (view == 'list') {
$('.product-grid').attr('class', 'product-list');
$('.product-list > div').each(function(index, element) {
html = '<div class="left">';
var image = $(element).find('.image').html();
if (image != null) {
html += '<div class="image">' + image + '</div>';
}
html += '<div class="mask hide-phone">';
html += ' <div class="wishlist">' + $(element).find('.wishlist').html() + '</div>';
html += ' <div class="compare">' + $(element).find('.compare').html() + '</div>';
html += '</div>';
html += ' <div class="name">' + $(element).find('.name').html() + '</div>';
html += ' <div class="description">' + $(element).find('.description').html() + '</div>';
var rating = $(element).find('.rating').html();
if (rating != null) {
html += '<div class="rating">' + rating + '</div>';
}
var price = $(element).find('.price').html();
if (price != null) {
html += '<div class="price">' + price + '</div>';
}
html += ' <div class="cart">' + $(element).find('.cart').html() + '</div>';
html += ' <div class="cart-phone show-phone hide-desktop hide-tablet">' + $(element).find('.cart-phone').html() + '</div>';
html += '</div>';
$(element).html(html);
});
$('.display').html(' <div id="list_b"></div> <a id="grid_a" title="<?php echo $text_grid; ?>" onclick="display(\'grid\');"></a>');
$.totalStorage('display', 'list');
} else {
$('.product-list').attr('class', 'product-grid');
$('.product-grid > div').each(function(index, element) {
html = '';
var image = $(element).find('.image').html();
if (image != null) {
html += '<div class="image">' + image + '</div>';
}
html += '<div class="mask hide-phone">';
html += ' <div class="wishlist">' + $(element).find('.wishlist').html() + '</div>';
html += ' <div class="compare">' + $(element).find('.compare').html() + '</div>';
html += '</div>';
html += '<div class="name">' + $(element).find('.name').html() + '</div>';
html += '<div class="description">' + $(element).find('.description').html() + '</div>';
var rating = $(element).find('.rating').html();
if (rating != null) {
html += '<div class="rating">' + rating + '</div>';
}
var price = $(element).find('.price').html();
if (price != null) {
html += '<div class="price">' + price + '</div>';
}
html += '<div class="cart">' + $(element).find('.cart').html() + '</div>';
html += ' <div class="cart-phone show-phone hide-desktop hide-tablet">' + $(element).find('.cart-phone').html() + '</div>';
$(element).html(html);
});
$('.display').html(' <a id="list_a" title="<?php echo $text_list; ?>" onclick="display(\'list\');"><?php echo $text_list; ?></a> <div id="grid_b"></div>');
$.totalStorage('display', 'grid');
}
}
view = $.totalStorage('display');
if (view) {
display(view);
} else {
display('list');
}

you can see that your conactenation is creating issues:
copied from the source of your link
html += '
<div class="cart" >
' + $(element).find('.cart').html() + '</div>';
at this line your div is having a newline character. may be this is caused by something else but you can do this:
html += ' <div class="cart">' + $(element).find('.cart').html() + '</div>';
html += ' <div class="cart-phone show-phone hide-desktop hide-tablet">' + $(element).find('.cart-phone').html() + '</div>';
html += '</div>';
here you can see html+=' <div>' this line is having a space before the div so you can remove it.
html += '<div class="cart">' + $(element).find('.cart').html() + '</div>';
html += '<div class="cart-phone show-phone hide-desktop hide-tablet">' + $(element).find('.cart-phone').html() + '</div>';
html += '</div>';

How to modify advlink.js?

What I thought should have been easy has now taken great amount of my time.
I'm simply trying to edit some text in the /plugins/advlink/js/advlink.js file.
Consider this function:
function getTargetListHTML(elm_id, target_form_element) {
var targets = tinyMCEPopup.getParam('theme_advanced_link_targets', '').split(';');
var html = '';
html += '<select id="' + elm_id + '" name="' + elm_id + '" onchange="this.form.' + target_form_element + '.value=';
html += 'this.options[this.selectedIndex].value;">';
html += '<option value="_self">' + tinyMCEPopup.getLang('advlink_dlg.target_same') + '</option>';
html += '<option value="_blank">' + tinyMCEPopup.getLang('advlink_dlg.target_blank') + ' (_blank)</option>';
html += '<option value="_parent">' + tinyMCEPopup.getLang('advlink_dlg.target_parent') + ' (_parent)</option>';
html += '<option value="_top">' + tinyMCEPopup.getLang('advlink_dlg.target_top') + ' (_top)</option>';
for (var i=0; i<targets.length; i++) {
var key, value;
if (targets[i] == "")
continue;
key = targets[i].split('=')[0];
value = targets[i].split('=')[1];
html += '<option value="' + key + '">' + value + ' (' + key + ')</option>';
}
html += '</select>';
return html;
}
If I make changes to for example advlink_dlg.target_blank in the appropriate language file, the changes seems to show up ok.
But if I try to change the ' (_blank)' on the same line to whatever, eg. ' (__blank)', nothing happens.
Why is that?

What you did should work!
I changed the line (in /plugins/advlink/js/advlink.js) to
html += '<option value="_blank">' + tinyMCEPopup.getLang('advlink_dlg.target_blank') + ' (XXXXXXXXXXXX_blank)</option>';
and see what i got after selecting some text + pushing the link-button: