SCRIPT:
function dodelete(id,deleted) {
/*alert("UserId");*/
$("input[id$='hdUserId']").val(id);
$("input[id$='hdnDeleted']").val(deleted);
//alert(id);
//alert(deleted);
setParams(id,deleted);
//setInterval(50000);
alert('Record deleted successfully!');
}
PAGE:
</tr>
<apex:repeat value="{!staffInfo.StaffAccepted}" var="u" id="staffaccepted" rendered="{!staffInfo.StaffAccepted.size <> 0 && staffInfo.StaffAccepted.size <> null}">
<tr>
<td>{!u.FullName}</td>
<td>{!u.Email}</td>
<td>{!$Label[u.Role]}</td>
<td>{!$Label[u.RegType]}</td>
<td>
{!$Label.PG_ApprovalProcess_Reset}/
<apex:outputPanel rendered="{!IF(u.valide, true, false)}">
<apex:form style="margin:0px;">
<apex:commandLink onclick="dodelete('{!u.contact}',true);" > Delete</apex:commandLink>
<!--<apex:actionSupport event="onclick" action="{!dodelete}" rerender="tabref"/>-->
</apex:form>
</apex:outputPanel>
</td>
</tr>
</apex:repeat>
<apex:form >
<apex:actionFunction action="{!dodelete}" name="setParams" rerender="dummy">
<apex:param name="param1" assignTo="{!UsId}" value="" />
<apex:param name="param2" assignTo="{!userDeleted}" value="" />
</apex:actionFunction>
</apex:form>
Controller:
public void dodelete()
{
System.debug('PG_ApprovalController.doAction() called: Id: ' + UsId + ' and approved: ' + userDeleted);
/*Contact contact = [select Id, PG_ContactApprovalState__c from Contact where Id = :this.UsId];
PG_ContactApprovalStatus__c cas = [select Id, PG_ApprovalStatus__c from PG_ContactApprovalStatus__c where Id = :contact.PG_ContactApprovalState__c];
system.debug('PG_ContactApprovalStatus__c found, Id : ' + cas.Id + ', status : ' + cas.PG_ApprovalStatus__c);
if(userDeleted)
{
cas.PG_ApprovalStatus__c = PG_Enums.APPROVAL_STATUS_TYPE.Deleted.name();
update cas;
system.debug('Deleted');
} */
Contact contact = [select Id, PG_ContactApprovalState__c from Contact where Id =:this.UsId];
PG_ContactApprovalStatus__c cas = [select Id, PG_ApprovalStatus__c from PG_ContactApprovalStatus__c where Id = :contact.PG_ContactApprovalState__c];
system.debug('PG_ContactApprovalStatus__c found, Id : ' + cas.Id + ', status : ' + cas.PG_ApprovalStatus__c);
if(userDeleted)
{
cas.PG_ApprovalStatus__c = PG_Enums.APPROVAL_STATUS_TYPE.Deleted.name();
update cas;
system.debug('Deleted');
PageReference nextPage = new PageReference('/apex/PG_PharmacyOverview');
nextPage.setRedirect(true);
}
//update cas;
system.debug('Entered ###########>>>>>>>>>>:'+p);
}
I want to refresh the page after deleting the user from table,
Note:-
If i delete the LINE "alert('Record deleted successfully!');" from script page refresh is not working, even the delete function also not working.
You need to refresh the table when the action function is processed, you can do that with rerender attribute.
add rerender attribute to the action function, which the id of the component to be refreshed:
<apex:actionFunction action="{!dodelete}" name="setParams" rerender="contactTablePanel">
<apex:param name="param1" assignTo="{!UsId}" value="" />
<apex:param name="param2" assignTo="{!userDeleted}" value="" />
</apex:actionFunction>
encapsulate the table inside panel and assign a Id or add id to any desired component to be refreshed from apex:actionfunction-
<apex:outputPanel id="contactTablePanel">
<table>
....
</table>
</outputPanel>
Related
I have two buttons 'Add' and 'Edit' in my page. When I try to click the 'Add' button I get one popup form and I fill the details and will be added in to the database. The same thing when I click the 'Edit' button the same form should be displayed with the filled in details. I know how to get the data from the backend. But I am not aware of how should I differentiate the add and edit in one form.
https://jqueryui.com/dialog/#modal-form
I have refered this link and I have added the details for add form.
Can some one help me how do I do the edit?
<html>
<input class="btn btn-info" type="button" id="create-user" value="Add user">
<div class="row-fluid top-space-20">
{% if result | length == 0 %}
<div>
<p>There are no user details ,If you want you can add it </p>
</div>
{% else %}
<table class="table table-striped">
<thead>
<th>user name</th>
<th>user duration</th>
<th>user Description</th>
<th>user requirements</th>
<th>Actions</th>
</thead>
{% for each_item in result %}
<tbody>
<td>{{each_item.user_name}}</td>
<td>{{each_item.user_time}}</td>
<td>{{each_item.user_description}}</td>
<td>{{each_item.user_requirement}}</td>
<td>
<input class="btn btn-info" type="button" id="edituser" value="Edit">
</td>
</tbody>
{% endfor %}
{% endif %}
</table>
</div>
</div>
<div id="dialog-form" title="Create new user">
<p class="validateTips">All form fields are required.</p>
<form>
<fieldset>
<label for="username">user name</label>
<input type="text" name="username" id="username" class="text ui-widget-content ui-corner-all">
<label for="duration">Duration</label>
<input type="text" name="duration" id="duration" class="text ui-widget-content ui-corner-all">
<label for="description">Description</label>
<input type="text" name="description" id="description" class="text ui-widget-content ui-corner-all">
<label for="requirements">Requirements</label>
<input type="requirements" name="requirements" id="requirements"
class="text ui-widget-content ui-corner-all">
<input type="hidden" id='departmentId' ,value="{{department_id}}">
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</form>
</div>
<script>
$(function () {
var dialog, form,
username = $("#username"),
duration = $("#duration"),
description = $("#description"),
requirements = $("#requirements"),
allFields = $([]).add(username).add(duration).add(description).add(requirements),
tips = $(".validateTips");
function updateTips(t) {
console.log(t);
tips
.text(t)
.addClass("ui-state-highlight");
setTimeout(function () {
tips.removeClass("ui-state-highlight", 1500);
}, 500);
}
function checkLength(o, n, min, max) {
if (o.val().length > max || o.val().length < min) {
o.addClass("ui-state-error");
updateTips("Length of " + n + " must be between " +
min + " and " + max + ".");
return false;
} else {
return true;
}
}
function addUser() {
var valid = true;
allFields.removeClass("ui-state-error");
var username = $("#username");
var duration = $("#duration");
var description = $("#description");
var requirements = $("#requirements");
var departmentId = document.getElementById("departmentId").value;
valid = valid && checkLength(username, "username", 3, 16);
valid = valid && checkLength(duration, "duration", 3, 16);
valid = valid && checkLength(description, "description", 3, 300);
valid = valid && checkLength(requirements, "requirments", 5, 300);
if (valid) {
var username = $("#username").val();
var duration = $("#duration").val();
var description = $("#description").val();
var requirements = $("#requirements").val();
var departmentId = document.getElementById("departmentId").value;
$("#users tbody").append("<tr>" +
"<td>" + username + "</td>" +
"<td>" + duration + "</td>" +
"<td>" + description + "</td>" +
"<td>" + requirements + "</td>" +
"</tr>");
$.ajax({
type: 'POST',
url: '/department/%d/user' % departmentId,
data: {
'username': username,
'duration': duration,
'description': description,
'requirements': requirements
},
success: function (result) {
console.log(result);
alert("The user has been added");
document.location.href = "/departments";
},
})
dialog.dialog("close");
}
return valid;
}
dialog = $("#dialog-form").dialog({
autoOpen: false,
height: 400,
width: 350,
modal: true,
buttons: {
"Create user": addUser,
Cancel: function () {
dialog.dialog("close");
}
},
close: function () {
form[0].reset();
allFields.removeClass("ui-state-error");
}
});
form = dialog.find("form").on("submit", function (event) {
event.preventDefault();
addUser();
});
$("#create-user").button().on("click", function () {
console.log("I am first");
dialog.dialog("open");
});
});
</script>
</body>
</html>
There are Multiple Way to do it, Next time Please Post the code. Let me assume that you were using the
Model to view
https://jqueryui.com/dialog/#modal-form.
For more details post the code we can help you out
Here is the updated Answer
<tbody>
<td>{{each_item.user_name}}</td>
<td>{{each_item.user_time}}</td>
<td>{{each_item.user_description}}</td>
<td>{{each_item.user_requirement}}</td>
<td>
<input class="edituser btn btn-info" type="button" value="Edit" data-user-id = "{{each_item.user_id}}">
</td>
</tbody>
change the id to class
$(".edituser").button().on("click", function () {
var id = $(this).attr("data-user-id");
var tempUser;
for(var user in results){
if(user.id == id){
tempUser = user;
}
}
$("#username").val(tempUser.user_name);
$("#duration").val(tempUser.user_name);;
dialog.dialog("open");
});
you can set the value accordingly from using "user id"
and on submit change the value in the "results" object you using to construct the view
There are Multiple Way to do it, Next time Please Post the code. Let me assume that you were using the Jquery Model to view
https://jqueryui.com/dialog/#modal-form.
First Way: One Add button one Edit Button(assuming)
set id = "Add" for add id = "edit"
On Click on Add but show the empty form and use $( "#dialog-form" .dialog( "open" ); to to open the empty form
On click on Edit Set the Value in the form (fetch the value from the database if its required) and then $( "#dialog-form" .dialog( "open" );
Secon Way: One Add button Multiple Edit Button(assuming) for each li
1. use class selector class ="edit"
<button class ="edit" data-form-id = "123">Edit</button>
$( ".edit" ).click(function()
{
var formId = $(this).attr("data-form-id ");
$( "#dialog-form" .dialog( "open" );
});
For more details post the code we can help you out
you can add
<input type='hidden' name='actiontype'>
and set value Edit Or Add then in backend you can read this value and choose action for form
I have a form which has certain elements in it. I want to get all the elements inside the form regardless of their depth.
This is my test code
$(document).ready(function(){
//script.init(markchaining);
$('#checkbutton').click(function(){
$('#saveForm :input').each(function(key){
if($(this).is('select'))
{
var id = $(this).attr('id');
console.log('id is '+id);
$(this).trigger('change');
console.log('if-> Element name is '+$(this).attr('name'));
}
else
{
console.log('else-> Element name is '+$(this).attr('name'));
}
});
});
});
function addRow(ele,name)
{
var id = ele.id;
$('#'+id+'').closest('tr').after('<tr><td class="label-cell">New Row</td><td><input type="text" name="'+name+'" /></td></tr>');
}
My Problem
I also have dynamic elements which will be created on certain select change events during the iteration. I want to get these dynamically created elements as I iterate through my form.
I am not able to access the "New Row" element which gets created dynamically on clicking the 'check' button
This is my complete test code
Just added a count variable to distinguish the names on console. https://jsfiddle.net/ztpjacyu/
$(document).ready(function() {
//script.init(markchaining);
$('#checkbutton').click(function() {
$('#saveForm :input').each(function(key) {
if ($(this).is('select')) {
var id = $(this).attr('id');
console.log('id is ' + id);
$(this).trigger('change');
console.log('if-> Element name is ' + $(this).attr('name'));
} else {
console.log('else-> Element name is ' + $(this).attr('name'));
}
});
});
//Clicked twice to show you the console
$('#checkbutton').click();
$('#checkbutton').click();
});
var count = 0;
function addRow(ele, name) {
var id = ele.id;
$('#' + id + '').closest('tr').after('<tr><td class="label-cell">New Row</td><td><input type="text" name="' + name + ++count + '" /></td></tr>');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form name="mainform" id="saveForm" action="#">
<!--##GENERAL##-->
<input type="button" name="checkbutton" id="checkbutton" value="Check" /> <- Moved here so that you can see the console
<div id="fromuser">
<table width="100%" id="userTable">
<tr id="ReportNameRow">
<td class="label-cell">Report Name :</td>
<td>
<input type="text" name="CustomReportName" id="CustomReportName" />
</td>
</tr>
<tr id="ReportNamrRow">
<td class="label-cell">* Saved Report Name :</td>
<td>
<select name="rname" id="rname" onChange="addRow(this,'MYID');">
<option value="">---Select---</option>
<option value="Cash_Position">Cash Position</option>
<option value="Detail_Report">Detail Report</option>
<option value="FCCS/FBPS_Detail_Report">FCCS/FBPS Detail Report</option>
<option value="Reconciliation_Report">Reconciliation Report</option>
<option value="Statement_Report">Statement Report</option>
<option value="CustomReport">Enter Custom Report Name</option>
</select>
</td>
</tr>
<input type="hidden" name="hiddenid" value="I am hidden" id="hiddenid" />
<tr id="submit">
<td class="label-cell"></td>
<td>
<input type="submit" name="submitbutton" id="submitbutton" value="Submit" />
</td>
</tr>
</table>
</div>
</form>
Update
if you want the element to be there before you execute your each , you can do this : https://jsfiddle.net/jbrt3Led/
$('#checkbutton').click(function() {
$("#rname").trigger('change');
$('#saveForm :input').each(function(key) {
if ($(this).is('select')) {
var id = $(this).attr('id');
console.log('id is ' + id);
console.log('if-> Element name is ' + $(this).attr('name'));
} else {
console.log('else-> Element name is ' + $(this).attr('name'));
}
});
});
I'm trying to create a dynamic textbox that I can use to allow the entry of multiple values. I employed javascript for this purpose, thinking that this would allow me to grab the text value and place it in a list, before passing it to my web app. However, the code document.getElementById('<%=sidemgr.ClientID%>').value only picks up the initial value of sidemgr.txt from it's creation.
How do I get the updated value of this textbox? Do I have to use a javascript textbox?
Here is the javascript I have
<script type="text/javascript">
$(document).ready(function () {
$("#btnAdd").click(function () {
var value = document.getElementById('<%=sidemgr.ClientID%>').value;
var field = $("#field").val();
var input = "<div id='listDiv' />";
var newRow = "<tr><td>" + field + "</td><td>" + value + "</td></tr>";
$('#controls').append(newRow);
});
});
</script>
and the html
<div>
<asp:TextBox ID="sidemgr" runat="server"></asp:TextBox>
<br />
<input id="btnAdd" type="url" value="Add" />
<asp:Button ID="btnProcess" runat="server" Text="Process" OnClick="Process" />
<table id="controls" cellpadding="10" cellspacing="10">
</table>
</div>
C# code behind
protected void Process(object sender, EventArgs e)
{
var parameters = Request.Form["parameters"];
if (parameters != null && parameters.Count() > 0)
{
parameters.Split(',').ToList().
ForEach(p =>
{
Response.Write(p + "<br />");
});
}
}
Note that some of this is from a solution I found on SO a while ago.
Create a hiddenfield to hold the values you want in the server, the way you are doing server doesnt the value of Request.Form["parameters"]
$(document).ready(function () {
$("#btnAdd").click(function () {
var value = document.getElementById('<%=sidemgr.ClientID%>').value;
var field = $("#field").val();
var input = "<div id='listDiv' />";
var newRow = "<tr><td>" + field + "</td><td>" + value + "</td></tr>";
$("#parameters").val($("#parameters").val()+value+",")
$('#controls').append(newRow);
});
});
<div>
<asp:TextBox ID="sidemgr" runat="server"></asp:TextBox>
<input type="hidden" id="parameters" name="parameters"/>
<br />
<input id="btnAdd" type="url" value="Add" />
<asp:Button ID="btnProcess" runat="server" Text="Process" OnClick="Process" />
<table id="controls" cellpadding="10" cellspacing="10">
</table>
</div>
With this hiddenfield the server will receive the Request.Form["parameters"] with something like "value1,value2,"
Or you coud use multiple hiddenfields with name like "parameters[]", insert in the table, and work with Request.Form["parameters"] as a list
I don't know if it is possible or not or it might be a silly question. But here is what I need to do:
#{
var data= "";
}
#foreach (var item in Model)
{
<tr>
#if (Context.User.Identity.Name == "admin")
{
<td style="width:50px;">
#if (#item.chkbillboard == true)
{<input name ="chk1" class="myCheckbox" type="checkbox" value="#item.chkbillboard" checked="checked" />
data = data + item.id + "," + item.appname + ";";
}
else
{<input name ="chk2" class="myCheckbox" id="chkbox" type="checkbox" value="#item.chkbillboard" onclick="return chkbox();" />
}
</td>
}
<td style="width:200px;">#item.appname </td>
<td style="width:50px;">#Html.ActionLink("Edit", "UpdateAPIForm", new { #id = item.id, appname = item.appname })</td>
</tr>
}
#if (Context.User.Identity.Name == "admin")
{
<div class="grid_1 sub-spacer editor-field submit"> </div>
<input type="submit" value="Submit" id ="demo-submit1" onclick="return chkchkbox(data);" /> <br />
}
In my for loop I assiged some value if the check box is true. What I need to do is I want to pass this data variable with values on button click to my javascript function.
Like onclick="return chkchkbox(data);"
I don't know if it is possible. If not, is there any other way to pass value on button click?
I got my problem resolved .
I used onclick="return chkchkbox('#data');"
on button click event and it worked for me.
I have the following script that sends an image URL to an input field on click (from a modal window). I am also sending that same url, imgurl to a <div class="preview-image> to show it on insertion.
var BusiPress_Configuration = {
init : function() {
this.files();
},
files : function() {
if ( $( '.busipress_upload_image_button' ).length > 0 ) {
window.formfield = '';
$('.busipress_upload_image_button').on('click', function(e) {
e.preventDefault();
window.formfield = $(this).parent().prev();
window.tbframe_interval = setInterval(function() {
jQuery('#TB_iframeContent').contents().find('.savesend .button').val(busipress_vars.use_this_file).end().find('#insert-gallery, .wp-post-thumbnail').hide();
}, 2000);
if (busipress_vars.post_id != null ) {
var post_id = 'post_id=' + busipress_vars.post_id + '&';
}
tb_show(busipress_vars.add_new_file, 'media-upload.php?' + post_id +'TB_iframe=true');
});
window.original_send_to_editor = window.send_to_editor;
window.send_to_editor = function (html) {
if (window.formfield) {
imgurl = $('a', '<div>' + html + '</div>').attr('href');
window.formfield.val(imgurl);
window.clearInterval(window.tbframe_interval);
tb_remove();
$('.preview-image img').attr('src',imgurl);
} else {
window.original_send_to_editor(html);
}
window.formfield = '';
window.imagefield = false;
}
}
}
}
BusiPress_Configuration.init();
Sending the image URL to the editor and the div are working fine, but it is doing it for every instance of that div on the page. I've been playing around with $(this) and closest() to see if I could localize the insertion to the specific div near the input, but haven't had any luck. Any help would be greatly appreciated. Thanks!
Default markup
<table class="form-table">
<tbody>
<tr valign="top">
<th scope="row">Default Map Icon</th>
<td>
<input type="text" class="-text busipress_upload_field" id=
"busipress_settings_map[default_map_icon]" name=
"busipress_settings_map[default_map_icon]" value=
"http://localhost/jhtwp/wp-content/plugins/busipress/img/red-dot.png" /><span> <input type="button"
class="busipress_upload_image_button button-secondary" value=
"Upload File" /></span> <label for=
"busipress_settings_map[default_map_icon]">Choose the default map icon (if
individual business type icon is not set</label>
<div class="preview-image" style="padding-top:10px;"><img src=
"http://localhost/jhtwp/wp-content/plugins/busipress/img/red-dot.png" /></div>
</td>
</tr>
<tr valign="top">
<th scope="row">Active Map Icon</th>
<td>
<input type="text" class="-text busipress_upload_field" id=
"busipress_settings_map[active_map_icon]" name=
"busipress_settings_map[active_map_icon]" value=
"http://localhost/jhtwp/wp-content/plugins/busipress/img/blue-dot.png" /><span> <input type="button"
class="busipress_upload_image_button button-secondary" value=
"Upload File" /></span> <label for=
"busipress_settings_map[active_map_icon]">Choose the active map icon (if
individual business type icon is not set</label>
<div class="preview-image" style="padding-top:10px;"><img src=
"http://localhost/jhtwp/wp-content/plugins/busipress/img/blue-dot.png" /></div>
</td>
</tr>
</tbody>
</table>
Assuming you can select the button already (I changed it to "button-selector" for the meantime), use parent to get the parent td then find the child div to be changed. This will get the nearest div to your button.
$("button-selector").parent('td').find("div")