I need to call a javascript function when a SharePoint:FormField has changed. This is to provide some client side feedback about there selection.
I need to add this on a new content type form, in my Visual Studio project. The SharePoint:FormField doesn't appear to have the Onchange event, like normal ASP controls.
I looked at ValueChanged event, but it looks like read only.
Any suggestions or help would be appreciated
Solution Found:
I resolved the problem thanks to Google and webborg.blogspot.com/2008/04/… and mysplist.blogspot.com/2010/03/…. I would add that the JavaScript should be inline and after following your SharePoint:FormField
<table cellpadding="0" cellspacing="0" id="onetIDListForm" style="width:100%">
<tr>
<td width="400px" valign="top" class="ms-formbody">
<SharePoint:FormField runat="server" ID="MyGender" ControlMode="New" FieldName="MyGender" />
<SharePoint:FieldDescription runat="server" ID="field_MyGender_Description" FieldName="My Gender" ControlMode="New" />
</td>
</tr>
</table>
<script type="text/javascript">
function getField(fieldID)
{
var docTags = document.all;
for (var i=0; i < docTags.length; i++) {
if (docTags[i].title == fieldID) {
return docTags[i]
}
}
}
function DisplayMessage()
{
if (getField('My Gender').value == 'Male') {
alert('Hello Manhood');
}
}
getField('My Gender').onchange = function() {DisplayMessage()};
</script>
Related
I have developed a page to search from database with sp by user inputs and after that the result shows in the same page in a gird . view is as below
<div class="col-xl-12 col-lg-12 col-md-12 mb-1">
<fieldset class="form-group">
<br />
<a onclick="GetSellerProduct()" class="btn btn-success col-md-12">Search </a>
</fieldset>
</div>
#if (Model.productsDtos != null)
{
<table class="table" role="grid">
<thead>
<tr>
<th>productName</th>
<th>inventory</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.productsDtos)
{
<tr>
<td>#item.Name</td>
<td>#item.inventory</td>
<td><a onclick="GetDetail('#item.ProductId')">Details</a></td>
</tr>
}
</tbody>
</table>
}
function GetSellerProduct() {
var codmelli = $('#NationalCode').val();
var postData = {
'CodMelli': codmelli,
};
$.ajax({
contentType: 'application/x-www-form-urlencoded',
dataType: 'json',
type: "GET",
url: "Lookup",
data: postData,
success: function (data) { }
});
}
and action as below:``
public IActionResult Lookup(SellerProductsViewModel model, string CodMelli)
{
if(CodMelli!=null)
{
model = new SellerProductsViewModel
{
productsDtos = _service.lookup(CodMelli)
};
}
return View(model);
}
after click on search button and doing lookup action , search result doesnt show in the table
Before go to your point, I think using HTTP POST method for lookup is largely unusual. Typically GET.
For you original question, connect to server without updating the DOM/webpage needs to be done using javascript-based solution (aka frontend). Most basic one is to send ajax request but there are other solutions:
https://www.freecodecamp.org/news/here-is-the-most-popular-ways-to-make-an-http-request-in-javascript-954ce8c95aaa/
I m trying to add a dynamical input along with dropdown for that i m using vue-serach-select let me show my code then issue in detail
<template>
<button #click="addRow1"></button>
<table class="table table-striped">
<thead>
<tr style="font-size: 12px; text-align: center;">
<th class="span2" >Product Name</th>
<th class="span2" >Unit</th>
</tr>
</thead>
<tbody id="product_table_body">
<tr v-for="(row, index) in rows">
<td><model-list-select :list="productname"
option-value="product_name"
option-text="product_name"
v-model="row.selectproduct"
placeholder="Search Product Name"
#searchchange="searchprd3">
</model-list-select>
</td>
<td>
<input class="form-control-sm" type="text" v-model="row.new1" disabled="disabled" style="width: 100px;">
</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
data () {
return {
productname3:[],
rows:[],
}
},
methods:{
addRow1(){
this.rows.push({})
},
searchprd3(search,index){
},
}
}
</script>
now if i click on button one more row is added with dropdown now my problem is that how i can differentiate productname according to dynamic create row i had tried like :list="productname{index},:list="productname.index but none of them worked and last thing i want to pass index parameter in searchprd3 function so i tried like this searchprd3(search,index) in function I m getting index but it throw error for search and if only pass index then also throw error however it work none of parameter is passed from select like this #searchchange="searchprd3" but in function i m not getting index value or is there anyother way to achieve this thing
updated
<tr v-for="(row, index) in rows">
<td><model-list-select :list="row.productname"
option-value="product_name"
option-text="product_name"
v-model="row.selectproduct"
placeholder="Search Product Name"
#searchchange="searchprd3">
</model-list-select>
</td>
</tr>
<script>
searchprd3(searchText,index){
var _this=this
this.$http.get('/api/companyproducts?filter[where][product_name][ilike]=%'+searchText+'%').then(function (response) {
_this.rows.push({productname:response.data})
}).catch(function (error) {
console.log("error.response");
});
},
</script>
i want select option list seprate for every row but my code throw error like "Cannot read property 'map' of undefined"
that is why row push not working for dynamic row is I m missing Something
update2
found my mistake
addRow1(){
this.rows.push({
productnamex:[],
unit:'',
qty:'',
amt:'',
cgst:'',
sgst:'',
igst:''})
},
problem is that i haven't initialize my dropdown at rows click now another problem is that why my drop not get populated
try like this
<template>
<model-list-select :list="row.productnamex"
option-value="product_name"
option-text="product_name"
v-model="row.selectproduct"
placeholder="Search Product Name"
#searchchange="searchprd3($event,index,row)" >
</model-list-select>
</template>
<script>
addRow1(){
console.log(this.rows)
this.rows.push({ productnamex:[],unit:'', qty:'',amt:'', cgst:'', sgst:'', igst:''})
},
searchprd3(searchText,index,row){
console.log(index)
var _this=this
console.log(row)
this.$http.get('/api/companyproducts?filter[where][product_name][ilike]=%'+searchText+'%').then(function (response) {
console.log(response.data)
row.productnamex=response.data
}).catch(function (error) {
console.log("error.response");
});
},
</script>
hope this will help you as well as other enjoy :D
you should be able to do:
:list="productname+index"
You need to manually pass the index into the callback together with the searchtext in order for your searchprd3 method to receive both values.
This is where the inline $event variable in your event listener comes into the action. The $event variable contains the value that is supposedly passed to your callback by the event.
So if you want to pass additional data into the callback aside from the data that is passed by the event, you can manually call the callback function and pass the $event together with the data that you want to pass which in this case, the index variable.
Your event listener should look like this:
#searchchange="searchprd3($event, index)"
I am creating a dijit Dialog and then hiding it with a OK/Cancel button. As the dialog hides, I always get the follow errors in the javascript console:
exception in animation handler for: onEnd
TypeError: Cannot read property 'remove' of undefined(…)
See here: https://www.youtube.com/watch?v=QcEUsllrRGs
The error doesn't seem to affect anything, but I'd sure love to resolve it so I don't confuse that error for a real functional issue while debugging.
I've read many suggestions regarding similar errors... using lang.hitch, disconnecting from events, but nothing seems to work/be applicable. Help?!
Here's a snippet of my Dialog code:
function showMessageDialog(title, message, width) {
var content,
focusOnOkButton = function () {
dojo.byId('messageDialogOk').focus();
};
if (!dijit.byId("messageDialog")) {
new dijit.Dialog({}, "messageDialog").startup();
new dijit.form.Button({
onClick: function() {
dijit.byId('messageDialog').hide();
}
}, "messageDialogOk").startup();
}
if (width) {
dojo.byId('messageDialogTable').style.width = width + "px";
} else {
dojo.byId('messageDialogTable').style.width = "450px";
}
dijit.byId('messageDialog').resize();
dijit.byId('messageDialog').set("title", title);
content = dojo.byId("messageDialogMessage");
dojo.empty(content);
content.innerHTML = message;
dijit.byId('messageDialog').show();
setTimeout(focusOnOkButton, 50);
}
....and the associated HTML:
<div id="messageDialog" style="display:none;">
<table id="messageDialogTable" style="width:450px;table-layout: fixed;">
<tr>
<td colspan="2" style="padding: 0 0px 0px 5px;">
<table style="width: 100%;">
<tr>
<td id="messageDialogMessage" style="font-size: 10pt;"></td>
</tr>
<tr>
<td style="padding: 5px;text-align: center;">
<div id="messageDialogOk">OK</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
I tried to duplicate the problem with a simple JSFiddle example, but could not... so there's something going in in my app... but not sure what it could be.
OK- I have been beating my head against this since last Friday, I figure it is finally time to post for help. I think I have my code fairly settled, and I think things should work.
I have a grid where I edit the row, add rows, and then I expand the rows loading a subgrid (editable edatagrid). I want to simply edit and cancel the editable subgrid. However also want to take the ID column that I pass to the server page for updating from the parent row (api).
Editing and adding new rows is working, opening the fields I want as editable in an editable grid in the sub row is working. However getting the sub grid to cancel edit, save, and use iconCls will not work (iconCls code removed at the moment for the subgrid). I have not included all the code, just what is relevant to the question here so there are some other calls with missing javascript. If anybody would like that code just holler, and I will include it.
master grid
<section class="grid">
<table id="wells" class="easyui-datagrid" title=" " style="width:100%;height:500px"
pagination="true" idField="api" fitColumns="true" url="getinfo.php"
collapsible="true" singleSelect="true" toolbar="#tb" resizeHandle="both"
autoRowHeight="true" nowrap="false" rownumbers="true" pageList="[10,25,50,100,5000]">
<thead>
<tr>
<th data-options="field:'well_name', width:48" sortable="true">Name</th>
<th data-options="field:'well_num',width:18" sortable="true">Num</th>
<th data-options="field:'field',width:48" sortable="true">Field</th>
<th data-options="field:'pad',width:36" sortable="true">Pad</th>
<th data-options="field:'api',width:32" sortable="true">API</th>
<th data-options="field:'legal_description',width:46" sortable="true">Legal</th>
<th data-options="field:'county_state',width:40" sortable="true">County, State</th>
<th data-options="field:'lease',width:33" sortable="true">Lease</th>
<th data-options="field:'unit_ca_pa',width:57" sortable="true">Unit CA PA</th>
<th data-options="field:'status',width:27">Status</th>
<th data-options="field:'status_date',width:22">Updated</th>
<th data-options="field:'wildlife_stips',width:75">Wildlife Stips</th>
<th data-options="field:'notes',width:75">Notes</th>
</tr>
</thead>
</table>
master grid toolbar
<div id="tb" style="padding:3px"><span>Field:</span>
<input id="field" style="line-height:22px;border:1px solid #ccc">
<span>Pad:</span>
<input id="pad" style="line-height:22px;border:1px solid #ccc">
<span>API:</span>
<input id="api" style="line-height:22px;border:1px solid #ccc">
Search
Reset
New Well
Edit Well
</div>
expandable, edatagrid section
<script type="text/javascript">
$('#wells').datagrid(
{
view: detailview,
detailFormatter:function(index,row)
{ return '<div style="padding:2px"><table class="ddv"></table></div>'; },
onExpandRow: function(index,row)
{
var ddv = $(this).datagrid('getRowDetail',index).find('table.ddv');
ddv.edatagrid(
{
url:'geteditexpand.php?api='+row.api,
saveUrl:'updateeditwell.php?api='+row.api,
fitColumns:true,
singleSelect:true,
rownumbers:true,
loadMsg:'',
height:'auto',
columns:[[
{field:'location',title:'Location'},
{field:'NorthSouth',title:'N+S-',editor:'text'},
{field:'EastWest',title:'E+W-',editor:'text'},
{field:'latitude',title:'Latitude',editor:'text'},
{field:'longitude',title:'Longitude',editor:'text'},
{field:'lot',title:'Lot',editor:'text'},
{field:'tract',title:'Tract',editor:'text'},
{field: 'action', title: 'Action',
formatter:function(value,row,index)
{
var s = 'Save ';
var c = 'Cancel';
return s+c;
}
}
]],
onResize:function()
{ $('#wells').edatagrid('fixDetailRowHeight',index); },
onLoadSuccess:function()
{
setTimeout(function(){
$('#wells').edatagrid('fixDetailRowHeight',index);
},0);
}
});
$('#wells').datagrid('fixDetailRowHeight',index);
}
});
</script>
you dont have updateURL, im not sure
url(source)
saveUrl(NewRecord)
missing
updateUrl:'updatefile.php'
I am working in ASP.Net MVC4 with Dojo. I have a strange problem when I am adding new rows to html table. I need to have a table which supports adding and removing rows and textboxes inside should have dojo style. I referred the post http://blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style/ ad tried to create the same thing. Let me explain my code. Below is my view
#section scripts {
<script type="text/javascript">
require(["dojo/parser", "dijit/form/TextBox", "dijit/form/Button"]);
</script>
}
<table id="servicesTable">
<tr>
<th>
<label id="lblSelectService">
Select</label>
</th>
<th>
<label id="lblServiceName">
Name</label>
</th>
<th>
<label id="lblTitle">
AE Title</label>
</th>
</tr>
#for (int i = 0; i < Model.Services.Count; i++)
{
#Html.Partial("_ServiceRow", Model.Services[i])
}
</table>
My partial view for rendering each row is like below
#model WebUI.Models.RemDevServiceViewModel
<tr>
<td>
#Html.CheckBoxFor(x => x.IsMarked,
new { id = #String.Format("Service[{0}]IsMarked", #Model.ID) })
</td>
<td>
<input style="width: 100px; id="Service[#Model.ID]Name"
name="Service[#Model.ID].Name" type="text"
data-dojo-type="dijit/form/TextBox" value="#Model.Name"/>
</td>
<td>
<input style="width: 100px;" id="Service[#Model.ID]Title"
data-dojo-type="dijit/form/TextBox"
name="Service[#Model.ID].Title" type="text"
value="#Model.Title" />
</td>
</tr>
I have an add button which will add new row to the table. The problem that I am facing is, new row does not get the dojo style and they are rendered as normal textboxes. Initially loaded rows are rendered as dojo style text boxes, but the newly added are not like that. My jquery function to add new rows is like below
function addNewService() {
$.ajax({
url: rootPath + "MyController/AddNewService",
type: "get",
cache: false,
success: function (html) {
$("#servicesTable tbody").append(html);
},
error: function (ts) {
alert("Error while adding services");
}
});
}
Can any one tell me how to solve this? Please note that I am aware about the existence of Dojo grid. I want to take the advantage of model binding and hence following this style
Try running the parser over the added nodes. Are you seriously loading jquery on the page as well? Anyway, with the code you've got, it's kind of tricky to select the just added nodes, but if you put the following inside the success method it might work.
var newNodes = $(html).appendTo("#servicesTable tbody");
require(["dojo/parser"], function(parser){
newNodes.forEach(function(node){
parser.parse(node);
});
});
If you parse over nodes that were already parsed, the parser will throw an error. Also, if you need to support older browsers you'll want to replace the forEach with a standard for loop.
Thanks a lot David for your reply. Your code did not work exactly, but I got the idea and below code is working for me. Please dont feel that I am answering my own question. I want to format the code properly and hence using this view. Once again thanks a lot
success: function (html) {
var newNodes = $(html).appendTo("#servicesTable tbody");
require(["dojo/_base/array", "dojo/parser"], function (array, parser) {
array.forEach(newNodes, function (node, i) {
parser.parse(node);
});
});