Styling single jQuery UI controlgroup-item - jquery-ui

I am using jQuery UI controlgroup to style checkboxes in an HTML form. After the input values are processed by a PHP script, the results are displayed on the the same page along with the form itself, so that the user can adjust the filters. What I am trying to do, is to have the boxes that were checked previously remain checked after the form has been processed, so that the user sees what selection criteria were used. To achieve that I store all the PHP $_POST data in a JS variable using json_encode, which I'd like to use to iterate through the labels and mark those that were checked previously. The problem is that the only option of the controlgroup widget that I can use is classes with ui-controlgroup-item which shows every single label within the group as active, and for the life of me I cannot figure out how to make it conditional, e.g. so that I can use if(label[for=' + var.value +'])', var being <?php echo json_encode($_POST) ?> or something similar. Will appreciate any suggestions.
Here is the HTML:
<div id="currencyList">
<label for="gbp">GBP</label>
<input type="checkbox" value="gbp" name="currency[]" id="gbp" >
<label for="usd">USD</label>
<input type="checkbox" value="usd" name="currency[]" id="usd">
<label for="eur">EUR</label>
<input type="checkbox" value="eur" name="currency[]" id="eur">
</div>
And this is the JavaScript bit:
$( "#currencyList" ).controlgroup({
classes: {
"ui-controlgroup-item": "ui-checkboxradio-checked ui-state-active"
}
});

After trying to find a solution for several days I decided to skip trying via the classes option and instead to move outside the controlgroup widget. So here is my not-so-pretty-but-working solution:
var postData = <?php echo json_encode($_POST) ?>;
$( "#currencyList" ).controlgroup();
$('#currencyList').children('label').each(function () {
if(postData.currency.indexOf($(this).attr("for")) >= 0){
$(this).addClass( "ui-checkboxradio-checked ui-state-active");
}
});

Related

Booststrap v5 textform class="form-label" prepopulate data in a way that can be copied to clipboard

