jQuery Forum

Disable next button in the last page
[2Replies]
- 03-May-2017 11:53 PM
- Forum: Getting Started
I'm fetching some data through JSON in a container(it is a table), which has previous & next buttons.
In each page, I'm displaying 20 records from the JSON. Now, I need to disable the 'next' button, based on the value of the property 'totalRecords' in the JSON.
Calculation:
So, let say, the value of totalRecords = 238. Which means I should have (238 /20 = 11 pages with 20 records and the last page with 18 records = 12 pages overall). So, how do I ensure that 'next' button is disabled on 12th page in this case? I mean how do I ensure that each time the next button is disabled on the last page based on the similar calculation above?
I tried this :
```
if(data.totalRecords%20 > 1) { 
 $('#next-btn').addClass('disabled');
} else {
 $('#next-btn').removeClass('disabled');
}
```

Check object type and create dynamic content accordingly
[1Reply]
- 02-May-2017 01:43 PM
- Forum: Getting Started
I'm working on application which will create dynamic content based on the type of object.
The object type can be 'company' or 'employee'.

The objects with the type 'employee' are created using bootstrap modal.

I'm facing with a small problem when I'm doing that.

The dyamic content is getting duplicated when I'm generating that. Also, when I add consecutive objects using modal, the content gets refreshed or lost.

How do I fix it?

Here's the JSfiddle.

Replace an object with another in an array using bootstrap modal
[1Reply]
- 28-Apr-2017 03:18 AM
- Forum: Getting Started
I'm trying to update an object if it's type="external" with the 'edit' button. On clicking edit, I get a pop-up/modal, wherein I can update the details.

I need to fix 2 issues:
* I can't see the old values in the update modal while trying to update the data in my actual application.
* Also, on clicking update, it is refreshing the entire page content.
I guess that's happening due to replaceWith() method.

JSFiddle
Note: I'd tried using splice earlier, but it causes duplication of updated objects. -
1. myData.splice(index, 1, upObj)

Update an object in the array using a modal form and display updated details
[2Replies]
- 26-Apr-2017 07:38 AM
- Forum: Getting Started
I'm trying to update an object with type="external" by clicking on the edit button.
It brings up a pop-up, wherein I can enter the new information and it should then update the user accordingly.
But somehow it doesn't seem to work. It just triggers a page refresh and nothing happens at all. Could you please help me fix this?

JS Fiddle

Edit an object in an array and display updated information
[1Reply]
- 22-Apr-2017 01:16 PM
- Forum: Getting Started
I've an array of objects (myData) which has objects with type "internal" and "external".

I'm creating divs with class="box" out of the objects in array and displaying some information of the corresponding object.

I've an edit button in the div.box, only if my object type ="external".

So, on click of the edit, I want to update the information(company or url) of that object in 'myData' array. Also, in the displayed div I'd then like to display the updated information (calling createDisplay() method again).

How do I achieve this?

JSFiddle

Hide the edit button in a dynamic div if it satisfies a condition
[2Replies]
- 22-Apr-2017 12:09 PM
- Forum: Getting Started
I've a dynamic div which contains some information and an edit button.
But, some of these dynamic divs should be editable.

I'm generating all of these dynamic divs from my array of objects, which also holds the data for objects which have type="external".

Each dynamic div will have a class called 'box' and each dynamic edit button has a class called 'edit-btn'.

So, I've a condition like, if in dynamic div the obj.type="external" then it the edit button should be available else it should be hidden.

How do I achieve this?

JSFiddle

Return the split path if the JSON key/value exists else return blank
[1Reply]
- 21-Apr-2017 06:10 AM
- Forum: Using jQuery
I need to display the name and split path of the path entered by a user dynamically.
For that, I had split the path entered by the user and grab only certain part of it. For e.g. if the user enters path as:

/content/mypath/myfolder/about/images/abc.jpg
Then I am displaying images/abc.jpg.

However, let's assume that some of the users do not have a picture, at least the name should be applied & displayed in that case.

Please check the function refreshDisplay() for details.
But it throws an error- Uncaught TypeError: Cannot read property 'match' of undefined

JS Fiddle

Previous and Next buttons are getting hidden in all pages
[1Reply]
- 17-Apr-2017 08:40 AM
- Forum: Getting Started
I've 2 pop-ups to display the user list & admin list which would display 10 results per page, which is working fine.

I'm getting the page nos. from the java servlet in the JSON.

Note: There are 2 parameters passed in the url - resType and pageNo.
pageIndex returns 0, 10, 20 ...(multiples of 10).
result: checks what sort of result I want. You can ignore this part.

