Develop Reference

Asp.Net Core - Pass Ckeditor textarea value to controller with Ajax?

I am using the ckeditor version 4 plugin ...
I want to send ckeditot values ​​to the controller but whatever I do sends a null value!!
I did a lot of searching, tried all the methods on the site, but it didn't work:(
I downloaded the plugin again from the site but it still failed?
Notice: When I use "Id" instead of "asp-for", the value is sent, but I need asp-for....
Html Form :
#model Baya.Core.ViewModels.AddProductViewModel
<form id="ProductForm" method="post" enctype="multipart/form-data">
<div class="form-group">
<label class="control-label">desc</label>
<textarea asp-for="Description" class="form-control"></textarea>
</div>
<div class="modal-footer">
<button type="button" onclick="return ValidateForm()" class="btn btn-info waves-effect">save</button>
<button type="button" class="btn btn-danger waves-effect"
data-dismiss="modal">
cancel
</button>
</div>
JavaScript Code:
$(function () {
/* $('#Description').ckeditor();*/
CKEDITOR.replace('Description');
});
function ValidateForm() {
let Form = $("#ProductForm")[0];
let Form_Data = new FormData(Form);
var descProduct = CKEDITOR.instances.Description.getData();
Form_Data.append("Description", descProduct);
$.ajax({
url: '/AdminPanel/Product/AddAndUpdateProduct',
data: Form_Data,
contentType: false,
processData: false,
type: 'POST',
success: function (data) {
//code
}
});
}
Controller :
[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult AddAndUpdateProduct(AddProductViewModel model)
{
//some code
}
This image is also output with breakpoint..

I Used This Code:
CKEDITOR.instances.Description.updateElement();
var descProduct = document.getElementById('Description').value;
Instead of this code:
var descProduct = CKEDITOR.instances.Description.getData();
It's worked

Delete Field in Datatable with ajax in Codeiginiter without refreshing page

I want to delete some field in datatable using 'a' tag as a button. If that button is pressed, it will delete field in my database using ajax without refreshing page but if i click the button, it doesn't do anything. I am weak in JS or jQuery, I hope you guys will help me, thanks.
This is my JS
$('#delete-agenda').click(function(e) {
e.preventDefault();
var data = {};
data['id_itenerary'] = $(this).attr('value');
$.ajax({
url: 'http://localhost/pandansari/admin/single_trip/delete_agenda',
type: 'post',
data: data
});
});
This is my 'a' tag
<a id="delete-agenda" class="btn btn-sm btn-danger" value="<?php echo $agenda['id_itenerary'] ?>">Delete</a>
This is my controller function
public function delete_agenda() {
$id_itenerary = $this->input->post('id_itenerary');
$this->agenda_model->delete_agenda($id_itenerary);
}
This is my model function
public function delete_agenda($id_itenerary) {
$this->db->where('id_itenerary', $id_itenerary);
$this->db->delete('tb_itenerary');
}

Try this
HTML:
<a id="delete-agenda" href="#" class="btn btn-sm btn-danger" data-id="<?php echo $agenda['id_itenerary'] ?>">Delete</a>
JS:
$(document).ready(function() {
$('#delete-agenda').click(function(e){
e.preventDefault();
var id = $(this).attr('data-id');
$.ajax({
url: 'http://localhost/pandansari/admin/single_trip/delete_agenda',
type: 'post',
data: { 'id_itenerary' : id }
});
});
});
You will still have to remove the datatable entry from the table; otherwise the change will only be apparent on refresh/reload.

$('#delete-agenda').on('submit',function(e){
e.preventDefault();
//write your remaining code here
});

JQuery not working? Retrieve data from mysql database with no page refresh

i am working on a project and i am currently trying to implement a search function, after user type in what they want to search for in input box, they will click the "search" button and then the data will populate the existing table i have on my page. However, i do not want the page to refresh whenever a user click on search.
Search button on my search.jsp
<button class="btn btn-success btn-labeled fa fa-search" type ="submit" name="action" value="search" id ="search" >Search</button>
JavaScript / AJAX
$('#search').click(function () {
alert("phase 1");
$search = document.getElementById("search").value;
alert("phase 2");
$.post("editAction", { search: $search; }, function (data) {
alert("phase 3");
$('#dt-data').html(data);
});
alert("phase 4");
});
editAction.java is where all the logic is and dt-data is the table i want to populate the data with
After running the codes, the alerts do not show & the page still refreshes but the table was still populated with the correct results. What am i doing wrong here? Any help appreciated, i am still new with js and AJAX

Try this:
HTML:
<button class="btn btn-success btn-labeled fa fa-search" type ="submit" name="action" value="search" id ="search" >Search</button>
JavaScript / AJAX:
<script type="text/javascript">
jQuery(document).ready(function($){
$("#search").on("click",function(){
$search = $("#search").val();
$.ajax({
url: "editAction",
type: "POST",
data: { search: $search},
success: function(data){
//do action
alert("phase 3");
$('#dt-data').html(data);
},
error: function(){
// do action
alert("phase 4");
}
});
});
});
</script>

this is because you are using a button with type of submit type ="submit" this may submit your form directly on the same page. change this as following
<button class="btn btn-success btn-labeled fa fa-search" type ="button" name="action" value="search" id ="search" >Search</button>
Edit
chnage your function as following
$("#search").on("click",function(){
$search = $("#search").val();
$.ajax({
url: "editAction",
type: "POST",
data: { search: $search},
success: function(data){
//do action
alert("phase 3");
$('#dt-data').html(data);
},
error: function(){
// do action
alert("phase 4");
}
});
});

if/else in php script not working on ajax request

I'm working on a website with heavy Ajax, and I'm using codeigniter for building it.
I've got a form with post method, and this form is being posted using ajax request which call a function with if/else statement, like this:
if(isset($_POST['save']))
{
$data['phase'] = 'translating';
}
elseif(isset($_POST['submit']))
{
$data['phase'] = 'waiting_approve';
}
The if/else statement check which button is being clicked, and it works 100% after posting the data of the form in the usual way, but never works when posting it using ajax request.
My ajax request:
$('#workspace-content').delegate('form#article', 'submit', function(){
var that = $('form#article'),
url = that.attr('action'),
type = that.attr('method'),
data = {};
data = that.serialize();
$.ajax({
type: type,
url : url,
data : data,
dataType: 'json',
success: function(data){
$('#header-search-field').append(data.msg).delay(3000).fadeOut(500, function(){
var that = $(this);
that.html('').fadeIn();
});
}
});
return false;
});
Any suggestion or solution?!!
The HTML form:
<button id="save-article" type="submit" name="save" class="btn btn-info btn-xs pull-left">
<span class="glyphicon glyphicon-floppy-save"></span>
</button>
<input name="title" type="text" value="<?php echo $work->title;?>" class="form-control" id="title" placeholder="" />
<textarea row="10" name="article" class="form-control" id="article" placeholder=""><?php echo $work->article;?></textarea>
<button id="submit-article" type="submit" name="submit" class="btn btn-info btn-block">Send</button>
<input name="slug" type="hidden" value="<?php echo $work->slug;?>" />

When you submit a form normally, the button that you used to submit it will be included in the POST data. But when you submit with AJAX, and use that.serialize(), the POST data just includes the input fields -- the submit button isn't included. You need to attach your submit code to the buttons, so you can add the appropriate values to the data.
$('#workspace-content').on('click', 'form#article .btn', function(){
var that = $(this).closest("form"),
url = that.attr('action'),
type = that.attr('method'),
data = that.serialize();
data += '&' + this.name + '=1';
$.ajax({
type: type,
url : url,
data : data,
dataType: 'json',
success: function(data){
$('#header-search-field').append(data.msg).delay(3000).fadeOut(500, function(){
var that = $(this);
that.html('').fadeIn();
});
}
});
return false;
});

changing the class of clicked button on ajax function success

i have a several html buttons (not within a form).
When clicked they call a JavaScript function that after conformation, runs an ajax call.
This part all works OK, but i would then like to change the class of whichever button was clicked on success of the ajax call.
i have tried various methods seen on stackOverflow, but none of them seem to work...
can i please ask what am i doing wrong?
here is the simplified HTML (buttons)
<button class="btn btn-primary" onclick="primaryImage(4107,19372,'/abbie1.jpg'); return false;">
set as profile image
</button>
<button class="btn btn-primary" onclick="primaryImage(4107,19373,'/abbie2.jpg'); return false;">
set as profile image
</button>
<button class="btn btn-success" onclick="primaryImage(4107,19374,'/abbie3.jpg'); return false;" disabled="disabled">
profile image
</button>
Please note: the last button is already the active/success button, and i would also like to remove the class on success too (as only one should be active), but that is maybe my next stage....
here is the javaScript, (i have left in some of the methods i have tried, but commented them out)
function primaryImage(eid,pid)
{
if (confirm("Are you sure you wish to use this as your profile image?"))
{
$.ajax({
type: "POST",
async: false,
cache: false,
dataType: "json",
url: "ajax_photo.php",
data: "action=primary&eid="+eid+"&pid="+pid,
//context: this,
success: function(data){
if(data.result=='success')
{
alert('The image is now set as the profile image');
//$('button').click(function(){
// $(this).addClass('btn-success');
//});
//$('button').on(data.result=='success', function(e) {
// $(this).toggleClass("btn btn-success"); //you can list several class names
// e.preventDefault();
//});
//$(this).removeClass('btn-primary').addClass('btn-success');
}
else
{
alert('An error occurred when trying to set the image: ' + data.result);
}
}
});
}
}
I would be very grateful for any advice of what i am doing wrong
(as you can see, i am not too good with JS (yet))
Thanks!
Ford

As noted in your commented out code, you are binding the click event after click event has already been fired.
I would suggest you to pass a reference of the button that was clicked in the primaryImage() function itself as such:
<!-- In your HTML -->
<button class="btn btn-success" onclick="primaryImage(this, 4107,19374,'/abbie3.jpg'); return false;" disabled="disabled">
profile image
</button>
function primaryImage(button, eid,pid){
/** ... */
Then using that referenced button, you can add or remove CSS classes to the element, as well as the siblings of the element (using jQuery's siblings() method).
//your ajax call
success: function(data){
if(data.result=='success') //make sure this really is success
{
alert('The image is now set as the profile image');
$(button).removeClass('btn-primary').addClass('btn-success');
$(button).siblings('button').removeClass('btn-success').addClass('btn-primary');
}
}

As you don't use the jQuery .click() event, I think you need to pass the button in your function args.
So your button will look like
<button class="btn btn-primary" onclick="primaryImage(this, 4107,19373,'/abbie2.jpg'); return false;">
set as profile image
</button>
Then your function will be like
function primaryImage(el, eid,pid)
{
if (confirm("Are you sure you wish to use this as your profile image?"))
{
$.ajax({
type: "POST",
async: false,
cache: false,
dataType: "json",
url: "http://anzvirtuel.org",
data: "action=primary&eid="+eid+"&pid="+pid,
//context: this,
success: function(data){
if(data.result=='success')
{
$(el).addClass('btn-success');
alert('The image is now set as the profile image');
// keep doing whatever you want...
}
else
{
alert('An error occurred when trying to set the image: ' + data.result);
}
}
});
}
}
As I have not fully understood your commented JS I'll let you put the code you want, just remember that your button will be accessible in jQuery with $(el).
Hope it may helps you

You should pass the clicked element to the primaryImage() function, and use it on success to do whatever you like.
<button class="btn btn-primary" onclick="primaryImage(this, 4107,19372,'/abbie1.jpg'); return false;">set as profile image</button>
And in your JS
function primaryImage(element, eid,pid)
{
[...]
success: function(data){
if(data.result=='success')
{
$(element).addClass('btn-success');
}
else
{
alert('An error occurred when trying to set the image: ' + data.result);
}
}
[...]
}

You could use data-* attributes instead of onclick (MDN Documentation) and then access those throught jQuery, so your code is more clean and HTML / JS are separated.
Try this code, I've created three data attributes (data-eid, data-pid and data-image) for your params and also replaced your JS to make the whole stuff work with those data attributes. Those attributes can be accessed with following jQuery code - var eid = $(this).attr('data-eid'); as an example
This line of code removes the btn-primary class from the clicked button, adds a btn-success class to it and disables it, so it can't be toggled again.
pushedBtn.removeClass("btn-primary").addClass("btn-success").prop("disabled", true);
HTML
<button class="btn btn-primary" data-eid="4107" data-pid="19372" data-image="/abbie1.jpg">
profile image
</button>
<button class="btn btn-primary" data-eid="4107" data-pid="19373" data-image="/abbie2.jpg">
profile image
</button>
<button class="btn btn-primary" data-eid="4107" data-pid="19374" data-image="/abbie3.jpg">
profile image
</button>
JS
$(".btn").click(function (e) {
if (confirm("Are you sure you wish to use this as your profile image?")) {
var eid = $(this).attr('data-eid'); //like 4107
var pid = $(this).attr('data-pid'); //like 19372
var image = $(this).attr('data-image'); //like /abbie1.jpg
var pushedBtn = $(this);
$.ajax({
type: "POST",
async: false,
cache: false,
dataType: "json",
url: "ajax_photo.php",
data: "action=primary&eid=" + eid + "&pid=" + pid,
//context: this,
success: function (data) {
if (data.result == 'success') {
alert('The image is now set as the profile image');
pushedBtn.removeClass("btn-primary").addClass("btn-success").prop("disabled", true);
} else {
alert('An error occurred when trying to set the image: ' + data.result);
}
}
});
}
});