Angularjs xeditable not showing value in input field - javascript

I am using Angular-xeditable to update individual values on a view. Additionally, I am retrieving those values from a remote server, here is snippet:
$http.get('api/get-solution').success(function (data) {
$scope.goalSoluton = data['goal_planning_data'];
});
And this is what has been return from the remote server:
{age:"26" retirement:"0"}
In my HTML view I see that the object property value of age (which is 26) is displayed, Here is a snippet:
{{goalSoluton.age}}
But when I had clicked to edit that input field the value of 26 does not show up. Also, when I even entered a value in the input field and pressed the update button, the age property of the object did not update. Here is a snippet of the function:
$scope.update = function () {
console.log($scope.goalSoluton);
};
What am I doing wrong and thanks in advance.

You try to href get empty. . we used that. Maybe.

Related

CRM form edit using Java Script

I am trying to modify a CRM form for an entity called "property".
I want to basically write an IF ELSE statement to do enable/disable a field on the form when the "new property" tab is clicked by the end user on the CRM interface.
I already have written the javascript code but I am not sure of the syntax to create a new property (a new record within the entity)?
I also tried to ID a new property record by the fact the a new property record will have the name field blank.
Please see a sample of the code below:
if(crmForm.all.new_name == null)
{
//Enable field
crmForm.all.new_interestrate.Disabled = false;
}
else
{
//Enable field
crmForm.all.new_interestrate.Disabled = true;
}
I have set this script on the OnLoad section of the form but it is not running. I postulated that this might be because I am clicking create a new property rather than loading an already existing property?
Any feedback would be appreciated.
Thanks
To anyone reading this, I solved my issue, the flaw was that the field wasn't actually null. I basically rectified this problem using the initial statement
var value = crmForm.all.new_name.datavalue
if (value < 1)
{"do something";}
This worked for my case as no name value was less than 1.

Refresh to repeat control not working normal after deleting 1 row

I have a field named "selectedTime" in a document, this fields stores the selected timings added by user.Adding times is working perfect.This is back-end.
Now I will explain this issue of selecting date from front end.I have given a button add to add times.The custom control of date-time gets added to repeat control on click of Add button.Even if I check in document it shows the list of selected times.Even this works fine.
Now if I want to delete a selected time from repeat control randomly, it deleted that particular record from document, but on the page the last record of the repeat gets disappears,
I was assuming that this is the issue with partial refresh of repeat control,I have even tried that but no result.Full refresh breaks the page.
java script code for the delete button
`var doc:NotesDocument = database.getDocumentByUNID(context.getUrlParameter("refId"))
var selectedTimes:java.util.Vector = doc.getItemValue("selectedTimes");
if(selectedTimes != null){
var sdtString = getComponent("inputHidden1").getValue();
if(selectedTimes.contains(sdtString))
selectedTimes.remove(sdtString);
doc.replaceItemValue("selectedTimes",selectedTimes);
doc.save();
};
var url:XSPUrl = context.getUrl();
view.postScript("window.refresh('"+url+"')");`
I know it is difficult to understand what i want to explain but any suggestion on this will be appreciated.
Even if anybody have any idea to delete the a field values of a documents,In my case field name is "selectedTimes" and the values are added times in repeat control, Please share.
Edit 1:
//Repeat Control
var doc:NotesDocument = database.getDocumentByUNID(context.getUrlParameter("refId"))
var selectedTimes:java.util.Vector = doc.getItemValue("selectedTimes");
return selectedTimes;
Another try could be link the repeat with a viewScope instead of the document:
1) In the event beforeLoadPage/afterLoadPage: Get the value from the document, and put it in a viewScope variable:
// beforeLoadPage event:
// ... get the doc
viewScope.selectedTimes = doc.getItemValue("selectedTimes");
2) In the repeat control, use the viewScope:
<xp:repeat value="#{viewScope.selectedTimes}"...
3) When an update is done, update both the viewScope and the document:
//...update the View Scope variable and get the document:
doc.replaceItemValue("selectedTimes", viewScope.selectedTimes);
This could be a hint if the document would be added as DataSource:
Do you have the document included in the XPage as a DataSource? In that case, try to get and update the NotesXspDocument instead of the Document from the DB:
XPage:
<xp:this.data>
<xp:dominoDocument var="xspDocument"
action="editDocument"
documentId="#{param.unid}">
</xp:dominoDocument>
</xp:this.data>
SSJS code: work directly with the XspDocument
var selectedTimes:java.util.Vector = xspDocument.getItemValue("selectedTimes");
...
xspDocument.replaceItemValue("selectedTimes", selectedTimes);
This could be a hint if the value would not be removed from the document:
In sdtString you are getting a String value:
var sdtString = getComponent("inputHidden1").getValue();
If you have the time values stored as NotesDateTimes, you will get this type of value inside the Vector and the remove method won't find the String and nothing will be removed.
// In a Vector<NotesDateTime> the String cannot be found:
selectedTimes.remove(sdtString);
Be sure you remove the same type of value you get in the Vector

