Adding a details button to a dynamic HTML list - javascript

I have an HTML list that is generated dynamically using filtered data.
<tbody>
#{
foreach (var item in listado.Where(x => x.Raw != null)) {
<tr>
<td>#item.Id</td>
<td>#item.Usuario</td>
<td>#item.NIF_CIF</td>
<td>
#if (!(String.IsNullOrEmpty(item.Telefono)) && !(String.IsNullOrWhiteSpace(item.Telefono))) {
#item.Telefono
} else {
#Html.Raw("No disponible")}
</td>
<td>#Math.Round(item.PrecioTotal) €</td>
<td>#item.FechaCreacion.ToShortDateString()</td>
<td>
<button id="detalles#(item.Id)">Detalles</button>
</td>
</tr>
<tr id="vistaDetalles#(item.Id)" hidden>
<td>Detalles del presupuesto</td>
</tr>
}
}
</tbody>
I've tried to tag the button as you can see using the item.Id and then point to it in this script:
<script>
$("document").ready(function (Id) {
$("#detalles"+ Id).click(function (Id) {
$("#vistaDetalles" + Id).show();
});
});</script>
I've also tried not to tag them and catch all the buttons (removing the +Id part) and the same technique to catch all the hidden tds, but nothing works. What am I doing wrong? Also, can you recommend some learning material so I can get this part a bit clearer?
Thanks in advance. Regards.

You can use data attributes for this purpose
HTML
<button class="detalles" data-itemid="#item.Id">Detalles</button>
jQuery
$(".detalles").on("click",function(){
var itemId = $(this).data('itemid');
$('#vistaDetalles'+itemId).show();
});

I would replace your button with
<button onclick="detalles(#item.Id)">Detalles</button>
And change your JavaScript to:
<script>
function detalles(Id) {
$("#vistaDetalles" + Id).show();
};
</script>

Try it:-
<script>
$("document").ready(function (Id) {
$("body").on("click","#detalles"+ Id, function (Id) {
$("#vistaDetalles" + Id).show();
});
});</script>

Related

jQuery: Detect duplicate in select & show an alert

