i have a dropdown with this code:
and other block:
<script type="text/javascript">
/*Primo pulsante attributo*/
$(document).ready(function() {
$('#bloccoetapulsante').click(function() {
var dati = $("#campo").val();
$.ajax({
url: "database/bloccoattributi.php",
data: 'dati=' + dati,
method: "POST",
dataType: "HTML",
cache: false,
success: function(data) {
alert("Attributo inserito");
}
});
});
});
</script>
<div class="row">
<div class="col-lg-3">
<div class="input-group">
<input name="campo" id="campo" type="text" class="form-control" placeholder="Inserisci altro">
<span class="input-group-btn">
<button class="btn btn-default" type="button" id="bloccoetapulsante"><span class="glyphicon glyphicon-plus"></span></button>
</span>
</div>
<!-- /input-group -->
How can i update dropdown, without reload page, after add a new value with button (bloccoetapulsante)?
Thanks
success: function (data) {
$("#id").html("Attributo inserito"); // #id as a dropdown Id
}
or
$("#id").append("Attributo inserito");
Simply add $('.selectpicker').selectpicker('refresh'); after ajax call. it will refresh Bootstrap selectbox
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 have an edit modal with three drop down select options
Currently having trouble showing the appropriate option on edit button click, my input fields have no issue.
heres my working add function for reference, all three option tags are working in this way.
$(document).on('click', '.add_category', function(e){
e.preventDefault();
var category_data = {
'category_name': $('.category_name').val(),
'category_description': $('.category_description').val(),
'category_description': $('.category_description').val(),
'config_view_type': $('.config_view_type').val(),
'config_edit_type': $('.config_edit_type').val(),
'bbrmode_view_type': $('.bbrmode_view_type').val(),
}
//token taken from laravel documentation
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
type: "POST",
url: "/clinical/bbr-category-configuration",
data: category_data,
dataType: "json",
success: function (response){
console.log(response);
if(response.status == 400) {
$('#category_formCheck').html("");
$('#category_formCheck').addClass('alert alert-danger');
$.each(response.errors, function (key, err_values) {
$('#category_formCheck').append('<li>'+err_values+'</li>');
});
}
else
{
$('#category_notif').html("");
$('#category_notif').addClass('alert alert-success');
$('#category_notif').text(response.message);
$('#createCategory').modal('hide');
fetchcategory();
}
}
});
});
also, in my edit category button, I went ahead and used console.log to show that the option values can be read form the table:
I tried to add the three in my edit display
$(document).on('click','.edit_category',function (e) {
e.preventDefault();
var cat_id = $(this).val();
console.log(cat_id);
$('#editCategoryModal').modal('show');
$.ajax({
type: "GET",
url: "/clinical/bbr-category-configuration-edit/"+cat_id,
success: function (response) {
console.log(response);
if(response.status == 404) {
$('#success_message').html("");
$('#success_message').addClass('alert alert-danger');
$('#success_message').text(response.message);
} else {
$('#edit_category_name').val(response.category_edit.category_name);
$('#edit_category_description').val(response.category_edit.category_description);
$('#edit_cat_id').val(response.category_edit.category_id);
//new code
$('#edit_config_view_type').val(response.category_edit.config_view_typ);
$('#edit_config_edit_type').val(response.category_edit.config_edit_type);
$('#edit_bbrmode_view_type').val(response.category_edit.bbrmode_view_type);
}
}
});
});
modal fields:
<input type="text" id="edit_category_name" class="form-control form-group w-100" placeholder="Category Name">
<textarea id="edit_category_description" class="form-control w-100" placeholder="Category Description" cols="50" rows="10"></textarea>
<div class="container">
<div class="row mb-4">
<div class="col-md-4">
<small class="font-weight-bold">Config Access View Type:</small>
</div>
<div class="col-md-4">
<div class="form-group">
<select id="edit_config_view_type" class="edit_config_view_type form-control w-100" name="config_view">
{{-- <option id="edit_category_name" class="form-control form-group w-100" value="asdasd"></option> --}}
<option>Public</option>
<option>Restricted</option>
</select>
</div>
</div>
<div class="col-md-4 text-center">
<button id="edit_config_view_type_r" type="submit" class="btn btn-outline-secondary" data-toggle="modal" data-target="#new_category"><i class="fas fa-plus-circle "></i> Add Recipient</button>
</div>
</div>
</div>
tried adding <option id="edit_config_view_type" ></option> but to no avail.
Notes:
have the option value show up in the edit button like the name/description textfields.
the option needs to be the same as the column values from the table.
category_name and category_description are already read from the table, I just need to have that effect on a dropdown
also added a shortcut on the three columns when added: P & R and they get displayed as Public and restricted
This question is a bit on the advice side, any help would be appreciated, thank you
I Want to receive the values from the CKEditor. I Have written this HTML code
<div class="col-md-12">
<div class="form-group">
<label for="Image" class="control-label">Item Description </label>
<textarea id="item_description" name="item_description" rows="10" cols="80" style="resize:none"></textarea>
</div>
<!-- /.form-group -->
</div>
<div class="col-md-2">
<input type="submit" name="submit" id="Add" value="Add Items" class="btn btn-success">
</div>
This is the JQuery Code to get the value of the CKEditor
$("#Add").on("click", function(e) {
e.preventDefault();
var item_description = CKEDITOR.instances["item_description"].getData();
var formData = new FormData($("#form1")[0]); //It automatically collects all fields from form
$.ajax({
url: "'.base_url().'Home/add_items",
type: "post",
data: formData,
success: function(output) {
alert('Added'):
}
});
});
And this the Home controller but when I here access the item_description
value is empty.
<?php
class Home extends MY_Controller
{
public function add_items()
{
echo $title = $this->input->post('item_description');
//$this->show('admin/add_items.php');
}
}
?>
Modify your javascript codes, like this :
$("#Add").on("click", function(e) {
e.preventDefault();
var formData = new FormData($("#form1")[0]); //It automatically collects all fields from form
formData.append('item_description', CKEDITOR.instances['item_description'].getData());
$.ajax({
url: "<?=base_url()?>Home/add_items",
type: "post",
data: formData,
success: function(output) {
alert(output);
}
});
});
guys, I am trying to submit my form using ajax but I don't know exactly what happened it's not posting the values to my table in the database, This is the first time I am using ajax for form submit can anyone help me what mistake I have done.
Here is my view code:
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro|Open+Sans+Condensed:300|Raleway' rel='stylesheet' type='text/css'>
<script type='text/javascript' src="<?php echo base_url(); ?>assets/theme1/js/jquery-2.1.3.min.js"></script>
<!-- <script type="text/javascript"> -->
<script type = "text/javascript">
// Ajax post
$(document).ready(function() {
$('form').submit(function(e) {
e.preventDefault();
var organisation_name = $("input#organisation_name").val();
jQuery.ajax({
type: "POST",
url: "<?php echo base_url(); ?>" + "Organisation/createOrg",
dataType: 'json',
data: { organisation_name: organisation_name },
success: function(res) {
if (res) {
// Show Entered Value
jQuery("div#result").show();
jQuery("div#value").html(res.organisation_name);
}
}
});
});
});
</script>
<div class="modal fade" id="createGroup" tabindex="-1" role="dialog" aria-labelledby="createGroup" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content" id="modal-content">
<form action="" id="user-groups-create" class="form-horizontal" method="post">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Create a New Organisation</h4>
</div>
<div class="modal-body" id="modal-body">
<div class="form-group">
<label for="group_name" class="col-sm-4 control-label">New Organisation Name : </label>
<div class="col-md-8">
<input type="text" id="organisation_name" name="organisation_name" class="form-control" placeholder="Organisation Name" />
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" value="submit" class="btn btn-primary submit" id="submit">Create Organisation</button>
</div>
</form>
</div>
</div>
</div>
Here is my controller's method createOrg:
public function createOrg() {
$this->form_validation->set_error_delimiters('<div class="error">', '</div>');
//Validating Name Field
$this->form_validation->set_rules('organisation_name', 'organisation_name', 'required|min_length[5]|max_length[15]');
if ($this->form_validation->run() == FALSE) {
$this->session->set_flashdata('error', 'Organisation name need to be more than 3 characters and less than 15.');
redirect('Organisation', $error);
} else {
//Setting values for tabel columns
$data = array(
'organisation_name' => $this->input->post('organisation_name')
);
//Transfering data to Model
$this->Org_model->orgInsert($data);
$this->session->set_flashdata('success', 'Organisation created.');
//Loading View
redirect('Organisation');
}
}
Here is my Model's method orgInsert:
function orgInsert($data) {
// Inserting in Table(organisation)
$this->db->insert('organisation', $data);
}
Can anyone help me what mistake I have done and I have checked my code properly I didn't find exactly where I have done a mistake and I want my modal popup should be there after submitting it until a user clicks on the close button. when I try to keep alert after jQuery.ajax({ it is not coming alert.. and I can able to get the value from var organisation_name in alert...
Thanks in advance.
Hope this will work you :
$('#user-groups-create').on('submit',function(e){
var organisation_name = $("#organisation_name").val();
$.ajax({
type: "POST",
url: "<?=site_url('Organisation/createOrg');?>",
dataType: 'json',
data: {'organisation_name': organisation_name},
success: function(res) {
if (res)
{
alert(res);
window.location.href = "<?=site_url('Organisation');?>";
$("div#result").show();
$("div#value").html(res.organisation_name);
}
},
});
e.preventDefault();
});
Your controller's method createOrg should be like this :
public function createOrg()
{
$data = array(
'organisation_name' => $this->input->post('organisation_name')
);
//Transfering data to Model
$this->Org_model->orgInsert($data);
$this->session->set_flashdata('success', 'Organisation created.');
echo json_encode($data);
exit;
}
}
Working by changing the script to like this
<script type="text/javascript">
// Ajax post
$(document).ready(function() {
$('form').submit(function(e){
e.preventDefault();
var organisation_name = $("input#organisation_name").val();
$.ajax({
type: "POST",
url: "<?php echo base_url(); ?>" + "Organisation/createOrg",
dataType: "html",
data: {organisation_name: organisation_name},
success: function(data) {
alert('success');
}
});
});
});
</script>
I'm facing a problem using the FancyBox plugin. I'm trying to submit a form with Ajax and just print a nice little success message, no validation just yet, trying to get it to work. I can submit with jQuery and display the value of any input within the FancyBox. However when I try to execute Ajax it just closes the FancyBox down. I'm not an expert...
The FancyBox's content is generated using Ajax because it requires data from a database.
Here are the important code parts: (Texts are German...)
The file loaded into the FancyBox using Ajax
<script>
$("#submit").click(function() {
var login = $("#login").val();
$.ajax({
type: "POST",
url: "handleuseredit.php",
cache: false,
data: { login: login },
success: function(data){
if(data=='ok')
{
alert('Richtig.');
}
else
{
alert('Falsche Benutzername/Passwort Kombination.');
}
}
});
});
</script>
<div class="login">
<div class="widget_header">
<h4 class="widget_header_title wwIcon i_16_wysiwyg">Benutzer Bearbeiten</h4>
</div>
<div class="widget_contents lgNoPadding">
<form method="post" id="form-edit">
<p id="errormessagehere"></p>
<div class="line_grid">
<div class="g_3 g_3M"><span class="label">Benutzername</span></div>
<div class="g_9 g_9M">
<input type="text" name="login" id="login" value="<?php echo getusername($_GET['u']) ?>" class="simple_field tooltip" placeholder="Benutzername" autocomplete="off"></div>
<div class="clear"></div>
</div>
<div class="line_grid">
<div class="g_3 g_3M"><span class="label">Passwort</span></div>
<div class="g_9 g_9M">
********
</div>
<div class="clear"></div>
</div>
<div class="line_grid">
<div class="g_6">Abschicken
</div>
<div class="clear"></div>
</div>
</form>
</div>
</div>
Here's how I call the Fancy box
$(document).ready(function() {
$(".fancybox").fancybox({
'scrolling' : 'no',
'padding' : 0,
'titleShow' : false
});
});
handleuseredit.php just echoes "ok" to fullfill the data variable requirement.
You can test something like this with the version 2 of fancybox (http://fancyapps.com/fancybox/):
<script>
$("#submit").click(function() {
var login = $("#login").val();
$.ajax({
type: "POST",
url: "handleuseredit.php",
cache: false,
data: { login: login },
success: function(data){
if(data=='ok')
{
$.fancybox( '<h1>Richtig.</h1>' );
}
else
{
$.fancybox( '<h1>Falsche Benutzername/Passwort Kombination.</h1>' );
}
}
});
});
</script>