How to populate list-group with javascript? - javascript

I get the ticket data from a controller using code below:
$.ajax({
type: "GET",
url: "/Tickets/List/",
data: param = "",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: successFunc,
error: errorFunc
});
function successFunc(data, status) {
var ds = [];
// d.ticket_no, d.ticket_subject, d.ticket_date,
data.forEach((d) => {
});
}
I don't have an idea on How to display it using the HTML format below?
<a class="list-group-item list-group-item-action" id="list-tickets-list" data-toggle="tab"
href="#ticket-info" role="tab" aria-controls="list-tickets">
<div class="d-flex w-100 justify-content-between">
<h5 id="ticket_subject" class="mb-1">**Ticket Subject Example**</h5>
<small id="ticket_date">**02-Aug-2021**</small>
</div>
<p id="ticket_no" class="mb-1"><strong>**TKT-2021010678**</strong></p>

var data = [{
"ticket_no":1234,
"ticket_subject":"myticker",
"ticket_date":"1-2-3"
},{
"ticket_no":1235,
"ticket_subject":"myticker1",
"ticket_date":"1-2-4"
}];
var mydiv = document.getElementById('ticketdiv');
data.forEach((d) => {
mydiv.innerHTML +=`<a class="list-group-item list-group-item-action" id="list-tickets-list" data-toggle="tab"
href="#ticket-info" role="tab" aria-controls="list-tickets">
<div class="d-flex w-100 justify-content-between">
<h5 id="ticket_subject" class="mb-1">${d.ticket_subject}</h5>
<small id="ticket_date">${d.ticket_date}</small>
</div>
<p id="ticket_no" class="mb-1"><strong>${d.ticket_no}</strong></p>`
});
<div id="ticketdiv">
</div>
you can use JS innerHTML to get it done, here what I'm doing is looping the data from foreach, and adding HTML content to the div by mydiv.innerHTML +=
you can read more about JS innerHTML here

Related

Button does not work while visit another pagination page or being search (ajax, Laravel)

