knockoutjs can not apply bindings multiple times to the same element - javascript

in following code uncaught error is found..
the binding is applied only once till it display can not apply bindings multiple times...
is it problem of knockout version ?
can be write following code in a immediatly invoke function...
var DummyContact = [
{
"ContactID": 1,
"FirstName": "Nimesh",
"LastName": "Vaghasiya"
},
{
"ContactID": 2,
"FirstName": "John",
"LastName": "Cena"
}
];
var ContactViewModel = function () {
var self = this;
var url = "/Contacts/GetAllContacts";
//var refresh = function () {
// $.getJSON(url, {}, function (data) {
// self.Contacts(data);
// });
//};
var refresh = function () {
self.Contacts(DummyContact);
};
// public data properties
self.Contacts = ko.observableArray([]);
refresh();
self.createContact = function () {
window.location.href = '/Contacts/CreateEdit/0';
};
self.editContact = function (Contact) {
window.location.href = '/Contacts/CreateEdit/' + Contact.ContactID;
};
self.removeContact = function (Contact) {
if (confirm("Are you sure you want to delete this profile?")) {
self.Contacts.remove(Contact);
}
};
};
ko.applyBindings(new ContactViewModel());
html code is :
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<html>
<body>
<input type="button" class="btn btn-small btn-primary" value="New Contact" data-bind="click:$root.createContact" />
<hr />
<table class="table table-striped table-bordered table-condensed">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th></th>
</tr>
<tbody data-bind="foreach: Contacts">
<tr>
<td class="name"><a data-bind="text: FirstName, click:$parent.editContact"></a></td>
<td data-bind="text: LastName"></td>
<td>
<button class="btn btn-mini btn-danger" data-bind="click:$parent.removeContact">remove</button></td>
</tr>
</tbody>
</table>
</body>
</html>
<script src="~/Scripts/Contact.js"></script>
//layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title - My ASP.NET MVC Application</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/css")
#Styles.Render("~/Content/themes/base/jquery.ui.all.css")
#Styles.Render("~/Content/themes/base/jquery.ui.dialog.css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/knockout")
</head>
<body>
<header>
<div class="container content-wrapper">
<div class="float-left">
<p class="site-title">
<a href="#Url.Action("Index", "Home")">
<img src="~/Content/themes/base/images/address-book.png" style="margin-left: -5px" /></a>
</p>
</div>
<div class="float-right">
<section id="login">
#Html.Partial("_LoginPartial")
</section>
<nav>
<ul id="menu">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
#if (Request.IsAuthenticated)
{
<li>#Html.ActionLink("Groups", "Index", "Groups")</li>
<li>#Html.ActionLink("Contacts", "Index1", "Contacts")</li>
<li>#Html.ActionLink("Address", "Index", "Address")</li>
<li>#Html.ActionLink("Email", "Index", "Emails")</li>
<li>#Html.ActionLink("Numbers", "Index", "Numbers")</li>
}
<li>#Html.ActionLink("Contact Us", "Contact", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
#RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix container">
#RenderBody()
</section>
</div>
<footer>
<div class="content-wrapper container">
<div class="float-left">
<p>© #DateTime.Now.Year - My ASP.NET MVC Application</p>
</div>
</div>
</footer>
#Scripts.Render("~/bundles/jquery")
#Styles.Render("~/Content/bootstrap/bootstrap.css")
#Scripts.Render("~/bundles/jqueryui")
#Scripts.Render("~/bundles/jqueryval")
#Scripts.Render("~/Scripts/modaldialog.js")
#RenderSection("scripts", required: false)
</body>
<script type="text/javascript">
(function () {
$("#body").show({ effect: "drop", direction: "down", distance: 200, duration: 1000 })
})();
</script>
</html>

Change your html so something like this:
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<html>
<body>
<div id="unique-view-data">
<input type="button" class="btn btn-small btn-primary" value="New Contact" data-bind="click:$root.createContact" />
<hr />
<table class="table table-striped table-bordered table-condensed">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th></th>
</tr>
<tbody data-bind="foreach: Contacts">
<tr>
<td class="name"><a data-bind="text: FirstName, click:$parent.editContact"></a></td>
<td data-bind="text: LastName"></td>
<td>
<button class="btn btn-mini btn-danger" data-bind="click:$parent.removeContact">remove</button></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<script src="~/Scripts/Contact.js"></script>
And change the last line in your javascript to this:
ko.applyBindings(new ContactViewModel(), document.getElementById("unique-view-data"));
This tells knockout to only apply the bindings to the DOM element specified in the second parameter.
I suspect that there might be other viewmodels also trying to apply bindings. If that is the case, please update the other viewmodels appropriately.

