I need to pass const data based on two conditions but I am getting an error in jQuery.
The code I have tried:
<body>
<div class="input-group-btn"> <button class="btn btn-info btnSearchJob" id="search-jobs" onClick="myFunction(2)" ><i class="fa fa-search"></i> Search</button></div>
</body>
<script type="text/javascript">
$(document).ready(function() {
function myFunction(value = 1){
console.log(value);
}
});
The initial value i need to print 1 and when i am clicking this myFunction is should print 2 that's it.
You should define function always outside the ready function and when HTML do for the onclick it does not know the function myFunction() to define it inside the head.
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function() {
myFunction();
});
function myFunction(value = 1){
console.log(value);
}
</script>
</head>
<body>
<div class="input-group-btn"> <button class="btn btn-info btnSearchJob" id="search-jobs" onClick="myFunction(2)" ><i class="fa fa-search"></i> Search</button></div>
</body>
https://jsfiddle.net/mmhkru75/
First jobsList() and jobList() are not same, second you should use like this to use default value in function
function jobsList(value=1){
const data = {
q : value
}
url = "{{route('get-jobs')}}";
axios.post(url,data).then(response => {
//...
});
Change jobList to jobsList
<div class="input-group-btn"> <button class="btn btn-info btnSearchJob" id="search-jobs" onclick="jobsList(2)"><i class="fa fa-search"></i> Search</button></div>
Related
When I click on the delete modal of first row, the modal pops up and the data is getting deleted. If I click on the row other than the first row, it shows the error as id undefined.
Controller:
public function project_show(){
$this->load->view('project_show',$data);//page where delete button is present
$this->load->view('project_del');//modal page which opens on delete button
}
public function delete_get_id($pcode){
if($this->input->post('deleteproj'))
{
$this->project_model->delete_project($pcode);
}
}
ajax:
$('#deletebutton').click(function(){
var pcode = $(this).data('id');
$('#deleteproject').data('id', pcode);
});
$('#deleteproject').click(function(){
var pcode = $(this).data('id');
$('#deletemodal').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
console.log(pcode);
$.ajax({
type: "POST",
url: "<?php echo base_url(); ?>" + "index.php/project/delete_get_id/"+ pcode,
data: {
pcode: pcode,
deleteproj: 1,
},
success: function (data) {
$("#deletemodal").modal('hide');
showproject();
}
});
});
view page of button:
<button id="deletebutton" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#deletemodal" data-id="<?php echo $row->project_code;?>"><span class = "fa fa-trash-o"></span> Delete</button>
view page of modal:
<div class="modal fade bs-example-modal-sm" id="deletemodal" ...>
.....
<button class="btn btn-danger btn delete" id="deleteproject"><span class="glyphicon glyphicon-trash"></span>Delete</button>
How will I pass the id along with "data-target" tag from page where button is present to modal page so that the particular row gets deleted
Please note that ID selector is supposed to be unique in a HTML document. And jQuery expects that to be true. So instead of using ID, you should use class name for the delete button
$('.deletebutton').click(function(){
var pcode = $(this).data('id');
$('#deleteproject').data('id', pcode);
});
//...
<button
class="deletebutton btn btn-danger btn-xs"
data-toggle="modal"
data-target="#deletemodal"
data-id="<?php echo $row->project_code;?>"
>
<span class = "fa fa-trash-o"></span> Delete
</button>
Assuming your showproject() function won't accidentally remove / recreate your #deleteproject button, things should work for you.
I have a problem to delet the row data from a page. After clicking "OK" buttton nothing would be appear.
<td><a id ="mybutton" data-toggle="modal" data-target="#confirm_delete_button" data-id="<?php echo $row -> id?>" href="" ><i class="glyphicon glyphicon-remove"></i></a>
The modal is
<div class="modal fade" id="confirm_delete_button" role="dialog" aria-labelleby="myModalLabel" aria-hidden="true" z-index: 1050;>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h class="modal-title" id="myModalLabel">Delet this data</h>
</div>
<div class="modal-body">
<h4>Are you sure? </h4>
<div id="done"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" id="confirmOk">Ok</button>
<button type="button" class="btn btn-success" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>
</div>
</div>
</div>
The JQuery code is
<script type="text/javascript">
$(document).ready(function(){
$('#mybutton').click(function(){
var id = $(this).data('id');
$('#confirmOk').data('id',id);
});
$('#confirmOk').click(function(){
var id = $(this).data('id');
$.ajax {
url : "<?php echo base_url();?>item_list/delete_item/",
type : "post" ,
data : {"id":id},
dataType:"json",
success : function (data) {
$('#confirm_delete_button').modal('hide');
}
}
});
});
</script>
The function of controller file item_list.php file is
public function delete_item () {
//$id = $this->uri->segment(3);
$id=$this->input->post('id');
$this -> item_list_model -> delete_item ($id);
echo $id;
}
The item_list_model.php file is
public function delete_item ($id) {
return $this -> db -> query ("DELETE FROM item WHERE id='$id' ");
}
The output is The "OK" button does not delet the row
Actually your ajax post endpoint into controller should return some response using echo + json enconde. In that way your success callback into ajax jquery call can catch it and continue the flow correctly (hiding modal).
JQuery Ajax POST in Codeigniter
Try out below code
Controller
public function delete_item () {
//$id = $this->uri->segment(3);
$id=$this->input->post('id');
$result = $this->item_list_model->delete_item ($id);
if($result > 0 ){
echo "success";
}else{
echo "failure";
}
}
Model
public function delete_item ($id) {
$this->db->where('id', $id);
$this->db->delete('item');
return $this->db->affected_rows();
}
ajax
success : function (data) {
//$('#confirm_delete_button').modal('hide');
alert(data);
}
try changing data : {"id":id}, into data : {id:id}, maybe the data id didn't sent correctnly in the controller thats why it's not working.
i want to make a button click counter. When you click the button the text from it changes, when the button is clicked i want to write to the database but i can't manage this.
<button type="button" class="btn btn-info" style="width:90%;" id="textChanger" onclick="counter;"><h4><i class="glyphicon glyphicon-earphone" aria-hidden="true"> </i> XXXX XXX XXX <h6>Show Number</h6></h4></button>
document.getElementById("textChanger").onclick= function(){
document.getElementById("textChanger").innerHTML="<h4><i class=\"glyphicon glyphicon-earphone\" aria-hidden=\"true\"> </i> <?php echo $nrTelefonAnunt ?> </h4>";
}
this is the code that i manage the text change, now what can i do to write to the database, i tried some methods but none worked
Thanks everybody for the answers i manged by adding this:
$('#textChanger').click(function(){
$.ajax({
url : 'rate.php?idanunt="<?php echo $idAnunt ?>"',
type : 'post',
success : function(data){
}
});
});
Try this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-info" style="width:90%;" id="textChanger" onclick="counter;">1</button>
<script>
document.getElementById("textChanger").onclick= function(){
var count = document.getElementById("textChanger").innerHTML;
count = parseInt(count) + 1;
document.getElementById("textChanger").innerHTML=count;
}
</script>
Try this
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<button type="button" class="btn btn-info" style="width:90%;" id="textChanger" onclick="counter;"><h4><i class="glyphicon glyphicon-earphone" aria-hidden="true"> </i> <span>XXXXX</span> <h6>Show Number</h6></h4></button>
<script>
count=0;
$(document).on("click","button",function(){
count++;
$('span').text(count);
});
</script>
I have a view which shows a table with rows of data from a local wamp database. Each row has a View, Edit and Delete button which allows a user to View, Edit and Delete records respectively.
Clicking on a row's Delete button will bring up a confirmation modal and is deleted when the modal's Delete button is clicked.
Right now, clicking on the Delete button throws up these errors:
Warning: setState(...): You passed an undefined or null state object; instead, use forceUpdate().
Uncaught TypeError: this.setState(...) is not a function
I also get a warning when trying to bind a variable:
Warning: bind(): React component methods may only be bound to the component instance. See GamePlatformTable
I've tried using forceUpdate in place of setState from stuff I've been searching, but I get the same 2nd errors. If it helps, I'm using php, CodeIgniter 3.0.3 and native React 0.14.3. I'm still relatively new to React, and thanks for helping.
Here's my code:
View:
<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<?php
$this->load->view("templates/meta_common");
$this->load->view("templates/css_common");
?>
<title>Video Game Portal Admin</title>
</head>
<body>
<div class="container">
<?php $this->load->view("admin/admin_navbar"); ?>
<div class="page-header">
<h1>
<i class="text-info fa fa-file-text-o"></i> Browse Game Platforms
<span class="badge">REACT JS</span>
<button onclick="window.location.replace('<?= site_url("admin/game_platform/add_game_platform/") ?>')" type="button"
class="btn btn-danger"><i class="fa
fa-plus"></i> Add Game Platform
</button>
</h1>
</div>
<?php $this->load->view("admin/template_user_message"); ?>
<div id="GamePlatformTable">
</div>
<?php $this->load->view("admin/admin_footer"); ?>
</div>
<?php $this->load->view("templates/js_common"); ?>
<script src="<?=RESOURCES_FOLDER?>js/react.js"></script>
<script src="<?=RESOURCES_FOLDER?>js/react-dom.js"></script>
<script src="<?=RESOURCES_FOLDER?>js/JSXTransformer.js"></script>
<script src="<?=RESOURCES_FOLDER?>jsx/BrowseGamePlatform.js" type="text/jsx;harmony=true"></script>
<script type="text/jsx">
var gamePlatforms = <?=json_encode($game_platforms)?>;
ReactDOM.render(
<GamePlatformTable
gamePlatforms = {gamePlatforms}
siteUrl = "<?=site_url()?>"
/>,
document.getElementById("GamePlatformTable")
);
</script>
External React:
The error occurs in the deleteButtonClicked function of GamePlatformTable.
var rowIndex = 0;
var GamePlatformRow = React.createClass({
render: function () {
++rowIndex;
var developer = !this.props.gamePlatform.developer || this.props.gamePlatform.developer == "none" ?
<span className="text-placeholder">none</span> : this.props.gamePlatform.developer;
var year_intro = !this.props.gamePlatform.year_intro || this.props.gamePlatform.year_intro == "0" ?
<span className="text-placeholder">0</span> : this.props.gamePlatform.year_intro;
var logo_img = this.props.gamePlatform.logo_url ?
<img className="img-rounded" src={this.props.siteUrl + "/uploads/" + this.props.gamePlatform.logo_url}
alt={this.props.gamePlatform.abbr} width="50px" height="50px"/> :
<span className="text-placeholder">no logo</span>;
var view_action = <a
href={this.props.siteUrl + "/admin/game_platform/view_game_platform/" + this.props.gamePlatform.platform_id}
type="button" className="btn btn-default"><i className="fa fa-eye"></i> View</a>;
var edit_action = <a
href={this.props.siteUrl + "/admin/game_platform/view_game_platform/" + this.props.gamePlatform.platform_id}
type="button" className="btn btn-default"><i className="fa fa-file-text-o"></i> Edit</a>;
return (
<tr>
<td>{rowIndex}</td>
<td>{this.props.gamePlatform.platform_name}</td>
<td><span className="badge">{this.props.gamePlatform.abbr}</span></td>
<td>{logo_img}</td>
<td>{developer}</td>
<td>{year_intro}</td>
<td>
{view_action}
{edit_action}
<button type="button" className="btn btn-default"
onClick={this.props.deleteButtonClicked.bind(this, this.props.gamePlatform.platform_id)}><i
className="fa fa-trash"></i> Delete
</button>
</td>
</tr>
);
}
}); //end GamePlatformRow
var GamePlatformTable = React.createClass({
getInitalState: function () {
return {
gamePlatforms: this.props.gamePlatforms,
deletePlatformId: null
};
},
refreshTableData: function () {
var data = {
"gamePlatforms": this.props.gamePlatforms
};
$.ajax({
url: this.props.siteUrl + "game_platform/json_get_all_platforms",
dataType: "json",
data: data,
cache: false,
success: function (data) {
this.setState({gamePlatforms: data.gamePlatforms});
}.bind(this),
error: function (xhr, status, err) {
console.error(this.props.siteUrl + "game_platform/json_get_by_platform_id", status, err.toString());
}.bind(this)
});
},
confirmDeleteClicked: function () {
var data = {
"platform_id": this.state.deletePlatformId
}
$.ajax({
type: "POST",
url: this.props.siteUrl + "game_platform/json_delete_by_platform_id",
dataType: "json",
data: data,
success: function (data) {
this.refreshTableData();
}.bind(this),
error: function (xhr, status, err) {
this.refreshTableData();
}.bind(this)
});
},
deleteButtonClicked: function (platform_id) {
console.log("GamePlatformTable.deleteButtonClicked\nplatform_id: " + platform_id);
$("#ConfirmDeleteModal").modal("show");
this.setState()({
deletePlatformId: platform_id
}).bind(this);
},
render: function () {
var rows = [];
this.props.gamePlatforms.forEach(
function (gamePlatform) {
rows.push(<GamePlatformRow gamePlatform={gamePlatform} key={gamePlatform.platform_id}
siteUrl={this.props.siteUrl}
deleteButtonClicked={this.deleteButtonClicked}/>);
}.bind(this)
);
return (
<div className="table-responsive">
<table className="table table-hover" id="GamePlatformTable">
<thead>
<tr>
<th>#</th>
<th>Platform Name</th>
<th>Platform Abbr</th>
<th>Platform Logo</th>
<th>Platform Developer</th>
<th>First Release Year</th>
<th> </th>
</tr>
</thead>
<tbody>{rows}</tbody>
</table>
<div className="modal fade" id="ConfirmDeleteModal">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 className="modal-title">Delete Game Platform</h4>
</div>
<div className="modal-body">
<p>Are you sure?</p>
<p>This action <strong className="text-danger">cannot</strong> be undone.</p>
</div>
<div className="modal-footer">
<button type="button" onclick={this.confirmDeleteClicked} className="btn btn-danger"
data-dismiss="modal"><i className="fa fa-trash"></i> Delete
</button>
<button type="button" className="btn btn-default" data-dismiss="modal"><i
className="fa fa-ban"></i> Cancel
</button>
</div>
</div>
</div>
</div>
</div>
);
}
}); // end GamePlatformTable
Edit 1:
Removing the .bind(this) removed the bind warning.
Edit 2:
I forgot to add, the console.logs() are showing the correct IDs.
Eh, I solved the prob.
I had parenthesis in front of setState.... like setState()({}) instead of setState({}).
I need to pass variable to modal
The variable is
$row['content']
My modal
<button class="open-AddBookDialog btn btn-default" data-id='.$row['content'].' data-toggle="modal" >Edit</button>
Script
<script>
$(document).on("click", ".open-AddBookDialog", function () {
var myBookId = $(this).data('id');
$(".modal-body #feature").val( myBookId );
alert(myBookId);
$('#myModal').modal('show');
});
</script>
I am getting the first words, No words shown which comes after space
Any experts??
Just make little change: ( add " double quote before and after '.$row['content'].' as below: )
<button class="open-AddBookDialog btn btn-default"
data-id="'.$row['content'].'" data-toggle="modal" >
Edit
</button>