Loading popups with $.get - Jquery Mobile - javascript

I'm trying to load some data from a server. I have some links that when I click on them, I want them to open the right corresponding popup with that data in them. But the popups just appears as formatted text on the page. If you look at the code they are containing <p> tags. The result of the loadPopups function is that it just prints the <p> tags to the page. No popup behaviour.
Here is my code to get the popup data
function loadPopups() {
$.get("load.php", function(data) {
data = $.parseJSON(data);
var str = '';
for( laxa in data.laxor) {
var laxaArray = data.laxor[laxa];
str += '' +
'<div data-role="popup" id="' + (laxaArray.laxa_id + 'rubrik') + '">' +
'<p>' + laxaArray.rubrik + '<p>' +
'</div>' +
'<div data-role="popup" id="' + (laxaArray.laxa_id + 'beskrivning') + '">' +
'<p>' + laxaArray.beskrivning + '<p>' +
'</div>' +
'';
}
//alert('Data loaded');
$("#popup_containor").html(str).page();
});
}
this then gets added to this <div>
<div id="popup_containor">
</div>
When I try to display the popup by using the same id that is specified in the for loop for each popup like this
<p>Hej<p>
Nothin happens. The popups are simply displayed as if there where no <div data-role="popup">
Any help is appreciated
Thanks

Why won't you separate the logic?
Get whatever values you want first from server.
let's say var a= 'string 1 from server', b='string 2' and so on.
Create functional popup in your page with no data.
Done
<div data-role="popup" id="134rubrik" data-overlay-theme="b">
<p id="serverdata"> </p>
</div>
Than fill your popup using JS or jQuery:
document.getElementById('serverdata').value= a;

Related

How can I load data from a service that returns JSON and create content using jQuery?