Related

Change content of multiple elements using Javascript without for loop

I am trying to change the content of multiple elements with the same id, using:
window.onload = function() {
document.getElementById('price_01').innerHTML = price_01;
document.getElementById('dimension_01').innerHTML = dimension_01;
}
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script type="text/javascript">
var price_01 = '$8000';
var dimension_01 = '10m';
window.onload = function() {
document.getElementById('price_01').innerHTML = price_01;
document.getElementById('dimension_01').innerHTML = dimension_01;
}
</script>
<body>
<div class="w3-container">
<h2>W3.CSS Modal</h2>
<div class="w3-container">
<table class="table">
<tbody>
<tr>
<td>Price:</td>
<td id='price_01'></td>
</tr>
<tr>
<td>Dimension:</td>
<td id='dimension_01'></td>
</tr>
</tbody>
</table>
</div>
<button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Open Modal</button>
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">×</span>
<div class="w3-container">
<table class="table">
<tbody>
<tr>
<td>Price:</td>
<td id='price_01'></td>
</tr>
<tr>
<td>Dimension:</td>
<td id='dimension_01'></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
However, it seems that the code doesn't work because you can only have one unique id for each element. Is there a more elegant solution to this problem without for loops and class? I have a lot of these elements to populate and I don't really want to write a for loops for each of them.

Error jquery : Uncaught TypeError: $(...).DataTable is not a function

I tried for tow days to add search field and sorting data table using jquery but always i show this error :
Uncaught TypeError: $(...).DataTable is not a function
I changed the script source order but can't run
PS : I'm using thymeleaf, bootstrap
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<link th:replace="fragments/header :: header" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/b-1.5.1/b-flash-1.5.1/datatables.min.css" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.4.js" type="text/javascript"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/b-1.5.1/b-flash-1.5.1/datatables.min.js"></script>
</head>
<body>
<div th:replace="fragments/menu :: menu"></div>
<div class="row">
<div class="col-md-4">
<h1>Listado de Provinces</h1>
</div>
<div class="col-md-8">
<a href="/createprovince" class="btn btn-primary a-btn-slide-text">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
<span><strong>Crear Province</strong></span>
</a>
Home
</div>
</div>
<table id="example" class="table table-striped">
<thead>
<tr>
<th scope="col">Nombre</th>
<th scope="col">Opciones</th>
</tr>
</thead>
<tbody>
<tr th:each="province : ${provinces}">
<td th:text="${province.name}"></td>
<td class="options">
<a th:href="#{'/provinces/edit/' + ${province.id_province}}" class="btn btn-primary a-btn-slide-text">
<span><strong>Modificar</strong></span>
</a>
<a th:href="#{'/provinces/delete/' + ${province.id_province}}" class="btn btn-delete a-btn-slide-text" onclick="return confirm('¿Estas seguro?');">
<span><strong>Borrar</strong></span>
</a>
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable({
"pagingType": "full_numbers"
});
});
</script>
<div th:replace="fragments/footerscripts :: footer"></div>
</body>
</html>
This a screen shoot
This error comes because of this code snippet did not take the insecure link so you put https:// for loading data tables. check it with other editor with http:// that woks for me.
the body of the first column have no values. data tables shows this type if errors and alert because missed values.
some times the
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<link th:replace="fragments/header :: header" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/b-1.5.1/b-flash-1.5.1/datatables.min.css" />
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.4.js" type="text/javascript"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/b-1.5.1/b-flash-1.5.1/datatables.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable({
"pagingType": "full_numbers"
});
});
</script>
</head>
<body>
<div th:replace="fragments/menu :: menu"></div>
<div class="row">
<div class="col-md-4">
<h1>Listado de Provinces</h1>
</div>
<div class="col-md-8">
<a href="/createprovince" class="btn btn-primary a-btn-slide-text">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
<span><strong>Crear Province</strong></span>
</a>
Home
</div>
</div>
<table id="example" class="table table-striped">
<thead>
<tr>
<th scope="col">Nombre</th>
<th scope="col">Opciones</th>
</tr>
</thead>
<tbody>
<tr th:each="province : ${provinces}">
<td th:text="${province.name}">1</td>
<td class="options">
<a th:href="#{'/provinces/edit/' + ${province.id_province}}" class="btn btn-primary a-btn-slide-text">
<span><strong>Modificar</strong></span>
</a><br/>
<a th:href="#{'/provinces/delete/' + ${province.id_province}}" class="btn btn-delete a-btn-slide-text" onclick="return confirm('¿Estas seguro?');">
<span><strong>Borrar</strong></span>
</a>
</td>
</tr>
<tr th:each="province : ${provinces}">
<td th:text="${province.name}">2</td>
<td class="options">
<a th:href="#{'/provinces/edit/' + ${province.id_province}}" class="btn btn-primary a-btn-slide-text">
<span><strong>Modificar</strong></span>
</a><br/>
<a th:href="#{'/provinces/delete/' + ${province.id_province}}" class="btn btn-delete a-btn-slide-text" onclick="return confirm('¿Estas seguro?');">
<span><strong>Borrar</strong></span>
</a>
</td>
</tr>
</tbody>
</table>
<div th:replace="fragments/footerscripts :: footer"></div>
</body>
</html>
Thank you for your answer, i resolved the problem. The source of the problem was a conflict with anathor jquery local file

