I have an observable array that I want to be able to delete entries from via a button in the HTML using the knockout.js framework. However, when I try to use the observable array this.comments in the deleteComment function, I get a TypeError: this.comments is undefined, even though it is clearly defined and has entries. this.comments is even used in the entryComments function which works perfectly fine. Am I missing something?
HTML/PHP:
<div class="textblock">
<h1>User Comments</h1>
<ul id="usercomment" data-bind="foreach: comments">
<li><p><strong data-bind="text: comment"></strong> - <strong data-bind="text: user"></strong></p>
<button data-bind="visible: display(), click: $parent.deleteComment.bind($data, $index)" >Delete Comment</button>
</li>
</ul>
</div>
<br />
<?php if (isset($_SESSION['logged_in'])): ?>
<?php if ($_SESSION['logged_in'] == true): ?>
<div class="textblock">
<ul>
<li>
<form name="commentform" data-bind="submit: enterComment.bind($data,$data.comment )">
<input type="text" data-bind="value: $data.comment"/>
<button type="submit">Submit Comment</button>
</form>
</li>
</ul>
</div>
<?php endif; ?>
<?php endif; ?>
Javascript:
var AppViewModel = function (commentList, userList) {
//Initializing data
this.displayButton = ko.observable(false);
this.comments = ko.observableArray();
this.username;
$.ajax({
url: "http://localhost/sem4/recept/UserInfo.php",
async: false,
dataType: 'json',
success: function(data) {
username = data.username;
}
});
//Giving the array values
for(var i = 0;i<=commentList.length -1;i++ ){
if(username === userList[i]){
this.comments.push(new Comment(commentList[i],userList[i],true ));
}
else{
this.comments.push(new Comment(commentList[i],userList[i], false));
}
};
//Function is called but it cannot define this.comments
this.deleteComment = function(index){
this.comments.splice(index,1);
}
//This function works without any problems
this.enterComment = function (comment) {
$.ajax({
url: "http://localhost/sem4/recept/UserInfo.php",
async: false,
dataType: 'json',
success: function(data) {
username = data.username;
}
});
this.comments.push(new Comment(comment, username,true));
$.post("http://localhost/sem4/recept/AddComment.php", {
comment: comment,
username: username
});
};
//OBJECTS
function Comment(comment, user,bool) {
var self = this;
self.comment = ko.observable(comment);
self.user = ko.observable(user);
self.display = ko.observable(bool);
};
};
this scope changes when you use a function. a regular workaround is defining a self variable at the top and using it when you need to access the whole function scope.
var AppViewModel = function (commentList, userList) {
//Initializing data
var self = this;
....
self.deleteComment = function(index){
self.comments.splice(index,1);
}
...
}
The easiest fix is to use an arrow function, as they inherit this from their context.
...
this.deleteComment = (index)=>{ // was function(index){
this.comments.splice(index,1);
}
...
Related
When a user searches for a username he gets results. When he backspaces or modifies the query, the results just keep getting added on top of the previous results instead of the results being modified and a fresh, updated result returned. I have modified the script here and there with no success yet.
My view:
<div class='container'>
<div class='row'>
<div class='col-sm-6 col-xs-12 col-centered'>
<div class='panel panel-default'>
<div class='panel-heading sticky'>
<div class='back pull-left'><a href='<?php echo site_url('chats') ?>'><span class='glyphicon glyphicon-chevron-left'></span></a></div>
<h1 class='panel-title text-center'>New Chat</h1>
<input class='form-control' id='search-field' type='text' placeholder='Username'>
</div>
<div class='panel-body'>
<ul class='users collapse'>
</ul>
</div>
</div>
</div><!--end column-->
</div><!--end row 1-->
</div><!--end container-->
My JS:
$(function() {
var $search_field = $('#search-field');
$search_field.on('keyup', searchByUsername);
$search_field.focus();
});
function searchByUsername(e) {
var username = this.value.trim();
var keyCode = e.keyCode;
var data = {username : username};
var $usersElement = $('.users');
var users = [];
// Use this condition to prevent searching when whitespace is entered
if (username) {
var request = $.ajax({
url : site_url + 'search/searchByUsername/',
method : 'GET',
data : data,
dataType : 'json'
});
request.done(function(jsonRepsonse) {
if (jsonRepsonse) {
var status = jsonRepsonse.status;
var usernames = jsonRepsonse.usernames;
if (status === 'success') {
$.each(usernames, function(index, value) {
// must be one line or will throw syntax error
users.push("<li class='user text-center'><a href='#'><span class='glyphicon glyphicon-user'></span><strong class='username'>" + value + "</strong></a></li>");
});console.log(users);
$usersElement
.append(users)
.show();
}
}
});
request.fail(function(xhr, status, error) {
console.log(error);
});
}
users.length = 0
$usersElement.hide();
}
My Codeigniter controller function:
public function searchByUsername()
{
$username = $this->input->get('username', true);
$usernames = [];
if (!empty($username)) {
$usernames = $this->find_users_model
->searchByUsername($username);
}
if (!empty($usernames)) {
$this->jsonResponse(
['status' => 'success',
'usernames' => $usernames]);
return;
}
$this->jsonResponse(
['status' => 'success',
'usernames' => ['User not found']]);
}
private function jsonResponse($response)
{
$this->output
->set_status_header(200)
->set_content_type('application/json', 'utf-8')
->set_output(json_encode($response));
}
Result:
This is your users container:
var $usersElement = $('.users');
On ajax response, you do:
$usersElement.append(users).show();
But you're always appending, never removing. Try emptying the element before populating it with users again:
$usersElement.empty().append(users).show();
i have form that need the previous value inserted....i'm using ajax,but the success: function(data) wont let me moved to the next page...
here is my code
HTML
<form>
<input type="text" name="id_1" id="id_1>
<input type="text" name="id_2" id="id_2>
<input type="text" name="id_3" id="id_3>
<button type="button" onclick="next();">
</form>
<div id="tabelna"></div>
JQuery
var id_1 = $('#id_1').val();
var id_2= $('#id_2').val();
var id_3= $('#id_3').val();
var datana = 'id_1='+id_1+'&id_2='+id_2+'&id_3='+id_3;
var urlna="<?=base_url()?>something/something/something";
$.ajax({
type: 'POST',
url: urlna,
data: datana,
beforeSend:function(data){
},
message:"<center>><h3>Loading Data. . .</h3></center>"
});
},
error: function(data) {
jAlert('Failed');
},
success: function(data) {
load();
}
})
return false;
}
function load()
{
$('#tabelna').load('<?=base_url()?>something/something/something') (This is my mistake)
}
CONTROLLER
function set_value()
{
extract($_POST);
$d['id1'] = $this-db->query('SELECT * FROM TBL1 where id='.$id_1);
$d['id2'] = $this-db->query('SELECT * FROM TBL2 where id='.$id_2);
$d['id3'] = $this-db->query('SELECT * FROM TBL3 where id='.$id_3);
$this->load->view('something/v_add',$d); (this is my mistake)
}
How can i pass the submitted value to the controller and shows new form ?
we can call controller function using window.location
function load()
{
window.location.href = "<?php echo site_url('controller_d/login/admin_link_delete_user');?>";
}
so here is my problem, i am creating my own upvote and downvote feature in my school project. All i want to happen is when I click an arrow-up image, it will insert a record to database. It will add a one record to upvote table in my database.
<script type="text/javascript">
$( document ).ready(function() {
$("#try").click(function(){
var username = $("#username").val();
var thread_id = $("#thread_id").val();
var vote = $("#vote").val();
$.ajax(
{
type:"post",
url: "<?php echo site_url();?>/Users/add_vote/",
data:{ username:username, thread_id:thread_id, vote:vote},
success:function(data)
{
alert("POST SUBMITTED");
}
});
});
});
and here is my form
<div id = "active_upvote_div">
<form>
<input type="hidden" name = "username" id="username" value= "try">
<input type="hidden" name="thread_id" id="thread_id" value= "1">
<input type="hidden" name="vote" id="vote" value= "1">
<button type="submit" id="try"><img src="<?php echo base_url();?>/public/images/upvote.png" height:"25px" width="25px"/> </button>
</form>
</div>
My Controller only calls the model
This is my Model
public function ajax()
{
$add_user = array(
'username' => $this->input->post('username'),
'thread_id' => $this->input->post('thread_id'),
'vote' => $this->input->post('vote'),
);
$this->db->insert('thread_upvote', $add_user);
}
hoping for an immediate response :(
In codeigniter $this->input->post() is equivalent to $_POST which makes array of posted names as key/value pair.
In your controller's add_vote() function do this...
public function add_vote()
{
$data = $this->input->post();
$this->load->model('model_namel');//loads model
$this->model_name->ajax($data);//call model's function with data
}
Then in model's ajax() function
public function ajax($data=array())
{
$this->db->insert('thread_upvote', $data);// inserts into database
}
In your Ajax:
$( document ).ready(function() {
$("#active_upvote_div").click(function(){
var username = $("#username").val();
var thread_id = $("#thread_id").val();
var vote = $("#vote").val();
$.ajax({
type:"POST",
dataType: 'json', //add this to call json
url: "<?php echo site_url();?>/Users/add_vote/",
data:{ username:username, thread_id:thread_id, vote:vote},
success:function(data)
{
if(data.success == true){
alert("POST SUBMITTED");
} else{
alert("Failed to Post");
}
}
});
});
});
In your Controller:
Class Users extends CI_Controller{
public function add_vote()
{
$result = $this->name_of_model->ajax(); //call the ajax function in you model
echo json_encode($result); //check the return if true or false and pass to json
}
}
In your Model:
public function ajax()
{
$add_user = array(
'username' => $this->input->post('username'),
'thread_id' => $this->input->post('thread_id'),
'vote' => $this->input->post('vote'),
);
if($this->db->insert('thread_upvote', $add_user))
{
return true;
} else{
return false;
}
}
This is actually the first time I'm using ajax so honestly I don't know a single thing. Tried to read articles about ajax but no luck. What I'm trying to do here is quite simple really I just want to try to figure out how ajax works and what I should do to make it work. I wanted it so that when I try to click the login button and go to my php and display "login success" it works when the textboxes are empty it displays fields are empty but the ajax doesn't seem to work
Here is what I've done so far this is my index.php A.K.A login page
<!DOCTYPE html>
<html>
<head>
<title>O-Chat</title>
<link rel="stylesheet" type="text/css" href="index.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="script101.js"></script>
</head>
<body>
<div class="content">
<div class="features">
<div><br><br><br><br><br><br><br><br><br><br>FEATURES HERE</div>
</div>
<div class="loginpart">
<div class="banner"><br><br><br>BANNER HERE</div>
<div class="login" id="divlogin">
<div class="login-header">Login</div>
<form name="loginform" class="login">
<input class="login" type="text" name="pUname" id="jUname" maxlength="35" placeholder="Username"/><br>
<input class="login" type="Password" name="pPass" id="jPass" maxlength="40" placeholder="Password"/><br>
<span class="error" id="jloginerror"></span>
<div class="button" id="login"" onclick="validate();">
</div>
</form>
<div class="login-footer" onclick="location.href='register.php'">Not yet a member?<br>Register Now! Click Here!</div>
</div>
</div>
</div>
<div class="footer">
<div class="footer-container">
Home |
About O-Chat |
Contact Us
<div style="float: right;">Copyright © 2000 - 2017 O-Chat Unlimited (071813-S) All Rights Reserved</div>
</div>
</div>
</body>
</html>
Here is my javascript file script101.js
function validate() {
var uname = $("#jUname").val();
var pass = $("#jPass").val();
var data = "&uname=" + uname + "&pass=" + pass;
if(!uname.match(/\S/) || !pass.match(/\S/)) {
document.getElementById("divlogin").style.height = '275px';
document.getElementById("jloginerror").innerHTML = "Some fields are empty!";
}
else
{
document.getElementById("jloginerror").innerHTML = "";
document.getElementById("divlogin").style.height = '250px';
$.ajax({
type: "post",
url: "login.php",
data: data,
sucess:function(data){
$("#jloginerror").text(data);
}
});
}
}
<?php
echo "very successful";
?>
Remove $ from the function declaration $function validate(). You can not use $ here.
You can use it like either
$(function(){
....
});
OR
if you wants to keep name of your function then just remove $ before the function, simply use it as:
function validate(){
....
}
and on ajax , you can use
$.ajax({
method: "post",
url: "login.php",
data: data;
sucess:function(data){
$("#jloginerror").text(data);
}
});
So your full code should be like as follows:
function validate() {
var uname = $("#jUname").val();
var pass = $("#jPass").val();
var data = "&uname=" + uname + "&pass=" + pass;
if(!uname.match(/\S/) || !pass.match(/\S/)) {
document.getElementById("divlogin").style.height = '275px';
document.getElementById("jloginerror").innerHTML = "Some fields are empty!";
}
else
{
document.getElementById("jloginerror").innerHTML = "";
$.ajax({
type: "post",
url: "login.php",
data: data,
sucess:function(data){
$("#jloginerror").text(data);
}
});
}
}
Remove $ from the function keyword and Jquery works with element id or name var uname = $("#jUname").val(); var pass = $("#jPass").val(); and do not use ; for separating and you should use , $.ajax({}), use $.ajax({}) instead of ajax({}) because its Jquery function not javascript function.
function validate() {
var uname = $("#jUname").val();
var pass = $("#jPass").val();
var data = "&uname=" + uname + "&pass=" + pass;
if(!uname.match(/\S/) || !pass.match(/\S/)) {
document.getElementById("divlogin").style.height = '275px';
document.getElementById("jloginerror").innerHTML = "Some fields are empty!";
}
else
{
document.getElementById("jloginerror").innerHTML = "";
$.ajax({
type: "post",
url: "login.php",
data: data,
sucess:function(data){
$("#jloginerror").text(data);
}
});
}
}
Below is my HTML code.
<div class="container" ng-app="mintcart">
<div class="panel panel-default" ng-controller="categoriesctrl">
<input type="hidden" ng-model="session.sid" value="<?php echo session_id();?>"/>
<div class="panel-body">
<div class="row">
<ul class="nav nav-pills">
<?php
$i = 0;
while($i < count($list)){
$name = $list[$i]['categoryName'];
$id = $list[$i]['id'];
$normalUrl = $list[$i]['normalImageUrl'];
$hoverUrl = $list[$i]['hoverImageUrl'];
if($i == 0){
echo "<li role='presentation' class='active' ng-click='loadproducts($id)'><a href='#' >$name</a></li>";
} else {
echo "<li role='presentation' ng-click='loadproducts($id)'><a href='#''>$name</a></li>";
}
$i++;
}
?>
</ul>
</div>
</div>
</div>
</div>
ANd below is my JS code.
var app = angular.module('mintcart',[]);
app.controller('categoriesctrl', function($scope, $http){
var auth = {};
$http({
method: 'GET',
url: baseurl + 'api/get_product_categories'
}).then(function successCallback(response) {
$scope.categories = response.data.categories;
// this callback will be called asynchronously
// when the response is available
}, function errorCallback(response) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
$scope.loadproducts = function(item_id) {
alert($scope.session.sid);
$http({
method: 'GET',
url: baseurl + 'api/get_items_in_category_cart/' + item_id
}).then(function successCallback(response) {
$scope.items = response.data.products;
// this callback will be called asynchronously
// when the response is available
}, function errorCallback(response) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
//$scope.Language = lang;
};
});
When the loadproducts function is called the alert($scope.session.sid); gives me "undefined". I can't understand why my element is not being picked up.
Any help is greatly appreciated.
php works on the server side, you need to set the variable using a javascript not on the view.
Create a variable in JavaScript which gets the returned content of PHP.
var sessionid = <?php echo session_id();?>
then , you can access the variable in controller,
var app = angular.module("MyApp", []);
app.controller("categoriesctrl", function($scope) {
$scope.session.sid = sessionid ;
console.log($scope.session.sid);
});