Good day all, I little stuck how to bind value id at <li> tag
My ajax
//AJAX MENGAMBIL KATEGORI SEKOLAH
$.getJSON('http://localhost/aplikasi/assets/www/include/kategori.php', function(data) {
console.log(data); //Untuk melihat data yang berhasil diambil di firebugs
results = data.items; //Menampung array ke dalam variabel results
//menggunakan fungsi each untuk membuat elemen list, sesuai banyaknya array
$.each(results, function (index, kategori) {
var html;
//Membuat element list untuk setiap kategori
html = '<li id="klik" data-katid="';
html += kategori.kat_id;
html += '"><a id="klik2" data-transition="slide" href="#list" OnClick="carisekolah()">';
html += kategori.kat_nama;
html += '</a></li>';
//Memasukkan ke dalam unordered list
$('#kategorisekolah').append(html);
});
//Refresh list
$('#kategorisekolah').listview('refresh');
//Memberikan fungsi ke setiap element
$("#listsekolah").children("li").bind("click", function (e) {
carisekolah($(this).attr("data-katid"));
});
});
function carisekolah(id) {
$.getJSON('http://localhost/aplikasi/assets/www/include/list.php?id=' + id, function(data) {
console.log(data); //Untuk melihat data yang berhasil diambil di firebugs
results = data.items; //Menampung array ke dalam variabel results
$('#listsekolah').empty();
//menggunakan fungsi each untuk membuat elemen list, sesuai banyaknya array
$.each(results, function (index, sekolah) {
var html;
//Membuat element list untuk setiap sekolah
html = '<li data-sekid="' + sekolah.content_id + '">';
html += '<h2>' + sekolah.content_nama + '</h2>';
html += '<p>' + sekolah.content_alamat + '</p>';
html += '<p> Telepon : ' + sekolah.content_telepon + '</p>';
html += '</li>';
//Memasukkan ke dalam unordered list
$('#listsekolah').append(html);
});
//Refresh list
$('#listsekolah').listview('refresh');
});
}
My HTML
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>Aplikasi Pencarian Sekolah</h1>
</div>
<div data-role="content">
<p> Selamat datang di aplikasi pencarian sekolah..<br /><br />
Silahkan memilih kota..
</p>
JABODETABEK
</div>
</div>
<div data-role="page" id="kategori">
<div data-role="header">
<h1>Aplikasi Pencarian Sekolah</h1>
</div>
<div data-role="content">
<ul id="kategorisekolah" data-role="listview" data-inset="true"></ul>
</div>
</div>
<div data-role="page" id="list" data-add-back-btn="true" data-back-btn-text="Kembali">
<div data-role="header">
<h1>List Sekolah</h1>
</div>
<div data-role="content">
<!-- Format list Jquery Mobile menggunakan fitur 'Pencarian' -->
<ul id="listsekolah" data-role="listview" data-filter="true" data-filter-placeholder="Cari sekolah..." data-inset="true"></ul>
</div>
</div>
</body>
I tested with static id and it works
$.getJSON('http://localhost/aplikasi/assets/www/include/list.php?id=1'
My function carisekolah(id) with get that parameter id is totaly fail, How i can get the paramater id in the right ways?
It's hard to understand your question. But it sounds like you want to do something like this:
$("li").on("click", function(event){
var id = $(this).attr("id");
carisekolah(id);
});
It seem's like you are binding the <li> of your list at DOM ready, however in your HTML markup your list has no children. If these are being added dynamically, then you should use event delegation. Give this a try:
$(document).on('click', '#listsekolah li', function() {
carisekolah(this.id);
});
If the ID is actually coming from the data-katid attribute, call the function like this:
carisekolah($(this).data("katid"));
Related
I am very new to jQuery. The first part of the code is to check the inputs and after checked it should display the checked items the below format. How can do this with the help of jquery.
<ul class="approval approval_scrolltab mt-3">
<li>
<div class="approval--member">
<img src="assets/images/user.jpg" class="user--image" />
<div class="w-100">
<h6 class="approval--name">Name</h6>
<p>Initiator</p>
</div>
<div class="form-group">
<div class="checkbox">
<input name="one" type="checkbox" id="one" />
<label for="one"></label>
</div>
</div>
</div>
</li>
</ul>
After checked it should displays in this format.
<div class="col-xl-6 col-lg-6 col-md-6 offset-xl-1">
<h6 class="heading--form mb-2 mt-3 mt-sm-0">
User
</h6>
<ul class="approval approval_scrolltab mt-3">
<li>
<div class="approval--member">
<img src="assets/images/user.jpg" class="user--image" />
<div class="w-100">
<h6 class="approval--name">Name</h6>
<p>Initiator</p>
</div>
<a href="">
<span class="ic-close"></span>
</a>
</div>
</li>
</ul>
</div>
I tried like this.It was working fine for the names but got no idea how can display this user image attached with name and also there is a cancel icon too near the name.I am only being able to display name with this code.
<script>
$('input[type="checkbox"]').on('change', function () {
var name = $(this).attr('data-name');
var image = $(this).attr('data-image');
if ($(this).prop('checked')) {
$('#checked-names').append('<p data-name="' + name + '">' + name + '</p>');
$('#checked-images').append("<img src='image'")
} else {
$('#checked-names p[data-name="' + name + '"]').remove();
$('#checked-images').remove()
}
});
</script>
UPDATE
With this close button I want to remove this from checked list(which works great) as well as I want to uncheck this from checked in input.
$('body').on('click', '.ic-close', function() {
$(this).closest('li').remove()
$(this).closest('li').prop('checked',false) #didn't worked
});
This script below might be helpful for you. I only added an ID to the user-list and removed the a tag from the close button in your HTML. The JavaScript appends the HTML you wish with the name and the image to the list. If you click the close span, the item will be removed.
UPDATE:
To uncheck the checkbox by closing its user-list item, you have to add an attribute like data-name="Initiator" to the checkbox. In the JavaScript if have added two lines into the click listener of the ic-close item, see below.
$('input[type="checkbox"]').on('change', function() {
var image_url = $(this).closest( '.approval--member' ).find( 'img' ).attr('src');
var name = $(this).closest( '.approval--member' ).find( '.approval--name ~ p' ).text();
if($(this).prop('checked')) {
$('ul#user-list').append(
'<li id="' + name + '">' +
'<div class="approval--member">' +
'<img src="' + image_url + '" class="user--image" />' +
'<div class="w-100">' +
'<h6 class="approval--name">Name</h6>' +
'<p>' + name + '</p>' +
'</div>' +
'<span class="ic-close">Close</span>' +
'</div>' +
'</li>');
} else {
$('ul#user-list #' + name).remove();
}
$('body').on('click', '.ic-close', function() {
var name = $(this).closest('li').find('.approval--name ~ p' ).text();
$('input[data-name="' + name + '"]').prop( "checked", false );
$(this).closest('li').remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="approval approval_scrolltab mt-3">
<li>
<div class="approval--member">
<img src="assets/images/user.jpg" class="user--image" />
<div class="w-100">
<h6 class="approval--name">Name</h6>
<p>Initiator</p>
</div>
<div class="form-group">
<div class="checkbox">
<input data-name="Initiator" name="one" type="checkbox" id="one" />
<label for="one"></label>
</div>
</div>
</div>
</li>
</ul>
<div class="col-xl-6 col-lg-6 col-md-6 offset-xl-1">
<h6 class="heading--form mb-2 mt-3 mt-sm-0">
User
</h6>
<ul id="user-list" class="approval approval_scrolltab mt-3">
</ul>
</div>
Simply check if you really need jQuery, in 2020 the pure Javascript have the majority of the jQuery fonctions : http://youmightnotneedjquery.com/
You can get the checked attribute via an event like this :
var checkbox = document.querySelector('[type="checkbox"]');
// Event Listener:
checkbox.addEventListener('change', function(event) {
alert(event.target.checked);
if(event.target.checked) {
// Do want do you want when checked
}
});
I don't understand very well what you expected but I hope that it could help you.
I am trying to insert a html block of code before the previous one. I am using the prepend() method to insert into a list and it works I am inserting where I want but its only outputting the plain html code
HTML
<div class="comments-list">
<ul class="comment-list-ul" id="comment-list-ul">
<?php require_once INCLUDES . 'blog-box.php';?>
</ul>
</div>
js.
function insertInto (){
var block = '<li class="comment-holder" id="_1"> ' +
'<div class="user-text"> ' +
'<h3 class="comment-username"></h3> ' +
'</div> ' +
'<div class="comment-body"> '+
'<div class="comment-text"></div> '+
'</div> '+
'<div class="comment-buttons"> '+
'<ul><li class="deleteBtn">Delete</li></ul> '+
'</div> '+
'</li> ';
$('comment-list-ul').prepend(block);
}
Output
<li class="comment-holder" id="_1"> <div class="user-text"> <h3 class="username-field"></h3> </div> <div class="comment-body"> <div class="comment-text"></div> </div> <div class="comment-buttons-holder"> <ul><li class="delete-btn">Delete</li></ul> </div> </li>
What am I doing wrong?
I want to retrieve posts from my site web with JSON API, and I tried more codes but no data displaying. Where is the problem?
HTML:
<div data-role="page" id="searchPage" >
<div data-role="header" data-position="fixed">
<h1>News</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" id="searchFood"></ul>
</div>
JS:
$(document).on("pageinit", "#searchPage", function(){
$.getJSON("http://www.maan-lagh.com/?json=get_recent_posts", function(data){
var output = '';
$.each(data, function (index, value) {
output += '<li>' + value.title + '</li>';
});
$('#searchFood').html(output).listview("refresh");
});
});
I was hoping not to ask this question yet since I decided to read more and do more research but at the moment I am not getting much far with it.
This is my code:
function listPosts(data) {
var $count = data.count;
var limitposts = 5;
var $output = $('<ul class="posts" data-role="listview" data-filter="true">')
$.each(data.posts,function(i, val) {
console.log(i);
if (i<limitposts && i>=0) {
var $post = $('<li/>').append([$("<h3>", {html: val.title}),$("<p>", {html: val.excerpt})]).wrapInner('');
$output.append($post).appendTo('#postlist');
i++;
// return (i !== 4);
}});
}
HTML
<!-- Page: home -->
<div id="home" data-role="page" data-theme="d" data-title="My first App">
<div data-role="listview">
Display Messages
</div><!-- links -->
</div><!-- page -->
<div id="devotion" data-role="page" data-title="My first App">
<div data-role="header" data-theme="a" data-position="fixed"> <h2>Devotional Messages</h2></div><!-- header -->
<div data-theme="d" data-role="listview" id="postlist"> </div><!-- content -->
<div class="addMorePosts">Load More Posts...</div>
</div><!-- page -->
<script src="http://howtodeployit.com/category/daily-devotion/?json=recentstories&callback=listPosts" type="text/javascript"></script>
I initially limited the number of Posts displayed by using the Return statement. I now changed it to For statement to see if I can increment the number of Posts displayed by the click of a button.
At this stage I am trying to figure out the best logic to use. I have tried to add another Function to achieve this but no luck. Still reading and researching but was hoping for guidance or good example
function addMorePosts ( data, offset, amount ) {
var $postsList = $('#postlist'),
posts = data.slice(offset, amount);
$.each(posts, function ( index, post ) {
$postsList.append(
'<li>' +
'<h3>' + post.title + '</h3>' +
'<p>' +
post.excerpt +
'' +
'</p>' +
'</li>'
);
});
}
JSFiddle: http://jsfiddle.net/V4Ucv/2/
each time I click on a Post link I want the Title of the Post to appear on the Header page. See screen shot
As seen, I would like the 'Devotional Message' replaced by the Post Title...
HTML Code:
<div id="devotionpost" data-role="page">
<div data-role="header" data-position="fixed" data-theme="a">
<h1>Devotional Message</h1>
Devotion
</div><!-- header-->
<div data-role="content">
<div id="mypost"> </div>
</div><!-- content -->
</div><!-- page -->
JS Code:
function showPost(id) {
$.getJSON('http://howtodeployit.com/?json=get_post&post_id=' + id + '&callback=?', function(data) {
var output='';
output += '<h3>' + data.post.title + '</h3>';
output += data.post.content;
$('#mypost').html(output);
});
function showPost(id) {
$("#devotionpost h1").html("");// to empty previous title
$.getJSON('http://howtodeployit.com/?json=get_post&post_id=' + id + '&callback=?', function(data) {
var output='';
output += '<h3>' + data.post.title + '</h3>';
output += data.post.content;
$('#mypost').html(output);
$("#devotionpost h1").html(data.post.title);// by this 'Devotional Message' replaced by the Post Title..
});