How I should do this using javascript? I looked other places but every example uses Jquery.
Only on select other textbox should visible.
Assuming that you are on an older version of rails which has prototype as the js library.
in the onchange event of the select list add the javascript function to show the div containing the text box (let's say you show the text box for value 5 of the select list):
<select id="select_item" name="select_item" onchange="display_date_range(this);">
... where 5 is the value of the option that needs to show text box
</select>
function display_date_range(list) {
if(list.options[list.selectedIndex].value == 5) {
$("text_div").show();
}
else {
$("text_div").hide();
}
}
<div id="text_div"><input type="text" value="Hooraaahhh..." /></div>
Related
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
I need to display a number of text box in a gsp. The number of text box displayed is picked in a select tag.
I think of something like
<g:select name="select" from="${1..10}>
<g:each in="${1..select}">
Is there any way I can "pass" the number selected in the select to use it in the for below?
GSP is working on server-side. Value of select tag is available only on client side.
So, the answer: No, you can't use <g:each for selected value.
You have use Javascript instead, like:
<g:javascript>
function setupTextboxes() {
var count = Number($('select[name="select"]').val());
........
put your text boxes into DOM
........
}
$(function() {
$('select[name="select"]').on('change', setupTextboxes)
})
</g:javascript>
I have a list of objects. Each object has its own values. On webpage they are presented as rows. What I want to do is to add JQuery dialog that pops up when a link on a specific row is clicked. What is the best way to do that? Is is better to define a dialog in every row or just use one? Problem is I can't reach elements inside dialog to fill them with row data. Is there any good example concerning this? Thank you
Just use one dialog, it should be initially hidden anyway:
<div id="rowDialog" style="display:none">
<div id="rowDialogDiv">in here we are
</div>
<button id="rowDialogButton>Custom button</div>
</div>
initialize dialog, not showing it at first:
$('#rowDialog').dialog({ autoOpen: false });
put in an event handler for the row:
$("tr").click(function(){
var rowClicked = $(this);
$('#rowDialogDiv).text('In the dialog, show we clicked row:' + rowClicked.index());
$('#rowDialog").dialog("open");
});
Strongly suggest you give the table and ID and then access the table rows from that for speed and, just in case you have multiple tables etc.
You can also have event handlers for the dialogs elements:
$('#rowDialogButton').click(function(){
//do button stuff
});
something like this maybe?
<div id="myDialog">
<input id="myElementThatICanAccess" />
</div>
The jQuery Code:
$("#myDialog").dialog({
options:....
});
$("tr").click(function(){
$("#myElementThatICanAccess","#myDialog").val($(this).val()); // or whatever value you want
$("#myDialog").dialog('open');
});
I'm building a select list with an Ajax call that is triggered when another select list is changed.
The page loads correctly with the jQuery styling, but when I replace my ajax container with the new div I can't get jQuery mobile to format it. This means that it reverts to the native select list format.
I have tried what is suggested in the JQM documentation:
var myselect = $("select#foo");
myselect[0].selectedIndex = 3;
myselect.selectmenu("refresh");
but that does not work. My page initially loads with this:
<div id="ajax-destination">
<select id="destinationAirport" data-native-menu="false">
<option value="-- Please Select --" data-placeholder="true">-- Please Select --</option>
</select>
and this is my jQuery code wrapped in the change function of the other select list.
$('#ajax-destination').empty();
$.post(url, { departureAirport : departureAirport }, function(data) {
$('#ajax-destination').append(data);
var myselect = $("#destinationAirport");
myselect[0].selectedIndex = 1;
myselect.selectmenu("refresh");
});
The only other way I can think to do this is to return a JSON array via Ajax and use that to add the options to the select list, but I would prefer to just send formatted HTML because it's simpler to follow.
If myselect.selectmenu("refresh"); or myselect.selectmenu("refresh",true); doesn't work you can always refresh the page using
you could try myselect.trigger('create');
#Andy :
myselect.selectmenu("refresh"); will refresh the select box and where as
myselect.selectmenu('refresh', true); will rebuild the select menu.It may helps you out. Check this link once http://forum.jquery.com/topic/how-to-add-items-and-refresh-the-select-menu-in-jquery-mobile
i want to create a input textbox with value link and write a code like this:
<form>
<input name="Textboxfield" type="text" value=".jpg"><br>
<input name="Launchlink" type="button" value="Launch link" onclick="location.href=this.form.elements['Textboxfield'].value">
</form>
this is a good code for me but have some problems.
in this code the value ".jpg" is variable but i wants to keep it stable who when user insert his/her number in textbox, can go to destination link.
for example:
i insert my number 22456 in this textbox like this: 22456.jpg
and when i press botton the page directly go to my file (a pic).
but
when i insert my number without .jpg format the page goes wrong and break the system (show index page)
and thats my problem! how can i have stable value link ".JPG" who when user jus isert his/her number to textbox the page directlty go to his/her file and show it.
also you can see this image:
http://0o.8415.2.img98.com/out.php/i543815_code.jpg
please help me guys...
Try this
<form><input name="Textboxfield" type="text" value=".jpg"><br>
<input name="Launchlink" type="button" value="Launch link" onclick="location.href=this.form.elements['Textboxfield'].value + '.jpg'">
</form>
You could check if the textbox value ends with ".jpg" using Javascript, and if it doesn't, append ".jpg" to whatever value is in the textbox. You could add this function to the onClick() handler of your button or somewhere.
You could write the function checkJPG() as:
<script type="text/javascript">
function checkJPG() {
var myText = document.getElementByID("myTextBoxID").value;
if (myText.substr(-1, 4) == ".jpg")
//do nothing
else
//append .jpg to the value in the textbox
}
</script>