ng-model no longer updates after typing into text input - javascript

I am new to AngularJS and I am having a problem that I am having trouble solving, there was a similar question on stackoverflow but it didn't seem to help me out. I basically have a form that gets updated by ng-click, but once once I enter text into any of the text boxes, those text boxes no longer update.
This is my HTML
Edit Course:
<li ng-repeat="course in courses">
<p>
<a ng-click="Edit_Course(course.id)">{{course.course_name}}</a>
</p>
</li>
<div ng-show="showedit == 1">
<form novalidate ng-submit="edit_course()" class="simple-form">
<label for="form_course_name">Course</label>
<input type="text" id="form_course_name" ng-model="edit_course_name">
<label for="form_par">Par</label>
<input type="text" id="form_par" ng-model="edit_course_par">
<label for="form_course_location">Course Location</label>
<input type="text" id="form_course_location" ng-model="edit_course_location">
<input type="submit" id="submit" value="Edit Course" />
</form>
</div>
This is my function that is called when someone clicks on a link
$scope.Edit_Course = function (id) {
var course = {
'course_id' : id
};
$http({method: "POST", url: "http://www.dgcharts.com/editcourse", data: course})
.success(function(data, status, headers, config){
thecourse = data["course"];
$scope.edit_course_name = thecourse.course_name;
$scope.edit_course_par = thecourse.par;
$scope.edit_course_location = thecourse.course_location;
$scope.edit_course_id = thecourse.id;
$scope.showedit = 1;
})
}

your link requires a login.
if i have to guess about your problem, it may be related to angular scoping issue. try changing your ng-model binding to an object property instead. so in your html, instead of:
<input type="text" id="form_course_name" ng-model="edit_course_name">
do this
<input type="text" id="form_course_name" ng-model="course.edit_course_name">
and in your javascript, on the ajax callback, change it to:
$scope.course = {}; //only do this if $scope.course has not already been declared
$scope.course.edit_course_name = thecourse.course_name;
for more info on this issue, see: https://github.com/angular/angular.js/wiki/Understanding-Scopes

Related

Python-requests module, post two "values" to renew&scrape website

