Not able to select item from autocomplete text in jquery mobile - jquery-mobile

I have created and autocomplete text using jquery mobile. I am able to fetch the data from the remote server but the problem is when I click on the list it only show that list is click what I want is when I select item from list the selected item should place in the input field and the list should hide. Can any one tell how to do this
thanks in advance.
<input type="text" id="searchTermInput" placeholder="enter project name"/>
<ul id="autocomplete" data-role="listview" data-inset="true"
data-theme="b" data-mini="true"></ul>
Here is the coed for fetching the data from the remote server:
$(document).ready(function(){
$('#searchTermInput').on('input',function(e){
var $itemList=$('#autocomplete');
$itemList.empty();
var $inputElem=$(this);
//triget only when at least 2 characters have been entered
var keywords = $inputElem.val();
if(keywords.length<2){
return;
}
$.ajax({
url:"link of the url file",
type:"POST",
data:{projectName:keywords},
dataType:"json",
context:{responseCallback: $itemList},
timeout:3000,
success:function(data,status,xhr){
if(data.length>0){
var listItemHtml="";
$.each(data,function(i,val){
listItemHtml +="<li><a href='#'>"+val.project_name+"</a><?li>";
});
$('#autocomplete').html(listItemHtml);
$('#autocomplete').listview("refresh");
}
}, error: function (xhr, status, err) {
alert(err);
}
});
});
});

Related

How to show multiple entries in multiple bootstrap cards?

