Show row after pressing button - javascript

I want to show Row #1 on default and then when you press the "load more" button, load another row each time. I already have the content in the rows (no need for AJAX) but I just want to be able to show it when the button's pressed.

See this jsFiddle example.
The JavaScript part, with jQuery:
$('#loadmore').click(function(){
$('tr.hide').first().removeClass('hide').addClass('show');
});

Use display: none; by default on all rows (except row #1).
Then on each click, use .show() on the given row or :
$('BUTTON_SELECTOR').click(function(){
$('ROWS_CONTAINER_SELECTOR:hidden:first').show();
});

If you already have the data then you can simply set the container div to overflow: hidden and resize it to display an extra row with each click.
$("#button").click(function(){
$("#container").css("height","+=150");
});

Related

Visible table after click submit

I would like show table after click button submit. I made function hide table and onload in body and second function show table and put it in submit button . Then table is visible only moment. So it is bad solution.
give your table a
display:none
in the css
then in Javascript , you capture the form submit , and change the display property of the element to block

Add a button to open pop up in jQuery Data Table

In my app, I used jQuery Data Table to show the results of a query made by form. I have now a new task: I must add, in this table, a column where for each row I have a button (or a link, no matter which of this 2).
The focal point is that when a user click this button or link, a popup must be open to allow the operator to modify some value in the db (so it's for this that I need a button for each row; every row may have a value to modify, or not).
The question is: how can I add this button/link and how can I force, after click, the popup opening?
You can do this like:
$('#data_table').DataTable( {
data: data
});
$(document).on('click', '#data_table tbody tr', function(){
// alert('hello');
$('#dialog').dialog();
});
Working Fiddle
Note: In this example I am using jquery ui dialog, you can use Bootstrap modal as well
Use bootstrap Modal. Bootstrap modal will allow you to do the operation you want

modal window changes some rows in table instead of one

I have a table with some rows. Table rows can be modified by ajax requests. Modifying happens in a modal widnow for the current row (just for one).
So, I found a bug. I click edit for 1st line. I see the modal window with values of 1st line. So, it's ok. Then I click close without saving. Well. I click edit for 2nd line. I see the modal window with values of 2nd line. So, it's ok too. Now, if I click Save changes, I see two modified rows (1st and 2nd), but it seems just 2nd row must be modified. If I do the same for N count of rows I see N changed rows.
I don't understand why it's happen. Can anybody explain me?
https://jsfiddle.net/bogdan_017/26gaqpcf/#&togetherjs=C1ltBspbSs
Every time you click on an edit, you ADD another click event to the save button ... in this code modal.find(".save-btn").click(function () {
you need to remove the click event on the save button once you click on it
// snip
modal.modal('hide');
$(this).off('click'); // add this here
// snip
You'll also need to handle the modal close (the close button) and remove the click event on the save button in that case

How to toggle table column?

I am trying to toggle a table column by providing a button in the header of every column, when user clicks on the button that specific column should be hidden and when user clicks it again it should open. But my problem is as i am hiding the whole column when user clicks on the button in the header user is not able to see the button. Can anyone suggest me how this can be achieved using jquery?
You can see the image as below
Thanks,
Praveen.
Table column hide or display
The best solution to the problem is place your button in th
jquery
$(document).ready(function() {
$('#btnHide').click(function() {
$('td:nth-child(1)').toggle();
});
});
Check out second case
Solved Checkout

jQuery .prop("disabled",true) not working

I have a dropdown that loads the data and there is a Add button and when the add button is being triggered it will be disabled. It works in the first load, but when the dropdown is onchange the disabled button will be false or not disabled. So how can I still disable the button when the dropdown is being changed. I have also a input field to store the values of the button that has been clicked. Check http://jsfiddle.net/leonardeveloper/qy9u5/.
Problem is, you are appending a new element every time your <select> is changed. You need to be showing and hiding the same respective table each time. You can use jQuery to create those tables using the <option>s. Like so:
$("#loads option").each(function(){
thisNumber = this.value;
$("#displays").append("<table data-table="+thisNumber+"><tr><td>"+thisNumber+"</td><td>"+thisNumber+"</td><td><button class='materialId' value='"+thisNumber+"'>Add</button></td></tr></table>");
$("#displays table").hide();
});
We append the tables (2 in this case) to #displays, and then hide them. When we change the <select> now, we hide all tables, and show the one we selected, I've used data-table for this but there are many ways to target your specific table.
$(document).on("change","#loads", function(){
$("#displays table").hide();
$("#displays table[data-table="+this.value+"]").show();
});
JSFiddle
Try to bind click event also.
Demo
$(document).on("change click","#loads",...

Categories