So my url in the createTable function looks something like this instead -

''/abc/myData.json?result="+resType+"&pageIndex="+pageNo

In my case(for the url I'm using), the previous & next buttons are getting hidden completely. But over here, it seems to be working fine.

What should I update in my code to make it work perfectly fine for my url as well?

JSFiddle

Saving AJAX JSON to an array

[3Replies]

17-Apr-2017 12:32 AM
Forum: Getting Started

How do I save the JSON which I'm receiving through ajax to an existing array? I first need to delete everything in my array savedData and save the JSON into that.

Here's the code :-

function getArticleOnPageLoad() {
	 
    $.getJSON("http://www.myurl.com/myJSON.json", function(data) {
    savedData = data;
    createData();
    }).fail(function(error) {
            console.log("AJAX ERROR: " + error);
    });
}

Change the attribute of a dyanamic element if it passes a condition

[1Reply]

14-Apr-2017 02:43 AM
Forum: Getting Started

I've a function 'refreshDisplay' which will help me create dynamic elements. Now, I've a small condition there. In the 'src' attribute of the image, I'm going to check if the obj.picture.thumbnail starts with '/content' then append '.jpg' to the end of the obj.picture.thumbnail's value , else just use obj.picture.thumbnails' value!

Please check the image with class '.myLink' in the code. How do I achieve this?

Here's the code.

function refreshDisplay() {
  $('.container').html('');
	savedData.forEach(function (obj) {
	// Reset container, and append collected data (use jQuery for appending)
	  $('.container').append(
			$('<div>').addClass('parent').append(
				$('<label>').addClass('dataLabel').text('Name: '),
				obj.name.first + ' ' + obj.name.last,
				$('<br>'), // line-break between name & pic
				$('<img>').addClass('myLink').attr('src', obj.picture.thumbnail), $('<br>'),
			  $('<label>').addClass('dataLabel').text('Date of birth: '),
				obj.dob, $('<br>'),
				$('<label>').addClass('dataLabel').text('Address: '), $('<br>'),
				obj.location.street, $('<br>'),
				obj.location.city + ' ' + obj.location.postcode, $('<br>'),
				obj.location.state, $('<br>'),
				$('<button>').addClass('removeMe').text('Delete'),
				$('<button>').addClass('top-btn').text('Swap with top'),
				$('<button>').addClass('down-btn').text('Swap with down')
			)	
		);
	})
	// Clear checkboxes:
	$('.selectRow').prop('checked', false);
	handleEvents();
}

Disable the previous button in the first page
[1Reply]
- 12-Apr-2017 02:17 AM
- Forum: Getting Started
I've a pop-up to display the user list which would display 10 results per page, which is working fine.

I'm getting the page nos. from the java servlet in the JSON.
How do I disable the previous button, when it is the first page?
Likewise, how do I disable the last button, when it is the last page?

Here's my code.
1. function UserList(pageNo) {
3. var resType="userList";
5. getResults(resType,pageNo);
6. $(document).on('click', '.next-btn', function(){
7. var next = 10+pageNo;
8. UserList(next);
10. });
11. $(document).on('click', '.prev-btn', function(){
12. var previ = pageNo - 10;
13. UserList(previ);
14. });
17. }

Add external object to an existing array through a form
[1Reply]
- 11-Apr-2017 07:15 AM
- Forum: Getting Started
I've a table which gets updated based on JSON data.
Each row in the table has a checkbox which holds the value of the corresponding JSON object, which is basically the information about any of the users.
On selecting any of the rows, and saving to display the selected user profile, I'm also storing the selected JSON object in an array 'savedData'.

I also have an option of adding the user externally through a form which pops up on clicking 'Open External form' button. Now, I'm trying to create an object and store it in the same 'savedData' array on submitting that form. At the same time, the 'div.parent' should get generated & get appended to 'div.container' in the same format as it is for the the other users selected from the table.

Unfortunately, the 'div.parent' is not getting created, and the external object is not getting added.

Could you please help me fix this?

https://jsfiddle.net/Sunny1719/6fqh7078/

Validate HTML5 form on making form fields mandatory dynamically
[1Reply]
- 09-Apr-2017 04:34 AM
- Forum: Getting Started
I've a bootstrap form which has a few fields. By default, the 1st and the 2nd fields are mandatory.

Now, if the 3rd field is filled out, the 4th one becomes mandatory.
Similarily, if the 4th field is filled out, the 3rd one becomes mandatory.

However, if both 3rd & 4th fields are not filled out, they're not mandatory.
I'm also using the HTML5 form validation here.

So, here if you see, the fields Name & Date of Registration are mandatory by default.
However, I'm trying to make Website mandatory when Company is filled out! And similarly, make Company mandatory, when Website is filled out!
If neither company not website are filled out, both of these fields are not mandatory!

Here's my code :
1. <!doctype html>
2. <html>
3. <head>
4. <meta charset="utf-8">
5. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
6. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
7. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
8. <script>
9. $(document).ready(function(){
10. if(($('#comp').val()!== "") || ($('#weburl').val()!=="")) {
11. $('#comp').prop('required',true);
12. $('#weburl').prop('required',true);
14. }
15. else {
16. $('#comp').prop('required',false);
17. $('#weburl').prop('required',false);
18. }
19. $("#myForm").submit(function(){
20. alert("OK");
21. return false;
22. })
24. });
27. </script>
28. </head>
29. <body>
30. <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myFormModal">Add Details</button>
32. <div id="myFormModal" class="modal fade" role="dialog">
33. <div class="modal-dialog">
35. <div class="modal-content">
36. <div class="modal-header">
37. <button type="button" class="close" data-dismiss="modal">×</button>
38. <h4 class="modal-title">Add details</h4>
39. </div>
40. <div class="modal-body">
41. <form class="form-horizontal" id="myForm" name="contact" action="#">
42. <div class="form-group">
43. <label class="control-label col-sm-3" for="dor">Date of Registeration:</label>
44. <div class="col-sm-8">
45. <input type="date" class="form-control" id="dor" name="dor" required>
46. </div>
47. </div>
48. <div class="form-group">
49. <label class="control-label col-sm-3" for="name">Name:</label>
50. <div class="col-sm-8">
51. <input type="text" class="form-control" id="name" name="name" required>
52. </div>
53. </div>
54. <div class="form-group">
55. <label class="control-label col-sm-3" for="comp">Company:</label>
56. <div class="col-sm-8">
57. <input type="text" class="form-control" id="comp" name="comp">
58. </div>
59. </div>
60. <div class="form-group">
61. <label class="control-label col-sm-3" for="weburl">Website:</label>
62. <div class="col-sm-8">
63. <input type="url" class="form-control" id="weburl" name="weburl">
64. </div>
65. </div>
66. <hr />
67. <div class="form-group">
68. <div class="col-sm-offset-3 col-sm-3">
69. <button class="btn btn-primary btn-sm">Save</button>
70. </div>
71. <div class="col-sm-3">
72. <button type="reset" class="btn btn-primary btn-sm">Reset</button>
73. </div>
74. <div class="col-sm-3">
75. <button type="button" class="btn btn-primary btn-sm close-external-modal" data-dismiss="modal">Close</button>
76. </div>
77. </div>
78. </form>
79. </div>
80. </div>
81. </div>
82. </div>
83. </body>
84. </html>

Save the dynamically created DOM and create a JSON
[2Replies]
- 07-Apr-2017 05:22 AM
- Forum: Getting Started
I need help for creating the JSON of the dynamicallly created dom objects which has exactly the same format, which was while receiving the JSON to create the dynamic element.

To simplify thing, I've create a dummy application, which is available in the JSFiddle link provided below.

Now, if you see, in the table I'm getting the data through JSON.
The checkbox values in the table are JSON objects.
When I select any of the checkboxes and click on Save, the corresponding div is generated and displayed.

Now, I want to save this dynamically created DOM structure using the "Save displayed data and create json'" button and also create the JSON which will be of the same format (containg all the properties (irrespective of the fact, whether they were displayed or not in the corresponding parent. for e.g., the phone number, images all the data should be available in the JSON, even it is not displayed but is available in the original JSON).

How could we achieve this?
JS Fiddle: https://jsfiddle.net/Sunny1719/vo5ygomf/
1. <!doctype html>
2. <html>
3. <head>
4. <style>
5. table, th, td {
6. border: 1px solid #ddd;
7. border-collapse: collapse;
8. padding: 10px;
9. }
11. table {
12. margin: auto;
13. }
15. .parent {
16. height: 25%;
17. width: 90%;
18. padding: 1%;
19. margin-left: 1%;
20. margin-top: 1%;
21. border: 1px solid black;
22. }
24. .parent:nth-child(odd){
25. background: skyblue;
26. }
28. .parent:nth-child(even){
29. background: green;
30. }
31. </style>
32. <body>
33. <button onclick="createTable()">Load Table</button>
34. <button onclick="saveData()">Save Table data</button>
35. <table id="datatable" align="center">
36. <tr><th>Select</th><th>Name</th><th>DOB</th></tr>
37. </table>
39. <br />
40. <button onclick="createJson()">Save displayed data & create JSON</button>
41. <br />
42. <div class="container">
43. <
44. </div>
46. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
47. <script>
48. function createTable() {
49. $.getJSON("https://api.randomuser.me/?results=5", function(data) {
50. // First, clear the table
51. $('#datatable tr:has(td)').remove();
52. data.results.forEach(function (record) {
53. var json = JSON.stringify(record);
54. $('#datatable').append(
55. $('<tr>').append(
56. $('<td>').append(
57. $('<input>').attr('type', 'checkbox')
58. .addClass('selectRow')
59. .val(json)
60. ),
61. $('<td>').append(
62. $('<a>').attr('href', record.picture.thumbnail)
63. .addClass('imgurl')
64. .attr('target', '_blank')
65. .text(record.name.first)
66. ),
67. $('<td>').append(record.dob)
68. )
69. );
70. })
71. }).fail(function(error) {
72. console.log("**********AJAX ERROR: " + error);
73. });
74. }
76. function saveData(){
77. // Scrape the URLs that were already collected into a Set:
78. var used = new Set($('.myLink').map(function () {
79. return $(this).attr('href');
80. }).get());
81. var errors = [];
82. $('input.selectRow:checked').each(function(count) {
83. // Get the JSON that is stored as value for the checkbox
84. var obj = JSON.parse($(this).val());
85. // See if this URL was already collected (that's easy with Set)
86. if (used.has(obj.weburl)) {
87. errors.push(obj.title);
88. } else {
89. // Append it to the collection (use jQuery for appending)
90. $('.container').append(
91. $('<div>').addClass('parent').append(
92. $('<label>').addClass('dataLabel').text('Name: '),
93. obj.name.first + ' ' + obj.name.last,
94. $('<br>'), // line-break between name & pic
95. $('<img>').attr('src', obj.picture.thumbnail), $('<br>'),
96. $('<label>').addClass('dataLabel').text('Date of birth: '),
97. obj.dob, $('<br>'),
98. $('<label>').addClass('dataLabel').text('Address: '), $('<br>'),
99. obj.location.street, $('<br>'),
100. obj.location.city + ' ' + obj.location.postcode, $('<br>'),
101. obj.location.state, $('<br>')
102. )
103. );
104. }
105. // Clear checkbox:
106. $('input', this).prop('checked', false)
107. });
108. if (errors.length)
109. alert('The following were already selected:\n' + errors.join('\n'))
110. }
111. </script>
113. </body>
114. </head>
115. </html>

Get all href attributes of dynamic links inside dynamic div stored in array
[3Replies]
- 05-Apr-2017 01:24 PM
- Forum: Getting Started
I've a few dynamic elements being generated on click of a button.
On click of this button, I get dynamic divs generated which also contain link.

I get only the first href attribute value("link0.com") in the array "linkArr".

How do I get all of the href attributes stored inside this array?

Here's my code.
1. <!DOCTYPE html>
2. <html>
4. <head>
5. <meta charset="UTF-8">
6. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
7. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
8. <style>
9. .parent {
10. height: 25%;
11. width: 90%;
12. padding: 1%;
13. margin-left: 1%;
14. margin-top: 1%;
15. border: 1px solid black;
17. }
19. .parent:nth-child(odd){
20. background: skyblue;
21. }
23. .parent:nth-child(even){
24. background: green;
25. }
28. </style>
29. </head>
30. <body>
31. <button class="btn btn-primary" onclick="getData()">Get data</button>
33. <div class="box">
35. </div>
36. <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
37. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
38. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
39. <script>
41. var content = "";
43. linkArr = new Array();
45. function getData(){
46. var count = 0;
47. for(count=0; count<5; count++) {
48. content+= '<div class="container-fluid parent"><div class="row"><div class="col-md-6">Number: '+count+'</div><div class="col-md-6"><a href="link'+count+'.com" class="mylink">Link'+count+'</a></div></div></div>';
50. }
52. $('.box').html(content);
55. $('.box').each(function(){
56. linkArr.push($(this).find('.mylink').attr('href'));
57. console.log(linkArr);
58. });
59. }
61. </script>
62. </body>
63. </html>

Create a dynamic div and display if it doesn't exists already in the display list
[2Replies]
- 05-Apr-2017 06:47 AM
- Forum: Getting Started
I'm working on an application wherein the data will be displayed here based on some selection.

Please note that, the data in the table actually comes in through some JSON.

However, here I've hard coded all the data here in the table. Unfortunately, I don't have the JSON to share.
1. <!doctype html>
3. <html>
4. <head>
5. <style>
6. table, th, td {
7. border: 1px solid #ddd;
8. border-collapse: collapse;
9. padding: 10px;
10. }
12. .parent {
13. height: 25%;
14. width: 90%;
15. padding: 1%;
16. margin-left: 1%;
17. margin-top: 1%;
18. border: 1px solid black;
20. }
22. .parent:nth-child(odd){
23. background: skyblue;
24. }
26. .parent:nth-child(even){
27. background: green;
28. }
30. </style>
31. </head>
32. <body>
33. <table>
34. <tr>
35. <th>Select</th>
36. <th>Name</th>
37. <th>Website</th>
38. </tr>
39. <tr>
40. <td><input type="checkbox" name="selectRow"></td>
41. <td class="name">A</td>
42. <td class="weburl"><a href="abc.com">ABC</a></td>
43. </tr>
44. <tr>
45. <td><input type="checkbox" name="selectRow"></td>
46. <td class="name">D</td>
47. <td class="weburl"><a href="def.com">DEF</a></td>
48. </tr>
49. <tr>
50. <td><input type="checkbox" name="selectRow"></td>
51. <td class="name">G</td>
52. <td class="weburl"><a href="ghi.com">GHI</a></td>
53. </tr>
54. <tr>
55. <td><input type="checkbox" name="selectRow"></td>
56. <td class="name">J</td>
57. <td class="weburl"><a href="jkl.com">JKL</a></td>
58. </tr>
59. </table>
61. <button onclick="saveData()">Save</button>
63. <br />
65. <div class="container">
67. </div>
69. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
70. <script>
73. var content = "";
74. function saveData(){
77. $('input[name="selectRow"]:checked').map(function(count) {
78. var myJSON = JSON.parse(decodeURIComponent(this.value));
79. var tableDataUrl = myJSON.weburl;
80. content += '<div class="parent"><label class="dataLabel">Name:</label>'+myJSON.name+'<label class="dataLabel">Website:</label><a href="'+myJSON.weburl+'" class="dispWebUrl"></div>';
81. var dispUrl = $('.container').find('.dispWebUrl').attr('href');
83. if(tableDataUrl === dispUrl)
84. $('.container').html(articlesResult);
85. } else {
86. alert("Data already exists!");
87. }
89. }
91. </script>
92. </body>
93. </html>
So, now I select a row using the checkbox from the table, and click on the 'Save' button which would then append the data to a static div with class="container".

However, if a particular div with the same weburl (as shown in the code) already exists inside the display "div.container", it shouldn't add that.

1. Select A & D from the table shown in the screenshot and click on 'Save'.

2. A & D get appended to "div.container".

3. Now, select A,D,G,J from the table.

Current situation: Nothing is added, and alert is shown as "Data already exists!"

Ideal behaviour: G & J should get appended to "div.box" and alert should be shown as "A already exists!".

How do I achieve this?

Note: URL(weburl) is going to be unique here. Hence, taking that for comparison.

HTML5 form validation in a bootstrap modal
[4Replies]
- 04-Apr-2017 02:54 AM
- Forum: Getting Started
I'm relatively new to jquery and javascript.
The form opens up on clicking the button "Open Modal" in the modal.
Next, when I click on 'Save' in the modal, it should validate the HTML5 form and on successful validation should call another function "addDetails()".

How do I achieve this using existing jquery form validation plugin or any other method? What CDNs I need to refer to while using?
1. <!doctype html>
2. <html>
3. <head>
4. <meta charset="utf-8">
5. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
6. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
7. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
8. </head>
9. <body>
10. <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myFormModal">Add Details</button>
12. <div id="myFormModal" class="modal fade" role="dialog">
13. <div class="modal-dialog">
16. <div class="modal-content">
17. <div class="modal-header">
18. <button type="button" class="close" data-dismiss="modal">×</button>
19. <h4 class="modal-title">Add details</h4>
20. </div>
21. <div class="modal-body">
22. <form class="form-horizontal" id="myForm" name="contact" action="#">
23. <div class="form-group">
24. <label class="control-label col-sm-3" for="dor">Date of Registeration:</label>
25. <div class="col-sm-8">
26. <input type="date" class="form-control" id="dor" name="dor" required>
27. </div>
28. </div>
29. <div class="form-group">
30. <label class="control-label col-sm-3" for="name">Name:</label>
31. <div class="col-sm-8">
32. <input type="text" class="form-control" id="name" name="name" required>
33. </div>
34. </div>
35. <div class="form-group">
36. <label class="control-label col-sm-3" for="weburl">Website:</label>
37. <div class="col-sm-8">
38. <input type="url" class="form-control" id="weburl" name="weburl" required>
39. </div>
40. </div>
41. <div class="form-group">
42. <label class="control-label col-sm-3" for="myphoto">Image:</label>
43. <div class="col-sm-8">
44. <input type="text" class="form-control" id="myphoto" name="myphoto" required>
45. </div>
46. </div>
47. <hr />
48. <div class="form-group">
49. <div class="col-sm-offset-3 col-sm-3">
50. <button type="button" class="btn btn-primary btn-sm" onclick="addDetails()">Save</button>
51. </div>
52. <div class="col-sm-3">
53. <button type="reset" class="btn btn-primary btn-sm">Reset</button>
54. </div>
55. <div class="col-sm-3">
56. <button type="button" class="btn btn-primary btn-sm close-external-modal" data-dismiss="modal">Close</button>
57. </div>
58. </div>
59. </form>
60. </div>
61. </div>
62. </div>
63. </div>
64. </body>
65. </html>

Create and append dynamic div if the div with same value doesn't exists

[3Replies]

03-Apr-2017 01:25 PM
Forum: Getting Started

I'm working on some application wherin the data will be displayed based on some selection. The data will be selected from the table as shown in the screenshot.
It gets populated in the table through some JSON.

Now, lets say, for example,

Select A & C from the table shown in the screenshot and click on 'Save'.
A & C get appended to "div.box" with ids "parent-0" and "parent-1" respectively.
Now, select A & B from the table.

Current situation: Nothing is added, and alert is shown as "Data already exists!"
Ideal behaviour: B should get appended to "div.box" with id "parent-2" and alert should be shown as "A already exists!".

function showData(){
  var count = 0;
  $('input[name="selectData"]:checked').map(function() {
    var JSONData =  JSON.parse(decodeURIComponent(this.value));
    content += '<div class="container parent" id="parent-'+count'"><div class="row article-row"><div class="col-md-6 article data-col"><div class="row"><form class="form-horizontal"><div class="form-group"><label class="control-label col-md-4">Count:</label><div class="col-md-8 article-data">'+JSONData.name+'</div></div></form></div></div><div class="col-md-6 article btn-col"><div class="row del-btn"><button class="btn btn-danger remove-btn">Delete &nbsp;<span class="glyphicon glyphicon-remove"></span></button></div><div class="row updown-btn"><div class="btn-group"><button class="btn btn-primary btn-sm top-btn"><span class="glyphicon glyphicon-arrow-up"></span></button><button class="btn btn-primary btn-sm down-btn"><span class="glyphicon glyphicon-arrow-down"></span></button></div></div></div></div></div>';
    count++;
  });
  if($('#parent-'+count).length==0) {
    $('.box').html(content);
    resetEvents();
  }else{
    alert("Data already exists!");
  }
}

How do I achieve this?

Dynamically generated content disappearing
[2Replies]
- 31-Mar-2017 01:02 PM
- Forum: Getting Started
I've created a small application to swap divs.
The user can create a div manually by entering a value in the input field or by clicking on the add button.
In both the cases, the following conditions are supposed to be met.

1. All the divs should append to the parent div with class container. - working
2. If a child div with class box is already present under class container, the new div with class box should add after the already available div i.e should act as a sibling to the already available div with class box. - working
3. It should be possible to swap the divs with class box by clicking on top & down. - working
4. The top button for the 1st div with class box should be disabled, since it will not have a top sibling to swap with. - working
5. The down button for the last div with class box should be disabled, since it will not have a down sibling to swap with. - working
6. The content added using the form by entering a value in the input field should also get added to the parent div as mentioned in 1. - not working
7. Delete each of the divs when delete button is clicked on. - not working
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="utf-8">
5. <style>
6. .box {
7. height: 25%;
8. width: 90%;
9. padding: 1%;
10. margin-left: 1%;
11. margin-top: 1%;
12. border: 1px solid black;
14. }
16. .box:nth-child(odd){
17. background: skyblue;
18. }
20. .box:nth-child(even){
21. background: green;
22. }
24. .disabled-btn {
25. cursor: not-allowed;
26. opacity: 0.25%;
27. }
29. </style>
30. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
32. </head>
33. <body>
35. <button class="add" onclick="addDiv()">Add</button>
36. <form>
37. <input type="text" id="myCount">
38. <button type="submit" onclick="addDiv2()">Submit</button>
39. </form>
40. <div class="container">
42. </div>
45. <script>
46. content = "";
47. var count=0;
48. function addDiv(){
49. while(count<5){
50. content+= '<div class="box"><p>'+count+'</p><button class="top">Top</button><button class="down">Down</button><button class="removeMe">Delete</button></div>';
51. count++;
52. }
53. $('.container').html(content);
55. resetEvents();
56. }
59. function addDiv2(){
60. var count = $("#myCount").val();
61. content+= '<div class="box"><p>'+count+'</p><button class="top">Top</button><button class="down">Down</button><button class="removeMe">Delete</button></div>';
62. $('.container').html(content);
63. resetEvents();
64. }
66. $(".removeMe").click(function(){
67. $(this).parents('.box').remove();
68. });
70. function handleEvents() {
71. $(".top, .down").prop("disabled", false);
73. $(".box:first").find(".top").prop("disabled", true);
75. $(".box:last").find(".down").prop("disabled", true);
76. }
77. function resetEvents() {
78. $(".top, .down").unbind('click');
79. handleEvents();
80. $('.down').click(function() {
81. var toMove1 = $(this).parents('.box');
82. $(toMove1).insertAfter($(toMove1).next());
83. handleEvents();
84. });
85. $('.top').click(function() {
86. var toMove1 = $(this).parents('.box');
87. $(toMove1).insertBefore($(toMove1).prev());
88. handleEvents();
89. });
90. }
92. </script>
93. </body>
95. </html>
All the conditions mentioned above are met except the 6th & 7th one.
The delete button is not working.
The div disappears as soon as it gets added.
Also, is there anything that needs to be optimized in the code? Do I need to use event delegation to disable the dynamically generated top & down buttons for the first and last divs? If yes, how do I do that?

Hide/show a pop-up on clicking the corresponding user when sorted
[1Reply]
- 11-Feb-2017 12:55 PM
- Forum: Using jQuery
I'm trying to hide/show a user's pop-up which opens up on clicking it's corresponding user.
This works when the users are not sorted alphabetically but do not work after sorting.

HTML:
[CODE]
<body>
        <section>
            <header></header>
            <main></main>
        </section>
    </body>
</html>
[/CODE]

CSS
[CODE]
body {
    padding: 0;
    margin: 0;
}

html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}

main .wrapper {
    padding-left:3px;
    display: flex;
    flex-wrap:wrap;
    flex-direction:row;
}

.user-container {
    position: relative;
    padding: 5px 8px;
    border: 1px solid lightgray;
    float: left;
    width: 33.33%;
    margin-left: -1px;
    margin-top: -1px;
}

.user-img {
    border-radius: 50%;
    margin-left: 2px;
    vertical-align: middle;
    margin-right: 7px;
}

.user-name{
    display:inline-block;
    vertical-align: middle;
}

.user-lastname, .modal-lastname {
    text-transform: uppercase;
    color: gray;
    font-family: "Times New Roman", Courier, sans-serif;

}

.user-firstname, .modal-firstname {
    text-transform: capitalize;
    color: gray;
    font-family: "Times New Roman", Courier, sans-serif;

}

.modal-name {
    text-align: center;
    padding: 10px;
    display: block;
}

.sort-label {
    color: gray;
    font-size: 1.2em;
    position: absolute;
    right: 50px;
    top: 30px;
}

.sortasc, .sortdes {
    text-decoration: none;
    height: 30px;
    margin-left: 10px;
    color: gray;
}

.user-modal {
    position: relative;
    left: 30px;
    height: 20%;
    width: 30%;
    border: 2px solid lightgray;
    border-radius: 7px;
    margin-top: 0;
    background: linear-gradient(180deg, white, 90%, lightgray);
    box-shadow: 2px -5px 5px lightgray;
    z-index: 1;
}

.modal-img {
    border: 2px solid lightgray;
    border-radius: 50%;
    display: block;
    margin: auto;
    margin-top: 10px;
}


.model-label {
    display: inline-block;
    color: gray;
    margin-left: 20%;
    font-family: Calibri, "Times New Roman", sans-serif;
    font-weight: bold;
    text-shadow: 1px 1px lightgray;
    min-width: 50px;
}

.user-info {
    line-height: 1.5em;
    text-align: left;
}

.user-badge {
    position: absolute;
    left: -80px;
    top: 100px;
    height: 60px;
    width: 190px;
    border: 1px solid lightgray;
    border-radius: 3px;
    background: linear-gradient(180deg, coral, 50%, orangered);
    box-shadow: 2px 2px 3px lightgray;
    padding: 7px 12px;
    transform: rotate(90deg);
    text-align: right;
}

.user-badge p {
    margin: 0;
}

.badge-name {
    font-weight: bold;
    text-shadow: 1px 1px lightgray;
}

.badge-name-value {
    color: #F2F2F2;
    text-shadow: 1px 1px lightgray;
}

.close-btn {
    position: absolute;
    right: 25px;
    top: 15px;
    color: gray;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.4em;
}

.active {
    background-color: #F0F0F0;
}
[/CODE]

jQuery
[CODE]
$(document).ready(function(){
    $.getJSON("https://api.randomuser.me/?results=25", function(data){

        var heading = $("header").append("<h1>Contact List</h1>").css({"text-align":"center", "color":"gray", "text-shadow":"1px 1px lightgray"});

        var sortlabel = $("<label class='sort-label'>sort</label>").appendTo(heading).addClass("sort-label");
        var sortasc = $("<a href='#' class='sortasc' id='btn-asc'>↑</a>").appendTo(sortlabel);
        var sortdes = $("<a href='#' class='sortdes' id='btn-des'>↓</a>").appendTo(sortlabel);

        var dataLength = data.results.length;

        var wrapper = $("<div class='wrapper'></div>").appendTo("main");


        for(var i=0; i<dataLength; i++)
        {
            /*User data/div container */
            var modalId = "mod-"+i;
            user = $("<div class='user-container' data-mod-id='"+modalId+"'/>").appendTo(wrapper);
            img = $("<img class='user-img' src='" + data.results[i].picture.thumbnail + "'/>").appendTo(user);
            userName = $("<span />").appendTo(user).addClass('user-name');
            lastName = $("<strong>" + data.results[i].name.last + ", " + "</strong>").appendTo(userName).addClass('user-lastname');
            firstName = $("<strong>" + data.results[i].name.first + "</strong>").appendTo(userName).addClass('user-firstname');

            /*User Modal or Pop-up starts here*/

            userModal = $("<div id='"+modalId+"' class='user-modal' />").appendTo(wrapper);
            closeBtn = $("<a href='#' class='close-btn'>×</a>").appendTo(userModal);
            modalImg = $("<img class='modal-img' src='" + data.results[i].picture.large + "'/>").appendTo(userModal).addClass('modal-img');
            userBadge = $("<div class='user-badge' />").appendTo(userModal);
            badgeName = $("<p class='badge-name'>username</p><p class='badge-name-value'>" + data.results[i].login.username + "</p>").appendTo(userBadge);
            modalName = $("<div/>").appendTo(userModal).addClass('modal-name');
            modalLastName = $("<strong>" + data.results[i].name.last + ", " + "</strong>").appendTo(modalName).addClass('modal-lastname');
            modalFirstName = $("<strong>" + data.results[i].name.first + "</strong>").appendTo(modalName).addClass('modal-firstname');
            modalInfo = $("<div />").appendTo(userModal).addClass('modal-info');
            email = $("<label class='model-label'><em>email</em></label>  <span class='user-info'> " + data.results[i].email + "</span><br />").appendTo(modalInfo);
            phone = $("<label class='model-label'><em>phone</em></label>  <span class='user-info'> " + data.results[i].phone + "</span><br />").appendTo(modalInfo);
            street = $("<label class='model-label'><em>street</em></label>  <span class='user-info'> " + data.results[i].location.street + "</span><br />").appendTo(modalInfo);
            city = $("<label class='model-label'><em>city</em></label>  <span class='user-info'> " + data.results[i].location.city + "</span><br />").appendTo(modalInfo);
            state = $("<label class='model-label'><em>state</em></label>  <span class='user-info'> " + data.results[i].location.state + "</span><br />").appendTo(modalInfo);
            zip = $("<label class='model-label'><em>zip</em></label>  <span class='user-info'> " + data.results[i].location.postcode + "</span><br />").appendTo(modalInfo);

            /*User Modal or Pop-up ends here*/

        }

        /* Sort function */

            allUsers = $(".user-container");

            $("#btn-des").on('click',function(){
                var desc = allUsers.sort(function(a,b){
                    return $(a).find(".user-name").text() > $(b).find(".user-name").text();
                });
                $(".wrapper").html(desc);
            });

            $("#btn-asc").on('click',function(){
                var asc = allUsers.sort(function(a,b){
                    return $(a).find(".user-name").text() < $(b).find(".user-name").text();
                });
                $(".wrapper").html(asc);
            });

        /* User pop-up Hide/Show */
        $('.user-modal').hide(); //for hiding all modals on load
        $('.close-btn').click(function(){
            $(this).parent().hide();
        });
        $('.user-container').click(function(){
            $('.user-modal').hide();
            $("#"+$(this).attr("data-mod-id")).show();
        });
        /* User pop-up Hide/Show */
    });
});

[/CODE]

Response title

Attachments

jQuery Forum

Activity Trend

Calculation: