We Keep Coding

Ajax status update in one page with one button

I am trying to update the status for my orders on the same page where it's displayed with an ajax HTML.
Displaying works just fine, but I want to set the status the the next one with only one click so I figured to use ajax for it too.
My ajax PUT for the next status
$(function () {
$(document).on('click', 'button#order_update', function (e) {
e.preventDefault();
let newStatus = '';
if ($(this).data('status') == 'pending') {
newStatus = 'confirm';
} else if ($(this).data('status') == 'confirm') {
newStatus = 'processing';
} else if ($(this).data('status') == 'processing') {
newStatus = 'picked';
}
let formStatusData = new FormData();
formStatusData.append('order_id', $(this).data('order'));
$.ajax({
type: 'PUT',
url: '{{ route("update-order-status") }}',
data: formStatusData,
success: (response) => {
console.log(response);
$(this).data('status', newStatus);
$(this).text(newStatus.charAt(0).toUpperCase() + ' order');
}
});
});
});
My ajax for the html
$.ajax({
type: 'GET',
url: '/order/view/all',
dataType: 'json',
cache: false,
success:function(response){
$('#pimage').attr('url','/'+response.product.product_thambnail);
var product_name = $('#pname').text();
var id = $('#product_id').val();
var quantity = $('#qty').val();
var OrderView = ""
$.each(response.orders, function (key,value){
var productsList = '';
$.each(value.product, function (key,value) {
productsList += `
<div class="row gx-4">
<div class="col-lg-3">
<div class="pos-task-product">
<div class="pos-task-product-img">
<div class="cover" style="background-image: url(${value.product_thambnail});"></div>
</div>
<div class="pos-task-product-info">
<div class="flex-1">
<div class="d-flex mb-2">
<div class="h5 mb-0 flex-1">${value.product_name_en}</div>
<div class="h5 mb-0">${value.pivot.qty} DB</div>
</div>
</div>
</div>
<div class="pos-task-product-action">
Complete
Cancel
</div>
</div>
</div>
</div>
`;
});
OrderView += `<div class="pos-task">
<div class="pos-task-info">
<div class="h3 mb-1" id=""><td>Üzenet: ${value.notes}</td></div>
<div><div><button type="button" class="btn btn-outline-theme rounded-0 w-150px data-status="${value.status}" data-order="${value.status}" id="order_update">Confirm Order</button></div></div>
<br>
<!-- You can safely remove this if not needed
<div class="mb-3">${value.product_id}</div>
<div class="h4 mb-8">${value.product_name}</div>
-->
<td> </td>
<div class="mb-2">
<span class="badge bg-success text-black fs-14px">${value.status}</span>
</div>
<div><span class="text">${value.created_at}</span> Beérkezett</div>
</div>
<div class="pos-task-body">
<div class="fs-16px mb-3">
Completed: (1/4)
</div>
${productsList}
</div>
</div>`
});
$('#OrderView').html(OrderView);
}
})
}
OrderView();```
**Im currently trying to use this button inside the HTML ajax**<div><button type="button" class="btn btn-outline-theme rounded-0 w-150px data-status="${value.status}" data-order="${value.status}" id="order_update">Confirm Order</button></div>
I tried using processData: false, but it just kills the process and the button is unusable. Please help.

Your problem is that you have many identifiers # with the same name.
id must be unique.
Replace in code
$(document).on('click', 'button#order_update'
to
$(document).on('click', 'button.order_update'
and
<button type="button" class="btn btn-outline-theme rounded-0 w-150px data-status="${value.status}" data-order="${value.status}" id="order_update">Confirm Order</button>
to
<button type="button" class="btn btn-outline-theme rounded-0 w-150px order_update" data-status="${value.status}" data-order="${value.status}">Confirm Order</button>
You still have the problem that you didn't close the class quote after w-150px, I closed it in the formatted code

JavaScript ajax didn't working.Where am I going wrong?

<div class="media-bottom">
#Html.TextAreaFor(model => model.Message, new { #class = "ui form", #rows = "5", #maxlenght = "300", #placeholder = "Paylaşmak istedikleriniz" })
</div>
<br />
<div class="footer-logo">
<button class=" mini ui right labeled right floated icon button" id="Button_Click" onclick="javascript: Button_Click();">
<i class="right arrow icon"></i>
Paylas
</button>
<div class="container bootstrap snippets bootdey downlines">
<div class="row">
<div class="col-md-6 col-xs-12">
<section class="widget">
<div class="widget-body">
<div class="widget-top-overflow windget-padding-md clearfix bg-info text-white">
</div>
<div class="post-user mt-n-lg">
<span class="thumb-lg pull-left mr media-object">
<img class=" img-circle" src="https://bootdey.com/img/Content/user_3.jpg" alt="...">
</span>
<span class="thumb-lg pull-right mr star">
<img src="~/Content/img/star.png" />
</span>
<div class="Thanksicon">
</div>
<div class="namespace">
<h5 class="mt-sm fw-normal text-black txt post">
#Html.DisplayFor(model => model.FullName)
<br />
<small class="text-black text-light departmen post">#Html.DisplayFor(model => model.Departmen)</small>
</h5>
</div>
</div>
<br />
<br />
<div class="text-light fs-mini m" id="Label1">
<div id="label1">
<p class="article">
#Html.DisplayTextFor(model=>model.Message)
</p>
</div>
<div class="thanksnames">
<span class="thumb-xs avatar mr-sm">
<img class="img-circle thank" src="https://bootdey.com/img/Content/user_2.jpg" alt="...">
</span>
<div class="mt-sm fw-normal text-black " id="person"> <small class="text-black text-light">Rose Tyler</small></div>
</div>
<br />
<div class="img"></div>
<div class="fs-mini text-muted text-right"><time class="time-table-top"></time></div>
</div>
</div>
</section>
</div>
</div>
</div>
This is my javascript
$(function () {
$('#Button_Click').on('click', function () {
$.ajax({
type: "POST",
url: '#Url.Action("Share")',
data: {
fullname: $("#username").val(),
departmen: $("#departmen").val(),
textarea: $(".ui.form").val()
},
datatype: "json",
success: function (data) {
$('.downlines').html(result);
}, error: function (data) {
}
});
});
});
This is my controller httppost
[HttpPost]
private JsonResult Share(SocialMedia data,string id)
{
var employee = _employeeRepository.GetById(id);
ViewBag.IsOwner = id == Session.GetEmployeeNo();
if (Session["MediaList"] == null)
{
Session["MediaList"] = new List<SocialMedia>();
}
var fullname = data.FullName;
var departmen = data.Departmen;
var textarea = data.Message;
foreach (MediaList list in data.MediaLists)
{
list.FullName = fullname;
list.Departmen = departmen;
list.Message = textarea;
list.Date = DateTime.Now.ToLocalTime();
if(data.Photo!=null)
{
list.Photo = data.Photo;
string fileName = Path.GetFileNameWithoutExtension(list.Photo);
list.Photo = "~/Image/" + fileName;
string _path = Path.Combine(Server.MapPath("~/Image/"),fileName);
}
}
return Json(new { data = PartialView("~/Views/SocialMedia/DisplayTemplates/MediaList.cshtml") });
// return PartialView("~/Views/SocialMedia/DisplayTemplates/MediaList.cshtml",
//return Json(new { success = true, message = GlobalViewRes.CreatedSuccessfully }, JsonRequestBehavior.AllowGet);
}
When I write an article and press the button, I want the page to appear below without refreshing and I want it to be repeated. It should be with the whole design. But when I press the button, I made ajax, but my ajax does not work, where am I going wrong?
Sorry for my English:)

success: function (data) {
$('.downlines').html(result);
}, error: function (data) {
}
You handle the data named 'data'. Then you are trying use it like 'result'. What is result, where is it came from? Whatever, try this
$('.downlines').html(data)

How to toggle add/remove when adding html into a textarea?

When I click on the button ADD, it should be adding all the html into the textarea, and works fine. However, If I click again I should be removing that from the text area.
An idea maybe is by pushing the inserted html into an array?
$('body').on('click', '.btn_video', function() {
var $imageSelected = $(this).parent().parent().parent().prop('outerHTML');
$('#usp-custom-5').val(function(_, currentValue) {
return currentValue + $imageSelected
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6">
<div class="thumbnail">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/3fJjajItnEQ?rel=0&modestbranding=1" frameborder="0" allowfullscreen=""></iframe></div><div class="caption">
<p>Duration: <span class="video-time">31:54</span></p>
<button type="button" class="btn btn-danger btn-block btn_video"><strong>ADD</strong></button>
</div>
</div>
</div>
<div class="col-xs-12 col-md-6">
<div class="thumbnail">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/3fJjajItnEQ?rel=0&modestbranding=1" frameborder="0" allowfullscreen=""></iframe></div><div class="caption">
<p>Duration: <span class="video-time">31:54</span></p>
<button type="button" class="btn btn-danger btn-block btn_video"><strong>ADD</strong></button>
</div>
</div>
</div>
</div>
</div>
<textarea name="usp-custom-5" id="usp-custom-5" data-required="false" placeholder="Example Input 5" data-richtext="false" class="usp-input usp-textarea usp-form-16" rows="5" cols="30" style="margin: 0px; height: 266px; width: 996px;"></textarea>
Here it is a Fiddle.
$('body').on('click', '.btn_video', function() {
var $imageSelected = $(this).parent().parent().parent().prop('outerHTML');
$('#usp-custom-5').val(function(_, currentValue) {
return currentValue + $imageSelected
});
});

Updated fiddle.
You could use a helper class selected for this and add/remove it by click :
$('body').on('click', '.btn_video', function() {
var content = "";
if($(this).text()=="ADD")
{
$(this).text("REMOVE");
$(this).parents(".thumbnail").parent().addClass('selected');
}else{
$(this).text("ADD");
$(this).parents(".thumbnail").parent().removeClass('selected');
}
$('.selected').each(function(){
content += $(this).prop('outerHTML');
});
$('#usp-custom-5').val(content);
});
Hope this helps.

See if it's what you need:
return currentValue + $imageSelected
replace:
return $imageSelected
If you need to save the information before erasing, paste in an array:
var arr = [];
$('body').on('click', '.btn_video', function() {
var $imageSelected = $(this).parent().parent().parent().prop('outerHTML');
$('#usp-custom-5').val(function(_, currentValue) {
arr.push($imageSelected);
return $imageSelected
});
});

How to pass content to the next tab by jQuery?

I'm a beginner at jQuery. I would like to create selectable portlet, and when it was clicked then showed the same portlet in the second tab immediately.
This is my JavaScript Code.
$(function () {
$(".frame").sortable({
connectWith: ".frame",
handle: ".portlet-header",
placeholder: "portlet-placeholder ui-corner-all"
});
$(".portlet")
.addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
.find(".portlet-header")
.addClass("ui-widget-header ui-corner-all")
.prepend("<span class='ui-icon ui-icon-minusthick portlet-toggle'></span>");
$(".portlet-toggle").click(function () {
var icon = $(this);
icon.toggleClass("ui-icon-minusthick ui-icon-plusthick");
icon.closest(".portlet").find(".portlet-content").toggle();
});
});
$(function () {
$(".frame").selectable({
stop: function () {
var result = $("#select-result").empty();
var add = $("#newExam").empty();
var count = 0;
$(".ui-selected", this).each(function () {
if (this.id > 0) {
result.append(this.id + " ");
count = count + 1;
}
});
add.append(count);
}
});
});
And this is my HTML code.
<div id="tabs">
<ul>
<li>Master</li>
<li>Add List <span id="newExam" class="badge" >0</span> </li>
</ul>
<div id="master" class="master">
<p>exam in the collection</p>
<br /><br />
<p id="feedback">
<span>You've selected:</span> <span id="select-result">none</span>.
</p>
<div class="frame" style="align-content: center">
<div class="portlet portlet-count" id="1">
<div class="portlet-header">First</div>
<div class="portlet-content">test</div>
</div>
<div class="portlet portlet-count" id="2">
<div class="portlet-header">Second</div>
<div class="portlet-content">test</div>
</div>
<div class="portlet portlet-count" id="3">
<div class="portlet-header">Third</div>
<div class="portlet-content">test</div>
</div>
</div>
</div>
<div id="creation">
</div>
P.S. Master is the first tab, Creation is the second tab.

Click handlers not firing on appended items

So I have some results that have items that get toggled, hidden/shown, etc. That bit works just fine except for the items that are appended to the bottom of the results. The click handler does not fire on them but work just fine on the others. I assume it has to do with reading the nodes at the time of page load. How do I get the appended items to also work?
<div class="event">
<a href="/profile/00000000">
<img class="user-image" src="https://graph.facebook.com/00000000/picture?width=100&height=100">
</a>
<div class="event-info">
<div class="content">
<div class="event-time-location">
<span class="user-name">Levi Thornton</span>
<span class="user-action-time">Posted 21 minutes ago</span>
</div>
<div class="event-caption">1
</div> </div>
<div class="event-like-comment">
<input id="js-eventId" type="hidden" value="201" name="eventId">
likedlike comment
more
</div>
</div>
<div class="comments" id="comments-201" style="display: block;">
<div class="newComments">
<input id="js-eventId" type="hidden" value="201" name="eventId">
<textarea class="addComment" value="Write a comment..." placeholder="Write a comment..." title="Write a comment..."></textarea>
</div>
</div>
<!-- comments -->
<div class="clear"></div>
</div>
The jQ:
...
// add like
$(".event-like").click(function(event){
event.preventDefault();
var likeBtn = $(this);
$.post('/shindig/ajax-like-event', { eventId: $(this).siblings('#js-eventId').val(), userLogged: $('#js-userLogged').val(), ajax: true}, function(data){
if(data['success']){
likeBtn.hide();
likeBtn.siblings(".event-liked").show();
} else {
if(data['noaccess']){
window.location.href = data['url'];
}
}
},"json");
});
// soft delete like
$(".event-liked").click(function(event){
event.preventDefault();
var likeBtn = $(this);
$.post('/shindig/ajax-unlike-event', { eventId: $(this).siblings('#js-eventId').val(), userLogged: $('#js-userLogged').val(), ajax: true}, function(data){
if(data['success']){
likeBtn.hide();
likeBtn.siblings(".event-like").show();
} else {
if(data['noaccess']){
window.location.href = data['url'];
}
}
},"json");
});
// hit bottom scrolling, load more results
$(window).scroll(function() {
if($(window).scrollTop() == $(document).height() - $(window).height()) {
console.log('bottom');
$.post('/index/ajax-feed-items-by-time', { pager: $("#js-pager").val(), ajax: true}, function(data){
$( ".feedContent" ).append( data );
$pager = $("#js-pager").val()+10;
$("#js-pager").val($pager);
});
}
});

Replace
$(".event-like").click(function(event) {
with
$(document).on("click", ".event-like", function(event) {
and similarly throughout your code. It's called event delegation, and the best place to start reading about it is the jQuery documentation.