I'm trying to make an update status button which it's submited by ajax, but every single time when I update the status I get redirected on base_url().'/Admin/Jobs/'. It's possible to update the status without getting that redirect?
Code:
<?php if ($key['status'] === '1'): ?>
<?php echo form_open('Admin/update_job_status'); ?>
<input type="hidden" name="id" value="<?= $key['id'] ?>">
<input type="hidden" name="status" value="0">
<button class="btn btn-success btn-simple" id="submit" rel="tooltip" title="Status Active">
<i class="fas fa-eye"></i>
</button>
<?php echo form_close(); ?>
<script>
$(document).ready(function(){
$('#submit').on('click', function(){
var formData = {
'id' : $('#id').val(),
'status' : $('#status').val()
}
$.ajax({
type: 'post',
data: formData,
url: '<?php echo base_url().'/Admin/Jobs/' ?>',
success: function(data){
alert(id);
},
});
});
});
</script>
<?php endif ?>
<?php if (is_null($key['status']) || $key['status'] === '0'): ?>
<?php echo form_open('Admin/update_job_status'); ?>
<input type="hidden" name="id" value="<?= $key['id'] ?>">
<input type="hidden" name="status" value="1">
<button class="btn btn-warning btn-simple" rel="tooltip" title="Status Inactive">
<i class="fas fa-eye-slash "></i>
</button>
<?php echo form_close(); ?>
<script>
$(document).ready(function(){
$('#submit').on('click', function(){
var formData = {
'id' : $('#id').val(),
'status' : $('#status').val()
}
$.ajax({
type: 'post',
data: formData,
url: '<?php echo base_url().'/Admin/Jobs/' ?>',
success: function(data){
alert(id);
},
});
});
});
</script>
<?php endif ?>
You submit event is sent, because it is not stopped. You have to use event.stopPropagation() to prevent "natural" form submit.
$('#submit').on('click', function(event) { // add event parameter
event.preventDefault(); // stop form submit
//...
A button in a form by default is a submit button and if you click on it it will post your form back to the specified url.
You can explicitly set your button to be a normal button by setting the type attribute to button
<button type="button"...
or you can prevent the form from submitting via JavaScript in the event handler
$('#submit').on('click', function(event){
event.preventDefault();// prevents the default action, which is submitting the html form
...
Try this
$(document).ready(function(){
$('#submit').on('click', function(){
var formData = {
'id' : $('#id').val(),
'status' : $('#status').val()
}
$.ajax({
type: 'post',
data: formData,
url: '<?php echo base_url().'/Admin/Jobs/' ?>',
success: function(data) { alert(id); },
});
return false; // disable form submit
}); });
Related
I want to update the child div but all the divs are getting updated on ajax success.
My html
<div class="add_wishlist">
<input type="hidden" name="prd_wishlist" class="prd_wishlist" value="1">
<div class="wishlist_icon">
<p><i class="far fa-heart"></i></p>
</div>
</div>
<div class="add_wishlist">
<input type="hidden" name="prd_wishlist" class="prd_wishlist" value="2">
<div class="wishlist_icon">
<p><i class="far fa-heart"></i></p>
</div>
</div>
Jquery
$('.add_wishlist').click(function(){
var prd_wish = $(this).find("[name='prd_wishlist']").val()
$.ajax({
type: 'post',
url: weburl+'pages/login-script.php',
data: {
prd_wish:prd_wish,
wishlist_submit:'submit',
},
success: function (response) {
$('.add_wishlist').children('.wishlist_icon').html(response)
}
});
})
I also tried to update the code with $('.add_wishlist').children('.wishlist_icon').html(response) but its not working.
Store a reference to the clicked .add_wishlist element in the click handler, then use that within the success handler:
$('.add_wishlist').click(function() {
let $addWishlist = $(this);
let prd_wish = $addWishlist.find("[name='prd_wishlist']").val()
$.ajax({
type: 'post',
url: weburl + 'pages/login-script.php',
data: {
prd_wish: prd_wish,
wishlist_submit: 'submit',
},
success: function(response) {
$addWishlist.children('.wishlist_icon').html(response);
}
});
})
I am getting Id value from my AJAX and I am also able to display it. I set the Id value input text in the AJAX and displaying it on HTML like this <input value="4864" id="compare_id" type="hidden"> Now I have to pass that value to PHP to get the result from database.
Is there any idea how to do it?
AJAX
$(document).ready(function() {
arr = [];
$("[type=checkbox]").click(function() {
$.ajax({
type: "POST",
url: "includes/compare_process.php", //
data: 'users=' + arr,
dataType: 'json',
success: function(msg) {
$("#pics_name,#pics_Id").empty();
$.each(msg, function() {
$("#pics_Id").append("<input type=hidden value=" + this.Id + " id=compare_id name=compare_id>");
//alert(msg.id);
});
},
error: function() {
alert("failure");
}
});
});
});
//tried AJAX
$(document).ready(function(){
$('#search-button').click(function(){
$.ajax( {
type: "GET",
url: 'includes/compare_process.php?key=compare_details',
data: $('#search-form').serialize(),
success: function(response) {
//$('#response').html(response);
alert(response);
}
} );
});
});
PHP
<div class="bg-popup" style="display: none;" id="open_compare_popup">
//popup code here
<?php
$val2=htmlentities($_GET['compare_id']);
echo $val2;
$sql = "SELECT * FROM `request` WHERE Id IN($val2)";
?>
//end popup code here
This output I am getting from AJAX
<form action="#" method="get" id="search-form">
<span id="pics_Id">
<input value="4869" id="compare_id" name="compare_id" type="hidden">//output
<input value="4884" id="compare_id" name="compare_id" type="hidden">//output
<input value="5010" id="compare_id" name="compare_id" type="hidden">//output
</span>
<button class="action action--button action--compare" type="button" id="search-button" name="search-button"><span class="action__text">Compare</span></button>
</form>
I have to pass the input value to PHP after clicking on a button.
I'm working on a project with codeigniter and I decided to implement ajax into the comment section so that the whole page is not refreshed when the user submits his comment. The comment is displayed automatically but the page keeps getting refreshed. I don't know what I am doing wrong here but any help would be appreciated.
MODEL:
public function create_comments($post_id){
$data = array(
'post_id' => $post_id,
'body' => $this->input->post('body'),
'users_id' => $this->session->userdata('user_id')
);
return $this->db->insert('comments',$data);
}
CONTROLLER:
public function create($post_id){
//checking if user is logged in
if(!$this->session->userdata('isLoggedIn')){
redirect('users/login');
}
$slug = $this->input->post('slug');
$data['post'] = $this->post_model->get_posts($slug);
$this->form_validation-> set_rules('body', 'Comment', 'required');
if($this->form_validation->run() === FALSE){
$this->load->view('templates/header');
$this->load->view('posts/view', $data);
$this->load->view('templates/footer');
$this->session->set_flashdata('comment_error', 'comment field is empty comment');
redirect('posts/'.$slug,'refresh');
} else {
$this->comments_model->create_comments($post_id);
redirect('posts/'.$slug);
}
}
VIEW:
<?php echo form_open_multipart('comments/create/'.$post['id'], 'id="comnt"'); ?>
<div class="panel-footer">
<!--//THIS IS THE FIELD WHICH COMMENTS WOULD BE ADDED-->
<div class="">
<input type="hidden" name="slug" value="<?php echo $post['slug']; ?>">
<small class="text-center text-danger"><?php echo form_error('body'); ?></small>
<div class="input-field">
<textarea id="icon_prefix2" name="body" class="materialize-textarea" rows="3"></textarea>
<label for="icon_prefix2">Comments</label>
</div>
<button class="btn waves-effect waves-light" type="submit" name="action" id="submit">comment <i class="material-icons right">send</i></button>
</div>
</div>
</form>
AJAX:
$('#submit').click(function() {
var form_data = {
body: $("#icon_prefix2").val()
};
$.ajax({
url: "<?php echo base_url();?>comments/create",
type: "POST",
data: form_data,
success: function(msg) {
alert("msg");
}
});
return true;
});
Use jquery preventDefault() function to prevent your form to be submitted
$('#submit').click(function(e) {
e.preventDefault();
var form_data = {
body: $("#icon_prefix2").val()
};
$.ajax({
url: "<?php echo base_url();?>"+"comments/create",
type: "POST",
data: form_data,
success: function(msg) {
alert("msg");
}
});
return true;
});
Try the done property to set the success handler. Also, as this is an event over a DOM element, you should attach it when the DOM is ready:
$(document).ready(function() {
$('#submit').click(function(event) {
var form_data = {
body: $("#icon_prefix2").val()
};
$.ajax({
url: "<?php echo base_url();?>comments/create",
type: "POST",
data: form_data,
}).done(function(msg) {
alert(msg);
}).fail(jqXHR, textStatus) {
alert('ERROR: ' + textStatus);
});
// return is not necessary here
// return true;
});
$("#comnt").submit(function(e) { // Prevent the form submitting
e.preventDefault();
});
});
As this already attaches an event, you should remove the onclick="comment()" property from your button:
<button class="btn waves-effect waves-light" type="submit" id="submit">comment
<i class="material-icons right">send</i>
</button>
Try this hope it work
$('#submit').click(function(event) {
e.preventDefault(); //stop actual action of browser
var form_data = {
body: $("#icon_prefix2").val()
};
$.ajax({
url: "<?php echo base_url();?>comments/create",
type: "POST",
data: form_data,
success: function(msg) {
alert("msg");
}
});
return true;
});
Change button type button instead of submit
<button class="btn waves-effect waves-light" type="button" name="action" id="submit">comment
<i class="material-icons right">send</i>
</button>
Hello can you guys give a quick tip on what I'm doing wrong here.
I want to pass $_POST['url'] to a php file via ajax.
ajax:
<script>
$('#checkUrl').click(function() {
$('#loader').css("display","block");
$('#form').submit(function (e) {
e.preventDefault();
$.ajax({
url: 'example.php',
data: {url:'<?php echo $_POST['url']; ?>'},
type: 'POST',
success: function(data) {
$('#loader').css("display","none");
$('#reponse').replaceWith(data);
}
});
});
});
</script>
Form
<form id="form" method="post">
<input type="search" size="35" id="url" name="url" placeholder="www.myblogurl.com" class="btn btn-mod btn-gray btn-medium btn-round" />
<span class="hidden-xs"> </span>
<input type="submit" value="Submit" id="checkUrl" class="btn btn-mod btn-medium btn-round mb-xs-10">
</form>
I know I'm calling the php file, as I can var_dump random text from it. But var_dump($_POST); is empty.
array(1) { ["url"]=> string(0) "" }
your code should be
<script>
//$('#checkUrl').click(function() { // no need to use click event here enough to use submit for form
$('#form').submit(function (e) {
$('#loader').css("display","block");
e.preventDefault();
$.ajax({
url: 'example.php',
data: {url:$(this).find('#url').val()}, // while ID must be unique you can use $('#url').val(); directly
type: 'POST',
success: function(data) {
$('#loader').css("display","none");
$('#reponse').replaceWith(data);
}
});
});
//});
</script>
and in php
<?php
echo $_POST['url'];
?>
Try this
data: {url:$('#url').val()},
rather then echoing php variable you can get url using jQuery.
<?php $count = 1; foreach ($settings[$slug] as $slug): ?>
<div data-toggle="buttons-radio" class="btn-group">
<button id="enable" value="1" class="btn btn-success active" type="button" name="includeicon"><i class="icon-ok icon-white"></i></button>
<button id="disable" value="0" class="btn" type="button" name="includeicon"><i class="icon-remove"></i></button>
</div>
<?phpendforeach?>
$(document).ready(function(){
$("#enable").click(function(event) {
var slugid = $('#slugid').val();
$.ajax({
url: SITE_URL + 'admin/PluginConf/enable/?'+slugid,
type: "POST",
data : {'slugid' : slugid},
success: function(data) {
}
});
});
$("#disable").click(function(event) {
var slugid = $('#slugid').val();
$.ajax({
url: SITE_URL + 'admin/PluginConf/disable/?'+slugid,
type: "POST",
data : {'slugid' : slugid},
success: function(data) {
}
});
});
});
I am passing button id in jquery, but ajax is getting called only for first button. For second and others it is not getting called, can anyone help me out in this?
Thanks
You have an id of enable and disable in a foreach. If the loop ever executes more than once you will then have multiple buttons with the same id. IDs have to be unique! Rather use something else to identify the click:
I suggest adding an enable class to the enable button and a disable class to the disable button, then catch the events like this:
$('.enable').click(function() {
// code in here
});
$('.disable').click(function() {
// code in here
});
Don't bind the click event(s) for multiple items by id! Ids have to be unique idetifiers.
<?php $count = 1; foreach ($settings[$slug] as $slug): ?>
<div data-toggle="buttons-radio" class="btn-group">
<button value="1" class="enable btn btn-success active" type="button" name="includeicon"><i class="icon-ok icon-white"></i></button>
<button value="0" class="btn disable" type="button" name="includeicon"><i class="icon-remove"></i></button>
</div>
<?phpendforeach?>
$(document).ready(function(){
$(".enable").click(function(event) {
var slugid = $('#slugid').val();
$.ajax({
url: SITE_URL + 'admin/xervPluginConf/enable/?'+slugid,
type: "POST",
data : {'slugid' : slugid},
success: function(data) {
}
});
});
$(".disable").click(function(event) {
var slugid = $('#slugid').val();
$.ajax({
url: SITE_URL + 'admin/xervPluginConf/disable/?'+slugid,
type: "POST",
data : {'slugid' : slugid},
success: function(data) {
}
});
});
});
You are using id what is not correct when several elements in your case buttons have the same id.When you use foreach loop you create multiple buttons with the same particular id. ID means that something is unique, and only one element can have that specyfic id. I assume you should make a class for this buttons and change your script code with having this in mind. Here what I suggest. Hope it helps.
<?php $count = 1; foreach ($settings[$slug] as $slug): ?>
<div data-toggle="buttons-radio" class="btn-group">
<button value="1" class="btn btn-success active enable" type="button" name="includeicon"><i class="icon-ok icon-white"></i></button>
<button value="0" class="btn disable" type="button" name="includeicon"><i class="icon-remove"></i></button>
</div>
<?php endforeach; ?>
$(document).ready(function(){
$(".enable").click(function(event) {
var slugid = $('#slugid').val();
$.ajax({
url: SITE_URL + 'admin/xervPluginConf/enable/?'+slugid,
type: "POST",
data : {'slugid' : slugid},
success: function(data) {
}
});
});
$(".disable").click(function(event) {
var slugid = $('#slugid').val();
$.ajax({
url: SITE_URL + 'admin/xervPluginConf/disable/?'+slugid,
type: "POST",
data : {'slugid' : slugid},
success: function(data) {
}
});
});
});