Using bootstrap 5, specifically going over this: https://getbootstrap.com/docs/5.3/forms/form-control/
I am trying to create a simple example text area with some text in it pre-populated, so that I can add a button that will copy the propulated text into clipboard.
Method 1-
Sample code from Bootstrap looks like this:
<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
If I use something like 'placeholder' the text box gets prepopulated but I can't "grab" that text neither manually or via a js script. The placeholder my understaning is just a hint of what is to be filled out in the box.
Method 2-
If I used for example a regular HTML textarea element I can do this, no problem, with something like this:
<textarea id="textbox" rows="3" cols="80">{{prepopulated_date_variable}}</textarea><br />
<button type="button" class="btn btn-primary"onclick="copyTextBoxData()">Copy Copy Data</button>
So if I use a regular "textbox" like in Method 2, it does not leverage the cool look and resizing capabilities of bootstrap, hence why I am trying to get Method 1- or similar to work.
Any queues? tips? maybe another element?
I am new to this all, but the concept is that I am passing from a another piece of code the prepopulated data for user to see (leveraging Jinja template with Python if that makes any difference) and then idea is that button allows my user to copy to mem clipboard what is in the text box, so that they can past in something else.
Appreciate any support or ideas.
I am using Method 2- described in problem statement. What I am expecting is that I can use Method 1 or alternative with bootstrap component to leverabe the styling and features of bootstrap.
You can use JavaScript to set the value of the form inputs when the page loads.
This code creates a form with two inputs (email and password) and a button that, when clicked, copies the values of the inputs to the clipboard. The copyToClipboard function uses the document.getElementById method to get the values of the inputs, concatenates them into a string, creates a temporary input element, sets its value to the string, selects it, and then executes the document.execCommand("copy") command to copy the value to the clipboard. Finally, it removes the temporary input element and alerts the user that the data has been copied.
function copyToClipboard() {
var email = document.getElementById("exampleInputEmail1").value;
var password = document.getElementById("exampleInputPassword1").value;
var data = "Email: " + email + "\nPassword: " + password;
var tempInput = document.createElement("input");
tempInput.style = "position: absolute; left: -1000px; top: -1000px";
tempInput.value = data;
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand("copy");
document.body.removeChild(tempInput);
alert("Copied to clipboard: " + data);
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<form>
<div class="form-group">
<label class="form-label" for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" value="example#email.com">
</div>
<div class="form-group">
<label class="form-label" for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" value="password123">
</div>
<button type="button" class="btn btn-primary" onclick="copyToClipboard()">Copy to Clipboard</button>
</form>

Change a value on a page depending on the selection from radio buttons

I am creating a rails app with a page to add up a total cost for people to review before they submit an order. I want the total to change depending on a set of options in a set of radio buttons.
How can I change a variable representing a total amount in a web page when a radio button selection is changed? I want this to happen without reloading the page.
From the sounds of it, you'll probably want to use standard Javascript / JQuery to add up the total on screen. This is opposed to the proposal of ajax, as you don't need to pull any extra data from the erver:
--
JSFiddle
#view
<input type="radio" name="option" value="3.99">Small (£3.99)<br>
<input type="radio" name="option" value="6.99" checked>Medium (£6.99)<br>
<input type="radio" name="option" value="9.99">Large (£9.99)<br>
<div class="total" >
Total:
<span id="total"></span>
</div>
#app/assets/javascripts/application.js
$(document).on("change", "input:radio[name=option]", change_value);
$(document).ready(change_value);
function change_value() {
var value = $("input:radio[name=option]:checked").val();
$("#total").html( "£" + value );
};

jquery mobile horizantal radio buttons in knock out template binding

I am trying to bind jquery mobile horizantal radio buttons using knock out teplate binding.
The fielsset in template looks like
<fieldset data-role="controlgroup" data-bind="attr: {id:QuestionID+'_fld'},template: {name:'optionTemplate', foreach: OptionList}">
</fieldset>
and the option template looks like
<script type="text/x-jquery-tmpl" id="optionTemplate">
<input type="radio" data-bind="attr: { id:OptionID+'_radio',value:OptionID, name: QuestionID+'_rd'}, checked:$parent.OptionId" />
<label data-bind="text:OptionText, attr: {id:OptionID+'_optn', for : QuestionID+'_rd' }"> </lable>
</script>
I have tried
$('input[type=radio]').checkboxradio().trigger('create');
$('fieldset').controlgroup().trigger('create');
Here my problem is that the mobile css is not applying to the fiedset.
You must do this after the template has built your page or during the page initialization event, something like this:
$(document).on('pagebeforeshow', '#pageID', function(){
});
Page content can be enhanced ONLY when content is safely loaded into the DOM.
Second this do NOT mix refresh functions with trigger create. Either one or the other. Trigger create is used to enhance whole content, and it should NOT be used on single elements. No point in restyling whole page every time you add new content.
Basically you only want to use:
$('input[type=radio]').checkboxradio().checkboxradio('refresh');
or if first line throws an error:
$('input[type=radio]').checkboxradio();
and:
$('fieldset').controlgroup();
But I would advise you to only use this line after everything has been appended:
$('#contentID').trigger('create');
where #contentID is an id of your div data-role="content" object. Or in case you are not using content div, only data-role="page" div then use this:
$('#pageID').trigger('pagecreate');
where #pageID is an id of your page.
To find out more about marku enhancement of dynamically added content take a look at this answer.

prevent jquery mobile from styling element

I've got a checkbox that I want hidden on the page. My obvious first attempt was the following:
<input type='checkbox' style='display:none' />
However, I noticed jquery mobile automagically wraps the checkbox in a div that looks like this:
<div class='ui-checkbox'>
<input type='checkbox' style='display:none;' />
</div>
I would assume that there's some kind of data- element that would prevent this additional styling, but haven't found it in the docs or elsewhere. It's easy enough to override the .ui-checkbox in css to hide it as well, but would prefer a more jquery mobile-standard approach. Does such a thing exist?
The attribute that prevents styling is data-role="none"
<input type='checkbox' style='display:none' data-role="none" />
See the Jquery doc: "Preventing auto-initialization of form elements"
For future users.
Just in case you want to disable for every form element or your forms are loading dynamically where you cannot edit markup use this.
$(document).on('pagebeforecreate', function( e ) {
$( "input, textarea, select", e.target ).attr( "data-role", "none" );
});
I have too many places to change inputs and add data-role="none"
The following code works for me:
<script>
$(document).bind('mobileinit',function(){
$.mobile.page.prototype.options.keepNative = "select,input";
});
</script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>

jQuery UI autocomplete returning [object Object] instead of value for Google like redirect

I am trying to install the jQuery UI autocomplete on my website. I have it up and working but I want it to automatically submit the search form when someone clicks on an option. The default behavior seems to be that it just fills out the form with the selected item and then the user must click the submit button. I want it to just automatically redirect like Google. I'm running PHP 5.+ and MYSQL 5+ and jquery.1.4.2 and jqueryui.1.8.6.
Here is the javascript:
<script>
$(function() {
$( "#query" ).autocomplete({
source: "/scripts/autocomplete_handler.php",
minLength: 2,
select: function(event, ui) {
$('#query').val(ui.item);
$("#results").text(ui.item); // for testing purposes
$('#search_form').submit();
}
});
});
</script>
Here is the form:
<form name="search_form" id="search_form" action="search.php" method="get">
<input type="text" name="query" id="query" />
<input type="submit" value="Search" />
</form>
<code id="results"></code>
As you can see, I am trying to change the value of the input field "query" using $('#query').val(ui.item). The problem is that when I select an autocomplete option $_GET['query'] becomes [object Object]. i.e. My website searches for the string "[object Object]" instead of the value that I clicked.
At the bottom of the form there is a code tag with id "results". I also can't get this to populate with the text(ui.item). If anyone could help it would be much appreciated, I'm sure I'm not the only one who wants this type of Google like functionality in their autocomplete, but I can't find any examples anywhere.
Try this in your select function:
$('#query').val(ui.item.value);

Resources