Dynamically created button gets automatically fired - javascript

I am creating a dynamic unordered custom List view. In each element, there is one button. I am creating the list elements in the following way:
for (i = 0; i < arrayID.length; i++) {
var listElement = '<li class="has-form">' +
'<div class="row collapse">' +
'<div class="small-1 columns" style="margin: 5px">' +
'<img src="image/twitter.png">' +
'</div>' +
'<div class="small-6 columns small-only-text-center">' +
'<p>' +
'<i>' + arrayText[i] + '</i>' +
'</p>' +
'</div>' +
'<div class="small-3 columns">' +
'<button type="button" class="large-10" onclick="' + onClickViewButton() + '">view</button>' +
'</div>' +
'<div class="small-1 columns">' +
'<input id="checkbox1" type="checkbox">' +
'</div>' +
'</div>' +
'</li>';
$("#myList").append(listElement);
}
The code for button click is:
function onClickViewButton() {
alert('hello');
}
But unfortunately the when the page is loading, the button click is fired and not working on actual button click.
Please help.


Where you have:
onclick="'+onClickViewButton()+'"
you need to have:
onclick="onClickViewButton()"
instead.
Your current code calls the onClickViewButton function in your declaration, when what you really want to do is to just use it as a function reference so it gets called later on onclick.


Try with this snippet:
If you concat function name with parenthesis then it will be treated as function execution hence function will get called.
for (i = 0; i < arrayID.length; i++) {
var listElement = '<li class="has-form">' +
'<div class="row collapse">' +
'<div class="small-1 columns" style="margin: 5px">' +
'<img src="image/twitter.png">' +
'</div>' +
'<div class="small-6 columns small-only-text-center">' +
'<p>' +
'<i>' + arrayText[i] + '</i>' +
'</p>' +
'</div>' +
'<div class="small-3 columns">' +
'<button type="button" class="large-10" onclick="onClickViewButton()">view</button>' +
'</div>' +
'<div class="small-1 columns">' +
'<input id="checkbox1" type="checkbox">' +
'</div>' +
'</div>' +
'</li>';
$("#myList").append(listElement);
}

Related

Doubleclick event not working in mobile browser view

i created a double click event on a div , when i click twice a heart react appears on top of the image , on the web browser vue it works fine but when i pressed F12 and switched to mobile view it didn't work
here is my javascript function :
$(document).on("dblclick", '#tesst', function (e) {
var heart = $(this).find("i");
heart.fadeIn("slow");
setTimeout(function () {
heart.fadeOut("slow");
}, 2000);
heartReact();
});
here is my div :
stringMsg =
'<div class="/col-lg-4 delcd-tours animate-box/">' +
'<div id="tesst" class="hot-img-container" >' +
'<a href="#">' +
'<div class="instagram">' +
'<i id="heart" class="fa fa-heart">' + '</i>' +
'<img src="" id="myImgTag' + element.id_publication + '" class="img-fluid" alt="" />' +
'</div>' +
"</a>" +
'<div class="desc">' +
"<span>" +
"</span>" +
"<h3>" +
element.pays +
"</h3>" +
"<span>" +
"</span>" +
'<span class="price">' +
element.budget +
"</span>" +
'<a class="btn btn-primary btn-outline" href="tour-detail.html">' +
"View Trip" +
'<i class="icon-arrow-right22">' +
"</i>" +
"</a>" +
"</div>" +
"</div>" +
"</div>";
document.getElementById("pubslist").innerHTML += stringMsg;
document.getElementById("myImgTag" + element.id_publication).src = element.imagePub;
is there any solution for this problem to make it work on both web and mobile view

Javascript - How to insert html template and use variables in it

