We Keep Coding

How to call an API on expansion of a collapsible div and fill its content with the API response using AngularJS?

I am using angularjs 1.6 and I am quite new to it. I have this piece of html below
<span ng-repeat="topdata in userData">
<span style="white-space: pre;">
<a class="collapsed" data-target="#testThis" data-toggle='collapse' ng-click="getInfo(topdata.user_id)">
<pre><i class='fa fa-plus'></i><span>Some text</span> </pre>
</a>
</span>
<div id="testThis" class='collapse'>
<!-- API content goes here -->
</div>
</span>
In the js part
$scope.getInfo = function(user_id) {
toSend = {"user_id": user_id}
$http({
method: 'POST',
url: /some-url,
data: toSend,
}).then(function(response) {
// fill the response data inside #testThis div
})
}
Currently when the user clicks on the collapsible span, it expands and a function is called that calls an API. But I don't know how to fill the response of the API inside the content of the expanded span.
Any idea how this can be done?

You can assign the response to the userData and bind the collapsed element to it.
For example
<div id="testThis" class='collapse' ng-bind="userData.more"></div>
and
}).then(function(response) {
const userData = $scope.userData.find(data => data.user_id === user_id);
userData.more = response;
});
Here is a live example (I did some necessary changes to make it work but the idea is the same).
angular.module('app', []).controller('ctrl', function($scope, $http) {
$scope.userData = [{
user_id: 8
}];
$scope.getInfo = function(user_id) {
toSend = {
"user_id": user_id
}
$http({
method: 'GET',
url: 'https://jsonplaceholder.typicode.com/todos/1',
//data: toSend,
}).then(function(response) {
const userData = $scope.userData.find(data => data.user_id === user_id);
userData.more = response;
})
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<span ng-repeat="topdata in userData">
<span style="white-space: pre">
<a
class="collapsed"
data-target="#testThis"
data-toggle="collapse"
ng-click="getInfo(topdata.user_id)"
>
<pre><i class='fa fa-plus'></i><span>Some text</span></pre>
</a>
</span>
<div id="testThis" class="collapse" ng-bind="topdata.more | json">
<!-- API content goes here -->
</div>
</span>
</div>

Twitter share button not working correctly

Currently working on freeCodeCamp's random code generator project. I'm getting strange behavior with my "Tweet" button. If the class is "twitter-share-button", the button will display properly, but won't populate the quote in the pop-up box, but if I change the class to "button", the button has no styling but the pop-up Tweet box populates correctly with the quote and author.
Please see code below:
HTML:
<div id="quoteBox" class="col-md-6 col-md-offset-3 text-center">
<h2>“What a curious power words have.”</h2>
<p>- Tadeusz Borowski</p>
<div class="panel panel-default">
<div class="panel-body">
<p id="quote"></p>
<h4 id="author"></h4>
</div>
<div id="twitter">
<a class="twitter-share-button button" id="tweet-quote" data-show-count="false">Tweet</a>
</div>​
</div>
<button id="getQuote" class="btn btn-primary btn-lg round btn-block">New Quote</button>
JS:
$(document).ready(function() {
// Loads quote on page load
getQuote();
$("#getQuote").click(getQuote);
});
function getQuote() {
$(document.body).css('background-color',
colors[Math.floor(Math.random() * colors.length)]);
$.ajax({
type: "POST",
url: "https://andruxnet-random-famous-quotes.p.mashape.com/?
cat=famous",
responseType: "json",
success: function(response) {
showQuote(response);
$('#tweet-quote').attr('href', 'https://twitter.com/intent/tweet?
text=' + encodeURIComponent('"' + response.quote + '" - ' +
response.author));
},
error: function() {
alert('Error retrieving quote');
},
beforeSend: setHeader
});
function setHeader(xhr) {
xhr.setRequestHeader("X-Mashape-Key",
"pmTSpn6I45mshpuPkHokTQ01lAo1p1ugEH1jsnoOS19Gk3KQvB");
xhr.setRequestHeader("Content-Type", "application/x-www-form-
urlencoded");
xhr.setRequestHeader("Accept", "application/json");
}
}
function showQuote(response) {
console.log(response);
$('#quote').text(response.quote);
$('#author').text(response.author);
}
I've spent hours on Twitter's dev page without any luck. Any help would be greatly appreciated, thanks.

Passing variable from JavaScript to PHP using AJAX doesn't show anything

I'm trying to send a PHP variable to JavaScript using AJAX and implementing to HTML, but the result doesn't show anything.
My HTML code:
<div class="contain" id="konten_data"
style="margin-top: 20px;"></div>
My JavaScript code:
function tampilDepan(id){
$.ajax({
type: 'POST',
url: 'userAction.php',
data: 'action_type=tdepan&id='+id,
success:function(html){
$('#konten_data').html(html);
}
});
}
My PHP code (userAction.php):
($_POST['action_type'] == 'tdepan'){
$link = mysqli_connect("localhost", "root", "", "universitas");
$datas = mysqli_query($link, "SELECT * FROM mahasiswa where user='john' ");
if(!empty($datas)){
while ($datak = mysqli_fetch_assoc($datas)){
echo '<div class="row" style="margin-left: -90px;">
<div class="col-xs-6 col-sm-6 col-md-4">
<img class="img-thumbnail img-responsive"
src="images/test/'.$datak['gmb_batik'].'" alt=""></div>
<div class="col-xs-12 col-md-8">
<div class="content-box-large">
<p>'.$datak['desc_batik'].'</p>
</div>
</div>
</div>
<div class="row" style="margin-left: -90px; margin-top: 10px;">
<div class="col-xs-12 col-sm-6 col-md-4 col-md-offset-3">
<div class="content-box-large">
<h1 >asal <strong>'.$datak['asal_batik'].'</strong></h1>
</div>
</div>
<div class="col-xs-16 col-sm-6 col-md-2 col-md-offset-1">
<img class="img-thumbnail img-responsive"
src="login/admin/files/qrcode/'.$datak['qr_batik'].'"
alt="">
</div>
</div>
<div class="row" style="margin-left: -90px; margin-top: 10px;">
<div class="col-xs-12 col-sm-6 col-md-9 col-md-offset-4">
<div class="content-box-large">
<p>'.$datak['pola_batik'].' </p>
</div>
</div>
</div>';
}
}else {``
echo '<tr><td colspan="5">No user(s) found......</td></tr>';
}`
}
I don't know what is wrong, I hope somebody can help me.

Try to change the javascript code to
function tampilDepan(id){
$.ajax({
type: 'POST',
url: 'userAction.php',
data: {action_type: "tdepan", id: id},
success:function(html){
$('#konten_data').html(html);
}
});
}
As you can see, data is passed as an object instead of a string.
Also, be aware that if no user was found, you are putting a <tr> inside a <div>.

try to change in your ajax call.
function tampilDepan(id){
var postData ={"action_type":tdepan,"id":id};
$.ajax({
type: 'POST',
url: 'userAction.php',
data: postData ,
success:function(html){
$('#konten_data').html(html);
}
});
}

try to use the format below in calling ajax:
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
data: '{ "action_type":"' + tdepan + '", "id":"' + id + '"}',
url: 'userAction.php',
success: function (data) {
conosle.log(data);
},
error: function (error) {
console.log(error);
}
});

You are trying to get your data using konten_data probably by using jQuery selector $('#konten_data').val();
, but I don't see it in the PHP code as where you are pushing the data to render onto the DOM. Try setting the value of konten_data by adding an element before the success callback or on DOM render and you should be good from there.

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

Unable to refresh the listview after deleting item using action sheet in Kendo UI Mobile

i have a listview with some items retriving form the server
<div
id="getbookmarks"
data-role="view"
data-title="my bookmarks"
data-before-show="app.views.showgetbookmarks.beforeShow"
data-show="app.views.showgetbookmarks.show"
data-layout="default" >
<div data-role="touch" >
<ul id="listview-getbookmarks" data-role="listview" data-endless-scroll="true" data-template="mF"></ul>
<div data-role="actionsheet" id="companyActionsList" data-open="app.views.showgetbookmarks.onOpen" data-close="app.views.showgetbookmarks.onClose" data-popup='{"direction": "left"}' >
<li>Delete</li>
</div>
</div>
</div>
the template looks as follow
story Title <div class="h2">#= storyTitle #</div>
<p data-role="button" data-rel="actionsheet" href="\\#companyActionsList" data-actionsheet-context="#: id#">Delete</p>
</a>
</script>
and the function for deleting the item using ajax looks as the follow ..i am able to delete the element but listview is unable to reload automatically.after delete
reply: function (e) {
console.log("done"+ e.context);
var deleteid= e.context;
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: kkkkk.getServiceUrlJson() + "? hello"
,type: "POST"
,dataType: "json"
,data: {
bookmarkId:deleteid
}
,xhrFields: {
withCredentials: true
}
}
}
});
dataSource.read();
},

i had the same problem, try to put this code inside the click event
$("#listview-getbookmarks").data('kendoMobileListView').dataSource.data().remove($(this)[0].dataItem);