Make JSON from li strings - javascript

<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);

Related

How to populate list-group with 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

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

knockout carrying the data to Multiple View

Below is my code which is knocokout js,i have ListviewModel which is related to two views 1st and second view as below,Both views using the class name UserDetailsView, i am binding two views 1st and second view as below,my problem is, i have click event on the 1st view "Userview" i need to get data of clicked event which is $root.UserView, when i click this it should get all related value and pass to second view so i can bind the data using knockout js ,i am getting the value but unable to bind the data when i clicked $root.UserView so i used jquery in second view for binding, but Now requirement is changed i need make another click event in second view so i can carry data to another view,before that i need to bind the second view with Knockout js how it can be done need help
function ListviewModel()
{
var self = this;
self.Listarray = ko.observableArray();
self.getUserList = function () {
var ListModel = {
userId: UserID
}
jQuery.support.cors = true;
$.ajax({
type: "POST",
dataType: "json",
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(ListModel),
url: serverUrl + 'xxx/xxx/xxx',
success: function (data) {
self.Listarray($.map(data, function (item) {
return new Listdata(item);
}));
}
});
};
//Click Function for UserPersonalview
self.UserView = function (Listarray) {
$("#userId").text(Listarray.userIdId());
$("#userName").text(Listarray.UserName())
document.getElementById('userProfilePic').setAttribute('src', "data:" + Listarray.ProfilePictype() + ";base64," + Listarray.ProfilePicBase64());
window.location.href = "#UserPersonalview";
}
self.UserProfile = function () {
console.log(self.Listarray());
}
}
//Model
function Listdata(data)
{
var self = this;
self.userId = ko.observable(data.userId);
self.userName = ko.observable(data.userName);
self.userProfilePicBase64 = ko.observable(data.userProfilePicBase64);
self.userProfilePictype = ko.observable(data.userProfilePictype);
self.userProfilepic = ko.computed(function () {
return "data:" + self.userProfilePictype() + ";base64," + self.userProfilePicBase64();
});
}
//1st View
<div data-role="view" id="Userview" class="UserDetailsView" data-layout="default">
<div data-role="content" style="background-color:#fff!important">
<div>
<ul style="list-style: none;" data-role="listview" id="hierarchical-listview" data-bind="foreach:Listarray">
<li style="background-color:#FFF" data-bind="click:$root.UserView">
<div style="width:100%;">
<div style="width:50%;float:left">
<span data-bind="text:$data.userId" style="display:none"></span>
<img data-bind="attr: { src:$data.userProfilepic }" onclick="Imagepopover()" />
<label style="width: 25%!important;" class="firendslisttext" data-bind="text:$data.userName"></label>
</div>
<div style="width:50%;float:left;margin: 0px -20px;">
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
//second View
<div data-role="view" id="UserPersonalview" >
<header data-role="header">
<div data-role="navbar" class="UserDetailsView">
<div class="content-header ">
<ul style="list-style: none;" >
<li data-bind="click:$root.UserProfile">
<div class="km-leftitem">
</div>
<div class="block2" >
<div class="inner" style="float:left" >
<span id="userId" style="display:none"></span>
<img data-responsive="" width="40" height="40" id="userProfilePic" src="" style="border-radius: 50%;" />
</div>
<div class="inner" style="float:left;margin-left:15px">
<label id="userName" style="width: 100%!important;"></label>
</div>
</div>
<div class="km-rightitem">
<a data-align="right"><img src="images/icon-add.png" style="height:50px" /></a>
</div>
</li>
</ul>
</div>
</div>
</header>
<div data=role="content"><div>
</div>

jquery post value on toggle action

Here is the html code:
<div class="magic-container">
<div class="input-group">
<input type="text" class="typeahead form-control" placeholder="Select category ..." />
<ul class="dropdown-menu" style= "margin-top: -10px !important;">
<li id="one">Sports</li>
<li role="presentation" class="divider"></li>
<li id="two">Entertainment</li>
<li role="presentation" class="divider"></li>
<li id="three">Travel</li>
<li role="presentation" class="divider"></li>
<li id="four">Business</li>
<li></li>
</ul>
<span class="flip">
FLIP
</span>
</div>
</div>
<div class="magic-bar">
<span id="rating-slider" class="ui-slider-range"></span>
<span class="flip">
FLIP
</span>
</div>
When FLIP with mirror1 clicked, I want to post fc1 and when FLIP with mirror2 is clicked I want to post fc2.
Here is my code to perform this:
$(".flip").on('click', function() {
$(".magic-bar").toggle();
$.ajax({
url: "invite_db.php",
type: "POST",
data: {"flipClick": 'fc1'},
success: function(data) {
$(".articleContent").html(data);
//setInterval("messageDisable()", 5000);
}
});
$(".magic-container").toggle();
$.ajax({
url: "invite_db.php",
type: "POST",
data: {"flipClick": 'fc2'},
success: function(data) {
$(".articleContent").html(data);
//setInterval("messageDisable()", 5000);
}
});
});
But when I click on FLIP both the values get posted and page response remains same. What is the logic mistake here?
You problem is that you only get the click on class flip, insted what anchor is clicked.
Try:
$(".flip a").on('click', function() {
if($(this).hasClass('mirror1'))
{
$(".magic-bar").toggle(); $(".magic-container").toggle();
$.ajax({
url: "invite_db.php",
type: "POST",
data: {"flipClick": 'fc1'},
success: function(data) {
$(".articleContent").html(data);
//setInterval("messageDisable()", 5000);
}
});
}
else
{
$(".magic-container").toggle(); $(".magic-bar").toggle();
$.ajax({
url: "invite_db.php",
type: "POST",
data: {"flipClick": 'fc2'},
success: function(data) {
$(".articleContent").html(data);
//setInterval("messageDisable()", 5000);
}
});
}
});
You are simply submitting both values when clicking any DOM object with class "flip". I read your code like this:
$(".flip").on('click', function() {
$(".magic-bar").toggle();
$.ajax({ data: {"flipClick": 'fc1'} /* ... */);
$(".magic-container").toggle();
$.ajax({ data: {"flipClick": 'fc2'} /* ... */);
});
There is no conditional logic in your code
For instance you need to check if the closest anchor tag
of the flip click has class mirror1 or mirror2 then based
on that you will do one of the two calls and toggle
Something like this
$(".flip a").on('click', function() {
if($(this).hasClass('mirror1')){
}
if($(this).hasClass('mirror2')){
}
}

Categories