I searched a lot on net but couldnt find any solution. I am making a webapp in which I want 2 textbox to get data input from user. I want autocomplete feature in this textbox. The list of tags for autocomplete is available locally. I tried listview but what I want is that after user select some option from autocomplete hints, the textbox should have the selected value, and through some object, i should get the value of textbox to be used by javascript/php. This is a very basic thing, but I'm not able to do. Please help me out
I tried this jsfiddle.net/ULXbb/48/ . But the problem in this is that both listview gets same value after I select something in 1 listview.
In order not to add the same value to both search input, you need to target them using .closest(), .next(), .prev() and .find(). jQuery-Mobile, enhances list-view with data filter in a different way.
Demo
<form>
<input>
</form>
<ul data-role="listview">
<li>
<a>text</a>
</li>
</ul>
The form where the input is located, is on the same level of the ul. To target the input box, you need to use .prev('form').find('input'). Check the demo and the new code below.
$("input[data-type='search']").keyup(function () {
if ($(this).val() === '') {
$(this).closest('form').next("[data-role=listview]").children().addClass('ui-screen-hidden');
}
});
$('a.ui-input-clear').click(function () {
$(this).closest('input').val('');
$(this).closest('input').trigger('keyup');
});
$("li").click(function () {
var text = $(this).find('.ui-link-inherit').text();
$(this).closest('[data-role=listview]').prev('form').find('input').val(text);
$(this).closest('[data-role=listview]').children().addClass('ui-screen-hidden');
});
Thanks #user714852 I have extended your answer just add this line in the script tag:
$("#mylist li" ).addClass('ui-screen-hidden');
It will do wonders.
A working example: Listview Autocomplete - Enhanced
Related
How can I use jquery to change the id of a div acting as a jquery mobile popup as well as the href of the anchor pointing to the popup?
In my webapp I have an anchor that, when clicked, brings up a jquery mobile popup div all of which I'm inserting dynamically. In any instance of the webapp, I don't know how many times this code will be inserted. Therefore, my understanding is that I need to be able to dynamically create a unique id for the jquery mobile popup div and set the href of my popup icon.
I am not currently succeeding at dynamically changing the id and href. I've created the following test (JSFiddle Test).
Here is my sample html:
<div class="phone1">
<p class="textLeft"> <strong>Number: </strong><span>(555)555-5555</span>
Learn more
</p>
<div id="myPopup" data-role="popup" class="ui-content" data-theme="a" style="max-width:350px;">
<p class="flagText">This number has been flagged as incorrect</p>
</div>
</div>
Change href property
Here is my sample javascript / jquery:
$('#changeButton').click(function () {
alert("Handler for .click() called.");
$('.phone1 > a').prop('href', 'myNewPopup');
$('#myPopup').attr('id', 'myNewPopup');
});
Thank you for your help in advance!
As your anchor is not a direct child of .phone1 but rather a grandchild, the > selector does not work. Also the href needs the # symbol:
$('.phone1 a').prop('href', '#myNewPopup');
Technically you should also use prop to update the id as well:
$('#myPopup').prop('id', 'myNewPopup');
Updated FIDDLE
Are you sure you need to do this. After dynamically inserting the popup the first time, you could just update it each successive time by testing if it exists in the DOM first:
if ($("#myPopup").length > 0){
//update
} else {
//create
}
TableSorter is a great jquery script to sort html tables with many options.
But I don't know how to add a simple 'export to csv' button (or link) to get a file containing the records of my table (with no special formatting).
I know the Output Plugin but it seems far too complex to me.
Thanks by advance for your help !
Ted
It's actually not complicated, it only looks intimidating because of all the options. The output widget can output csv, tsv, any other separated (space, semi-colon, etc) values, javascript array or JSON.
If you are just using basic functionality, the default settings will:
Output csv to a popup window
Only include the last header row
Only include filtered rows (so all rows if the filter widget isn't even being used)
Will only output the table cell text (ignores HTML)
All you would need is this code (demo):
HTML
<button class="download">Get CSV</button>
<table class="tablesorter">
....
</table>
Script
$(function () {
var $table = $('table');
$('.download').click(function(){
$table.trigger('outputTable');
});
$table.tablesorter({
theme: 'blue',
widgets: ['zebra', 'output']
});
});
I created another demo, showing all options, with a set of radio buttons which allow the user to choose between sending the output to a popup window, or downloading the file.
HTML
<label><input data-delivery="p" name="delivery" type="radio" checked /> popup</label>
<label><input data-delivery="d" name="delivery" type="radio" /> download</label>
<button class="download">Get CSV</button>
Script
var $table = $('table');
$('.download').click(function(){
// get delivery type
var delivery = $('input[name=delivery]:checked').attr('data-delivery');
$table.data('tablesorter').widgetOptions.output_delivery = delivery;
$table.trigger('outputTable');
});
So, you can make it as simple or complex as you want (see the actual output widget demo which allows the user to set almost all the options).
i dynamically generate this html code to delete an item with an id=3 for example:
"<a href='javascript:delete('" + item.id + "')>";
when i click this, it will execute delete('3');i change it as:
<a href='#delete' data-rel='popup' data-position-to='window' data-transition='pop'>
and add a dialog for this tag:
<div data-role='popup' id='delete'>
<a href='javascript:delete(item.id)' data-role='button'>delete</a>
</div>
how to transfer the item's id to this popup dialog's tag, any suggestion?
I feel like you might be going through the wrong way to achieve this. Some things to change :
delete is a JavaScript keyword. You cant use it as a function.
Don't use the onclick attribute. It results in duplication. Instead, you could use a click event for repetitive actions.
You seem to have gotten the idea to create multiple popups (one for each click of the anchor tag). I think one would do.
Now, in correlation with whatever I've just put down, here's some sample code.
HTML
<a href='#' class='delete' data-num='" + i + "'>Delete me</a>
(Note the data-num attribute in the HTML, the addition of class attribute and the removal of onclick in your code)
It could be replaced by JS which looks like this :
$(this).on("click", ".delete", function (e) {
//prevent default action
e.preventDefault();
//take the id value
var id = $(this).data("num");
//send that value to the popup
$("#delete").find("span").html(id).end().popup("open");
});
A demo fiddle for you to look at : http://jsfiddle.net/hungerpain/AxGde/2/
I've been using the tag-it plugin from https://github.com/aehlke/tag-it (demo - http://aehlke.github.com/tag-it/examples.html).
In this code there is an option to display the inputted tags in another input, textarea etc. First option -
$('#singleFieldTags').tagit({
availableTags: sampleTags,
singleField: true,
singleFieldNode: $('#mySingleField')
});
Here the id - #singleFieldTags is the inputting field which is a list like <ul and id - #mySingleField displays the 'list-ordered' tags with commas between each.
All the tags that are added and removed in the #singleFieldTags appear in the #mySingleField. Since there is no built-it sortable function with tag-it, adding a sortable() to change the order of tags in #singleFieldTags, does not change the order of tags in #mySingleField.
The second option is a plain with only #singleFieldTags as follows :-
$('#singleFieldTags').tagit({
availableTags: sampleTags,
});
Although in tag-it.js there is a , the value does not appear in the mysql table after submitting the php form as the above list of tags is placed between <li></li>.
How is it possible to make the tags sortable and ensure that the same arrangement of tags in the list field <ul to be displayed in the <textarea as in First Option? Or How can the second option of sorting tags within a single field <input work and enabling it to be submitted by a form?
EDIT: There is a similar plugin like Tag-it called tagit here: http://webspirited.com/tagit/ . This plugin has sortable with an input box meaning if the tags were interchanged, and when submitted on form it would appear in the order of the sort. However, the disadvantage being that it has custom themeroller themes these are not similar and cannot even be linked to the ones at jQuery UI (jqueryui.com).
But on the other hand, the tag-it plugin (not tagit), can be loaded with these themes but does not provide the sortable function.
Here's a solution that uses the tag-it plugin, because I understand that your missing functionality is explained in your quote "...adding a sortable() to change the order of tags in #singleFieldTags, does not change the order of tags in #mySingleField".
In order to have "#mySingleField" reflect the new sort order, I'm adding a handler to the stop event of sortable():
$('#singleFieldTags').sortable({
stop: function(event,ui) {
$('#mySingleField').val(
$(".tagit-label",$(this))
.clone()
.text(function(index,text){ return (index == 0) ? text : "," + text; })
.text()
);
}
});
and
$('#singleFieldTags2').siblings(".tagit").sortable({
stop: function(event,ui) {
$('#singleFieldTags2').val(
$(".tagit-label",$(this))
.clone()
.text(function(index,text){ return (index == 0) ? text : "," + text; })
.text()
);
console.log( $('#singleFieldTags2').val() ); // just for reference
}
});
Here is a jsfiddle that demonstrates the functionality
(added functionality for single input field)
I am using cordova 2.2.0 with Xcode 4.5.2. On one of my pages I have a select component and once a particular option is selected I want to display a table within a div. My html looks like this: <div class="hero-unit" id="#facprog"></div>
The javascript/jquery looks like this:
<pre><code>
$(function() {
$('#selFaculty').change(function() {
var facultyName = $('#selFaculty').val();
var progDetails = app.fillFacultyProgramme(facultyName);
alert(progDetails);
$('#facprog').append(progDetails);
});
});
</code></pre>
Note that #selFaculty is the id of the select object. However, when the select option changes, everything in javascript executes except for the append. Nothing shows up in the div. Is there a different way to add html element to a div in jquery under cordova 2.2.0 in iOS?
Thanks in advance,
José
With jquery you can refresh a div.
This is a good example:
<script>
var auto_refresh = setInterval(
function()
{
$('#loaddiv').fadeOut('slow').load('reload.php').fadeIn("slow");
}, 20000);
</script>
and now you need to put the div in the body section of your page
<div id="loaddiv">
</div>
from http://designgala.com/how-to-refresh-div-using-jquery/
and there is another example here:
refresh div with jquery
The first example is useful when you need to load a script and refresh and the second one is useful when you need to make a change, e.g. append html and then refresh as in your case.