JQuery on click event not always firing? - javascript

I have the following ajax call that fires on a click but it seems to be intermittently working and I can't seem to pinpoint the issue...
It seems to be working perfectly one minute and the next not even registering a click?
<input class="btn btn-success" type="button" value="Assign" id="assignJounrey<?php echo $callID; ?>" name="assignJounrey<?php echo $callID; ?>">
<input class="btn btn-danger" type="button" value="Unassign" id="unassignJounrey<?php echo $callID; ?>" name="unassignJounrey<?php echo $callID; ?>" style="display: none;">
<script>
$(document).ready(function(){
$('#assignJounrey<?php echo $callID; ?>').unbind().click(function(){
$.ajax({
type: 'POST',
url: 'assign-journey-calls.php?JourneyID=<?php echo $journeyID; ?>&Call=<?php echo $callID; ?>',
success: function(){
$("#assignJounrey<?php echo $callID; ?>").fadeOut();
$("#unassignJounrey<?php echo $callID; ?>").show();
}
});
});
$('#unassignJounrey<?php echo $callID; ?>').unbind().click(function(){
$.ajax({
type: 'POST',
url: 'unassign-journey-calls.php?JourneyID=<?php echo $journeyID; ?>&Call=<?php echo $callID; ?>',
success: function(){
$("#unassignJounrey<?php echo $callID; ?>").fadeOut();
$("#assignJounrey<?php echo $callID; ?>").show();
}
});
});
});
</script>
Is there anything that i am doing wrong here?

Related

AJAX add to cart code gives no error but not running with PHP MYSQL

I am trying hard to find the problem, here is my ajax code
$(document).ready(function(){
$(document).on("click", "#addItem", function(e){
e.preventDefault();
var form = $(this).closest(".form-submit");
var id = form.find(".pid").val();
var name = form.find(".pname").val();
var price = form.find(".pprice").val();
var image = form.find(".pimage").val();
var code = form.find(".pcode").val();
$.ajax({
url: "action.php",
method: "post",
data: {pid:id, pname:name, pprice:price, pimage:image, pcode:code},
success:function(response){
$(".alert-message").html(response);
window.scrollTo(20,2);
load_cart_item_number();
}
});
});
load_cart_item_number();
function load_cart_item_number() {
$.ajax({
url: "action.php",
method: "get",
data: {cartItem: "cart_item"},
success:function(response){
$("#cart-item").html(response);
}
});
}
});
and HTML form :
<form>
<input type="hidden" class="pid" value="<?php echo $row['product_id'] ?>">
<input type="hidden" class="pname" value="<?php echo $row['product_name'] ?>">
<input type="hidden" class="pprice" value="<?php echo $row['product_price'] ?>">
<input type="hidden" class="pimage" value="<?php echo $row['product_image'] ?>">
<input type="hidden" class="pcode" value="<?php echo $row['product_code'] ?>">
<button id="addItem" class="btn add-to-cart">Add To Cart</button>
</form>
the only problem is add to cart button is not working and there is no error in console showing.

update modal bootstrap and ajax