The first part was already answered, however, EDIT isn't.
I am using python and the requests module to scrape a website. Therefore I have to “click” a Renew-Button, which is a link(href) wrapped in an image “pat_renewmark.gif”.
html
<form name="checkout_form" method="POST" id="checkout_form">
<input type="HIDDEN" id="checkoutpagecmd">
<a href="#" onclick="return submitCheckout( 'sortByCheckoutDate', 'bycheckoutdate' )">
<img src="/screens/pat_sortbychkout.gif" alt="SORT BY DATE CHECKED OUT" border="0">
</a>
<input type="HIDDEN" name="currentsortorder" value="current_duedate">
<a href="#" onclick="return submitCheckout( 'requestRenewSome', 'requestRenewSome' )">
<img src="/screens/pat_renewmark.gif" alt="RENEW SELECTED ITEMS" border="0">
</a>
</form>
javascript (submitCheckout)
function submitCheckout(buttonname, buttonvalue)
{
var oHiddenID;
oHiddenID = document.getElementById("checkoutpagecmd");
oHiddenID.name = buttonname;
oHiddenID.value = buttonvalue;
//c29364j/c1365070 - prevent the patron from submitting twice
var oButtonSpan;
oButtonSpan = document.getElementById("checkoutbuttons0");
if (oButtonSpan) oButtonSpan.style.display = "none";
oButtonSpan = document.getElementById("checkoutbuttons1");
if (oButtonSpan) oButtonSpan.style.display = "none";
document.getElementById("checkout_form").submit();
return true;
}
Apparently submitCheckout passes .name and value, which are both assigned to ”requestRenewSome”’, to the hidden input with theid=“checkoutpagecmd”`.
I’ve worked with the requests module before and I am able to handle a simple username&password input , for example:
html
<div class="formEntryArea">
<label for="extpatid">
<span class="formLabel">
Your username:
</span>
</label>
<input name="extpatid" id="extpatid" value="" size="20" maxlength="40">
<label for="extpatpw">
<span class="formLabel">
Your password:
</span>
</label>
<input name="extpatpw" id="extpatpw" type="PASSWORD" value="" size="20" maxlength="40">
</div>
python
import requests
with requests.Session() as c:
LOGIN_URL = "https://example.com"
USERNAME = “XXXXX”
PASSWORD = “YYYYY”
source = c.get(LOGIN_URL)
data_load = dict(extpatid=USERNAME,extpatpw=PASSWORD)
head_load = dict(referer=LOGIN_URL)
c.post(LOGIN_URL, data=data_load, headers=head_load)
However, here c.post is handling only one “value” per input (either USERNAME or PASSWORD) and no javascript code is included.
As it seems, for the problem above I somehow have to post the two attributes/strings
.name = 'requestRenewSome'
.value = 'requestRenewSome'
? Or is the approach completely different to the example I attached?
EDIT
The answer from matino (or the comment from t.m.adam) solves the problem! Unfortunately the User then has to approve that he is sure he wants to renew by clicking a YES button.
html
<form name="checkout_form" method="POST" id="checkout_form">
<input type="HIDDEN" id="checkoutpagecmd">
<input type="HIDDEN" name="currentsortorder" value="current_duedate">
<span id="checkoutbuttons0">
<input type="SUBMIT" name="renewsome" value="YES">
<input type="SUBMIT" name="donothing" value="NO">
</span>
</form>
I therefore added 'renewsome': 'YES'to the data_load dictionary, but thats not enough. I don't know the value for the hidden input/s? id=checkoutpagecmd and/or? name=currentsortorder but couldn't find any answer on how to proceed.
P.S. I know it's actually a knew question, and I'm going to separate it, if it's getting answered.
What the javascript code actually does is dynamically assigning name and value to the hidden input. So in the end there can be 2 cases:
<input type="hidden" id="checkoutpagecmd" name="sortByCheckoutDate" value= "bycheckoutdate">
or
<input type="hidden" id="checkoutpagecmd" name="requestRenewSome" value= "requestRenewSome">
Knowing that, you can send http request like this:
requests.post(url, data={'sortByCheckoutDate': 'bycheckoutdate'}) # 1st case
requests.post(url, data={'requestRenewSome': 'requestRenewSome'}) # 2nd case

Get HTML element data in AngularJS script

I am new to AngularJS and trying to design a page which will have two text fields and two radio buttons.
First text field is for current address, followed by radio buttons(one for Yes and second for No), and last component would be permanent address text field. First, user will enter the value in current address text field, after that if user selects yes radio button then it should copy the data from current address to permanent address text field, if user selects No then it should do nothing. Below is the sample code I have written:
*<input type="text" name="cAddress" ng-model="cAddress" required/>
<input type="radio" name="opt" ng-click="copyAddress(true)" />
<input type="radio" name="opt" ng-click="copyAddress(false)" />
<input type="text" name="pAddress" ng-model="pAddress" required/>*
Below is the script code inside controller:
$scope.copyAddress = function(flag) {
if(flag) {
$scope.pAddress = $scope.cAddress;
}
};
when I tried to print $scope.cAddress and $scope.pAddress values in console then it displayed undefined. Even $scope does not have cAddress and pAddress.
Therefore, the main problem is that I am not getting element data inside AngularJS controller
Please find plunker url:
http://plnkr.co/edit/Ub2VEn01HxwDpnCg4tLi?p=preview
Click on Next to navigate to Second tab, there you will find the yes and no radio button to copy the data.
I have minized the code, please look into it. To understand the flow, you can read the README file.
http://plnkr.co/edit/TzJsZIRxAyTuFdCXLFFV?p=preview
Try using another scope object.
That is, create a scope object and add property to it for each input like,
$scope.myObject = {}; // Empty scope variable
$scope.myObject.cAddress = ""; // initialize your model for the input.
And now you should use this variable for your input.
<input type="text" name="cAddress" ng-model="myObject.cAddress" required/>
Try this. It may help you.
Html code:
<body ng-controller='Maincontroller'>
<input type="text" name="cAddress" ng-model="cAddress" />
<input type="radio" name="opt" ng-click="copyAddress(true)" />
<input type="radio" name="opt" ng-click="copyAddress(false)" />
<input type="text" name="pAddress" ng-model="pAddress" />
</body>
Controller code:
var app = angular.module('main', []);
app.controller('Maincontroller', ["$scope",
function($scope) {
$scope.copyAddress = function(flag) {
if (flag) {
$scope.address1 = $scope.address;
} else {
$scope.address1 = "";
}
};
}
]);

AngularJS: ng-model not clearing input

I have a dynamic input for CPFs (Brazilian 'social security' number).
Every time I enter one CPF, another input should be displayed, and so on..
But for some reason, the ng-model is not being cleared after the CPF is added.
Here's my HTML (inside a directive with isolate scope):
<div ng-repeat="cpf in cpfs" class="field-input">
<input type="text" class="field" ng-model="cpf.number" required>
<label>added CPF</label>
</div>
<div class="field-input">
<input type="text" class="field" ng-model="cpf.number" required>
<label>add new CPF</label>
<button ng-click="addCpf(cpf)" class="btn btn-primary">add</button>
</div>
Here's my controller (inside a directive with isolate scope):
$scope.cpfs = [];
$scope.addCpf = function(cpf) {
$scope.cpfs.push(angular.copy(cpf));
delete $scope.cpf;
};
instead of delete $scope.cpf; use $scope.cpf.number = "";
we can't delete an model, we have to set it to blank, because its linked with our View part

Modifying HTML form action with jQuery/Javascript

I am trying to create a post form in HTML using a RESTful express route, something akin to /game/:gameID/node/:nodeRow/:nodeCol/update to update a given node in a given game.
Here's the route code:
app.post("/game/:gameID/node/:nodeRow/:nodeCol/update", function(request, response) {
gameHandler.updateNode(request, response)
});
The reason I'm doing this in HTML is because I haven't created the functionality yet in the actual client (mobile game) so I need something to test it. However, I have not figured out how to make the HTML form so that I can enter the data in the form to replace :gameID, :nodeRow, and :nodeCol without just going to the URL manually, like /game/3/node/2/5/update.
This is a post request and I would like other data to be contained in the form to specify the property to update as well as the new value.
How can I do this, or am I thinking about it wrong?
Edit:
Changed the question title to be more useful.
Try
app.post("/game/:gameID/node/:nodeRow/:nodeCol/update", function(request, response) {
console.log({gameID: request.params.gameID, nodeRow: request.params.nodeRow,nodeCol: request.params.nodeCol, body: request.body});
response.send({gameID: request.params.gameID, nodeRow: request.params.nodeRow,nodeCol: request.params.nodeCol, body: request.body});
});
Sorry I misunderstood your question. I thought you are having difficulties in parsing node parameters in node.
Anyway, there are different ways you can achieve this. Of course you need support of javascript, either pure javascript or jQuery.
Here is an example
<form id="myform">
<input name="gameID" id="gameID" />
<input name="nodeRow" id="nodeRow" />
<input name="nodeCol" id="nodeCol" />
<button name="action" value="bar" onclick="submitForm();">Go</button>
</form>
and javascript (using jQuery) will be
<javascript>
function submitForm(){
$("#myform").attr('action',
'/game/' + $("#gameID").val() + '/node/' + $("#nodeRow").val()
+ '/' + $("nodeCol").val() + '/update');
$("#myform").submit();
}
</javascript>
The way to pass data in a POST request is to push it from the html form controls and retrieve the values from the body of the request. The HTML below defines a form with your variables which you can hand-key from a browser:
<html><body>
<form method="post" action="/game/update" role="form">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">gameID</span>
<input type="text" class="form-control" name="gameID" placeholder="<gameID>" value="123456">
</div>
</div>
<div class="input-group">
<span class="input-group-addon">nodeRow</span>
<input type="text" class="form-control" name="nodeRow" placeholder="<nodeRow>" value="1">
</div>
</div>
<div class="input-group">
<span class="input-group-addon">nodeCol</span>
<input type="text" class="form-control" name="nodeCol" placeholder="<gameID" value="1">
</div>
</div>
<hr>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</body></html>
Then you can write a handler along the lines of what's below. Clicking submit will fire the POST request off, and pulling the variables out of the request body can be done as shown below.
app.post("/game/update", function(request, response) {
updateNodeHandler(request, response)
});
function updateNodeHandler(request, response) {
var nodeID = request.body.nodeID;
var nodeRow = request.body.nodeRow;
var nodeCol = request.body.nodeCol;
// Additional logic goes here...
}

AJAX function not being called with button onclick function

I have a simple form with 2 input fields and one button. When the button is clicked, the value of the 2 input fields should be sent to the AJAX function to be handled in a servlet. For some reason, the servlet is not being reached. Can anyone see why? I have an almost identical method working with a different form, and I can't see why this one isn't working.
Here is the HTML form code:
<div id="addCourses" class="hidden" align="center" >
<form id="addCourse" name="addCourse">
<input type="text" id="courseID" name="courseID" value="courseID" size="40" /><br />
<textarea rows="5" cols="33" id="courseDesc" name="courseDesc">Description</textarea><br />
<input type="button" value="Add Course" onclick="addCourse(this.courseID.value, this.courseDesc.value);"/>
</form>
</div>
Here is the Script function:
<script type ="text/javascript">
function addCourse(id, descr)
{
var fluffy;
fluffy=new XMLHttpRequest();
fluffy.onreadystatechange=function()
{
if (fluffy.readyState==4 && fluffy.status==200)
{
//do something here
}
};
fluffy.open("GET","ajaxServlet?courseID="+id+"&courseDescription="+descr,true);
fluffy.send();
}
</script>
Because this is the button and not the form
so
this.courseID.value
this.courseDesc.value
returns an error.
You should use
this.form.courseID.value
this.form.courseDesc.value
Second problem is you have a name clash. The form and function are named addCourse. It will lead to problems. Rename one of them to be different.
Running Example
When you use this, as in onclick="addCourse(this.courseID.value, this.courseDesc.value);", I think that would refer to the input element, and therefore the values aren't being passed correctly.
Bind your event handlers in javascript, where they should be, and you can avoid the issue entirely.
HTML:
<input type="text" id="courseID" name="courseID" value="courseID" size="40" /><br />
<textarea rows="5" cols="33" id="courseDesc" name="courseDesc">Description</textarea><br />
<input type="button" id="addCourse" value="Add Course"/>
JS:
document.getElementById('addCourse').onclick = function () {
var fluffy = new XMLHttpRequest();
var id = document.getElementById('courseID').value;
var descr = document.getElementById('courseDesc').value;
fluffy.onreadystatechange=function() {
if (fluffy.readyState==4 && fluffy.status==200) {
//do something here
}
};
fluffy.open("GET","ajaxServlet?courseID="+id+"&courseDescription="+descr,true);
fluffy.send();
};
As epascarello pointed out, you need to change the ID of your form as having two elements with the same ID is not allowed and will cause unpredictable javascript behavior.
Try a fluffy.close; after the if ready state expression.

Categories