Issue with onclick buttons hmtl and javascript

Question

0.00/5 (No votes)

See more:

I have one main html page, with sidebar (with two different links) and one section in which I have to show table, depending on which links in sidebar I click.

First link shows table with users in the section, and if I click on second link it will show table of cities in the same section. I am not reloading header of the page and sidebar, but ONLY section part in which the tables (one at the time) will be shown. Both of the tables will have buttons Add, Edit, Delete.

I am doing that with javascript and ajax call.

The problem is when I click on the firts link on the sidebar, the table of Users will be shown on the page and all buttons are properly on.click working.

After that I click on second link on the sidebar and the table of Cities will be shown, but the buttons are not working.

When I return again on the first link of sidebar, even those buttons which were previously working, are not working now.

How to solve this issue?

Thank you

What I have tried:

Tried browsing to find the problem, but couldn't solve it

Posted 17-Nov-19 0:06am

Sinisa Janjetovic

Updated 17-Nov-19 3:33am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Visweswaran N · Answer 1 · 2019-11-17T03:34:00

I don't understand your problem fully but I will try my level best to explain.

Your problem is:
1. You have a button which is not working
2. You need to show tables on the link/button is pressed.

Here an example code for your learning

HTML

<!-- SWAMI KARUPPASWAMI THUNNAI -->

<!DOCTYPE html>
<html>
<head>
	<title>Buttons and Tables</title>
	<script type="text/javascript">
		// For showing and hiding table
		function show_table(_id)
		{
			let div = document.getElementById(_id);
			// If not displayed
			if(div.style.display==="none")
			{
				div.style.display = "block"; // then display
			}
			else
			{
				div.style.display = "none"; // hide
			}
		}

		// For adding rows
		function add_row(_id)
		{
			let table_one = document.getElementById(_id);
			let row =table_one.insertRow(-1);
			let c1 = row.insertCell(0);
			let c2 = row.insertCell(1);
			c1.innerText ="SOMETHING";
			c2.innerText ="SOMETHING";
		}
	</script>
</head>
<body>
	<!-- 
		A section of code can be wrapped into a conatiner called div.
		id is an unique identifier for div. We will create two div's with two tables.
	-->
	<div id="div_one" style="display: none;">
		<table id="table_one" border="1">
			<thead>
				<tr>
					<th>SNO FOR TABLE 1</th>
					<th>NAME FOR TABLE 1</th>
				</tr>
			</thead>
			<tbody>
				<!-- Do something -->
			</tbody>
		</table>
	</div>

	<div id="div_two" style="display: none;">
		<table id="table_two" border="1">
			<thead>
				<tr>
					<th>SNO FOR TABLE 2</th>
					<th>NAME FOR TABLE 2</th>
				</tr>
			</thead>
			<tbody>
				<!-- Do something -->
			</tbody>
		</table>
	</div>

	<!-- Button 1 when clicked will show table 1 and Button 2 will do the same for table 2. Clicking the same button
	will do vice versa -->
	<!-- this.value takes the data from value attribute in the present tag which is button here-->
	<button type="button" onclick="show_table(this.value);" value="div_one">SHOW TABLE 1</button>
	<button type="button" onclick="show_table(this.value);" value="div_two">SHOW TABLE 2</button>

	<!-- Add rows in tables -->
	<button type="button" onclick="add_row(this.value)" value="table_one">ADD A ROW IN TABLE 1</button>
	<button type="button" onclick="add_row(this.value)" value="table_two">ADD A ROW IN TABLE 2</button>
</body>
</body>
</html>