I have the following code which is hidden.
<div id="orderFields" style="display: none;">
<table class="table">
<tbody id="more-tr">
<tr>
<th style="font-weight: bold">Offer</th>
<td class="col-lg-6 col-md-6 col-sm-12">
<input type="text" class="form-control price" id="offer" placeholder="Offer title" value="" novalidate>
</td>
<th style="font-weight: bold">Image</th>
<td class="col-lg-4 col-md-4 col-sm-12">
<img src="" style="max-width:40%;max-height:20%" />
<input type="file" name="image[]" style="background: transparent;border: transparent">
</td>
<td class="col-lg-2 col-md-2 col-sm-12">
<a href="javascript:void(1);" style="width: 10%;">
<span class="voyager-trash remove-this btn-danger" style="padding: 10px; border-radius: 5px;"></span>
</a>
</td>
</tr>
</tbody>
</table>
</div>
I have a code to a button that adds the tr field from the hidden field when being clicked.
<div class="col-md-12">
<a href="javascript:void(0)" class="btn btn-success btn-xs" id="addMore" style="float: right;">
<i class="fa fa-plus"></i> <span>Add offer(s)</span>
</a>
</div>
And the javascript is the following :
$("#addMore").on("click", function() {
$(".multipleDiv").after($('#orderFields #more-tr').html());
});
The button and tr work perfectly but while submitting a form I am getting data from the div that is hidden. So, I removed the attribute from the div which is hidden. Now, I want to add a name attribute to the input field that is just added after clicking the button. But, again I don't want to add an attribute to the input field of an input tag which is hidden.
How can I achieve that?
Also, Why am I not getting data coming from the <input type="file" name="image"> which is inside the form tag
You can use the clone() and then use the find() to get the input with id offer. Then use the attr() to set the attribute.
$("#addMore").on("click", function() {
let clone = $('#orderFields #more-tr').clone();
let offer = clone.find('input[type="text"]');
offer.attr('name', 'newOffer'); // replace with your value
offer.attr('id', new Date().getTime()); // ID needs to be unique
$(".multipleDiv").append(clone);
});
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div id="orderFields" style="display: none;">
<table class="table">
<tbody id="more-tr">
<tr>
<th style="font-weight: bold">Offer</th>
<td class="col-lg-6 col-md-6 col-sm-12">
<input type="text" class="form-control price" id="offer" placeholder="Offer title" value="" novalidate>
</td>
<th style="font-weight: bold">Image</th>
<td class="col-lg-4 col-md-4 col-sm-12">
<img src="" style="max-width:40%;max-height:20%" />
<input type="file" name="image[]" style="background: transparent;border: transparent">
</td>
<td class="col-lg-2 col-md-2 col-sm-12">
<a href="javascript:void(1);" style="width: 10%;">
<span class="voyager-trash remove-this btn-danger" style="padding: 10px; border-radius: 5px;"></span>
</a>
</td>
</tr>
</tbody>
</table>
</div>
<table class="multipleDiv"></table>
<div class="col-md-12">
<a href="javascript:void(0)" class="btn btn-success btn-xs" id="addMore" style="float: right;">
<i class="fa fa-plus"></i> <span>Add offer(s)</span>
</a>
</div>
Related
I try to indent correctly different anchors after especially an anchor located just after a <script type="text/javascript" ...></script>.
You can see the current page that I get on this link.
and the following figure :
As you can notice, the second anchor (2.Pistes d'optimisation) is not left aligned like the first one (1.Canvas game) and moreover, it is too vertically closed relatively to the canvas.
I think this is due to the fact that I include the JavaScript tag just after the last external <div> containing the canvas.
For example, I have :
<div>
... <canvas>
</div>
<script type="text/javascript" src="game_css_and_js/game.js"></script>
<h4><a name="optimization">2.Pistes d'optimisation :</a></h4>
How can I have right margins for this second anchor (2.Pistes d'optimisation) to get a left aligning and a correct vertical space compared to the canvas (like the first anchor) ?
You issue is that You have the <h4><a name="optimization">2.Pistes d'optimisation :</a></h4> inside <div id="main-wrapper"> and the <h4><a name="canvas">1.Canvas game :</a></h4> is outside the <div id="main-wrapper">. Just put the second link outside to resolve your issue as follows:
<td class="body_content">
<br>
<ul>
<li><a class="bottom_link" href="index.html#canvas">1.Jeu game</a></li>
<li><a class="bottom_link" href="index.html#optimization">2.Pistes d'optimisation</a></li>
</ul>
<h4><a name="canvas">1.Canvas game :</a></h4>
<div id="main-wrapper">
<div id="game-wrapper">
<canvas id="game-canvas" width="501" height="501"></canvas>
</div>
<div id="score-zone-wrapper">
<table id="score-zone">
<tbody><tr>
<td id="score-zone-white" colspan="2" style="padding: 5px;">White Score</td>
</tr>
<tr>
<td id="score-white"></td>
<td align="center" style="float: right; padding-top: 5px; padding-right: 30px;">
<svg height="54" width="54">
<circle cx="27" cy="27" r="26" stroke="black" stroke-width="1" fill="white"></circle>
</svg>
</td>
</tr>
<tr>
<td id="score-zone-black" colspan="2" style="padding: 5px;">Black Score</td>
</tr>
<tr>
<td id="score-black"></td>
<td align="center" style="float: right; margin-top: 5px; padding-right: 30px;">
<svg height="54" width="54">
<circle cx="27" cy="27" r="26" stroke="white" stroke-width="1" fill="black"></circle>
</svg>
</td>
</tr>
</tbody></table>
</div>
<div id="messaging"></div>
<div id="paramStart">
<div id="gameType">
<form id="formGame">
<div id="PlayerVsComputer" class="checkbox">
<label>
<input type="checkbox" class="game">
<div class="btn-group" role="group">
<button type="button" class="btn btn-inverse btn-xs">Player</button>
<button type="button" class="btn btn-classic btn-xs">Computer</button>
</div>
</label>
</div>
<div id="Player1VsPlayer2" class="checkbox">
<label>
<input type="checkbox" class="game">
<div class="btn-group" role="group">
<button type="button" class="btn btn-inverse btn-xs">Player 1</button>
<button type="button" class="btn btn-classic btn-xs">Player 2</button>
</div>
</label>
</div>
</form>
<div id="PlayableHits" class="checkbox">
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary btn-xs">Show playable hits</button>
</div>
</div>
<div id="ButtonNewGame">
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary btn-xs">Start Game</button>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="game_css_and_js/game.js"></script>
</div>
<h4><a name="optimization">2.Pistes d'optimisation :</a></h4></td>
I've built a feedback function to be used on the bottom of pages on our company website. The visitor can vote YES or NO on the question, "Was this information useful to you?" The click show a div (feedbackDiv1/feedbackDiv2) via Javascript.
The function works, but I want the question and the answer buttons to disappear after the visitor has voted, I.e. hide the div #pagefeedback.
I've tried all my tools, but I cant get this to work.
Help would be very much appreciated!
This is the JavaScript used:
function showFeedback1() {
document.getElementById('feedbackDiv1').style.display = "block";
function showFeedback2() {
document.getElementById('feedbackDiv2').style.display = "block";}
This is the HTML used:
<div class="greycontentbox">
<div id="pagefeedback">
<h4 style="text-align: center;">Was this information useful to you?</h4>
<table align="center" width="70%" border="0" cellspacing="2" cellpadding="5">
<tbody>
<tr>
<td align="center"><a class="knappfeedbackyes knappsmall" href="#" onclick="showFeedback1()"><i style="margin-right: 10px;" class="fa fa-thumbs-up"></i>YES</a></td>
<td align="center"><a class="knappfeedbackno knappsmall" href="#" onclick="showFeedback2()"><i style="margin-right: 10px;" class="fa fa-thumbs-up"></i>NO</a></td>
</tr>
</tbody>
</table></div>
<div align="center"><div id="feedbackDiv1" style="display:none;" class="negativefeedback answer_list">POSITIVE FEEDBACK</div></div>
<div align="center"><div id="feedbackDiv2" style="display:none;" class="positivefeedback answer_list">NEGATIVE FEEDBACK</div></div>
</div>
Kind regards,
Pete
Based on Robert's answer, you could do a simple function which receive the ID of the element that has to be shown.
function showFeedback(feedback) {
document.getElementById(feedback).style.display = "block";
document.getElementById('options').style.display = "none";
}
<div class="greycontentbox">
<div id="pagefeedback">
<h4 style="text-align: center;">Was this information useful to you?</h4>
<table align="center" width="70%" border="0" cellspacing="2" cellpadding="5">
<tbody id="options">
<tr>
<td align="center"><a class="knappfeedbackyes knappsmall" href="#" onclick="showFeedback('feedbackDiv1')"><i style="margin-right: 10px;" class="fa fa-thumbs-up"></i>YES</a></td>
<td align="center"><a class="knappfeedbackno knappsmall" href="#" onclick="showFeedback('feedbackDiv2')"><i style="margin-right: 10px;" class="fa fa-thumbs-up"></i>NO</a></td>
</tr>
</tbody>
</table></div>
<div align="center">
<div id="feedbackDiv1" style="display:none;" class="negativefeedback answer_list">POSITIVE FEEDBACK</div></div>
<div align="center"><div id="feedbackDiv2" style="display:none;" class="positivefeedback answer_list">NEGATIVE FEEDBACK</div>
</div>
</div>
If you give your table an ID it's fairly easy to just change it's display css to none. Also you can accomplish the same with 1 function and simply pass an argument to it that you can use in a conditional statement to show your appropriate feedback.
function showFeedback(feedback) {
if (feedback == 'yes') {
document.getElementById('feedbackDiv1').style.display = "block";
} else {
document.getElementById('feedbackDiv2').style.display = "block";
}
document.getElementById('options').style.display = "none";
}
<div class="greycontentbox">
<div id="pagefeedback">
<h4 style="text-align: center;">
Was this information useful to you?
</h4>
<table align="center" width="70%" border="0" cellspacing="2" cellpadding="5">
<tbody id="options">
<tr>
<td align="center">
<a class="knappfeedbackyes knappsmall" href="#" onclick="showFeedback('yes')">
<i style="margin-right: 10px;" class="fa fa-thumbs-up"></i>YES
</a>
</td>
<td align="center">
<a class="knappfeedbackno knappsmall" href="#" onclick="showFeedback('no')">
<i style="margin-right: 10px;" class="fa fa-thumbs-up"></i>NO
</a>
</td>
</tr>
</tbody>
</table>
</div>
<div align="center">
<div id="feedbackDiv1" style="display:none;" class="negativefeedback answer_list">
POSITIVE FEEDBACK
</div>
</div>
<div align="center">
<div id="feedbackDiv2" style="display:none;" class="positivefeedback answer_list">
NEGATIVE FEEDBACK
</div>
</div>
</div>
What need is in script in panel body text to be shown in rows for every data in ng-repeat. On left to be data.name and right to be icon. With current code data is not showing on separate rows, it is messy.
<script type="text/ng-template" id="field_renderer.html">
<div class="col-md-6" ng-repeat-start="data in data.children">
<div class="row">
<label>
<input type="checkbox" value="{{data.name}}" ng-model="data.isSelected">
{{data.name}}
</label>
<span ng-if="data.children.length > 0">
<i class="pull-right glyphicon" data-ng-click="data.showDetails = !data.showDetails"
ng-class="{'pull-right glyphicon glyphicon-plus': !data.showDetails, 'pull-right glyphicon glyphicon-minus': data.showDetails}"></i>
</span>
</div>
</div>
<div ng-repeat-end ng-if="data.showDetails" ng-include="'field_renderer.html'"></div>
</script>
<div class="panel-group">
<div ng-repeat-start="data in reportsvm.filters" class="panel panel-default">
<div class="panel-heading clickable" data-ng-click="reportsvm.showDetails(data)">
<h4 class="panel-title">
{{data.name}}
<i ng-class="{'pull-right glyphicon glyphicon-plus': !data.showDetails, 'pull-right glyphicon glyphicon-minus': data.showDetails}"></i>
</h4>
</div>
</div>
<div class="panel-body small" ng-if="data.showDetails" ng-repeat-end ng-include="'field_renderer.html'"></div>
</div>
Here is screnshot of how it is looking.
As you can see for location that two checkboxes I need to be one after another in separate rows. Also in Program i need to be in separate rows and in each row that icon to be on right.
UPDATE - CURRENT SOLUTION
<table class="table">
<tbody>
<tr ng-if="data.name === 'Location'">
<td class="noBorder" colspan="2">
<button data-ng-click="reportsvm.changeLocation(data, true)" data-ng-class="" class="btn btn-default btn-sm">
Regions</button>
<button data-ng-click="reportsvm.changeLocation(data, false)" data-ng-class="" class="btn btn-default btn-sm pull-right">
State/Territory</button>
</td>
</tr>
<tr ng-repeat-start="data in data.children">
<td class="noBorder">
<label>
<input type="checkbox" value="{{data.name}}" ng-change="reportsvm.changeValue(data)" ng-model="data.isSelected">
{{data.name}}
</label>
</td>
<td class="noBorder">
<span ng-if="data.children.length > 0">
<i class="pull-right glyphicon" data-ng-click="data.showDetails = !data.showDetails"
ng-class="{'pull-right glyphicon glyphicon-plus': !data.showDetails, 'pull-right glyphicon glyphicon-minus': data.showDetails}"></i>
</span>
</td>
</tr>
<tr ng-repeat-end ng-if="data.showDetails">
<td class="noBorder" ng-include="'field_renderer.html'"></td>
</tr>
</tbody>
</table>
It makes sense. You try to create a new checkbox for every column.
Bootstrap tries to fill in the space for col-md-6 (2-column layout).
<div class="col-md-6" ng-repeat-start="data in data.children">
One solution would be to put the ng-repeat in the row element:
<div class="col-md-6">
<div class="row" ng-repeat-start="data in children>
<!--rest of the code ....-->
</div>
</div>
My data in the table is coming from back-end or user can manually enter the values in the table. Now my question is 'how to map those values again into the form, from which user was able to enter values into the table using jquery'? This back mapping of data from table to form is done on click of edit link which is present in front of every entry of my data in the table.
<html>
<head>
<style>
.dropdown>a:after {
display: none;
}
.glyph-ok-size, .glyph-remove-size {
font-size: 15px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".add_edit_panel").hide();
$("#addNew").click(function() {
$(".add_edit_panel").slideToggle();
});
});
function edit(paramID){
$(".add_edit_panel").slideDown();
}
</script>
</head>
<body>
<cu:secured hasPermission="CORE_CUSTOMER_DATES_CREATE"
var="canCreateOrgDates"></cu:secured>
<cu:secured hasPermission="CORE_CUSTOMER_DATES_UPDATE"
var="canUpdateOrgDates"></cu:secured>
<cu:taskView taskFlowData="${taskFlowData}"
taskFlowDefinition="${taskFlowDefinition}" id="dateRange"
renderTasks="false"
title="task.title.organization.daterange"
tasks="${taskFlowData.availableTasks}">
</cu:taskView>
<div class="row">
<form action="save.action" method="post">
<div class="col-sm-6">
<div class="panel add_edit_panel">
<div class="panel-heading">${fmt:message('dateRange.panel.add.edit') }</div>
<core:text name="orgDateObj.periodName"
label="${fmt:message('org.daterange.name') }"
required="false"
maxlength="20"
placeholder="${fmt:message('org.daterange.name') }">
</core:text>
<div class="row">
<div class="col-sm-6">
<core:date id="startDate" name="orgDateObj.startDate" label="${fmt:message('org.daterange.startdate')}"
placeholder="${fmt:message('org.daterange.startdate')}"
primary="false" required="true" />
</div>
<div class="col-sm-6">
<core:date id="endDate" name="orgDateObj.endDate" label="${fmt:message('org.daterange.enddate')}"
placeholder="${fmt:message('org.daterange.enddate')}"
primary="false" required="true" />
</div>
</div>
<div class="row">
<div class="col-sm-12">
<label class="default" style="float=left"><core:checkbox
name="orgDateObj.isDefault" id="isDefault"
label="${fmt:message('org.daterange.defaultdate')}"
checked="true" indicator="true"
disabled="false"
title="${fmt:message('org.daterange.describe.defaultdate')}" />
</label>
<div class="btn-panel-margin">
<button id="save" type="submit" class="btn btn-ar btn-primary" data-allow-dirty="allow">
${fmt:message('button.save')}
</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="row">
<div class="col-sm-6">
<div class="panel">
<div class="panel-heading">${fmt:message('dateRange.panel.listing') }</div>
<div class="row">
<div class="col-sm-12" style="overflow-x: scroll">
<table data-grid-sortable class="table table-striped table-condensed table-responsive sort-display-table">
<thead>
<tr>
<th data-column-sortable class="column-md sorted"><fmt:message key="table.date.name"/>
<span class="caret column-sort-direction"/>
</th>
<th data-column-sortable class="column-md"><fmt:message key="table.startdate"/>
<span class="caret column-sort-direction"/>
</th>
<th data-column-sortable class="column-md"><fmt:message key="table.enddate"/>
<span class="caret column-sort-direction"/>
</th>
<th data-column-sortable class="column-sm"><fmt:message key="table.default"/>
<span class="caret column-sort-direction"/>
</th>
<th data-column-sortable class="column-sm"></th>
</tr>
</thead>
<tbody id="tbody">
<c:forEach var="orgDate" items="${orgDates}">
<tr>
<td class="column-md">${orgDate.periodName}</td>
<td class="column-md">${orgDate.startDate}</td>
<td class="column-md">${orgDate.endDate}</td>
<td class="column-sm">
<c:choose>
<c:when test="${orgDate.isDefault == '1'}">
<span class="glyphicon glyphicon-remove glyph-remove-size"></span>
</c:when>
<c:otherwise>
<span class="glyphicon glyphicon-ok glyph-ok-size"></span>
</c:otherwise>
</c:choose>
</td>
<td class="column-sm">
<div class="row">
<div class="col-sm-12">
<div class="dropdown">
Action<b class="caret"></b>
<ul class="pull-right dropdown-menu">
<li>
<a href="#" id="editButtonId" onclick="edit(${orgDate.orgDateId})" >
<i class="glyphicon glyphicon-pencil margin-right-5"></i>Edit
</a>
</li>
<li>
<a href="#" id="deleteButtonId${orgDate.orgDateId}"><i class="glyphicon glyphicon-trash margin-right-5"></i>Delete
</a>
</li>
</ul>
</div>
</div>
</div>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="btn-panel-margin">
<button id="addNew" type="button" class="btn btn-ar btn-primary" data-allow-dirty="allow">
${fmt:message('button.addnew')}
</button>
</div>
</div>
</div>
</body>
</html>
enter image description here
in edit button give the row index as class and get the value of that row by mapping array index value of 1st row of table equals to array[0] access the array[0] values and place the value of array in form text box i.e
$('#textbox1').val=array[0]['name'];
you can do stuff like this
$('#edit').onclick(function (){
$('#name').val=array[0]['name'];
$('#startDate').val=array[1]['S-Date'];
$('#endDate').val=array[2]['E-Date'];
$('#checkbox').val=array[3]['Checkval'];
});
I wanted to know how your data is formed from Database
In jquery use
x=0;
objectdata.forEach(function(value,indexname,arr), thisValue) {
tabledata['col'+x][indexname]=value;
x++;
}
I'm trying to get the key attribute of the <td> tag from the below HTML code.
<td class="xedit editable editable-click editable-open" id="3" key="details" data-original-title="" title="">Javascript library </td>
<div class="popover fade top in editable-container editable-popup" style="top: 289px; left: 534px; display: block;">
<div class="arrow"></div>
<div class="popover-content">
<div>
<div class="editableform-loading" style="display: none;"></div>
<form class="form-inline editableform" style="">
<div class="control-group form-group">
<div>
<div class="editable-input" style="position: relative;">
<input type="text" class="form-control input-sm" style="padding-right: 24px;">
<span class="editable-clear-x">
</span>
</div>
<div class="editable-buttons">
<button type="submit" class="btn btn-primary btn-sm editable-submit">
<i class="glyphicon glyphicon-ok">
</i>
</div>
</div>
</div>
</form>
</div>
jQuery used :
var x = $(this).closest('div').find('.editable-container').closest('td').attr('key'); //Doesn't work
var x = $(this).closest('td').attr('key'); //Doesn't work
Try to use:
var x = $(this).closest('.editable-container').prev().attr('key');