The code below has a select with three options. When you choose one of the options and click add the option is added to the table. If the user were try to choose the same option I need an alert or modal window to appear saying "Duplicates not allowed."
Anyone have an idea how to accomplish that?
$("select#keys").change(function(){
$("#add-user-code").click(function(){
var selectedKey = $("#keys").val();
$("#3rd-row").show();
$('#example').html('<span class="lbl">' + selectedKey + ' </span>');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<select class="select-duc" id="keys">
<option></option>
<option>Allergies</option>
<option>Animals</option>
<option>Coughing</option>
</select>
<button type="button" id="add-user-code" class="btn btn-default pull-right" data-dismiss="modal">Add User Code</button>
<div class="col-sm-6 reset">
<div class="details-page-container two">
<h5>User Codes</h5>
<div class="table-container">
<table>
<tbody><tr>
<th><strong>Code</strong></th>
<th><strong>Description</strong></th>
<th><strong>Domain</strong></th>
<th><strong>Start Date</strong></th>
<th><strong>End Date</strong></th>
<th><strong>Delete</strong></th>
</tr>
<tr>
<td>01</td>
<td>MINNEAPOLIS</td>
<td>MN</td>
<td>11/01/2019</td>
<td></td>
<td>Delete</td>
</tr>
<tr>
<td>02</td>
<td>MINNEAPOLIS</td>
<td>MN</td>
<td>11/01/2019</td>
<td></td>
<td>Delete</td>
</tr>
<tr id="3rd-row" class="hideIT">
<td id="example"></td>
<td>MINNEAPOLIS</td>
<td>MN</td>
<td>11/01/2019</td>
<td>12/01/2019</td>
<td><a data-toggle="modal" data-target="#myModal2" href="#">Delete</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Define an array, and
In your $("#add-user-code").click function:
Check if the value(which user selected) is already present in the array or not(To show the alert),
push the index/value to the array after adding it to your table(So that next time the condition fails and alert would show up).
Also, don't forget to remove items from the array whenever needed(User Starts again or item is removed from the table)/
I'd better just hide the duplicate option when the one is selected and show them back when/if its unselected, for better user experience.
Otherwise, you can make an array of selected values and loop through it when an option selected, something like this:
var selectedOptions = [];
$("select#keys").change(function(){
$("#add-user-code").click(function(){
var selectedKey = $("#keys").val();
if($.inArray(selectedKey, selectedOptions)) {
alert ("Duplicate values are not allowed");
} else {
selectedOptions.push(selectedKey);
}
$("#3rd-row").show();
$('#example').html('<span class="lbl">' + selectedKey + ' </span>');
});
});
Still, it has to be reset when options are unselected, I don't see multiple options in your snippet, though
You can create a function to return all the values to check whether the value the user wants to insert does not exits already
function getTableValues() {
return $('tr').find('td:first-child').map(function() {
return $( this ).text();
}).get();
}
$("select#keys").change(function(){
$("#add-user-code").click(function(){
var selectedKey = $("#keys").val();
if(!getTableValues().includes(selectedKey)) {
$("#3rd-row").show();
$('#example').html('<span class="lbl">' + selectedKey + ' </span>');
}
else {
alert('Duplicate not allowed');
}
});
I don't think you need the .click() bind inside of the .change() bind. Also, rather than using an alert, you could just make that option not available.
$("#add-user-code").click(function(){
$('#example').html('<span class="lbl">' + $('#keys option:selected').hide().text() + ' </span>');
$("#3rd-row").show();
$('#keys option:eq(0)').prop('selected', 'selected'); //set the select back to the blank option
});
Then if you click delete:
$('a').click(function() {
let example = $('#example .lbl').text().trim();
$('#keys option').filter(function() {return this.textContent === example; }).show();
$("#3rd-row").hide();
});
You shouldn't need an array or function to achieve what you're after.
https://jsfiddle.net/g9523ysz/
If you really need an alert:
$("#add-user-code").click(function(){
let option = $('#keys option:selected').text();
if (option) {
if ($('td').filter(function() { return $(this).find('.lbl').text().trim() === option; }).length){
alert('Duplicates not allowed.');
} else {
$("#3rd-row").show();
$('#example').html('<span class="lbl">' + option + ' </span>');
}
}
});
I would suggest that if you can, use a more specific class for the span, like lbl-user-code. Then rather than having to check every single td you could:
if ($('.lbl-user-code').filter(function() { return this.textContent === option; }).length) { ... }
https://jsfiddle.net/9us4d08j/

How can i clone or add multiple ck editor on page

I want multiple textarea(ck editor) where user can input multiple data in it , i tried various function and methods of jquery like clone() and appendTo but the problem is they are cloning the textarea but ckeditor is not working, after cloning the textarea i am unable to wrote anything in it
Please help me with it.
This is what i tried
test1
http://jsfiddle.net/FADxv/793/
test2
http://jsfiddle.net/kbqjnecx/3/
Thanks
Add an id to each new textarea and manually initialize the editor using
CKEditor.replace(id [,config])
Something like:
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
var editorId = 'editor_' + x;
$(wrapper).append('<div> <textarea id="'+editorId+'" class="ckeditor" name="ck[]"></textarea>Remove</div>'); //add input box
CKEDITOR.replace(editorId, { height: 200 });
}
});
DEMO
Check this for cloning ckeditor.
Check this fiddle : http://jsfiddle.net/manektech/47htysb5/
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://cdn.ckeditor.com/4.5.4/standard/ckeditor.js"></script>
</head>
<body>
<div class="row hide_mail_id_domain">
<div class="col-sm-12">
<table class="table">
<thead>
<tr>
<th>Option</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<textarea class="ckeditor" required="" name="question_option_1" ></textarea>
</td>
<td></td>
</tr>
</tbody>
</table>
Add More
</div>
</div>
<script>
var REMOVE = '';
var i=1;
$(document).ready(function () {
$('.add_more').click(function () {
var oneplus=i+1;
var tr_object = $('tbody').find('tr:first').clone();
// getting and renaming existing textarea by name.
$(tr_object).find('textarea[name="question_option_1"]').attr("name", "question_option_"+oneplus+"");
$(tr_object).find('input').val('');
$(tr_object).find('td:last').html('Remove');
$('tbody').append(tr_object);
//replace code
CKEDITOR.replace("question_option_"+oneplus+"");
// when i were clicking on add more during my testing , then extra cke-editor id also appending to DOM. so for removing other then first
// included below code
$('#cke_question_option_1').each(function() {
var $ids = $('[id=' + this.id + ']');
if ($ids.length > 1) {
$ids.not(':first').remove();
}
});
i=i+1;
oneplus++;
});
$(document).on('click', '.remove_more', function () {
var id = $(this).closest('tr').find('.id').val();
if (id != '') {
if (REMOVE != '') {
REMOVE = REMOVE + ',' + id;
} else {
REMOVE = id;
}
$('#id').val(REMOVE);
}
$(this).closest('tr').remove();
});
});
</script>
</body>
</html>

Run OnChange event for each row in table - MVC

MVC 5 - Razor, Javascript
Novice user!!
I would like to be able to run a simple onchange event when a checkbox is altered in the table, but the onchange only works for the first row.
I have read that this is because the script only runs on the first row and does not run for the subsequent dynamically populated data.
I understand this but don't know how to fix it... I assume that I need to create an individual ID for each checkbox in the each row - I don't know how to do this.
Also, when the checkboxes have different IDs I don't know how to refer to them to add the onchange.
Hope this makes sense. Thanks in advance.
#model IEnumerable<core_point.Models.RegisterEmployee_Step6Model>
#{
ViewBag.Title = "Index";
}
<h2>Select the roles that you have been employed to do, by clicking the check-box...</h2>
<table class="table">
#foreach (var item in Model)
{
<tr class="h3">
<td class="vert-align">
<img src="#item.IconLocation" height="80" width="80" />
</td>
<td class="vert-align">
#Html.CheckBoxFor(modelItem => item.Selected, new { #id = "CheckBoxSelected" })
</td>
<td class="vert-align">
#Html.DisplayFor(modelItem => item.RoleDescription)
</td>
<td class="vert-align">
#Html.TextBoxFor(modelItem => item.Role, new { hidden = "hidden"} )
</td>
</tr>
}
</table>
<div>
Roles selected:<input type="number" id="noSelected" value="0"/>
</div>
<script>
var fld_CheckBoxSelected = document.getElementById("CheckBoxSelected");
var fld_noSelected = document.getElementById("noSelected");
fld_CheckBoxSelected.onchange = function () {
if (fld_CheckBoxSelected == true) {
fld_noSelected = fld_noSelected.value + 1;
}
else
{
fld_noSelected = fld_noSelected.value - 1;
}
}
</script>
replace id with class in CheckBoxFor:
<td class="vert-align">
#Html.CheckBoxFor(modelItem => item.Selected, new {#class= "CheckBoxSelected"})
</td>
In Javascript code use fallowing code:
(function($) {
var onChanged = function(){
/*Do smth that you needed*/
};
$(function() {
$(".checkbox").on("change", onChanged)
});
}(jQuery));
Because all your input boxes will have the same Id value "CheckBoxSelected". That is invalid markup.Id values should be unique.
You may consider removing the id from the markup and use a css class.
#Html.CheckBoxFor(modelItem => item.IsSelected, new { #class = "mycheckBox" })
and using jQuery library, listen to the change event on the input element with this css class.
$(function(){
$("input.mycheckBox").change(function(){
var isSelected = this.checked;
alert("Checkbox changed");
if (isSelected ) {
$("#noSelected").val( parseInt($("#noSelected").val())+ 1));
}
else
{
$("#noSelected").val( parseInt($("#noSelected").val()) - 1));
}
});
});
Assuming the current value of input with id noSelected is a numeric value(else parseInt will fail).