jQuery AJAX call from multiple input fields within the 1 script

I'm working on my first HTML form that performs an AJAX HTTP POST using jQuery. When a user makes a change to an input text field and tabs out of the field it triggers the AJAX script which in turn calls a PHP script which performs a database update.
I've got this working successfully for my first input field - I would now like to extend this to a 2nd, 3rd etc input fields but want to try and avoid having multiple scripts that perform very similar functions. I'm new to jQuery and AJAX so learning the syntax as I go.
Here's my input fields:
Manager
Phone
Here's my Javascript that is working on the storeManager input field:
<script type="text/javascript">
$(document).ready(function() {
$("#storeManager").change(function(){
var storeManager = $("#storeManager").val();
$.post('editProject.php', { storeManager: storeManager, id: '1E1DDA14-D2C6-4FC8-BA5F-DBCCC7ABAF7F' }, function(data) {
$("#managerRow").addClass("success");
}).fail(function () {
// no data available in this context
$("#managerRow").addClass("danger");
$("#ajaxAlert").addClass("alert alert-danger");
});
});
});
</script>
I essentially need to branch and pass an additional POST parameter to the editProject.php script so it knows which database field to update, and then conditionally add a class to the appropriate row.
Everything I've tried breaks the script when I try and get it to branch or pass a parameter based on the input field that is being edited. I haven't been able to find any examples that show the correct syntax to have the one script that is called by different input fields - I'm presuming this is possible instead of having multiple versions of the same script acting on different fields.
This works for multiple fields. Just call the same function from different input fields. I just broke your code into two parts.
1. onChange function of each individual field, and
2. function call by passing the field parameters.
<script type="text/javascript">
$(document).ready(function() {
$("#storeManager").change(function(){ yourFunction(this) }):
$("#worker").change(function(){ yourFunction(this) }):
$("#someX").change(function(){ yourFunction(this) }):
yourFunction(field)
{
var value = $(field).val();
var inputId=field.id;
$.post('editProject.php', { inputValue: value, id: inputId }, function(data) {
$('#'+inputId+'Row').addClass("success"); // (this looks like: *#storeManagerRow* ) you can change your Row id's accordingly to make your work easier. Eg: for **#storeManager** make this id as **storeManagerRow**
}).fail(function () {
// no data available in this context
$('#'+inputId+'Row').addClass("danger");
$("#ajaxAlert").addClass("alert alert-danger");
});
});
</script>
You just try to post a value. for example type. Which should contain some value for identify the ajax call.
If it is for login, then add type = 'login'. Then check the value of $_POST['type'] and write php according to it
sample.php
if(isset($_POST['type']))
{
if($_POST['type'] == 'login')
{
//your code goes here
}
}
you can use this kind of code :
$("#storeManager, #Manager, #Phone").change(function(){
You could do something like this using :input or a class that they all have
$(":input").on("change", function(){
var text = $(this).val();
var idOfInput = $(this).attr("id");
//your post to php function using the above variables
});
From this you could post the id of the input to your php script using the idOfInput variable which you could then on the php side use a case switch to do a different query depending on which id is sent to the php
Here is a jsfiddle showing how it works

MVC dropdownlist onchange call jquery

I have a SelectList representing a delivery type for an order.
The delivery type reference data has the usual code/description, but also an additional boolean property which indicates if further information needs to be entered for the type selected.
So for Emergency deliveries additional data is required. The additional data entry fields would be set visible if Emergency was selected, otherwise hidden
My ViewModel contains <List>ReferenceDeliveryTypes which contains the 3 properties.
I have created a SelectListItems from the ViewModel data
#Html.DropDownListFor(model => model.DeliveryTypeCode,
new SelectList(Model.ReferenceDeliveryTypes as System.Collections.IEnumerable,
"DeliveryTypeCode", "DeliveryTypeDescription"), new { id = "ddlDeliveryType" })
How can I call a jQuery function on change of the delivery type, pass the selected code and check the Model.ReferenceDeliveryTypes for that code to see if the additional data property is true/false to show/hide the additional fields div?
I have managed to get the jQuery function called to pass the value.
$(function () {
$('#ddlDeliveryType').change(function () {
var value = $(this).val();
alert(value);
});
});
I don't know of any way you can do this using a select list but I suggest the following options:
Simple but a hack - add a string to the end of DeliveryTypeDescription, for example (emergency delivery) and check for that in your change function
Another hack - multiply DeliveryTypeCode by 10 and add 1 on if it's an emergency delivery (and then use mod 10 in your change function)
Use an Ajax lookup function
Load a JavaScript lookup table with the codes which require an emergency delivery
Use a hidden field in your form which contains a string list of the emergency codes with a suitable separator
Good luck
UPDATE
For the hidden field option if you use something like 123|456|789| and then use indexOf having appended a | to the selected ID.
I converted the Model.ReferenceDeliveryTypes to a JSON list which allowed me to access it from the jQuery.
Possibly not the best way, but it allows me to do everything on the client rather than making an AJAX call back. I can now show/hide the inside the if block.
Thought it worth documenting what I did as I've not come across the #Html.Raw(Json.Encode before and it might prove useful for someone who wants to access model data from within jQuery.
Any additional comments welcome.
<script type="text/javascript">
var ReferenceDeliveryTypeJsonList=#Html.Raw(Json.Encode(Model.ReferenceDeliveryTypes))
</script>
#Html.DropDownListFor(model => model.DeliveryTypeCode,
new SelectList(Model.ReferenceDeliveryTypes.ReferenceDeliveryType as System.Collections.IEnumerable,
"DeliveryTypeCode", "DeliveryTypeDescription"), new { id = "ddlDeliveryType" })
$(function () {
$('#ddlDeliveryType').change(function () {
var selectedDT= $(this).val();
$.each(ReferenceDeliveryTypeJsonList, function (index, item) {
if (selectedDT === item.DeliveryTypeCode) {
alert("match " + selectedDT);
}
});
});
});

Determine if the content in a (dojo) dijit.Editor is different from the initial value

I have a form containing many dijit.form elements and also a dijit.Editor. The form is initially filled with data that I get from the server. The user can change the content and then submit this back to the serer. A classic use case.
When the user submits the form I need to only send the changed data. The problem with the dijit.Editor is that it sometimes changes the initial content even if the user did not make any changes. For example:
The initial content entered in the dijit.editor is this:
"Gesegmenteerde rand, 115 mm~Max 13280 U/min, 80 m/sec</br>~Drooggebruik"
And when retrieving the content like this editorObj.get('value'); it returns this:
"Gesegmenteerde rand, 115 mm~Max 13280 U/min, 80 m/sec<br />~Drooggebruik"
As you can see the </br> is changed to <br />. I know the original value is wrong, but that's because the source sucks and that is out of my control.
So my question is: is there an easy way to check if the content has indeed been changed by the user instead of just by dijit.Editor itself.
Something like this (on the editor markup) works:
onkeypress="MyObject.setDirty(true);"
And just keep track of it on MyObject.isDirty.
This does have the drawback that if the user types into the editor and then modifies everything to be exactly as it was originally, the value will be wrong (ie, true, whereas content is back to original), but it is sufficient for most purposes.
Well if you just want to check IF the user modified something you could try that :
var editorIsDirty = false;
var someConnect = dojo.connect(myEditor, "onChange", this, function(newValue){
if(originalSource != newValue){
editorIsDirty = true;
return;
}
editorIsDirty = false;
});
something like that, you get the idea ;)
What I ended up doing is was adding two extra attributes to the Editor:
dijitObj.set('originalValue', value);
dijitObj.set('value', value);
dijitObj.set('uneditedValue', dijitObj.get('value'));
In the read out of the value of the the editor I use these to determine if something changed at all:
var value = dijitObj.get('value');
if (dijitObj.get('uneditedValue') === value) {
// The value hasn't changed, so we send the original value
value = dijitObj.get('originalValue');
}

Categories