-when i update with ajax , he changed but he only took to 'id' not the new variable
But I want to insert my E-Mail to database through Ajax. I don't want my page to get redirected, because every time the page got refreshed, null value got inserted to the database..
1)and ajax
function editdata(str){
var id= str;
var name = $('#nameofequipe-'+str).val();
$.ajax({
type:"post",
url: "<?php echo API;?>equipe/update.php",
data:"nameofequipe="+name+"&id="+id,
success:function(data){
alert('success update data ');}
2)and modal bootstrap
<div
class="modal fade"
id="edit-<?php echo $row['id']; ?>"
role="dialog"
aria-labelledby="updatelLabel-<?php echo $row['id']; ?>
<input
type="hidden"
id="<?php echo $row['id']; ?>"
value="<?php echo $row['id']; ?>" >
<input
type="text"
class="form-control"
id="nameofequipe-<?php echo $row['id']; ?>"
value="<?php echo $row['equipe']; ?>">
if somoene know how i can do This can He help me
//use this in script section
function editdata(str){
var id= str;
var name = $('#nameofequipe-'+str).val();
$.ajax({
dataType: "json",
type:"post",
url: "<?php echo API;?>equipe/update.php",
data:"{nameofequipe:"+name+",id:"+id+"}",
success:function(data){
alert('success update data ');
}
//whereas this one in your PHP file where you use this data nameOfEquipe and Id to update you database.
if(isset($_POST['nameofequipe'], $_POST['id']) {
$nameOfEquip=$_POST['nameofequipe'];
$id=$_POST['id'];
}
This Is all code
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
</button>
</div>
<form>
<div class="modal-body">
<input type="hidden" id="<?php echo $row['id']; ?>" value="<?php echo $row['id']; ?>" >
<input type="text" class="form-control" name="nameofequipe-<?php echo $row['id']; ?>" value="<?php echo $row['equipe']; ?>">
</div>
<button type="submit" onclick='editdata(<?php echo $row['id']; ?>)' class="btn btn-primary">Save changes</button>
</div>
</form>
ajax and js
function editdata(str)
{
var id= str;
var name= $('#nameofequipe-'+str).val();
$.ajax ({
type:"post",
url: "<?php echo API;?>equipe/update.php",
data:"nameofequipe="+name+"&id="+id,
success: function(data){
alert("Data Save: " + data);
}
}); }
update. PHP
$id = $_POST['id'];
$name=$_POST['nameofequipe'];
$result = $o->SelectQuery("UPDATE rh_equipes SET equipe='$name' WHERE id='$id'");
if($result){
echo 'data update';
}

how to refresh the div content without the page reloads

I have the modal with form on click of save it saves in the temporary page and the modal has to close the values should get displayed in the div content.now it is working fine but when the page reloads the content is displaying.i don't want to reload the page
html code:
<div class="content">
<?php if($load_data): ?>
<?php foreach($load_data as $data): ?>
<div class="row modal_bg">
<div class="col-md-3">
<span class="jd_name"><?php echo $data->first_name; ?></span>
<span class="jd_name" ><?php echo $data->last_name; ?></span>
<p class="loc"><?php echo $data->location; ?></p>
</div>
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
ajax code:
jQuery.ajax(
{
type: "POST",
url: "<?php echo base_url(); ?>" + "page/datapage/",
data: formData,
processData: false,
contentType: false,
success: function(res)
{
$('#myModal').modal('hide');
console.log(res);
if(res)
{
url:"<?php echo base_url(); ?>page/datapage/<?php echo $per->id; ?>";
}
},
error: function(errResponse)
{
console.log(errResponse);
}
});
how to solve this issue ,without page reload i want to display the content.can anyone suggest me how to do.
you need to use html();
success: function(res)
{
$('#yourTargetId').html(res);

How do I pass multiple PHP variables to ajax function onclick

I am trying to send data to one of my function within a controller using ajax but the error at the bottom (in the image) wont let the variables pass.
I'm using the codeigniter framework and this ajax function is in my view.
$(document).ready(function(){
function myButton(id1, id2, id3){
$.ajax({
method: "POST",
url: "<?php echo base_url() ?>controller/function/"+id1+"/"+di2+"/"+id3,
data: {
id1:id1,
id2:id2,
id3:id3
}
dataType : 'text',
success:function(data){
location.reload();
});
}
}
<div align="center">
<a>
<button onclick="myButton('<?php echo $id1; ?>', '<?php echo $id2; ?>', '<?php echo $id3; ?>')">
<img src="<?php echo base_url();?>images/button.png" >
</button>
</a>
</div>
Uncaught ReferenceError: myButton is not defined(…)
Define the function outside of $(document).ready()
Currently, the function isn't being defined until after the dom is loaded, meaning that there is no definition when the button is setup.
This should look like this:
<script>
var myButton = function(id1, id2, id3){
$.ajax({
method: "POST",
url: "<?php echo base_url(); ?>controller/function/"+id1+"/"+id2+"/"+id3,
data: {
id1:id1,
id2:id2,
id3:id3
},
dataType : 'text',
success:function(data){
location.reload();
}
});
};
$(document).ready(function(){
//This isn't really needed
});
</script>
<div align="center">
<a>
<button onclick="myButton('<?php echo $id1; ?>', '<?php echo $id2; ?>', '<?php echo $id3; ?>')">
<img src="<?php echo base_url();?>images/button.png" >
</button>
</a>
</div>
You're declaring myButton within the inner document.ready function. You need to declare it in the global scope.
<script>
// Define in global scope
function myButton(id1, id2, id3){
$.ajax({
method: "POST",
url: "<?php echo base_url() ?>controller/function/"+id1+"/"+di2+"/"+id3,
data: {
id1:id1,
id2:id2,
id3:id3
}
dataType : 'text',
success:function(data){
location.reload();
});
}
</script>
<div align="center">
<a>
<button onclick="myButton('<?php echo $id1; ?>', '<?php echo $id2; ?>', '<?php echo $id3; ?>')">
<img src="<?php echo base_url();?>images/button.png" >
</button>
</a>
</div>
The answer may be one charcter ; so use <?php echo base_url(); ?> this will print invalid Javascript and may be more !!!
$(document).ready(function(){
function myButton(id1, id2, id3){
$.ajax({
method: "POST",
url: "<?php echo base_url(); ?>controller/function/"+id1+"/"+di2+"/"+id3,
data: {
id1:id1,
id2:id2,
id3:id3
}
dataType : 'text',
success:function(data){
location.reload();
});
}
}
<div align="center">
<a>
<button onclick="myButton('<?php echo $id1; ?>', '<?php echo $id2; ?>', '<?php echo $id3; ?>')">
<img src="<?php echo base_url();?>images/button.png" >
</button>
</a>
</div>

Problen with my ajax code to display comment

The code below is a attempt to create a comment system using ajax and php here php part works well comment is inserted into table but seems I didn't get my hands on ajax yet. Ajax does not work comment is not shown unless I reload page. On reloading page comment appears perfectly where it should be so help me on fixing my ajax code.
<?php
if(isset($_POST['content'])) {
$comment=strip_tags($_POST['content']);
$com = $db->prepare("INSERT INTO comments (comment,userto, userfrom, blog) VALUES (:comment, :userto, :userfrom, :blog)");
$com->execute(array(':comment'=>$comment,':userto'=>$userid,':userfrom'=>$uid,':blog'=>$blogId));
}
?>
<div class='db'>
<table>
<tr>
<td>
<img src='<?php echo $tar['profile_pic']; ?>' style='width:40px;height:40px;'/>
</td>
<td>
<a href='<?php echo $tar['username']; ?>'><?php echo $tar['first_name'].' '.$tar['last_name']; ?></a>
<p><?php echo $tar['comment']; ?></p>
</td>
<td>
<a href='#' id='<?php echo $tar['id']; ?>' class='delcomment' style='color:#555555;text-decoration:none;' title='Delete'>X</a>
</td>
</tr>
</table>
</div>
<script type="text/javascript" >
$(function() {
$(".comment_button").click(function() {
var test = $("#content").val();
var dataString = 'content=' + test;
if (test == '') {
alert("Please Enter Some Text");
} else {
$.ajax({
type: "POST",
url: "",
data: dataString,
cache: false,
success: function(html) {
$(".db").show(html);
}
});
}
return false;
});
});
</script>
<form method='post' name='form' action='' class='commentbox'>
<textarea cols='30' rows='2' name='content' id='content'></textarea><br />
<input type='submit' value='Comment' name='submit'class='comment_button'/>
</form>
You dont need to use the variable dataString and you need to change the $.ajax() function for this:
var test = $("#content").val();
$.ajax({
type: "POST",
url: "",
data: {
content: test;
},
success: function(response) {
$(".db").append(response);
}
});
change the following line to avoid page refreshes:
$(".comment_button").click(function(event) {
event.preventDefault();
or change the attrubute type="submit" of your button for type="button", like this:
<button type='button' name='submit' class='comment_button'>Comment</button>
I hope it helps you...
Try this.
And make sure jQuery library is also included in your page.
HTML PAGE
<script type="text/javascript" >
$(function() {
$(".comment_button").click(function() {
var test = $("#content").val();
var comment = test;
if (test == '') {
alert("Please Enter Some Text");
} else {
$.ajax({
type: "POST",
url: "process.php",
data: {content : comment},
cache: false,
success: function(html) {
$("#db").append(html);
}
});
}
return false;
});
});
</script>
<div id="db">
<!--Returned comment will appear here -->
</div>
<form method='post' name='form' action='process.php' class='commentbox'>
<textarea cols='30' rows='2' name='content' id='content'></textarea><br />
<input type='submit' value='Comment' name='submit'class='comment_button'/>
</form>
PHP PAGE
process.php
<?php
if(isset($_POST['content'])) {
$comment=strip_tags($_POST['content']);
$com = $db->prepare("INSERT INTO comments (comment,userto, userfrom, blog) VALUES (:comment, :userto, :userfrom, :blog)");
$com->execute(array(':comment'=>$comment,':userto'=>$userid,':userfrom'=>$uid,':blog'=>$blogId));
}
?>
<table>
<tr>
<td>
<img src='<?php echo $tar['profile_pic']; ?>' style='width:40px;height:40px;'/>
</td>
<td>
<a href='<?php echo $tar['username']; ?>'><?php echo $tar['first_name'].' '.$tar['last_name']; ?></a>
<p><?php echo $tar['comment']; ?></p>
</td>
<td>
<a href='#' id='<?php echo $tar['id']; ?>' class='delcomment' style='color:#555555;text-decoration:none;' title='Delete'>X</a>
</td>
</tr>
</table>
Use
$(".db").append(html);
if you already have existing comments like:
<div class = "db">
Comment 1
Comment 2
...
</div>
.append will add more HTML to existing tag.

Categories