I have a form where i have used token input plugin to select multiple items from a predefined list. However Ondelete function is not working.
<script type="text/javascript">
$(document).ready(function() {
var1_ids = '<?php echo $records[0]['team_member']?>';
$("#team_member").tokenInput("<?php echo base_url(); ?>staff_activity/get_members", {
theme: "facebook",
prePopulate: [<?php echo $show1; ?>],
resultsFormatter: function(item){ return "<li>" + " " + "<div style='display: inline-block; padding-left: 5px;'><div class='full_name'>" + item.first_name + "</div></div></li>" },
tokenFormatter: function(item) { return "<li><p>" + item.first_name + "</p></li>" },
onAdd: function (item) {
var1_ids = var1_ids + item.staff_id + ',';
$('#team_member_ids').val(var1_ids);
},
onDelete: function (item) {
var1_ids = var1_ids.replace(item.staff_id+',','');
$('#team_member_ids').val(var1_ids);
}
});
});
</script>
where var_dump($records[0]['team_member']?>); is string(11) ",900,4,979,"
Related
Problem solved, my json array was badly done.
I had just wrongly done my array in php, so I did it again and everything works.
<?php
$history = array();
$history[] = array('name' => $fetch[$s]['value'], 'url' => $url);
echo json_encode(['history' => $history]);
?>
function load_history() {
$.getJSON(URL + 'load.search.historique.php', function(data) {
if (data.type == 'success') {
for (var i = 0; i < data.history.length; i++) {
$('.search-item-result').append('<div class="search-item"><a name="' + data.history[i].name + '" action="redirect" href="' + data.history[i].url + '">' + data.history[i].name + '</a><i class="fas fa-times"></i></div>');
}
} else if (data.type == 'error') {
$('.search-item-result').html('<div class="search-item">' + data.message + '</div>');
}
});
}
Problem is in your JSON data formatting. Format as shown below, you will get desired output. You can view by run the snippet.
var data = {
"type": "success",
"message": "Permission denied: HTTP Exception",
"history": [
[
"Dr. STONE",
"https://mon-site.fr/watch/117-Dr.-STONE/episode-1/saison-1"
],
[
"One Piece ",
"https://mon-site.fr/watch/27-One-Piece-/episode-1/saison-1"
],
[
"One Piece ",
"https://mon-site.fr/watch/27-One-Piece-/episode-1/saison-1"
]
]
}
function load_history() {
if (data.type == 'success') {
var div = document.getElementById('myDiv');
for (var i = 0; i < data.history.length; i++) {
div.innerHTML += '<div class="search-item"><a name="' + data.history[i][0] + '" action="redirect" href="' + data.history[i][1] + '">' + data.history[i][0] + '</a><i class="fas fa-times"></i></div>';
}
} else if (data.type == 'error') {
div.innerHTML += '<div class="search-item">' + data.message + '</div>';
}
}
load_history();
<div id="myDiv"></div>
http://zivite.com/salary/
Hi, Guys please visit the link above mentioned.
Whenever choosing the designation from the dropdown, it will be listed all the data associated with that particular designation.
In the loop data, I have added form around the tr and submit button as well as added some additional fields like attendance, loan, rate etc. Whenever hit the submit button for a particular person. it should be stored in my database table which called the salary table.
Now my problem is not getting the data inside the model when we hit the submit button,
If you inspect it you can see array is creating there but no data from the submitted form
see this image link below
https://ibb.co/h11SgMV
// view
<?php include "template/header.php"; ?><!-- Start Page content -->
<div class="content">
<div class="container-fluid">
<div class="card-box">
<form action="%3C?php%20echo%20base_url('con_employee/employeeSearch');%20?%3E" class="form-inline" method="post">
<div class="form-group" style="padding-right:10px; width:100%;">
<select class="custom-select" id="empDesignation" name="empDesignation">
<option selected>
Designation
</option><?php foreach($categories as $category){ ?>
<option value="<?php echo $category['cat_id']; ?>">
<?php echo $category['cat_name']; ?>
</option><?php } ?>
</select>
</div>
</form><br>
<div class="row">
<table class="table table-hover table-centered m-0 table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Designation</th>
<th>Account Number</th>
<th>Attendance</th>
<th>Rate</th>
<th>Loan</th>
<th>Action</th>
</tr>
</thead>
<tbody id="salaryData"></tbody>
</table>
</div>
</div>
</div><!-- container -->
</div><!-- content -->
<!-- end row -->
<script>
$(function() {
$('#empDesignation').change(function() {
var user_designation = $(this).val();
if (user_designation == '') {
$('#empName').prop('disabled', true);
} else {
$('#empName').prop('disabled', false);
$.ajax({
url: "<?php echo site_url(); ?>con_salary/add_salary_for_employee",
type: "POST",
data: {
'user_designation': user_designation
},
dataType: 'json',
success: function(data) {
var html = '';
var i;
for (i = 0; i < data.length; i++) {
html += '<tr>' +
'<form class="" id="myform">' +
'<td>' + data[i].emp_name + ' <\/td>' +
'<td>' + data[i].cat_name + '<\/td>' +
'<td>' + data[i].emp_account_number + '<\/td>' +
'<td>' +
'<input type="text" class="form-control" name="attendance" placeholder="Attendance" required>' +
'<\/td>' +
'<td>1<\/td>' +
'<td>' +
'<input type="text" class="form-control" name="loan" placeholder="Loan" required>' +
'<\/td>' +
'<td>' +
'<a href="javascript:;" class="btn btn-primary item-edit" id="btnSave">Submit<\/a>' +
'<\/td>' +
'<\/form>' +
'<\/tr>';
}
$('#salaryData').html(html);
// $('#salaryData').html(data);
},
error: function() {
alert('No Data');
}
});
}
});
});
//insert data to salary table
$('#salaryData').on('click', '.item-edit', function() {
$('#myform').attr('action', '<?php echo base_url() ?>con_salary/addSalary');
var url = $('#myform').attr('action');
var data = $('#myform').serialize();
var attendance = $('input[name=attendance]');
var loan = $('input[name=loan]');
$.ajax({
type: 'ajax',
method: 'POST',
url: url,
data: data,
async: false,
dataType: 'json',
success: function(response) {
},
error: function() {
}
});
});
</script> <?php include "template/footer.php"; ?>
// controller
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Con_salary extends CI_Controller
{
public function __construct(){
parent:: __construct();
$this->load->model('queries_salary');
}
public function index()
{ $data['categories'] = $this->queries_salary->fetchCategory();
$this->load->view('employee_salary_view',$data);
}
public function add_salary_for_employee()
{
$designation_id=$this->input->post('user_designation');
$users = $this->queries_salary->fetchEmployeeforsalary($designation_id);
echo json_encode($users);
}
public function addSalary()
{
$result = $this->queries_salary->addSalary();
// $msg['success']=false;
// $msg['type']='add';
// if($result){
// $msg['success']=true;
// }
// echo json_encode($msg);
}
//end
}
?>
// model
<?php
class Queries_salary extends CI_Model
{
public function fetchCategory()
{
$query= $this->db->get('category');
return $query->result_array();
}
public function fetchEmployeeforsalary($designation_id)
{
$this->db->where('emp_designation_id',$designation_id);
$this->db->join('category','employee.emp_designation_id = category.cat_id');
$query=$this->db->get('employee');
if($query->num_rows()>0){
return $query->result();
}
else{
return false;
}
// $this->db->where('emp_designation_id',$designation_id);
// $query=$this->db->get('employee');
}
public function addSalary()
{
$field = array(
'salary_attendance'=>$this->input->post('attendance'),
'salary_loan'=>$this->input->post('loan')
);
print_r($field);
exit();
// $this->db->insert('salary',$field );
// if($this->db->affected_rows()>0)
// {
// return true;
// }
// else{
// return false;
// }
}
//end
}?>
A form is not allowed to be a child of a table, tbody or tr HTML elements.
If attempting to put one there will tend to cause the browser to move the form to it appears after the table.So in your case form results an empty data.
Here i adjusted code your code little bit and will work for you.
for (i = 0; i < data.length; i++) {
html += '<tr class="user_data" >' +
'<td>' + data[i].emp_name + ' <\/td>' +
'<td>' + data[i].cat_name + '<\/td>' +
'<td>' + data[i].emp_account_number + '<\/td>' +
'<td>' +
'<input type="text" class="form-control attendance" name="attendance" placeholder="Attendance" required>' +
'<\/td>' +
'<td>1<\/td>' +
'<td>' +
'<input type="text" class="form-control loan" name="loan" placeholder="Loan" required>' +
'<\/td>' +
'<td>' +
'<a href="javascript:;" class="btn btn-primary item-edit" id="btnSave">Submit<\/a>' +
'<\/td>' +
'<\/tr>';
}
Bottom side script
$('#salaryData').on('click', '.item-edit', function() {
var url = '<?php echo base_url() ?>con_salary/add_salary_for_employee';
var current_row = $(this).closest('.user_data');
var data = { attendance: current_row.find('.attendance').val(), loan: current_row.find('.loan').val() };
$.ajax({
type: 'ajax',
method: 'POST',
url: url,
data: data,
async: false,
dataType: 'json',
success: function(response) {
},
error: function() {
}
});
});
One important note is that if you are using single form and using same type of input with same name use it as Array.
Eg : name="loan[]"
I'm a beginner, tried to click the link with DOM but didn't worked. how can I click or trigger the function? and why didn't that work?
<li id="viewPage">viewPage
document.getElementById("viewPage").click()
function viewPage(Name,Number){
$("#ViewPage li").removeClass("active");
$("#"+Name).addClass("active");
$("#ViewPage").load(
Name+".asp",
{
Number : Number
},
function( response, status, xhr ) {
if ( status == "error" ) {
var msg = "there was an error: ";
$( "#error" ).html( msg + xhr.status + " " + xhr.statusText );
}
});
}
Since you don't seem to mind using jquery in the rest of your code, here is an easy way to get the click using jquery:
$('#viewPage').click(function() {
console.log('Now your click function is working');
});
function viewPage1(Name, Number) {
$("#ViewPage1 li").removeClass("active");
$("#" + Name).addClass("active");
$("#ViewPage1").load(
Name + ".asp", {
Number: Number
},
function(response, status, xhr) {
if (status == "error") {
var msg = "there was an error: ";
$("#error").html(msg + xhr.status + " " + xhr.statusText);
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="viewPage">viewPage1
I am working on adding ajax call to paper-icon-buttons that are rendered in an ag-grid cell renderer. Here is the script in my custom polymer component. The paper-icon-buttons do show up and clicking on them causes the ripple, but the functions in the on-tap are not being called.
Is there a better way to add the paper-icon-button entries to the cell? How can I add the registration of the on-tap properly?
Thank you!
<script>
function sourceRenderer(params) {
if (params.value)
return '<span>' + params.value + ''
else
return null;
}
function innerCellRendererA(params) {
var imageFullUrl = '/images/' + params.data.type + '.png';
if (params.data.type == 'entity') {
var entityUrl = '/analyze/' + params.data.asource + '/' + params.data.amodel + '/' + params.data.sourceName;
return '<img src="'+imageFullUrl+'" style="padding-left: 4px;" /> ' + params.data.name + ' (' + params.data.sourceName + ')';
}
else if (params.data.type == 'model') {
var entityUrl = '/harvest/' + params.data.asource + '/' + params.data.name;
return '<img src="'+imageFullUrl+'" style="padding-left: 4px;" /> ' + params.data.name + '';
}
else
return '<paper-icon-button src="'+imageFullUrl+'" on-tap="testjdbc" data-args="'+params.data.classname+'~~'+params.data.url+'~~'+params.data.username+'~~'+params.data.password+'"></paper-icon-button> ' +
'<paper-icon-button src="/images/database_export.svg" on-tap="harvestmodel" data-args="'+params.data.classname+'~~'+params.data.url+'~~'+params.data.username+'~~'+params.data.password+'"></paper-icon-button> ' + params.data.name;
}
Polymer({
is: 'easymetahub-analyze',
properties: {
sourcelist: {
type: Array,
notify: true
}
},
testjdbc: function(e){
alert('Foo');
var args = e.target.getAttribute('data-args').split('~~');
},
harvestmodel: function(e){
alert('Bar');
var args = e.target.getAttribute('data-args').split('~~');
},
handleData: function(e) {
var resp = e.detail.response;
this.sourcelist = resp;
},
ready: function() {
},
attached: function() {
agGrid.initialiseAgGridWithWebComponents();
var columnDefs = [
{
headerName: "Name",
'field': 'name',
width: 350,
cellRenderer: 'group',
sort: "asc",
cellRendererParams: {
innerRenderer: innerCellRendererA
}
},
{headerName: "Database Type", field: "databasetype", width: 120 },
{headerName: "URL", width: 250, field: "url" },
{headerName: "User Name", field: "username", width: 120 }
];
var gridOptions = {
columnDefs: columnDefs,
enableColResize: true,
rowHeight: 36,
enableSorting: true,
getNodeChildDetails: function(file) {
if (file.children) {
return {
group: true,
children: file.children,
expanded: file.open,
field: 'name',
key: file.name
};
} else {
return null;
}
},
onGridReady: function(params) {
params.api.sizeColumnsToFit();
}
};
this.$.myGrid.setGridOptions(gridOptions);
var eInput = this.$.quickFilterInput;
eInput.addEventListener("input", function () {
var text = eInput.value;
gridOptions.api.setQuickFilter(text);
});
},
detached: function() {
this.$.myGrid.api.destroy();
}
});
</script>
agGrid's grid options has a property for a callback -- onModelUpdated -- that is called when new rows are added to the grid.
attached: function() {
var self = this;
var gridOptions = {
...
onModelUpdated: function(e) {
self._bindGridIconTap();
}
};
}
You could use this event to query the grid for its paper-icon-buttons and add their on-tap attributes as event handlers.
_bindGridIconTap: function() {
this._bindActionsOnGrid('paper-icon-button', 'tap');
},
_bindActionsOnGrid: function(selector, eventName) {
var self = this;
var buttons = this.$.myGrid.querySelectorAll(selector);
buttons.forEach(function(b) {
self._bindEvent(b, eventName);
});
},
_bindEvent: function(el, eventName) {
var self = this;
var methodName = el.getAttribute('on-' + eventName);
var method = self[methodName];
if (method) {
el.addEventListener(eventName, function(e) {
method(e);
e.stopPropagation();
e.preventDefault();
return false;
});
} else {
console.warn(el.localName, 'listener method not found:', methodName);
}
}
plunker
Note you have a bug in:
var args = e.target.getAttribute('data-args').split('~~');
In a tap event for paper-icon-button, e.target is the icon image. You actually want e.currentTarget, which I've done for you in the Plunker.
I have a JSON file such as
[
{
"heading":"Apprenticeship Pathways",
"image":"http:\/\/www.domain.co.uk\/dfdf\/dfdf/images\/content\/join_our_team\/01.png",
"columns":[
{
"data":"<p>Curabitursapienligulasuscipitneccondimentu mneclaciniaavelitCraslaciniaodiositametvel itpellentesquefringillaPellentesquedapibus0 purusvitaemetusultricesultricesCrasvelorci mneclaciniaavelitCraslaciniaodiositametvel velitinhendreritarcicesultricesCrasvelorci5. velitinhendreritarcicesultricesCrasvelorci5.<\\p>"
},
The problem being when inputting the column data, "<\p>" is visible on screen, I.e. the escaped slash is not being removed.
function json_request( url, callback ) {
$.ajax({
url: url,
dataType: 'json',
success: function( data ) {
callback( data );
},
error : function(){
callback( false );
}
});
}
function build_html( $obj ) {
var $firstCol = $obj.columns.shift();
var $columns = '';
for( var i in $obj.columns ) {
$columns += '<div class="hori-con">';
$columns += $obj.columns[i].data;
$columns += '</div>';
}
var $return =
' <li>' +
' <div class="gridRow cf">' +
' <div class="twelveCol last">' +
' <div class="cf hori-con-inner">' +
' <div class="hori-con">' +
' <img src="' + $obj.image + '">' +
' <h3>' + $obj.heading + '</h3>' +
$firstCol.data +
' open' +
' </div>' +
$columns +
' <div>' +
' </div>' +
' </div>' +
' </li>';
return $return;
}
function filter_jobs(){
$('#join_our_team .sub-heading-bar a.nav-box').bind($bind , function(){
var $this = $(this),
$qsKey = 'filter',
$href = $this[0].href,
$basename = $href.split('?' + $qsKey + '=')[1],
$dataContainer = $('#joinOurTeamScroller ul.thelist');
if( typeof $basename !== 'undefined' ) {
json_request('./json/' + $basename + '.json', function( $data ){
$html = '';
if( $data !== false ) {
$.each( $data, function(key, val) {
$html += build_html( val );
});
}
$dataContainer.html($html);
});
}
return false;
});
}
Is there a standardised way of doing this or do I need to search and replace the slashes?