Ajax and Spring MVC view list in a table not working

I am new to ajax. I am using spring mvc, hibernate and Ajax. My ajax is able to persist to DB but to view the list in the table is not working. Could anyone help me on that. Below is the code snippet:
Once the user click on create button (
Create New Customer) Then a modal dialog opens and the user is asked to put name and age. Once the create button with in the modal is clicked it calls the ajax function and i see the value gets persisted to DB but am not able to get the list with in the table.
my JSP(ajaxExmpl):
<%# taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%# taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset="utf-8"">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript">
function doAjaxPost() {
// get the form values
var name = $('#name').val();
var age = $('#age').val();
$.ajax({
type : "POST",
url : "createP",
data : "name=" + name + "&age=" + age,
success : function(response) {
// we have the response
alert('data saved to DB');
}
});
}
</script>
</head>
<body>
<div class="navbar-inner">
</div>
<a href="#" class="createCustomer" data-toggle="modal"
data-target="#createCustomerModal">Create New Customer</a>
<!-- Table to view the list saved in database -->
<section class="container">
<div class="panel panel-default">
<div class="panel-heading">
<h3>Person List</h3>
</div>
<div class="panel-body">
<table class="table table-striped">
<thead>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<c:forEach var="person" items="${persons}" varStatus="status">
<tr>
<td><c:out value="${status.count}" /></td>
<td>${person.name}</td>
<td>${person.age}</td>
<td>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown">
Actions <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a>Edit</a></li>
<li>Delete</li>
</ul>
</div>
</td>
</tr>
</c:forEach>
<tbody>
</table>
</div>
</div>
</section>
<!-- All modal dialog goes below this line -->
<!--create customer modal -->
<div id="createCustomerModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
Create New Customer
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<table class="form-table">
<tbody>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="pool-name">Name:</label></td>
<td><input type="text" id="name" class="form-control" /></td>
</tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="expire-after">Age:</label></td>
<td><input type="text" id="age" class="form-control" /></td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<div>
<input type="submit" id="createNewCustomer"
onclick="doAjaxPost();" value="Create" class="btn btn-default" />
<button type="button" class="btn btn-default" data-dismiss="modal">close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
My Controller:
#RequestMapping(value="/createP", method=RequestMethod.POST)
public String addPerson(Person person, Model model) {
personService.addPerson(person);
return "redirect:/listP";
}
#RequestMapping(value="/listP", method=RequestMethod.GET)
public String listPerson(Model model) {
model.addAttribute("persons", personService.getAllPersons());
return "ajaxExmpl";
}
Since you are making Ajax call it was not refreshing the page hence you new model attribute is not getting loaded. You need to do partial refresh or full page refresh in success function. For full refresh, In success method try to refresh your jsp by putting window.location = '/CRUDWebUI/listP'