I want to show my tasks like this in bootstrap cards -
Picture for reference
Code that I'm using right now -
HTML
<div class="card" id="todo"></div>
AJAX
var data = JSON.parse(httpRequest2.response);
console.log(data);
$.each(data, function(index, itemData) {
$("#todo").append('<div class="row"><div class="col-9">'+
itemData.Todo.task+
'</div></div></div>'+
'<div class="col-3"><p>'+
Some Data
</div>'
);
});
It is showing multiple to-do in one card. How can I show one to-do in one card?
Please help!
The problem is that you add all the todo in one card (div#todo). So what you need to do is juste to make a div that will contains the card.
<div id="todos"></div>
const data = JSON.parse(httpRequest2.response);
console.log(data);
$.each(data, function(index, itemData) {
$("#todos").append('<div class="card"><div class="row"><div class="col-9">'+
itemData.Todo.task+
'</div></div></div>'+
'<div class="col-3"><p>'+
Some Data
</div></div>'
);
});
It should work as you want. And you can add css to improve style.

jQuery UI Autocomplete perform search on button click issues

I have a working UI Auto complete with jQuery. I wanted to change the way it worked. Instead of a new browser tab opening with the user selects a value from the list I wanted the user to first pick a value then click a search button to trigger the event.
It works but if you perform a search and then a second search it will trigger the previous URL and new URL at the same time. Also if you perform a search then click the search button without typing anything into the search input it triggers the previous search. Weird right? I'll add my code but I think a codepen example will help clarify what I mean.
The other issue I was having is I am trying to set up a custom alert if the value typed is not in the array but I get the invalid error message no matter what I type. I added that as well in the code. It is one of the if statements.
JS
var mySource = [
{
value: "Google",
url: "http://www.google.com"
},
{
value: "Yahoo",
url: "https://www.yahoo.com"
},
{
value: "Hotmail",
url: "https://hotmail.com"
},
{
value: "Reddit",
url: "https://www.reddit.com"
}
];
//Logic for ui-autocomplete
$(document).ready(function() {
$("input.autocomplete").autocomplete({
minLength: 2,
source: function(req, resp) {
var q = req.term;
var myResponse = [];
$.each(mySource, function(key, item) {
if (item.value.toLowerCase().indexOf(q) === 0) {
myResponse.push(item);
}
if (item.value.toUpperCase().indexOf(q) === 0) {
myResponse.push(item);
}
//Add if statement here to determine if what the user inputs is in the
// array
//and if not in the array give an error to #textAlert.
//Example
if (item.value.indexOf(q) != myResponse) {
$('#alertText').text("Invalid Search");
} else {
return false;
}
});
resp(myResponse);
},
select: function(event, ui) {
$('#appSearchBtn').one("click", function() {
window.open(ui.item.url);
$('#appsearch').val('');
return false;
});
}
});
});
//Input and ui text clears when clicked into
$(document).ready(function() {
var input = document.querySelector('#appsearch');
var ui = document.querySelector(".ui-helper-hidden-accessible");
input.onclick = function() {
input.value = '';
ui.textContent = '';
};
});
HTML
<p id="alertText"></p>
<div class="input-group">
<input type="text" id="appsearch" class="form-control autocomplete" placeholder="Application Search" />
<span class="input-group-btn">
<button class="btn btn-primary inputBtn" id="appSearchBtn" type="button">Search</button>
</span>
</div>
Here is a Code pen https://codepen.io/FrontN_Dev/pen/MEmMRz so you can see how it works. I also added how it should work and what the bugs are.
9/29/17 #0732
I resolved the issue with the event firing the same URL over and over but I still need help with the custom invalid search message that appears for every search even if the value is in the array.

jquery-ui tag "a" inside tooltip click event

fellows! I'm doing some frontend work using doT.js for generating content and jquery-ui for displaying tooltips.
{{##def.defboardtooltip:
<div class='tooltip'>
<!-- some html code -->
<a id='bdetails' href='#'>Click for details</a></div>
</div>
#}}
And how it is used:
<div class="participant" title="{{#def.defboardtooltip}}">
I'm trying to add the event to the a element with jquery as such ():
$(document).ready(function () {
// ...enter code here
$('#bdetails').click(function (e) {
// some code
console.log('fired');
});
});
And I never see the "fired". I'm confused.
jQuery Event delegates are your friend here.
Try:
$(function()
{
$(document).on('click', '#bdetails', function(e)
{
var a = $(this);
});
});
This will filter the event to just your #bdetails element, you can use any valid jQuery seletor here also; e.g., 'a' to delegate all anchor tag clicks.

Jquery data-role collapsible events aren't being captured in Jquery Mobile

Could anybody please let me know why the following code isn't working when i am using with Jquery mobile JS
http://jsfiddle.net/znz17ctm/7/
This is my code
<div role="main" class="ui-content oms-content" id="dd">
<div class="myactivelabelsWrap" id="result"></div>
</div>
var response = {
"Restaurants": [{
"RestrntArea": "Haii",
"cust_loc_id": "374"
}, {
"RestrntArea": "rerrrwe",
"cust_loc_id": "373"
}]
}
showLabels();
function showLabels() {
//$("#result").html("");
var favoriteresultag = '';
for (var i = 0; i < response.Restaurants.length; i++) {
var name = response.Restaurants[i].RestrntArea;
if (name) {
favoriteresultag +=
'<div data-role="collapsible" data-inset="false" class="my-collaspible"><h3>' +
name +
' <a class="icon-pencil-1 labelEditIcon "></a></h3></div>';
}
}
$("#result").append(favoriteresultag).trigger("create");
}
$(document).ready(function() {
$('.my-collaspible').bind('expand', function() {
alert('Expanded');
});
$('.my-collaspible').bind('collapse', function() {
alert('Collapsed');
});
});
Why the collapse and expand even'ts are being captured ??
Instead of document ready i tried with al the page events of mobile . But no luck .
From your fiddle I can't tell which version of jQM you are using. You have checked version 1.3 but then added the 1.4 css. Assumin version 1.4, I have updated your fiddle:
FIDDLE
Basically, you need to use event delegation to attach the events because the collapsibles do not exist at the time of the bind. Also the event names are actually collapsibleexpand and collapsiblecollapse.
So use on() instead of bind() by handling the event on the parent div and delegating it to all items with class my-collapsible that exist now or added dynamically:
$("#result").on('collapsibleexpand', '.my-collaspible', function () {
alert('Expanded');
});
$("#result").on('collapsiblecollapse', '.my-collaspible', function () {
alert('Collapsed');
});

Using Handlerbars with Yahoo Pipes

I'm trying to pull JSON feeds from a yahoo pipes source into my jQuery Mobile project using Handlebars.js with jQuery's ajax method.
This method works without Handlebars, but there are some limitations. It doesn't show up in jquerymobile listview format, instead it pops out like a normal bullet list. Here's the source:
var pipeURL = "http://pipes.yahoo.com/pipes/pipe.run?_id=mu3NkfY_3BGtncSIJhOy0Q&_render=json";
$.ajax({
url : pipeURL,
dataType : "json",
success : function(data) {
console.log(data);
var html = '<ul data-role="listview" id="all-posts-two" data-filter="" data-count-theme="c">';
$.each(data.value.items, function(i, item) {
html += "<li>" + item.title + "</li>";
});
html += "</ul>";
//Add the feed to the page
$("#PostsList").empty().html(html);
}
});
Here's the source for the other method I've been trying to use with Handlebars but obviously I'm missing something somewhere.
$.ajax({
url : pipeURL,
dataType : "json",
success : function(data) {
//line to check the received data on the console
console.log(data);
//handlebars area
var source = $("#posts-template").html();
var template = Handlebars.compile(source);
var blogData = template(data);
$("#all-posts").append(blogData);
$("#all-posts").trigger("create");
dfd.resolve(data);
},
error : function(data) {
// console.log(data);
}
});
Here's the html source for the template
<ul data-role="listview" id="all-posts" data-filter=""></ul>
<script id="posts-template" type="text/x-handlebars-template">
{{#each value.items}}
<li data-postid="{{ID}}">
<a data-transition="slide" href="#">
<p>{{{title}}}</p>
</a>
</li>
{{/each}}
</script>
Anyone, please help me out please
From what I can see you are using an older version of jQuery Mobile (lower then 1.4).
Do it like this:
var pipeURL = "http://pipes.yahoo.com/pipes/pipe.run?_id=mu3NkfY_3BGtncSIJhOy0Q&_render=json";
$.ajax({
url : pipeURL,
dataType : "json",
success : function(data) {
console.log(data);
var html = '<ul data-role="listview" id="all-posts-two" data-filter="" data-count-theme="c">';
$.each(data.value.items, function(i, item) {
html += "<li>" + item.title + "</li>";
});
html += "</ul>";
//Add the feed to the page
$("#PostsList").empty().html(html);
$('#all-posts-two').listview('refresh');
}
});
Look at this line:
$('#all-posts-two').listview('refresh');
It will enhance dynamically added listview, of course there's one more thing, you need need to trigger it after whole dynamic list has been done and not on every li element, it will fail in this case. In your next example you are using this line:
$("#all-posts").trigger("create");
It will fail because trigger('create') is used to enhance whole data-role="content" not just part of it so as such it should be used only on data-role="content" div.
Read more about it in this other answer.
Or take a look at my blog article, there you will find a working example of listview created from remote JSON data.
Update:
If you are using jQuery Mobile 1.4 try this line:
$('#all-posts-two').enhanceWithin();
.enhanceWithin() is method introduced in jQuery Mobile 1.4 to replace all other methods.
Update 2
This question is finally answered in another question, or you can find it here with working example:

Resources