I wonder how can I insert html template into a javascript function and use variables in it, like for example here, where I am creating html and inserting variables to it. I would like to know how can I make it cleaner and have a template in a separate file and then use it in the function.
{
source: autocomplete.sources.hits(videos, { hitsPerPage: 5 }),
displayKey: 'title',
templates: {
header: '<div class="aa-suggestions-category">Videos</div>',
suggestion: function(suggestion) {
return '<span>'
+ '<a href="/player/' + suggestion.id + '">'
+ '<div class="media">'
+ '<div class="media-left">'
+ '<img class="media-object" src="https://s3.eu-central-1.amazonaws.com/myUrl/' + suggestion.video_id + '_1.jpg">'
+ '</div>'
+ '<div class="media-body">'
+ '<p>' + suggestion._highlightResult.title.value + '<small><abbr class="timeago" title="' + suggestion.created_at + '">' + suggestion.created_at + '</abbr></small>' + '</p>'
+ '<small> ' + '</small>'
+ '</div>'
+ '</div>'
+ '</a>'
+'</span>';
}

Displaying part of JSON data using javascript

I'm trying to use JSON to print content to the screen. I'm trying to print out as two different sections so the "albumData" displays as columns in the "albumData" div and the audio equipment goes in a div further down the page. I have tried having {audio: [ ...]} in the JSON array but that never seems to work. The issue right now is the JS file is outputting too munch data and is not stopping when the the object is not in the array. Ideally, it would put out a 4x4 layout for the albums, and a 4x3 layout for devices but instead both sections are outputting 4x7 and many of the text is 'undefined'.
Do you guys have any tips on targeting specific JSON data? Thanks for your help
HTML Code:
<h1 class="headText">Wall of Fame</h1>
<hr class="style14"></hr>
</br></br>
<h2>Albums: </h2>
<div id="albumData" class="row"></div>
</br></br>
<h2>Equipment: </h2>
<div id="deviceData" class="row"></div>
<script src="js/wall.js"></script>
JS Code:
$.getJSON("jsonDatabase/wall.json",function(data){
console.dir(data);
var html = "";
$.each(data, function(index, item){
html += '<div class="col-md-3">'+
'<img class="albumImage" src=""' + item.albumImage + '"/>' + "<br>" +
'<div class="albumArtist">' + "<strong>Artist: </strong>" + item.artist + '</div>'+
'<div class="albumTitle">' + "<strong>Album: </strong>" + item.albumTitle + '</div>'+
'<div class="albumYear">' + "<strong>Year: </strong>" + item.year + '</div>'+
'<div class="albumGenre">' + "<strong>Genre: </strong>" + item.genre + '</div>'
html += '</div>'; //col-md-3
})//each album
$("#albumData").append(html);
//end record data
var device = "";
$.each(data, function(ind, item){
device += '<div class="col-md-3">'+
'<img class="deviceImage" src=""' + item.deviceImage + '"/>' + "<br>" +
'<div class="deviceName">' + "<strong>Name: </strong>" + item.device + '</div>'+
'<div class="deviceType">' + "<strong>Device: </strong>" + item.type + '</div>'+
'<div class="deviceCompany">' + "<strong>Company: </strong>" + item.comapny + '</div>'+
'<div class="devicePrice">' + "<strong>Price: </strong>" + item.price + '</div>'
device += '</div>'; //col-md-3
})//each device
$("#deviceData").append(device);
})
// closes getJSON
})
JSON Array:
[{"albumImage":"","artist":"Bruce","albumTitle":"","year":"","genre":""},
{"albumImage":"","artist":"Tom Waits","albumTitle":"","year":"","genre":""},
{"albumImage":"","artist":"Alison Krauss","albumTitle":"","year":"","genre":""},
{"albumImage":"","artist":"Pink Floyd","albumTitle":"","year":"","genre":""},
{"albumImage":"","artist":"Rage Against the Machine","albumTitle":"","year":"","genre":""},
{"albumImage":"","artist":"","albumTitle":"","year":"","genre":""},
{"albumImage":"","artist":"","albumTitle":"","year":"","genre":""},
{"albumImage":"","artist":"","albumTitle":"","year":"","genre":""},
{"albumImage":"","artist":"","albumTitle":"","year":"","genre":""},
{"albumImage":"","artist":"","albumTitle":"","year":"","genre":""},
{"albumImage":"","artist":"","albumTitle":"","year":"","genre":""},
{"albumImage":"","artist":"","albumTitle":"","year":"","genre":""},
{"albumImage":"","artist":"","albumTitle":"","year":"","genre":""},
{"albumImage":"","artist":"","albumTitle":"","year":"","genre":""},
{"albumImage":"","artist":"","albumTitle":"","year":"","genre":""},
{"albumImage":"","artist":"","albumTitle":"","year":"","genre":""},
{"deviceImage":"","device":"E12","type":"Portable amp","company":"FiiO","price":"$130"},
{"deviceImage":"","device":"GS1000e","type":"Headphone","company":"Grado","price":"$1300"},
{"deviceImage":"","device":"RS1i","type":"Headphone","company":"Grado","price":"$850"},
{"deviceImage":"","device":"SR60e","type":"Headphone","company":"Grado","price":"$80"},
{"deviceImage":"","device":"HD 650","type":"Headphone","company":"Sennheiser","price":"$500"},
{"deviceImage":"","device":"SRH 860","type":"Headphones","company":"Samson","price":"$60"},
{"deviceImage":"","device":"MA750i","type":"In-ear monitors","company":"RHA","price":"$130"},
{"deviceImage":"","device":"Play: 1","type":"WiFi connected speaker","company":"Sonos","price":"$229"},
{"deviceImage":"","device":"Walsh 3","type":"Speakers (passive)","company":"Ohm","price":"$2,000"},
{"deviceImage":"","device":"Evo 2/8","type":"Speakers (passive)","company":"Wharfedale","price":"$400"},
{"deviceImage":"","device":"Asgard 2","type":"Amplifier","company":"Schiit","price":"$299"},
{"deviceImage":"","device":"Modi","type":"DAC","company":"Schiit","price":"$99"}]

