I've done a dialog box that contains a form inside it, and I would like to add some fancy items to it. I've been trying with $().buttonset() as I've done with most of my radio buttons in the application, in order to get a coherent UI for my application. The thing is that, even if following the rules specified, the buttons remain as a normal radio button, and not with the fancy interface. Do you know what could be the problem?
This is the part of the form where I want the fancy radio buttons:
<div id ="Replace">
<input type="radio" name="Replace" value = "true" id = "ReplaceYes"
onclick = "setReplace(this)" />
<label for="ReplaceYes">Yes</label>
<input type="radio" name="Replace" value = "false" checked="checked"
id = "ReplaceNo" onclick = "setReplace(this)" />
<label for="ReplaceNo">No</label>
</div>
And then, as the previous part of code is in a partial view, invoked when showing the modal box, this is how I try to convert the buttons appearance:
$("#Replace").buttonset();
The thing is that, debugging it I've seen that it goes through that part of the code, but it doesn't do what it's meant to do. Any clue?
I had the same problem has your, after an intensive reflexion I 've found that :
When you declare your Dialog box, you can specify a function called when it opens
$( ".selector" ).dialog({
open: function() {
$( '#buttonset' ).buttonset();
}
});
Updated: I had never used .buttonset() before, in any case it works against your markup, you can see a demo here. This demo uses the same code as the question:
$("#Replace").buttonset();
Make sure you're including the jQuery UI CSS correctly, and that your IDs are unique, if they are not you'll get some real funny behavior, and should switch to a class. Also, ensure that this part of your view is in the DOM when it runs, e.g. is it inside a document.ready event handler like this?
$(function() {
$("#Replace").buttonset();
});
Related
I've been trying for some time now to get this to work. I don't have much experience with jquery or javascript. I want to set a default option that is selected from the drop down options when the button is pressed. I hope this will also prevent the alert(not sure if that's correct) from appearing. I have add the following code to the "code injection" part of squarespace, which seems to work fine. (Edited, I have removed the code as recommend)
I'm using the Brine template. Here's a link to the website https://www.metastudio35.com/private-photography-services/event-collection the password is "Google360".
<squarespace:script src="plugin.js" combo="true"?>
<squarespace:script src="site.js" combo="true"?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
I then added the code below in the page I needed to redirect the button. Which also works, but without the "$("#Additional Photos").val("0");" and "$( ".sqs-widgets-confirmation-content clear" ).dialog( "close" )" lines.
<script>
$(document).ready(function(){
$("#Additional Photos").val("0");
$( ".sqs-widgets-confirmation-content clear" ).dialog( "close" )
$(".sqs-add-to-cart-button").click(function(){
window.location = '/booking/';
});
});
</script>
This is a screenshot of the dialog box I want to remove/disable.
dialog box pop up screenshot
If someone could point me in the right direction or tell me what I'm doing wrong it would be greatly apprenticed.
Thank you for your help.
I checked your website and it seems like jQuery is not used by your template, and instead of including jQuery just for this simple function, I've written the below code in vanilla JS instead.
function setValue() {
var dropdown = document.querySelectorAll('[data-variant-option-name="Additional Photos"]')[0];
dropdown.value = '0';
Y.one('#'+dropdown.id).simulate('change');
}
window.onload = setValue;
If you're interested in figuring out why your code wasn't working, here's the explanation :
$('#Additional Photos').val("0")
This line of code is setting the element that has an ID of "Additional Photos" with a value of "0".
Your "Additional Photos" select box does not have an ID of "Additional Photos", instead - it has a randomly generated ID that re-generates each time the page is refreshed.
So the reason that your code isn't working is because you're simply targeting the wrong element :)
var dropdown = document.querySelectorAll('[data-variant-option-name="Additional Photos"]')[0];
Due to the fact that the ID of the select box is not constant, we are targeting the select box by the 'data-variant-option-name' attribute instead. I figured out this constant attribute simply by inspecting the selectbox on the ChromDev tools.
dropdown.value = '0';
Y.one('#'+dropdown.id).simulate('change');
The other thing to consider is the fact that your template is using YUI to handle the select box. This means that we need to manually trigger the 'change' event in order for the UI to update. As you can see from the code above, the first line is setting the value of the select box, while the second is telling YUI to simulate the 'change' event, and thus - updating the UI.
Hope this helps !
I'm not sure if this is a clicking issue, or specific to the jQuery fade functions.
I have the HTML structure like this: label > input(hidden) + div + label text
Example:
<label data-name="primary-residence" data-value="Yes">
<input type="hidden" id="primary-residence" name="Primary Residence" value="" />
<div class="big-check-box"></div>
Primary Residence
</label>
And the jQuery is as follows:
$('label').on('click', function(){
var name = $(this).data('name');
var value = $(this).data('value');
if($(this).find('.big-check-box').hasClass('checked')){
$(this).find('.big-check-box').removeClass('checked');
$('#'+name).val('');
$('#'+name+'-value, #'+name+'-loan-balance').fadeOut();
}else{
$('#'+name).val(value);
$(this).find('.big-check-box').addClass('checked');
$('#'+name+'-value, #'+name+'-loan-balance').fadeIn();
}
});
I have a big-box that acts as a checkbox and has data attributes that then populate a hidden field to be collected on form submission. It also applies a class to the checkbox and fades in two new input fields.
Everything works fine in Chrome and FF, but in IE, the class doesn't get applied to the box and the new input fields fade in, then immediately fade out once the fade in animation is complete. Unless they are clicked twice, then it seems to work, but that isn't very intuitive or user friendly.
Here's a fiddle to a working example: jsFiddle
Anyone know why this is happening?
I figured it out.
For some reason I needed to add preventDefault() for the IE fix. Not exactly why it works, but here's reference: <label> - HTML | MDN
Here's the updated lines:
$('label').on('click', function(e){
e.preventDefault();
.....
});
Hope this can help someone else in the future.
I am trying to do, using bootstrap, an autocomplete function which works over an inputText having to show the options list only when the related inputText contains more than 4 characters.
This is my xhtml:
<script>
$(function(){
jQuery.noConflict();
var autocompPerson = $('.autocomp');
autocompPerson.typeahead({
source: [#{operationsFormBean.allPersonFilteredList}],
});
});
</script>
<div class="col-md-8 pb0 pl0">
<h:inputText id="auPerson"
value="#{backingBeanRef['selectedPersonName']}"
styleClass="form-control autocomp wo-borders bg-transparent">
<a4j:ajax
event="keyup" listener="#{backingBeanRef['personFilteredList']}"
render="operations_form_panel"/>
</h:inputText>
</div>
The method personFilteredList() is in my java Bean and it is the one who controls if the input has or not more than 4 characters.
If I use the event "keyup", whenever I write a character in my inputText, I lose the focus over it and the list disappears immediatly. I know it is working since it shows the list only when I write more than 4 characters. The problem is : when the method is called I have to render the inputText in order to show the list and it makes me lose the focus over which makes the list disappears.
Do you know if I can use a js function like "updater" which updates my selectedPersonName every single time I write something without using the event keyup?
Thanks in advance.
Use the AJAX oncomplete JS callback hook to update your source for typeahead and re-render just the inputText. See this post for resetting the source in bootstrap typeahead.
With HTML a checkbox is created like this:
<form>
<input type="checkbox" id="category1">Category1<br>
</form>
With javascript we can check the checkbox like this:
$("#category1")[0].checked = true
Now I am trying to create the same page with jquery-mobile. The checkbox looks like this:
<form>
<label>
<input name="checkbox-0 " type="checkbox">Check me
</label>
</form>
Why is there is no id here? Is the name the id? Should I delete the attribute name and create one with the name id?
How can I check this checkbox here with Javascript/jQuery?
I tried the code above, but it doesn't seem to work for this checkbox.
You need to refresh it after changing its' .prop, using .checkboxradio('refresh'). This is the correct way to check checkbox/radio in jQuery Mobile.
Demo
$('.selector').prop('checked', true).checkboxradio('refresh');
Reference: jQuery Mobile API
You can do:
$('input[name="checkbox-0"]').prop("checked", true).checkboxradio('refresh'); //sets the checkbox
var isChecked = $('input[name="checkbox-0"]').prop("checked"); //gets the status
Straight from the jQ Mobile docs:
$("input[type='checkbox']").attr("checked",true);
With the solution from #Omar I get the error:
Uncaught Error: cannot call methods on checkboxradio prior to initialization; attempted to call method 'refresh'
I actually had a flipswitch checkbox:
<div class="some-checkbox-area">
<input type="checkbox" data-role="flipswitch" name="flip-checkbox-lesson-complete"
data-on-text="Complete" data-off-text="Incomplete" data-wrapper-class="custom-size-flipswitch">
</div>
and found the solution was:
$("div.ui-page-active div.some-checkbox-area div.ui-flipswitch input[type=checkbox]").attr("checked", true).flipswitch( "refresh" )
Notes
I don't usually specify ids for page content as jQuery Mobile loads multiple div.ui-page content into a single HTML page for performance. I therefore never really understood how I could use id if it might then occur more than once in the HTML body (maybe someone can clarify this).
If I use prop rather than attr the switch goes into an infinite flipping loop! I didn't investigate further...
I am working on an email template editor where the user will select from a list of pre-existing templates and will be able to update the template as necessary. I had problems with using the CKEditor plugin across browsers and so I have attempted to create my own. When the user selects a template it opens in a modal window. To change the images I have included input tags which are removed upon close of the modal. This works so well and so good but if the user then wants to go back into the editor the input buttons are no longer there.
I want to add in the input button in the modal window if it does not exist. I have tried checking the length of the property but I am unable to return a value other than null whether it exists or not. My code is as follows:
function template1InputButtons() {
if ($("#imageInput1T1").length == 0) {
$('<input id="imageInput1T1" type="file" name="newImage1T1" onchange="previewImage1T1(this)" />').insertBefore('.article_media');
}
}
If I open it the first time the length comes up as one and so nothing is added as expected. If I remove and then click the button again length shows as 0 and input is added correctly as expected. If I then remove the input and click the button again the length comes up as 1 despite the control not existing.
Any ideas?
Try this:
function template1InputButtons() {
if (!$("#imageInput1T1")) {
$('<input id="imageInput1T1" type="file" name="newImage1T1" onchange="previewImage1T1(this)" />').insertBefore('.article_media');
}
}
and also assure that you have placed it inside ready function.
Try this:
if ($("body").find("#imageInput1T1").length == 0) {
$('<input id="imageInput1T1" type="file" name="newImage1T1" onchange="previewImage1T1(this)" />').insertBefore('.article_media');
}
Problem was a similar finding of class attribute article_media on the other modal my mistake thanks for the help anyway