CODEWITHSUNDEEP
javascriptjqueryjquery-ui
RXP
RXP

Reputation: 677

For loop within a JQuery function

I am trying to create a bunch of tabs using JQuery within a JSP file. The for loop does not seem to execute more than once. I am expecting to see the two tabs + 5 tabs created. I only see the "Login", "Register" and "New Tab 0" tabs. What am I doing wrong? I am a completely new to this. Thanks in advance for your help

Below is the entire index.jsp file and the for loop is within the script tags towards the bottom of the file

$((function() {
  var tabs = $("#container").tabs();
  var maxVal = 5;
  var i = 0;
  for (i = 0; i < 5; i++) {
    var ul = tabs.find("ul");
    $("<li><a href='#newtab'>New Tab " + i + " </a></li>").appendTo(ul);
    $("<div id='newtab'>Name :<input type='text'></input></div>").appendTo(tabs);
    tabs.tabs("refresh");
    tabs.tabs('select', 1);
  };
}))
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div id="container">
  <div id="tabs">
    <ul>
      <li><a href="#login">Login</a></li>
      <li><a href="#register">Register</a></li>
    </ul>
    <div id="login">
      <label for="email">Email:</label> <br /> <input type="text" name="email" id="email" /> <br /> <label for="password">Password:</label>
      <br /> <input type="password" name="password" id="password" /> <br />
      <br /> <input type="submit" value="Login">
    </div>
    <div id="register">
      <label for="name">Name:</label><br /> <input type="text" name="name" id="name" /> <br /> <label for="email">Email:</label><br />
      <input type="text" name="email" id="email" /> <br /> <label for="password">Password:</label><br /> <input type="password" name="password" id="password" /> <br /> <label for="address">Address:</label><br />
      <input type="text" name="address" id="address" /> <br /> <br /> <input type="submit" value="Register">
    </div>
  </div>
</div>

Upvotes: 0

Views: 59

Answers (3)

RXP
RXP

Reputation: 677

Thanks all very much! Your replies helped me debug and fix the code. Below is the code a - which is what I was expecting!

    `<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Empty Tabs Example</title>
<link rel="stylesheet" href="css/jquery-ui.css">
<link rel="stylesheet" href="css/style.css">

<script src="js/jquery-3.3.1.js"></script>
<script src="js/jquery-ui.js"></script>

</head>
<body>
		<div id="container">
			<div id="tabs">
				<ul>
					<li><a href="#login">Login</a></li>
					<li><a href="#register">Register</a></li>
				</ul>
				<div id="login">
						<label for="email">Email:</label> <br /> <input type="text"
							name="email" id="email" /> <br /> <label for="password">Password:</label>
						<br /> <input type="password" name="password" id="password" /> <br />
						<br /> <input type="submit" value="Login">
				</div>
				<div id="register">
						<label for="name">Name:</label><br /> <input type="text"
							name="name" id="name" /> <br /> <label for="email">Email:</label><br />
						<input type="text" name="email" id="email" /> <br /> <label
							for="password">Password:</label><br /> <input type="password"
							name="password" id="password" /> <br /> <label for="address">Address:</label><br />
						<input type="text" name="address" id="address" /> <br /> <br /> <input
							type="submit" value="Register">
				</div>
			</div>
		</div>
</body>

<script>
$((function() {
        var tabs = $("#container").tabs();
		var maxVal = 5;
 		var i = 0
 		for (i = 0; i < 5; i++) {
            var ul = tabs.find("ul");
            $( "<li><a href=#newtab_" + i + ">New Tab " + i + " </a></li>" ).appendTo(ul);
            $( "<div id=newtab_" + i + ">Name :<input type='text'></input></div>" ).appendTo(tabs);
            tabs.tabs("refresh");
            tabs.tabs("option", "active", 0);
 		}
    }));
</script>

</html>`

Upvotes: 0

Slawomir Dziuba
Slawomir Dziuba

Reputation: 1325

That's enough to illustrate the problem. I hope jQuery is there for more than just to get the $ function.

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
      <div id="tabs">
				<ul>
					<li><a href="#login">Login</a></li>
					<li><a href="#register">Register</a></li>
				</ul>
			</div>
</body>
</html>
                
<script>
(function() {
            for(var i=0; i<5; i++) {
                $( "<li><a href='#newtab"+i+"'>New Tab " + i + " </a></li>" ).appendTo("ul");
            }            
})();     
</script>

Upvotes: 0

Daniel
Daniel

Reputation: 3370

You can fix this specific problem by changing your line:

 tabs.tabs('select', 1);

to be

tabs.tabs("option", "selected", 1);

However, there are a few other problems here that you may want to consider. You're performing more work in your loop than necessary, and it's not clear to me where you intended each tab to be added and if you're actually adding them where you need.

Finally, do look into how to use the javascript console in whatever browser you're using. Running your code produces an error: Uncaught Error: no such method 'select' for tabs widget instance which would have definitely helped you in tracking down the problem.

Upvotes: 1

Related Questions