After being searched in the index page, the button action does not work.
While visiting second page the action button does not work.
Here is my index page
<a href="#" class="btn btn-primary btn-active-primary btn-sm"
data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
{{actions}}
<span class="svg-icon svg-icon-5 m-0">
<svg xmlns="http://www.w3.org/2000/svg" width="24" </svg>
</span>
</a>
<div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded
menu-gray-600 menu-state-bg-light-primary fw-bold fs-7 w-125px py-4"
data-kt-menu="true">
<div class="menu-item px-3">
<a href="{{ route('index.show', $index->id) }}" class="menu-link
px-3">
{{View Details}}
</a>
</div>
Here is the Route
Route::prefix('example')->name('examples.')->group(function () {
Route::get('', [ExampleController::class, 'index'])->name('index');
});
Here is the script
$(document).on("click", "#pagination a, #search_btn, #reset_btn", function() {
if(this.id == 'reset_btn'){
$("#searchform").reset();
}
$.ajax({
url: this.dataset.url,
type: 'get',
data: $("#searchform").serialize(),
processData: false,
cache: false,
contentType: false,
success: function(data) {
$("#pagination_data").html(data);
},
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
alert(response.responseText);
}
});
})
});```
Simply solve the bug by inserting the code below into the button function script.
KTMenu.createInstances();

How to display value from SharePoint list to web page

I have a code that take the value from SharePoint List using REST (ajax), as shown as below:
function getItems() {
$.ajax({
async: true,
url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Network Tech')/items",
method: "GET",
headers: {
"accept": "application/json;odata=verbose",
"content-type": "application/json;odata=verbose"
},
success: function(data) {
data = data.d.results;
console.log(data);
$.each(data, function(index, value) {
var value = value.Service;
});
},
error: function(error) {
console.log(JSON.stringify(error));
}
})
}
I also have a HTML code for the web page, as shown as below:
<body>
<div class="container">
<div class="col-sm-1">
<h3><br><br>Networking<br></h3>
<div class="panel-group wrap" id="bs-collapse">
<div class="panel">
<div class="panel-heading panel-bg-1">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#" href="#0101" id="v1">Virtual Networking<br></a>
</h4>
</div>
<div id="0101" class="panel-collapse collapse">
<div class="panel-body">
Coming Soon
</div>
</div>
</div>
</div>
</div>
</div>
</body>
Right now I want to take the value from SharePoint List and display it inside the panel-body. I know how to display it on table but I don't know how to do it on this one. Please help me on this.
You can use this Library that developed by me. Get Here
Then you need to do small callback
var appUrl = GetUrlKeyValue("SPAppWebUrl");
var hostUrl = GetUrlKeyValue("SPHostUrl");
var list = SPMagic.ListManager(appUrl, hostUrl, "Network Tech");
list.getAllListItems("Id", 100,).then(function (res) {
console.log(res.d.resutls);
}, function(err){
console.log(err);
}
Then you can use KnockoutJS to do the Bindings for the table.

How to select element of click element parents using jQuery?

I have following HTML code and I am calling ajax using click event using this class .educacao_search.
<div class="tab-pane active" id="tab-educacao">
<br>
<div class="row">
<div class="col-md-12">
<h4>EucaÇÃo</h4>
<ul class="list-inline three">
<li><a class="educacao_search" data-slug="ension">Ensino</a></li>
<li><a class="educacao_search" data-slug="enem">ENEM</a></li>
<li><a class="educacao_search" data-slug="escolas">Escolas</a></li>
<li><a class="educacao_search" data-slug="lingua-e-linguagens">Lingua e Linguagens</a></li>
<li><a class="educacao_search" data-slug="historia">História</a></li>
<li><a class="educacao_search" data-slug="todos">Todos</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group has-feedback has-search">
<input type="text" class="form-control" placeholder="Search" id="do_search_educacao">
<span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>
</div>
</div>
<br>
<div class="row"><div class="show_result"></div><br></div>
</div>
now I on success I want to show result in show_result class.
To do this I am using collowing jQuery code but it seems not working! I mean the result is not showing in this class called show_result
$(this).parents(".tab-pane").find(".show_result").html(result);
Note: this is a bootstrap tabs and there are 5 tabs with same classes which is educacao_search and show_result
Update:
Ajax Call:
$(".educacao_search").click(function () {
var slug = $(this).data('slug');
$.ajax({
type: 'POST',
url: urls.ajax_url,
data: {
'slug': slug,
'action': 'get_post_content'
}, success: function (result) {
$(this).parents(".tab-pane").find(".show_result").html(result);
//$(this).find(".show_result").html(result);
},
error: function () {
alert("error");
}
});
});
Declare var obj = $(this); before .ajax and use it inside success callback.
$(".educacao_search").click(function () {
var slug = $(this).data('slug');
var obj = $(this);
$.ajax({
type: 'POST',
url: urls.ajax_url,
data: {
'slug': slug,
'action': 'get_post_content'
}, success: function (result) {
obj.parents(".tab-pane").find(".show_result").html(result);
//$(this).find(".show_result").html(result);
},
error: function () {
alert("error");
}
});
});
It's important to know how this keyword works in javascript. Refer below links it will be helpful.
https://javascript.info/object-methods
https://medium.com/tech-tajawal/javascript-this-4-rules-7354abdb274c

Make JSON from li strings

<div class="col-xs-4 no-padding contenteditable-color" style="background-color: transparent;">
<ul class="ul-product">
<li class="li-product-page cars contenteditable" contenteditable="false">qweryt</li>
</ul>
</div>
<div class="col-xs-4 no-padding contenteditable-color" style="background-color: transparent;">
<ul class="ul-product">
<li class="li-product-page cars contenteditable" contenteditable="false">bbzzz</li>
</ul>
</div>
I have multiple li and I want to get all and to make JSON with name 'cars'. I've tried something like this but won't work
$("li.cars").each(function() {
var obj = {
keywords: $("li.keywords").text()
}
});
I want to send this JSON to server with AJAX.
EDIT
Here is the ajax
var form = $('form')[0]; // You need to use standard javascript object here
var data = new FormData(form);
data.append('car', brand);
data.append('keywords', arr);
$.ajax({
type:'POST',
enctype: 'multipart/form-data',
url:'myurl',
data: data,
processData: false,
cache: false,
contentType:false,
success:function(response){
console.log(response);
},
error: function(data){
console.log("error");
console.log(data);
}
})
var items = [];
$('ul').children().each(function() {
var $this = $(this);
var item = { id: $this.attr('value'), title: $this.html() };
items.push(item);
});
Try This One...
You can make an object and in its keywords key make an array of li values:
var obj = {keywords:[]};
$( "li.cars" ).each(function() {
obj.keywords.push($(this).text());
});
console.log(obj);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-4 no-padding contenteditable-color" style="background-color: transparent;">
<ul class="ul-product">
<li class="li-product-page cars contenteditable" contenteditable="false">qweryt</li>
</ul>
</div>
<div class="col-xs-4 no-padding contenteditable-color" style="background-color: transparent;">
<ul class="ul-product">
<li class="li-product-page cars contenteditable" contenteditable="false">bbzzz</li>
</ul>
</div>
It will give you something like so:
{keywords: ["someval","anotherval"]}
You can simply send the obj variable o the backend and json decode it at the backend.
When you want to send it to the server you can stringify it like so:
var myJSON = JSON.stringify(obj);

How to templating json using jquery

Let's say my json like this and i have 3 different data
[
{
"Pair":"",
"Id":"8ca2df56-2523-4bc3-a648-61ec4debcaaf",
"PubDate":"/Date(1463775846000)/",
"Provider":null,
"Market":""
},
{
"Pair":"",
"Id":"74b2d7c7-bc2c-40ee-8245-7c698befa54d",
"PubDate":"/Date(1463775247000)/",
"Provider":null,
"Market":""
},
{
"Pair":"",
"Id":"0ee3cd96-1df8-49ba-b175-7a75d0840973",
"PubDate":"/Date(1463773687000)/",
"Provider":null,
"Market":""
}
]
What I already try
JQUERY
$.ajax({
type: 'GET',
url: 'news.json',
data: { get_param: 'value' },
dataType: 'json',
success: function (data) {
console.log(data);
$.each(data, function(index, element) {
$( ".content-news h3" ).append( data[0].Title );
**/** Stuck Here and it only call 1 data but i already use each function **/**
});
}
});
HTML
<div class="news">
<div class="ano">
<div class="content-news">
<h3 id="jtitle"> **/** I Want to Show Id Here **/** </h3>
<h4 id="jprovider" class="author">**/** I Want To Show PubDate **/**</h4>
<p id="jsummary">
**/** I Want to Show Provider Here **/**
</p>
<div class="img-head" id="img-container">
<!-- <img src="" alt="img" class="img-responsive">-->
</div>
</div>
<div class="social-control">
<div class="head-control">
<p id="jdate" class="inline gray"></p>
<p class="pull-right">show more</p>
</div>
<div class="clear"></div>
<div class="footer-control">
<p><i class="ion-ios-heart ion-spacing"></i>20</p>
<p><i class="ion-chatbox ion-spacing"></i>2 comments</p>
<p><i class="ion-android-share-alt ion-spacing"></i>share</p>
</div>
</div>
</div>
</div>
JSFiddle
I managed to out only 1 result. Can you guys give a hint or tips show me how to templating jquery using json. Please be easy on me. Thanks
THIS IS THE RESULT WHAT I GET RIGHT NOW, Only 1 data display..
You can access the properties via the index on the data property as so:
$.ajax({
type: 'GET',
url: 'news.json',
data: {
get_param: 'value'
},
dataType: 'json',
success: function(data) {
//console.log(data);
$.each(data, function(index, element) {
console.log(
data[index].Id,
data[index].Pair,
data[index].PubDate,
data[index].Provider,
data[index].Market
);
});
}
});
Which produces
8ca2df56-2523-4bc3-a648-61ec4debcaaf /Date(1463775846000)/ null
74b2d7c7-bc2c-40ee-8245-7c698befa54d /Date(1463775247000)/ null
0ee3cd96-1df8-49ba-b175-7a75d0840973 /Date(1463773687000)/ null
To handle the templating you can create a function that returns the markup for each item:
function template(title, provider, summary) {
var $temp = $('<div/>');
$temp.append($('<h3/>', {
text: title
}));
$temp.append($('<h4/>', {
text: provider,
class: 'author'
}));
$temp.append($('<p/>', {
text: summary
}));
console.log($temp);
return $temp;
}
$.ajax({
type: 'GET',
url: 'https://cdn.rawgit.com/enki-code/4ec2b6efa84dfed8922b390d2a1a4c5a/raw/dc94405f12d1d5105e54584a6c53ca30d1863b4a/so.json',
data: {
get_param: 'value'
},
dataType: 'json',
success: function(data) {
//console.log(data);
$.each(data, function(index, element) {
$('.content-news').append(template(data[index].Id, data[index].PubDate, data[index].Provider));
console.log(
data[index].Id,
data[index].Pair,
data[index].PubDate,
data[index].Provider,
data[index].Market
);
});
}
});
Here is an updated version of your fiddle as an example.
You'll likely have to make a few small adjustments to the CSS and whatnot to get it looking how you like.
you json file have array of objects so first you need to loop for the objects one by one
also don't use each for serialized array cause it takes more time just use the normal for loop
answer is here jsfiddle.net/robert11094/65zjvy5k/3
or just use this html page
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
$.ajax({
type: 'GET',
url: 'http://subscriptions.fxstreet.com/json/news.aspx?c=A0DC975D13C44CE697EC&i=englishnewscharts',
data: { get_param: 'value' },
dataType: 'json',
success: function (data) {
console.log(data);
for (var i=0;i<data.length;i++){
var html=
'<div class="ano">'+
' <div class="content-news">'+
' <h3 id="jtitle"> '+data[i].Id+' </h3>'+
' <h4 id="jprovider" class="author">'+data[i].PubDate+'</h4>'+
' <p id="jsummary">'+
data[i].Provider+
' </p>'+
' <div class="img-head" id="img-container">'+
' <!-- <img src="" alt="img" class="img-responsive">-->'+
' </div>'+
' </div>'+
' <div class="social-control">'+
' <div class="head-control">'+
' <p id="jdate" class="inline gray"></p>'+
' <p class="pull-right">show more</p>'+
' </div>'+
' <div class="clear"></div>'+
' <div class="footer-control">'+
' <p><i class="ion-ios-heart ion-spacing"></i>20</p>'+
' <p><i class="ion-chatbox ion-spacing"></i>2 comments</p>'+
' <p><i class="ion-android-share-alt ion-spacing"></i>share</p>'+
' </div>'+
' </div>'+
'</div>';
$('.news').append(html);
}
}
});
});
</script>
<div class="news">
<div class="ano">
<div class="content-news">
<h3 id="jtitle">Hello World</h3>
<h4 id="jprovider" class="author">David</h4>
<p id="jsummary">
This is content
</p>
<div class="img-head" id="img-container">
<!-- <img src="" alt="img" class="img-responsive">-->
</div>
</div>
<div class="social-control">
<div class="head-control">
<p id="jdate" class="inline gray"></p>
<p class="pull-right">show more</p>
</div>
<div class="clear"></div>
<div class="footer-control">
<p><i class="ion-ios-heart ion-spacing"></i>20</p>
<p><i class="ion-chatbox ion-spacing"></i>2 comments</p>
<p><i class="ion-android-share-alt ion-spacing"></i>share</p>
</div>
</div>
</div>
</div>
Try to use $.parseJSON or $.getJSON. It will be easier to find problems.
Reference: jQuery API

Categories