I am a beginner in JS .. so I am reaching out to you, hoping someone could enlighten me! :)
I have been given a JSON link listing a lot of infos and I must create an html using at least 2 pieces of info from this JSON link.
I have already imported my stylesheets (+script) in the html and I coded this in my script.js :
$.getJSON('myjsonlink', function(json) {
console.log(json);
});
If one of you guys have a moment to give me hand, it would be awesome! Thank you so much in advance.
Athena.
There are few issues with the way you are reading data and rendering it:
There is no naruto property on response, it is results instead.
img is not a valid property, it should be image_url instead.
Let's fix it:
$('#get-data').click(function() {
var showData = $('#show-data');
$.getJSON('https://api.jikan.moe/v3/search/anime?q=naruto', function(data) {
var naruto = data.results;
for (var i = 0; i < naruto.length; i++) {
var anime = naruto[i];
var html = '<div class="card">' + '<img src="' + anime.image_url + '">' + '<div class="cardcontainer">' + '<p>' + anime.title + '</p>' + '<p>' + anime.synopsis + '</p>' + '</div>' + '</div>';
showData.append(html);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="get-data">Load Data</button>
<div id="show-data"></div>

append jquery does not work

i am creating a search suggestion and i want to create a div and put suggestion elements like full name, image and ... in it.
so i have a empty div in my HTML code that my suggestions will be added to it.
<input type="text" name="query" autocomplete="off" id="base_main_search_box">
<button type="button" value="" id="base_main_search_box_button"></button>
<div id="main_searchSuggestion">
</div>
i want to appear search suggestions when user key up in input type.
so i create jQuery function.
my jQuery function is:
$('#base_main_search_box').keyup(function () {
$.ajax({url:'http://localhost:8000/search_suggestion/',success:function(result){
$(addSuggestion).append('<div class="base_searchSuggestionItem">' +
'<img src="' + result.movie_images[i] + '" class="base_searchSuggestionItem_image">' +
'<div class="base_searchSuggestionItem_info">' +
'<p class="base_searchSuggestionItem_info_name">' +
'<a href="">' +
result.movie_names[0] +
'</a>' +
'(' +
result.movie_yearProduction[0] +
')' +
'</p>' +
'<p class="base_searchSuggestionItem_info_description">' +
result.movie_descriptions[0] +
'</p>' +
'</div>' +
'</div>');
console.log('final: '+addSuggestion.innerHTML);
}
}});
});
the output is:
"final: undefined"
it is not correct.
As per the docs
.html() is not available on XML documents so you need to add it to DOM before setting or checking its HTML.
change the sequence as following
$(addSuggestion).append(search_item);
$(search_item).html(
div_innerHTML
);
console.log('div_innerHTML: '+div_innerHTML);
console.log('search_item: '+$(search_item).innerHTML);

Creating jquery menu - json response

I've created a bootstrap menu from a json response. The menu gets the list of items and creates a link to https://example.com/api/products/GetProductDetail/product_id which takes you to the json response.
What I need it to do is not follow the link to the json response, but rather get that response, parse the data and plug it into a div on the existing page, but I'm not sure how to do that.
Here is what I have right now:
<script>
$.getJSON('https://example.com/api/products/GetProductList/', function(data) {
var output = '<div class="panel panel-default">';
for (var i in data.Categories) {
output += '<div class="panel-heading '+data.Categories[i].category_id +'"><a data-toggle="collapse" data-parent="#accordion" href="#' + data.Categories[i].category_id + '-products">';
output += data.Categories[i].Category + '</a></div>';
output += '<div id="' + data.Categories[i].category_id + '-product" class="panel-collapse collapse"><div class="panel-body">';
for (var j in data.Categories[i].Products) {
output += '<li>'+data.Categories[i].Products[j].short_description + " -- " + data.Categories[i].Products[j].cost+' coins</li>';
}
output += "</div></div>";
}
output += "</div>";
document.getElementById("accordion").innerHTML = output;
});
</script>
Instead of creating a link to the product detail url, create a link to some function accepting the productid.
This function could make a call just like the one you currently have for the product list, processing the json and appending the result to a div.
So add a function like:
function getProduct(id) {
$.getJSON('https://example.com/api/products/GetProductDetail/' + id, function(data) {
//Process JSON to some HTML.
var productDetails = '<div>' + data.Product.Name + '</div>';
//Add it to the div where you want your product details to appear
document.getElementById("detailsDiv").innerHTML = productDetails;
};
}
and replace the li, created for every product in the overview with something like the following:
output += '<li><a onclick="getProduct(' + data.Categories[i].Products[j].product_id + ');">'+data.Categories[i].Products[j].short_description + " -- " + data.Categories[i].Products[j].cost+' coins</a></li>';

Load JSON data using the dropdown menu and refresh the div area with the new results in a web site

I am trying to load JSON data from a drop down menu to a div area which would be refreshed with the new results, i have manged to get the data and show it in the div area without using the drop down menu, but cannot find a way to call the required data using the drop down menu.
the below code is to bring up part of the json data from the json file that is present which is working when i load the web page, but what i need is that when the user clicks on the drop-down menu and clicks any of the links, the relevant json data will be displayed
$(function loadpc()
{
$(document).ready(function () { // load json file using jquery ajax
$.getJSON('PCproducts.json', function (data) {
var output = '<div id="row">';
var count = 1;
$.each(data.pc, function (key, val) {
output += '<div id="holding-area">';
output += '<div id="img-area">' +
'<img id="img" src="'+val.imgpath+'" alt="'+ val.title +'" /></div>';
output += '<div id="info">';
output += '<h2>' + val.title + '</h2>';
output += '<p>' + val.category + '</p>';
output += '<p>' + val.develop + '</p>';
output += '<p>' + val.released + '</p>';
output += '<p>' + val.price + '</p>';
output += '<p>' + val.quantity + '</p>';
output += '<p><input type="submit" value="Add to cart" class="btn" /></p>'
output += '</div>';
output += '</div>';
if(count%2 == 0){
output += '</div><div id="row">'
}
count++;
});
output += '</div>';
$('#content-2-1').html(output); // replace all existing content
});
});
});
Can anyone please guide me in the right direction as i have been trying for a long time with no success
Using jquery template is the simple manner :)
You may find some info there jquery template documentation
jquery template is a simple type formatted like this i took it from one of my project:
<script type="text/x-jquery-tmpl" id="tplmsg">
<div class="row">
<div class="col-xs-3 col-md-1">
<img src="${src}" class="img-thumbnail" alt="${title}" />
</div>
<div class="col-xs-9 col-md-11">
<div class="col-xs-12 col-md-12">
<p class="title">${getSubstring(title,0,100)}</p>
</div>
<div class="col-xs-12 col-md-12 btf" >
<p class="adsdts"><strong>Data: </strong>${parseJsonDate(DateAdd)}
<strong>Prezzo:</strong>${price}
<strong>Provincia:</strong>${pvname}
<%--<strong>Provincia:</strong>${pvname}--%>
</p>
</div>
</div>
</div>
<hr />
</script>
In abovesnippet you may see some stuff which is vbnet related how ever logic is the same.
Then you may fill it with simple js function like this:
function getAds(task,token) {
var qry='task='+task+'&token=' +token;
$.ajax(
{
type: "POST", url: url, data: qry
,
success: function (msg) {
if (msg.hasOwnProperty('error')) {
$("#").html(msg.error);
return;
}
else if (msg.hasOwnProperty('empty')) {
$("#result").html(msg.empty);
return;
}
else {
//reular version
$("#"+msg.tmpl).tmpl(msg.data, null).appendTo("#"+msg.result);
}
},
error: function (msg) {
$("#result").html("errore durante l'elaborazione");
}
});
}
That's all simple and fast.

Conditional javascript for Google Map values

I'm passing some variables to my google maps scrip to output an address in an info window. The variables are being pulled from a database, but not all of them will always exist. Using the following code I sometimes end up with multiple <br> tags in a row, meaning I get awkward breaks in the content.
So my question is how do I make it conditional so that only the variables that exist will display, followed by a <br>?
var contentString = '<div id="map_info">'+
'<h4>' + gmapsstring.gmapaddressname + '</h4>'+
'<div id="bodyContent">'+
'<p>' + gmapsstring.gmapaddressstreet + '<br>' +
gmapsstring.gmapaddressline2 + '<br>' +
gmapsstring.gmapaddressline3 + '<br>' +
'<span class="gmap_postcode">' + gmapsstring.gmapaddresspostcode + '</span></p>'+
'</div>';
Any suggestions would be greatly appreciated.
Thanks
You can use the length property of the variables, so you'd have something like:
var contentString = '<div id="map_info">';
if( gmapsstring.gmapaddressname.length > 0 ) {
contentString += '<h4>' + gmapsstring.gmapaddressname + '</h4>';
}
and so on. Or even better, you can loop through the properties, using a similar code.

Categories