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>
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 two sets of buttons for every package, one for inserting data into my database and the other for deleting data from the database.
When I click the 'Select' button data will be inserted through AJAX and then hide the 'Select' button and display the 'Selected' button. When I click on the 'Selected' button the data will be deleted from the database through an AJAX call. The 'Selected' button will then be hidden and the 'Select' button will be shown again.
All the select & selected buttons are within a PHP while loop so the buttons have the same name but incremental IDs. When I click on one single 'Select' button, the other button is also showing me 'Selected'. I need something to track the each button ID when I click.
<div class="col-sm-2">
<a class="btn btn-primary select-btn select-btn-broadcast" id="<?php echo $id ; ?>" onClick="addintoListBroadcast(this)">Select</a>
<a class="btn btn-primary active-button active-button-broadcast" id="<?php echo $id ; ?>" onClick="deleteintoListBroadcast(this)" style="display: none;">Selected</a>
</div>
<script>
$('.select-btn-broadcast').click(function (e) {
var pkgId = this.id;
//alert(pkgId);
$('.select-btn-broadcast').hide();
$('.active-button-broadcast').show();
});
$('.active-button-broadcast').click(function(e) {
$('.select-btn-broadcast'.show();
$('.active-button-broadcast').hide();
});
</script>
The main issue with your code is because you select all the elements with the given class, not just the one related to the element which was clicked. To fix this use the this keyword to traverse the DOM to find the sibling() a element, and then amend it as required.
Also note that there's several other things you can improve in your code. Firstly, don't use inline CSS. Use the classes you've already applied to the elements to amend their styling in an external stylesheet.
Similarly, don't use inline event handlers such as onclick. Call the relevant functions within the unobtrusive event handlers you've bound through jQuery.
With all that said, here's a working example:
$('.select-btn-broadcast').on('click', function(e) {
$(this).hide().siblings('.active-button-broadcast').show();
// addintoListBroadcast(this);
});
$('.active-button-broadcast').on('click', function(e) {
$(this).hide().siblings('.select-btn-broadcast').show();
// deleteintoListBroadcast(this);
});
.active-button-broadcast {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-2">
<a class="btn btn-primary select-btn select-btn-broadcast">Select</a>
<a class="btn btn-primary active-button active-button-broadcast">Selected</a>
</div>
<div class="col-sm-2">
<a class="btn btn-primary select-btn select-btn-broadcast">Select</a>
<a class="btn btn-primary active-button active-button-broadcast">Selected</a>
</div>
<div class="col-sm-2">
<a class="btn btn-primary select-btn select-btn-broadcast">Select</a>
<a class="btn btn-primary active-button active-button-broadcast">Selected</a>
</div>
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>
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>
Hello I'm trying to delete a row in the database using ajax post but the problem is that the row gets deleted only once per page load. The row get detach from the HTML DOM everything I press the delete button, but the database only deletes one record. I want to delete therecord in the database every time I press the delete button. How can I achieve this ?
My view
<tbody id="tbody"><?php
$count = 1;
foreach($rows as $row):?>
<tr>
<td><?=$count?></td>
<td><a href="basic_table.html#">
<?=$row->FirstName." ".$row->LastName?></a>
</td>
<td class="hidden-phone"><?=$row->Email?></td>
<td><?=$row->Password?></td>
<td><span class="label label-warning label-mini">
<?=date("m/d/Y", strtotime($row->Created))?></span>
</td>
<td>
<button class="btn btn-success btn-xs">
<i class="fa fa-check"></i></button>
<button class="btn btn-primary btn-xs">
<i class="fa fa-pencil"></i>
</button>
<button id="delete" data-id="<?=$row->id?>"
data-url="<?=base_url()?>" class="btn btn-danger
btn-xs"><i class="fa fa-trash-o "></i>
</button>
</td>
</tr><?php
$count++;
endforeach?>
</tbody>
script
$(document).ready(function()
{
$("#tbody").on('click','#delete', function()
{
var id = $("#delete").data("id");
var url = $("#delete").data("url");
$.post(url + "users/delete", { id : id, cache: false } , function()
{
},"json");
$(this).closest('tr').detach();
});
});
Please give the codeigniter controller script
You must change to anchor tag and add preventDefault() to prevent reloading page
$(document).ready(function(){
$("#tbody").on('click','#delete', function(e){
//You must add e.preventDefault() to avoid reloading page
e.preventDefault();
var id = $("#delete").data("id");
var url = $("#delete").data("url");
$.post(url + "users/delete", { id : id, cache: false } , function(){
},"json");
$(this).closest('tr').detach();
});
});