Below is the html code
<select name="userSelected" id="ddl">
<option value="-1">---Select---</option>
<c:forEach items="${users}" var="user" varStatus="status">
<option value="${user.userId}">${user.userName}</option>
</c:forEach>
</select>
<button type="button" onclick="showForm(this)">view</button>
<div id="test">
<form:form id="expenseView"
action="${pageContext.request.contextPath}/deleteExpense"
method="POST" modelAttribute="users">
<table>
<thead>
<tr>
<td align="justify"></td>
<td align="justify"><b>Item</b></td>
<td align="justify"><b>Amount</b></td>
<td align="justify"><b>ExpenseDate</b></td>
</tr>
</thead>
<c:forEach items="${expenseList}" var="list" varStatus="status">
<tr>
<td><input type="checkbox" name="check"
value="${list.expenseId}"></td>
<td>${list.itemDescription}</td>
<td>${list.amount}</td>
<td>${list.expenseDate}</td>
</tr>
</c:forEach>
</table>
<input type="submit" value="Delete">
</form:form>
</div>
And this is the jquery, ajax am using
var hideResult = function() {
$('#test').hide();
};
var showResult = function() {
$('#test').show();
};
function showForm(myFormType) {
var selectedValue = $('#ddl option:selected').val();
var url = "${pageContext.request.contextPath}/viewExpense" + "?Id="
+ selectedValue;
$.ajax({
url : url,
}).success(function(data) {
$('#test').html(data);
});
showResult();
}
what I want to achieve is when a user hits a view button the only the div section should be refreshed so for that I am using ajax, but as my controller is sending a view name so what its doing is that it is refreshing that part only but with that one more of same kind of dropdown gets added.
Maybe, because my controller is sending the whole view. So how to achieve partial rendering of view. Please help
There are 2 approaches you can use.
You could adjust what is sent based on a parameter in the request or parse the response for the html that you want once it is received.
Here's how to do second approach
$.ajax({
url : url,
}).success(function(data) {
var $form = $(data).find('#expenseView');
$('#test').html($form);
});
You can also use replace the above with load() shorthand method of $.ajax to do this:
$('#test').load(url +' #expenseView');// note that space before selector is important
Related
I have a table. Every cell of the row tables are form fields. Also, I have two buttons: one button add a new row to the table and a second one whitch send all the rows.
This is for add new blank rows:
$scope.atributs =[];
$scope.addRow = function(){
var newRow = {nomAtribut: "",tipus: "",mida: "",prioritat: "",obligatori: "",observacions: ""};
$scope.atributs.push(newRow);
}
View :
<table class="table">
<tr>
<td>Nom atribut</td>
<td>Tipus</td>
<td>Mida</td>
<td>Prioritat</td>
<td>Obligatori</td>
<td>Observacions</td>
</tr>
<tr ng-repeat="atribut in atributs">
<td><input type="text" ng-model="atribut.nomAtribut" /> </td>
<td>
<select ng-options="option as option.valor for option in options" ng-model="atribut.tipus"></select>
</td>
<td><input type="number" ng-model="atribut.mida" /></td>
<td>
<select ng-options="option as option.valor for option in options" ng-model="atribut.tipus"></select>
</td>
<td><input type="checkbox" ng-model="atribut.obligatori" ng-true-value="'YES'" ng-false-value="'NO'"></td>
<td><input type="text" ng-model="atribut.observacions" /> </td>
</tr>
</table>
Angular Code for sending data to web Service :-
$scope.sendRow = function(){
$http.post("http://10.0.203.73/WS/ws.php/tipusactius/alta", $scope.atributs).success(function(data){
$scope.status = data;
})
}
Json Array Sending:-
[{"nomAtribut":"j",
"tipus":{"idvalors_combo":"3","valor":"Date"},
"mida":11,"prioritat":"",
"obligatori":"YES",
"observacions":"fcefwq"}]
Is all correct and the problem come from the web service? or the angular code is wrong? It's my first try with angular. Thank you.
So it looks like your web service wants a single element from your data array at a time.
I think you should modify the sendRow function to take the row index you want to send, like so:
$scope.sendRow = function(atributRow){
$http.post("http://10.0.203.73/WS/ws.php/tipusactius/alta", atributRow).success(function(data){
$scope.status = data;
})
}
Then, you can send all rows in a loop by:
angular.forEach($scope.atributs, $scope.sendRow);
or a single row with a specific index:
$scope.sendRow($scope.atributs[0])
I have the following table
<table id="table">
<thead>
<tr>
<th></th>
...
</tr>
</thead>
<tbody>
<c:choose>
<c:when test="${not empty userList}">
<c:forEach var="user" items="${userList}">
<tr>
<td><input name="id" value="${user.id}" hidden></td>
...
</tr>
</c:forEach>
</c:when>
</c:choose>
</tbody>
</table>
<input type="button" name="objects"/>
and here is my javascript to select row in my table
$(window).load(function () {
$("#table tr").click(function () {
$(this).addClass('selected').siblings().removeClass('selected');
var elem = $(this).find('td:first input').attr('value');
});
$('.objects').on('click', function (e) {
alert($("#table tr.selected td:first input").attr('value'));
});
});
When I select row and then press button objects I get an alert of selected id. I'd like to pass this id in Spring MVC controller, desirable without Ajax.
So I want select user in table, then press button objects and pass id of selected user to the new page /userObjects. Can you help me with this, please.
Remove your alert and just do something like :
var id = $("#table tr.selected td:first input").attr('value');
window.location = '/userObjects?id=' + id;
You may have to adapt the window.location depending on the url on which you want to forward your user.
It has been ages i don't work anything in JS, i'm trying to do with a select enable another html form when certain selected option is being chosen. this is my script:
<script>
function Activar() {
var e = document.getElementById('perm_tipo');
var strUser = e.options[e.selectedIndex].text;
if(strUser=="familiar"){
document.getElementById('paciente').disabled = false;
}else{
document.getElementById('paciente').disabled = true;
}
}
i have those html select inside a form, i think that could be the problem but checking on google seems that's should'nt be an issue.
here is my html code:
<form id="registro" action="admin_panel.php" method="post">
<table border="0">
<tr>
<td>Tipo de permiso</td>
<td>
<select name="perm_tipo" onchange="Activar()">
<?php
permiso();
?>
</select>
<br>
</td>
<td>Paciente</td>
<td>
<select id="paciente" disabled>
<?php
pacientes();
?>
</select>
</td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Registrar usuario"/><br>
</td>
</tr>
</table>
the php functions just fill the select options with data from some database, no big deal there, they work, no problem there.
Since you are using getElementById, you should use 'id' instead of 'name' in the 'select' element.
<select id="perm_tipo" onchange="Activar()">
....
</select>
More refactor: you can pass the DOM element itself in the event listener and you don't have to do var e = document.getElementById('perm_tipo'); in the first place
<select name="perm_tipo" onchange="Activar(this)">
....
</select>
<script>
function Activar(e) {
var strUser = e.options[e.selectedIndex].text;
if(strUser=="familiar")
document.getElementById('paciente').disabled = false;
else
document.getElementById('paciente').disabled = true;
}
</script>
I've been trying to fix a problem in my app for a couple of days now and I can't figure out what's happening.
I'm developing a MVC 4 application. I have a view in which there's a div that I load with more html with an ajax call that is executed on the $(function() { ... });. That ajax call works fine.
Problems start when I make the second ajax call. I paste the code below :-
In the main view :-
<div class="body" id="loadedData">
</div>
<script type="text/javascript" charset="utf-8">
$(function(){
loadData("#Url.Action("Authorizations","User", new { id = Model.ID })");
});
function loadData(url){
$.ajax({
type: 'GET',
url: url,
success: function (data) {
$("#loadedData").html(data);
}
});
}
</script>
And the partial view that is loaded in the div it's this:
#if (ViewBag.UserAuths != null){
<table>
<tr>
<th>
Operations
</th>
<th></th>
</tr>
#foreach (var prod in ViewBag.UserAuths){
<tr>
<td>
#prod[0]
</td>
<td>
Remove
</td>
</tr>
}
</table>
}
The problem happens when I click on the link in the HTML that's loaded by ajax (Remove). When i click, the page 'blinks' but nothing happens. I've put a breakpoint in the RevokeAccess function in UserController and it never stops.
Please help!
Edit:
There's other thing, when i click on the link, in the Chrome console it's shown a "Uncaught SyntaxError: Unexpected token )" message, but it disappears very quickly, i don't know why.
As you are using jQuery don't use inline events. Bind click event using jQuery. As you are fetching Partial View you can use .load() which is much simpler.
Script
<script type="text/javascript">
$(function(){
$("#loadedData").load("#Url.Action("Authorizations","User", new { id = Model.ID })");
$("#loadedData").on('click', '.anchor', function(event){
event.preventDefault();//Stop default action
$("#loadedData").load(
$(this).data('url'), //Url
{ id: $(this).data('id'), op : $(this).data('op')}, //Parameters
function(){
//Perform any action if any
}
);
})
});
</script>
Change Your Partials as
#if (ViewBag.UserAuths != null){
<table>
<tr>
<th>
Operations
</th>
<th></th>
</tr>
#foreach (var prod in ViewBag.UserAuths){
<tr>
<td>
#prod[0]
</td>
<td>
<a class='anchor' href="#" data-url='#Url.Action("RevokeAccess", "User")' data-id="#ViewBag.UserID" data-op="#Int32.Parse(prod[1])">Remove</a>
</td>
</tr>
}
</table>
}
In my project, one of the jsp pages have this html structure:
<table id="hor-minimalist-a" class="campos">
<thead>
<tr>
<th>Campo</th>
<th>#</th>
</tr>
</thead>
<tfoot>
<tr>
<td> <input type="text" name="nome_campo"> </td>
<td> <button type="button" id="incluir_campo" class="btn btn-link">Incluir</button> </td>
</tr>
<tr>
<td> <div id="result_incluir_campo"></div> </td>
<td> <div id="result_excluir_campo"></div> </td>
</tr>
</tfoot>
<c:forEach var="item_key" items="${campos}">
<tr id="linha_campo_${item_key}">
<td> <input type="text" value="${item_key}"> </td>
<td> <button type="button" id="excluir_campo_${item_key}" class="btn btn-link">Excluir</button> </td>
</tr>
</c:forEach>
</table>
Note the line:
<button type="button" id="excluir_campo_${item_key}" class="btn btn-link">Excluir</button>
I have one jquery function associated to it:
<c:forEach var="item_key" items="${campos}">
<script>
$("#excluir_campo_${item_key}").on("click", function () {
$.ajax({
type: "GET",
url: "<c:out value="${pageContext.request.contextPath}/key/remove_campo"/>",
cache: false,
data: {nome: "${item_key}"}
}).done(function(data){
if(data == "yes") {
$("#linha_campo_${item_key}").remove();
}
else if(data == "not"){
$("#result_excluir_campo").empty().append("erro");
}
else {
$("#result_excluir_campo").empty().append("sem acesso");
}
});
});
</script>
</c:forEach>
I was using jstl, but i am facing some problems with this solution, since my list can be updated dynamicly.
Take in consideration I change the Id from this element:
<button type="button" id="excluir_campo_${item_key}" class="btn btn-link">Excluir</button>
to this two (separating the two "terms" of current Id):
excluir_campo ${item_key}
is there any way to detect the secong id with a jquery function similar to that:
$("#excluir_campo").on("click", function () {
var second_id = ???;
$.ajax({
type: "GET",
url: "<c:out value="${pageContext.request.contextPath}/key/remove_campo"/>",
cache: false,
data: {nome: "<second_id>"}
}).done(function(data){
if(data == "yes") {
$("#linha_campo_<second_id>").remove();
}
else if(data == "not"){
$("#result_excluir_campo").empty().append("erro");
}
else {
$("#result_excluir_campo").empty().append("sem acesso");
}
});
});
Or there is another way to accomplish the same result of the code above?
First of all, never generate scripts in rendered html using any kind of loops. What if you have 1000 items? 1000 times your code, very inefficient. You can use write a generic function and render that caller. This way, you save thousands of lines!
Secondly, NEVER use generated id's and id based functions, never ever! you can just use a generic class for that functionality, you do not need id selector. You just need an extra attribute like "key":
<div class="my-functionality" data-key="15" />
<div class="my-functionality" data-key="16" />
<div class="my-functionality" data-key="17" />
<div class="my-functionality" data-key="18" />
And you can just use either generated scripts in loops or jquery's each selector to bind events to your elements: you can wrap your click event like:
$('.my-functionality').each(function(index, elem){
$(elem).click(function(){
//do you stuff here!
var key = $(elem).data('key'); //this will read data-key attribute
});
});