Vue.js 2.x v-for in a <table> not working (Property or method not defined)

I was trying to iterate though an array defined in the data section of a Vue instance, so the table head could be determined automatically. But when I ran the code, the console output was as follows:
Here's the code (.js file combined):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Demo</title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
<script src="http://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<h3>
Staffs
</h3>
<table id="mytable" class="table table-hover">
<thead>
<tr>
<th v-for:"term in items">
{{term}}
</th>
</tr>
</thead>
<tbody>
<tr>
<td>6556</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Default
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row clearfix">
<div class="col-md-8 column">
<ul class="pagination">
<li>
Prev
</li>
<li v-for="n in 5">
{{n}}
</li>
<li>
Next
</li>
</ul>
</div>
<div class="col-md-4 column">
<button class="btn btn-default" type="button">button</button>
</div>
</div>
</div>
<script>
'use strict';
console.log("here we go!");
var tab = new Vue({
el: '#mytable',
data: {
items: ['aa','bb']
}
});
</script>
</body>
</html>
And the appearance was like:
Replace
v-for:"term in items"
With
v-for="term in items"

Ajax post method not updating the page

Trying to pass an attribute value to PHP through an jQuery post method. It is successful according to the console.log but the page is not refreshing the $_POST value on the page. However, it shows in the data on success.
jQuery post data:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dracanon Application</title>
<script src="js/jquery-2.2.4.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="css/bootstrap-theme.min.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="css/jquery-ui.css" type="text/css">
</head>
<body>Array
(
[id] => 22
)
data from ajax post:22<br/><form name="test" method="post" action="">
<div class="bs-example">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#newaltrequest">New Requests</a></li>
<li><a data-toggle="tab" href="#archive">Archive</a></li>
</ul>
<div class="tab-content">
<div id="newaltrequest" class="tab-pane fade in active">
<h3>New Requests</h3>
<table class="table table-striped" id="application-table">
<div class="display-limit">
<div class="btn-group page-limit">
<button id="pagelimit" type="button" class="form-control btn btn-default btn-small dropdown-toggle" data-toggle="dropdown">
<span>10</span><span class="caret"></span>
</button>
<input type="hidden" id="limit-selection" name="limit-selection" />
<ul class="dropdown-menu limit-selector" role="menu" >
<li>5</li>
<li>10</li>
<li>25</li>
<li>50</li>
<li>All</li>
</ul>
<script>
$('.limit-selector li a').click(function (e) {
var value = $(this).data("value");
$('#limit-selection').val(value);
document.getElementById("classForm").submit();
});
</script>
</div>
</div>
<div class="button-container">
<script>
/* limit page dropdown */
$('.dropdown-menu a').on('click', function(){
$('.dropdown-toggle').html('<span>'+$(this).html() + '</span><span class="caret"></span>');
});
/* End limit page dropdown */
</script>
</div>
<thead>
<tr>
<th>Username</th>
<th>Alt Character</th>
</tr>
</thead>
<tbody>
<tr>
<tr>
<td>bwilson</td><td>Bracchius</td><td class='btnreview'><button type='button' class='btn btn-primary btn-small reviewbutton' data-toggle='modal'
data-target='#view_detail_modal'
data-requestid='22'>Review</button></td></tr><tr><td>dcaldessa</td><td>sojurne</td><td class='btnreview'><button type='button' class='btn btn-primary btn-small reviewbutton' data-toggle='modal'
data-target='#view_detail_modal'
data-requestid='23'>Review</button></td>
</tr>
<!--<script>
$(document).ready(function () {
$(document).on('click','.reviewbutton',function () {
var requestid = $(this).attr('data-requestid');
console.log(window.location);
$.ajax({
type:"POST",
url: "../index.php",
data: {id: 13},
success: function (data) {
console.log("data-resolved");
}
});
});
});
</script>--> </tr>
</tbody>
</table>
</div>
<div id="archive" class="tab-pane fade">
<h3>Archive</h3>
<table class="table table-striped" id="archive-table">
<div class="display-limit">
<div class="btn-group page-limit">
<button id="pagelimit" type="button" class="form-control btn btn-default btn-small dropdown-toggle" data-toggle="dropdown">
<span>10</span><span class="caret"></span>
</button>
<input type="hidden" id="limit-selection" name="limit-selection" />
<ul class="dropdown-menu limit-selector" role="menu" >
<li>5</li>
<li>10</li>
<li>25</li>
<li>50</li>
<li>All</li>
</ul>
<script>
$('.limit-selector li a').click(function (e) {
var value = $(this).data("value");
$('#limit-selection').val(value);
document.getElementById("classForm").submit();
});
</script>
</div>
</div>
<div class="button-container">
<script>
/* limit page dropdown */
$('.dropdown-menu a').on('click', function(){
$('.dropdown-toggle').html('<span>'+$(this).html() + '</span><span class="caret"></span>');
});
/* End limit page dropdown */
</script>
</div>
<thead>
<tr>
<th>Username</th>
<th>Alt Character</th>
</tr>
<tbody>
<tr>
<td>Sample Data</td>
<td>Sample Data</td>
</tr>
</tbody>
</thead>
</table>
</div>
</div>
<script>
$(document).on('click','.reviewbutton',function () {
var requestid = $(this).attr('data-requestid');
var value = {id: requestid};
console.log(window.location);
$.post("testing.php",value, function (data) {
console.log(data);
});
});
</script>
</body>
</html>
so it shows that the data is being returned but it is not refreshing the $_POST array to display the values on the screen.
Below is the original form:
<?php
include "includes/header.php";
include "includes/functions.php";
print_r($_POST);
if (isset($_POST['id'])){
print_r("data from ajax post:".$_POST['id']."<br/>");
}else if (isset($_POST['id'])){
echo "data not found";
}
if (!isset($_SESSION['requestlimit'])) {
$_SESSION['requestlimit'] = 10;
}else if (isset($_POST['limit-selection'])){
if($_POST['limit-selection'] != null) {
$_SESSION['requestlimit'] = $_POST['limit-selection'];
}
}
if (!isset($_SESSION['archivelimit'])) {
$_SESSION['archivelimit'] = 10;
}else if (isset($_POST['limit-selection'])){
if($_POST['limit-selection'] != null) {
$_SESSION['archivelimit'] = $_POST['limit-selection'];
}
}
$start=0;
$limit=$_SESSION['archivelimit'];
if(isset($_GET['pid']))
{
$id = $_GET['pid'];
$start = ($id-1)*$limit;
}
else
{
$id=1;
}
?>
<form name="test" method="post" action="">
<div class="bs-example">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#newaltrequest">New Requests</a></li>
<li><a data-toggle="tab" href="#archive">Archive</a></li>
</ul>
<div class="tab-content">
<div id="newaltrequest" class="tab-pane fade in active">
<h3>New Requests</h3>
<table class="table table-striped" id="application-table">
<?php include "includes/pagelimit_button.php"?>
<thead>
<tr>
<th>Username</th>
<th>Alt Character</th>
</tr>
<tbody>
<tr>
<?php include "includes/alt_requestlist.php"?>
</tr>
</tbody>
</thead>
<?php /*include "includes/view_alt_request.php" */?>
</table>
</div>
<div id="archive" class="tab-pane fade">
<h3>Archive</h3>
<table class="table table-striped" id="archive-table">
<?php include "includes/pagelimit_button.php"?>
<thead>
<tr>
<th>Username</th>
<th>Alt Character</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sample Data</td>
<td>Sample Data</td>
</tr>
</tbody>
</table>
</div>
</div>
</form>
<script>
$(document).on('click','.reviewbutton',function () {
var requestid = $(this).attr('data-requestid');
var value = {id: requestid};
console.log(window.location);
$.post("testing.php",value, function (data) {
console.log(data);
});
});
</script>
</body>
</html>
Could I get some suggestions or assistance in the right direction to resolving this issue?
The $_POST variable is evaluated at the serer side when you request the page. When you do the AJAX request, the $_POST variable is evaluated in a separate page, which returned values will be evaluated on the browser side in the success method. The $_POST variable will therefor not be updated, but you should use javascript or jQuery to process the returned value and place them in your page at the positions of where the values of the $_POST variable are.

Categories