Since it's one array don't parse it 2x, use variables instead.
var deviceHtml = "";
var albumHtml = "";
$.each(data, function(index, item){
if(typeof(item.albumImage) != "undefined" && typeof(item.deviceImage == 'undefined')
{
albumHtml += '<div class="col-md-3">'+
'<img class="albumImage" src=""' + item.albumImage + '"/>' + "<br>" +
'<div class="albumArtist">' + "<strong>Artist: </strong>" + item.artist + '</div>'+
'<div class="albumTitle">' + "<strong>Album: </strong>" + item.albumTitle + '</div>'+
'<div class="albumYear">' + "<strong>Year: </strong>" + item.year + '</div>'+
'<div class="albumGenre">' + "<strong>Genre: </strong>" + item.genre + '</div></div>';
}
else if(typeof(item.deviceImage) != "undefined" && typeof(item.albumImage) == 'undefined')
{
deviceHtml += '<div class="col-md-3">'+
'<img class="deviceImage" src=""' + item.deviceImage + '"/>' + "<br>" +
'<div class="deviceName">' + "<strong>Name: </strong>" + item.device + '</div>'+
'<div class="deviceType">' + "<strong>Device: </strong>" + item.type + '</div>'+
'<div class="deviceCompany">' + "<strong>Company: </strong>" + item.comapny + '</div>'+
'<div class="devicePrice">' + "<strong>Price: </strong>" + item.price + '</div>';
deviceHtml += '</div>'; //col-md-3
}
})//each album
$("#albumData").append(albumHtml);
$("#deviceData").append(device);
You will also want to skip records that have no values for any of them so you will need to add an additional if block in there to test that the string isn't empty, else skip that iteration of the loop.
If, as in your comments you change the format of your object to {albums:[ { } ], devices:[ { }] } you can then just use dot notation to access the key you wish to loop through.
$.each(data.albums,function(index, item){})
and
$.each(data.devices,function(index, item){})

Better way to use html templete with json response

I am getting json response from my server.
I am getting detail of user like school(name,id),major subject(name,id),start ,end etc.
I want to show this is appropriate text fields inside a form where user can edit this and after editing user should submit it again to server.
I am embadding fetched json code with html code inside the jquery.
I am finding it very difficult to manage html inside jquery is there any better way to this with following code.
$(document).on('click', '.edit-edu', function(event) {
event.preventDefault();
var id = $(this).parents('.row').attr('id');
var id1 = id.split('-');
$.post("SingleEdu", {id: id1[1]}, function(data) {
console.log(data);
$.each(data.educationList, function(key, value) {
$('#' + id).replaceWith('<div id="addNewEdu" class="addorEdit">'
+ '<legend>Edit education details</legend>'
+ '<form action="UpdateEducation" id="UpdateEducation" cssClass="form-horizontal">'
+ '<div class="form-group">'
+ '<div class="col-md-2">'
+ '<label>School/College</label>'
+ '</div>'
+ '<div class="col-md-6">'
+ ' <textfield name="ed.pageBySchoolPid.name" value="' + value.pageBySchoolPid.name + '" id="school2" label="School/College" placeholder="College or School Name" cssClass="form-control">' + '</textfield>'
+ '<input type="hidden" name="ed.pageBySchoolPid.id" value="' + value.pageBySchoolPid.id + '" id="schoolId2" label="School/College" cssClass="form-control">'
+ '</hidden>'
+ '</div>'
+ '</div>'
+ '<div class="form-group">'
+ '<div class="col-md-2">'
+ '<label>Major</label>'
+ '</div>'
+ '<div class="col-md-6">'
+ '<input type="text" name="ed.pageByMajorPid.name" value="' + value.pageByMajorPid.name + '" id="major1" label="Class" placeholder="Major Subject" cssClass="form-control">'
+ '<input type="hidden" name="ed.pageByMajorPid.id" value="' + value.pageByMajorPid.id + '" id="majorId1" label="Class" cssClass="form-control">'
+ '</div>'
+ '</div>'
+ '<div class="form-group">'
+ '<div class="col-md-2">'
+ '<label>Start</label>'
+ '</div>'
+ '<div class="col-md-6">'
+ '<input type="text" name="ed.start" value="' + value.start + '" id="sstart1" label="From" placeholder="eg. Start: July 2007" cssClass="form-control">'
+ '</div>'
+ '</div>'
+ '<div class="form-group">'
+ '<div class="col-md-2">'
+ '<label>End</label>'
+ '</div>'
+ '<div class="col-md-6">'
+ '<input type="text" name="ed.end" value="' + value.end + '" id="send1" label="To" placeholder="eg. End : May 2011 or Till" cssClass="form-control">'
+ '</div>'
+ '</div>'
+ '<div class="form-group">'
+ '<div class="col-md-2">'
+ '<label>Visibility</label>'
+ ' </div>'
+ '<div class="col-md-6">'
+ '<select label="Visibility" name="ed.visibility" value="' + value.visibility + '" id="svisibility1" value="public" cssClass="form-control">'
+ '<option>Public</option>'
+ '<option>Friends</option>'
+ '<option>Me</option>'
+ '</select>'
+ '</div>'
+ '</div>'
+ '<div class="form-group">'
+ '<div class="col-md-2">'
+ '<label class="sr-only">Submit</label>'
+ '</div>'
+ '<div class="col-md-6">'
+ '<input type="submit" value="add" id="submit_education" cssClass="btn btn-sm btn-success"/>'
+ '</div>'
+ '</div>'
+ '</form>')
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"></script>
<script src="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"></script>
<div class="row" id="edu-56">
<div>Specialization</div>
<div>School</div>
<div>start end</div>
<i class="fa fa-edit edit-edu">edit</i>
<i class="fa fa-times delete-edu"></i>
</div>

You could store your code inside another .html file and pull it in using another AJAX call:
var FormHTML = '';
$.get('form.html', function(data) {
FormHTML = data;
});
Then to get your values in you can set up your input HTML with something that can be easily replaced out. I've just wrapped the object name in between some #:
<input type="hidden" name="ed.pageByMajorPid.id" value="##pageByMajorPid.id##" id="majorId1" label="Class" cssClass="form-control">
Then to replace out these values with your actual values, just do a loop:
for (var name in value) {
if (typeof value[name] != 'object') { // If not an object, replace the value
formHTML = formHTML.replace('##' + name + '##', value[name])
} else { // Else if it is an object, loop through it
for (var name2 in value[name]) {
formHTML = formHTML.replace('##' + name + '.' + name2 + '##', value[name][name2])
}
}
}
$('#' + id).replaceWith(formHTML);
Hope that works for you, let me know :)

You can use template engine like Mustache https://mustache.github.io/

Unable to scroll after append

I am trying to fetch data from json file and then attach the data as listitem in a unordered list.
So its getting listed successfully, but I cannot scroll again through it.
Here is how my Javascript looks like:
function ListViewData(allpost) {
allposts = allpost;
$.each(allpost.posts, function (i, row) {
if (row.thumbnail_images) {
$(".list__container").append('<li class="list__item list__item--tappable list__item__line-height list-item-container">' +
'<div class="list-item-main">' +
'<div class="list-item-left">' +
'<img src="' + row.thumbnail_images['full'].url + '" class="thumbnail" width="80" height="80">' +
'</div>' +
'<div class="list-item-right">' +
'<div class="list-item-content">' +
'<span class="list-item-name">' + row.title + ' ' +
'<br/>' +
'<span class="lucent">' +
'<i class="fa fa-map-marker"></i> Paris, France' +
'</span>' +
'</span>' +
'<br/>' +
'<span class="list-item-text" style="margin-top:16px;">Eiffel Tower is the symbol of Paris and named by Gustave Eiffel.' +
'</span>' +
'</div>' +
'</div>' +
'</div>' +
'<span class="list-item-action" >' +
'<i class="fa fa-angle-right"></i>' +
'</span>' +
'</li>');
}
$(".list__container").listview();
});
$('.list__container').animate({
scrollTop: $('.list__container').prop("scrollHeight")
}, 500);
}
and here is how my HTML code looks like:
<div class="list list-top">
<ul class="list__container">
//here append data comes in place
</ul>
</div>

Instead of
$('.list__container').animate({
scrollTop: $('.list__container').prop("scrollHeight")
}, 500);
Try
$("html,body").animate({
scrollTop: $('.list__container').prop("scrollHeight")
}, 500);

Categories

Resources