I'm using Ajax tabcontainer with jqGrid.
I have two tabs.
jqGrid of tab1 is loaded when the aspx page is loaded.
For tab2, the button click event will change the activetabindex to 1, and then load the data
But now when I click back on tab1, the tab opens but the jqGrid disappears.
Is there any solution to get rid of this problem
<asp:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0">
<asp:TabPanel ID="TabPanel1" runat="server" HeaderText="This is first tab">
<ContentTemplate>
<table>
<tr>
<td>
<asp:LinkButton ID="LinkButton4"runat="server"
Text='Load data for tab2'
OnClick="btnLoadDataForTab2_Click"/>
</td>
</tr>
<tr>
<td>
<table id="tblTab1"></table>
</td>
</tr>
</table>
</ContentTemplate>
</asp:TabPanel>
<asp:TabPanel ID="TabPanel2" runat="server" HeaderText="This is second tab">
<ContentTemplate>
<table>
<tr>
<td>
<table id="tblTab2"></table>
</td>
</tr>
</table>
</ContentTemplate>
</asp:TabPanel>
</asp:TabContainer>
You have to initialize JQGrid again on your activeTabChange event.
Also, make autoPostBack= true of TabContainer.
Related
I use the below code to repeat the selectList and like to access the individual onchange event of each slectlist. But it allows us to only create a common onChange event. Please refer the screenshot below.
screenshot of what i am trying to achieve
Here I have 2 selectList added to this visual force page.
The number of selectList is known only when the page is getting loaded.
Now when I change anyone of the selectList it automatically changes the selected value of other selectList, since event="onchange" action="{!getRoleSelectionChange}" is same for all selectList. - As it is added only in apex:repeat
The templateRoles collection here is updated in the constructor of SampleController with a RestAPI call. So the size and data for the templateRoles will be unknown initaly and we will get it only when the page is loaded.
Sample code I use
<apex:page controller="SampleController">
<apex:form enctype="multipart/form-data">
<table>
<tbody>
<tr>
<td>
<apex:panelGrid style="padding: 64; text-align: center; background-color: #F2F2F2">
<apex:repeat var="templateRole" value="{!templateRoles}">
<apex:outputPanel title="Role" style="padding: 32">
<tr>
<td>
<table>
<tbody>
<tr>
<td>
<apex:outputText value="{!templateRole.name}" id="roleValue" />
</td>
<td>
<apex:selectList value="{!roleSelectedObject}" size="1">
<apex:selectOptions value="{!objList}" />
<apex:actionSupport event="onchange" action="{!getRoleSelectionChange}">
<apex:param name="roleName" value="{!templateRole.Name}" assignTo="{!mappedRoleName}"/>
</apex:actionSupport>
</apex:selectList>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</apex:outputPanel>
</apex:repeat>
</apex:panelGrid>
</td>
</tr>
</tbody>
</table>
</apex:form>
</apex:page>
I am trying to add mutiple selectList in a visual force page dynamically and do some changes based on the selection changes in the selectList. I also tried changing the design with apex:pageBlock but id doesnt work well for my case.
I just learned about parsley.js and I'm trying to add it's validation capabilities to my project that is already wired up with knockout.js bindings. Here is the markup:
<form id="form-add-gift" data-bind="submit: addGift" data-validate="parsley">
<table class="table table-striped">
<thead>
<tr>
<th>Gift</th><th>Description</th><th>Url</th><th></th>
</tr>
</thead>
<tfoot>
<tr>
<td><input id="txtName" name="txtName" type="text" data-required="true" data-bind="value: newGift().name" /></td>
<td><input id="txtDescription" name="txtDescription" type="text" data-bind="value: newGift().description" /></td>
<td><input id="txtUrl" name="txtUrl" type="text" data-type="url" data-bind="value: newGift().url" /></td>
<td><button id="btnAdd" name="btnAdd" class="btn" type="submit" data-bind="disable: newGift().name.length > 0">Add gift</button></td>
</tr>
</tfoot>
<tbody data-bind="foreach: gifts">
<tr>
<td id="tdName" data-bind="text: name"></td>
<td id="tdDescription" data-bind="text: description"></td>
<td id="tdUrl" data-bind="text: url"></td>
<td><a id="btnRemove" class="btn btn-danger" href="#" data-bind="disabled: $parent.isClaimed, click: $parent.removeGift">Remove</a></td>
</tr>
</tbody>
</table>
</form>
When I click the "Add gift" button, my knockout.js addGift() function fires and the parsley.js validation occurs afterward. Obviously this is incorrect. Is there any way to get parsley.js to play nice with the knockout.js bindings?
I don't think parsley.js meant to work directly with KnockoutJs, but this can't stop you from using them both nicely.
Quick look through the Documentation -> Javascript - > Form you can use this method:
$('#form').parsley('isValid');
Useful if you want to integrate the form validation process inside
custom functions, without triggering error messages.
UPDATE
you can try this too:
$( '#form' ).parsley( 'validate' );
Useful if you want to integrate the form validation process inside
custom functions.
I have a very nice grid with Create, Retrieve, Edit and Delete functionality. I am using knockout.js on the client and WebAPI on the back end.
I would like to extend this to a number of different objects. Essentially I have a List<T> where T is an MVC view model and the knockout view and view model should be able to work out what they should look like based on T.
Does anyone know of a simple way to display any viewmodel (with specific controls for editing based on the viewmodel itself - eg datepicker for dates, input for string, drop downs etc) in a grid format and have generic CRUD functions.
Below is an example of the exiting HTML I am using (for a specific object):
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Value Date</th>
<th>Position Date</th>
<th>Book</th>
<th>Currency</th>
<th>Currency Base</th>
<th>Amount1</th>
<th>Amount2</th>
<th>Position Type</th>
<th style="width: 100px; text-align:right;" />
</tr>
</thead>
<tbody data-bind=" template:{name:templateToUse, foreach: pagedList }"></tbody>
</table>
and the templates look like this:
<script id="itemsTmpl" type="text/html">
<tr>
<td data-bind="text: valueDate.formattedDate"></td>
<td data-bind="text: positionDate.formattedDate"></td>
<td data-bind="text: book"></td>
<td data-bind="text: currency"></td>
<td data-bind="text: currencyBase"></td>
<td data-bind="text: amount1"></td>
<td data-bind="text: amount2"></td>
<td data-bind="text: positionType"></td>
<td class="buttons">
<a class="btn" data-bind="click: $root.edit" href="#" title="edit"><i class="icon-pencil"></i></a>
<a class="btn" data-bind="click: $root.remove" href="#" title="remove"><i class="icon-trash"></i></a>
</td>
</tr>
</script>
<script id="editTmpl" type="text/html">
<tr>
<td><input data-bind="datepicker: valueDate.formattedDate, datepickerOptions: { dateFormat: 'yy/mm/dd' }"/></td>
<td><input data-bind="datepicker: positionDate.formattedDate, datepickerOptions: { dateFormat: 'yy/mm/dd' }"/></td>
<td><input data-bind="value: book"/></td>
<td><input data-bind="value: currency"/></td>
<td><input data-bind="value: currencyBase"/></td>
<td><input data-bind="value: amount1"/></td>
<td><input data-bind="value: amount2"/></td>
<td><input data-bind="value: positionType"/></td>
<td class="buttons">
<a class="btn btn-success" data-bind="click: $root.save" href="#" title="save"><i class="icon-ok"></i></a>
<a class="btn" data-bind="click: $root.cancel" href="#" title="cancel"><i class="icon-remove"></i></a>
</td>
</tr>
</script>
I would like the View as well as the View Model to be generic and not "hard-coded" as above. I am sure someone else must have done something like this.
One solution would be that:
AJAX call gets a list of JSON viewmodels
If list is empty then do not display anything
If list has items, pick first item and go through properties
Start constructing the view on the client by looping through proprties
Append the string as a DOM element to the main DIV
Wireup knockout
There are problems with this approach. What if a property is null for the first object but exists in another? If so we do not setup the element for it.
A better option is to use content negotiation to get a dedicated template:
So GET /api/customers will return customers but if you request text/knockout-template+html then you get back a knockout template as string and then you append to DIV and wireup knockout. So server can generate template using reflection or customise for some models.
I would like to display the information about user's registration state. It should be displayed on every view, but i consider, that writting this code for about 20 times is a bad idea. By the way, this is the code, it works, i guarantee that:
View/RegistrationInfo:
<table width="95%" border="0" cols="2">
<tr>
<td width="50%" height="124"><h2><strong>Simple Blog </strong></h2></td>
<td width="50%" height="124">
#if (System.Web.HttpContext.Current.User.Identity.IsAuthenticated)
{
using (Html.BeginForm("LogOff", "Account"))
{
<table width="95%" height="86" border="0">
<tr>
<td width="50%" valign="middle">Hello, #System.Web.HttpContext.Current.User.Identity.Name</td>
<td width="50%" valign="middle" align = "right"><input type="submit" value="Exit" /></td>
</tr>
</table>
}
}
else
{
using (Html.BeginForm("LogIn", "Home"))
{
<table width="95%" height="86" border="0">
<tr>
<td width="45%" valign="bottom">Login:</td>
<td width="45%" valign="bottom">Password:</td>
<td width="10%"></td>
</tr>
<tr>
<td width="45%">
<p>
<input type="text" name="login" />
</p>
</td>
<td width="45%">
<p>
<input type="password" name="password" />
</p>
</td>
<td width="10%" align="left">
<input type="submit" value="Enter" />
</td>
</tr>
<tr>
<td width="45%" valign="top">
#Html.ActionLink("Register", "Register", "Account")
</td>
</tr>
</table>
}
}
</td>
</tr>
</table>
<hr align="left" width="100%" size="2" />
As you can see, this view doesn't require to be strongly typed... and i don't know, should I modify any controllers (because, all information is stored in HTML Context), and how. I tried to call
#Html.RenderAction("RegistrationInfo", "Home");
or
#Html.RenderPartial("RegistrationInfo", "Home");
and every time i receive compile error with message about invalid parametres
While Darin's answer perfectly covers your question, I would point out that registration information seems like it's part of your layout more (master page for the .aspx-inclined) than an actual action.
So what I would do (and indeed, do do) is put it either in the header part of your layout in the top right or under your side menu or something, and let the layout handle all the details of rendering it (with a conditional around it to hide it when you're not logged in, so you don't see it on the login screen).
The following should work:
#Html.Partial("~/Views/Home/RegistrationInfo.cshtml")
Or if you are inside a view of the Home controller simply:
#Html.Partial("RegistrationInfo")
Or if you put this partial in ~/Views/Shared/RegistrationInfo.cshtml you will be able to reference with the shorthand syntax.
in a Spring MVC 2.5 application i'm using a spring <form:form> component and in this form a table with c:forEach is rendered.
In each row a submit button is placed in. If i start a submit by clicking a button i would like to knwo, which button has processed the submit.
<form:form commandName="formObject">
<table class="data-table" cellpadding="1" cellspacing="1" border="0">
<thead>
<tr>
</tr>
</thead>
<c:forEach items="${list}" var="document" varStatus="row">
<tr>
<td>
<input type="submit" value="${document.title}"/>
<td>
</tr>
</c:forEach>
</table>
</form:form>
THX.
Give the submit button a name. You can handle the request parameter from that button like any other parameter. Some browser might handle the value they give differently though.
<input name="submittype" type="submit" value="${document.title}" />