How can I fix jquery when i change table elements to div style in body section?

<body>
<input type="text" id="search"/>
<table id="boxdata">
<tr>
<td class="namebox1">jQuery</td>
</tr>
<tr>
<td class="namebox2">javascript</td>
</tr>
<tr>
<td class="namebox3">php</td>
</tr>
<tr>
<td class="namebox4">sql</td>
</tr>
<tr>
<td class="namebox5">XML</td>
</tr>
<tr>
<td class="namebox6">ASP</td>
</tr>
</table>
</body>
<script>
$(document).ready(function(){
$('#search').keyup(function(){
searchBox($(this).val());
});
});
function searchBox(inputVal) {
$('#boxdata').find('tr').each(function(index, row){
var names = $(row).find('td');
var found = false;
if(names.length > 0) {
names.each(function(index, td) {
var regExp = new RegExp(inputVal, 'i');
if(regExp.test($(td).text()) & inputVal != ''){
found = true;
return false;
}
});
if(found == true)
$(row).addClass("red");
else
$(row).removeClass("red");
}
});
}
</script>
there's a textfield for searching words and there are 6 words in the each 6 boxes below textfield.(I omitted css codes. but, it wouldnt matter to solve the problem.). if i type a letter 's' then the words that including letter 's' like 'javascript', 'sql', 'ASP' these font-color will be changed black to red. And i made it by using table elements in html but i'd like to change all elements into div style to put some data fluidly later. i have difficulty to fix especially jquery. how can i fix it?
You can simplify this a little bit.
function searchBox(inputVal) {
var regExp = new RegExp(inputVal, 'i');
$('#boxdata').find('tr').removeClass('red').filter(function() {
return $(this).find('td').filter(function() {
return regExp.test( $(this).text() );
}).length && $.trim(inputVal).length;
}).addClass('red');
}
So remove the red class from all <tr>'s first, then filter them, test the text of each <td>, if it matches, return the <tr> and then add the class red again.
Here's a fiddle
As for changing from a table to div, the jQuery would depend on how you structure your markup, but the principle would remain the same.
Here's another fiddle
You can make javascript code HTML agnostic by using css classes instead of element names. Demo.
function searchBox(inputVal) {
var regExp = new RegExp(inputVal = $.trim(inputVal), 'i'),
highlight = 'red';
$('#wrapper').find('.word') //instead of tr/td/div
.removeClass(highlight)
.each(function(){
var $this = $(this);
inputVal && regExp.test($this.text()) &&
$this.addClass(highlight);
});
}

How to get html <td> values using javascript in grid table

I'm using mvc, I want to get the value of each and every td to edit in my table
<table>
<tr>
<td id="val"></td>
</tr>
</table>
<input type="button" value="" class="edit"/>
And in the javascript am using
var td = $(document).getElementById("val").innetHTML;
$(document).on('click', '.edit', function (e) {
if(td == null)
{
}
else
code......
})
But whenever am clicking the row edit button it is returning only the first row value, not getting the value of second and further.
Any suggestion will be greatly appreciated.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function()
{
$('.edit').click(function()
{
$('table td').each(function() {
var val = $(this).html();
alert(val);
});
});
});
</script>
You have to use 'class' attribute instead 'id':
<table>
<tr><td class="editVal"></td></tr>
<tr><td class="editVal"></td></tr>
<tr><td class="editVal"></td></tr>
</table>
You have to use JQuery for iterate each element:
$('.editVal').each(function(i) {
// get value
var $td = $(this).html;
// set value
$(this).html = 'Nuovo valore';
}
If you are trying to get the values of a table one by one, I think jquery each is the function for you.
There is also another question in SO with a good example.

Categories

Resources