Develop Reference

Setting default option and disabling alert

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 !

Django Modelmultiplechoicefield Checkboxselectmultiple Problem Getting Selected Checkbox

I have been working all day to try and get the selected values on one set of checkboxes on my Django form and copy the selected ones only to an identical checkbox on my form. If a user clicks on a checkbox in form.author defined below, I want the same identical checkbox to automatically be checked on form.favorite_author defined below.
I've tried a JQuery approach as documented here...Copy Selected Checkbox Value From One Checkbox To Another Immediately Using JQUERY but no luck so far. I've recently begun exploring an avenue with the Modelmultiplechoicefield and the checkboxselectmultiple parameters within the form itself. From what I can tell, when I am using JQuery and trying to check a box on the form, the value is coming back as undefined which is most likely why it is not propagating the checkbox selection to the other checkbox.
Here is my form....
class ManagerUpdateNewAssociateForm(forms.ModelForm):
class Meta:
model = Library
self.fields['author'] = forms.ModelMultipleChoiceField(
widget=forms.CheckboxSelectMultiple(),
queryset=Books.objects.all()
self.fields['favorite_author'] = forms.ModelMultipleChoiceField(
widget=forms.CheckboxSelectMultiple(),
queryset=Books.objects.all()
My HTML...
<div class="spacer83">
{{ form.author }}
</div>
<div class="spacer83">
{{ form.favorite_author }}
</div>
When I tried to trace JQuery, it told me the checkbox selections are undefined. I did read a bit about how Modelmultiplechoicefield, since it uses a queryset it doesn't show the selections, but I can't figure out how to get it to.
Thanks in advance for any thoughts.

In combination with the other issue included in this one, I went back to the JQuery route and explored further. From what I can tell, I was not able to use the class for the input because of the way the HTML for Django forms is generated in this use case. I ultimately was able to leverage the input name and then used the code below to interrogate the checkboxes accordingly:
$(document).ready(function() {
$("[name=author]").change(function() {
let selectedValA = $(this).val();
let isAChecked = $(this).prop("checked");
$(`[name=favorite_author][value="${selectedValA}"]`).prop("checked", isAChecked);
});
});
});

geocomplete with Vue js -- location being erased

I'm trying to use jQuery geocomplete along with Vue.js to populate a form with geo data.
My code contains this form:
<form>
<label for="get-offer-location">location: </label><input id="get-offer-location" v-model="newoffer.location" type="text"/>
<div style="visibility:hidden">
<input name="lat" type="text" value=""/>
<input name="lng" type="text" value=""/>
</div>
</form>
After I click on a suggested location from the get-offer-location input, it looks like the field is filled out -- but then when I start typing in another field, the location input field reverts to just the letters I typed in for the location search. Try it out here by clicking "post", then "news" or "offers":
https://jsfiddle.net/dvdgdnjsph/157w6tk8/
Can anyone tell me what's wrong?

The problem you are having is that v-model binds on input, since the geolocation dropdown is a plugin that changes the value programatically the input event is not fired, so v-model is not updated. As a case, try typing a space after selecting a location, you will see that it sticks.
Fortunately, v-model is nothing more than syntactic sugar for v-on:input, so you can use v-on to fire your event instead. Considering that you are going to need to unfocus to get out of the box, the blur event is likely to be your best option, so you can simply do:
v-on:blur="newarticle.location = $event.target.value"
Unfortunately, JSFiddle won't let me save or update your Fiddle, but I did get it working with the code above.
For completeness, in case you want to use this behavior extensively, and because the Vue docs are fairly limited in this regard, you may write a custom directive to encapsulate the code:
Vue.directive('model-blur', {
bind: function(el, binding, vnode) {
el.addEventListener('blur', function() {
vnode.context[binding.expression] = el.value;
});
}
});
Then you can use like so:
<input v-model-blur="myVar" />
Here's the JSFiddle: https://jsfiddle.net/4vp6Lvmc/

Can't tell for sure. But it looks like jQuery plugin just changes input#get-article-location value, but not the Vue model. So when you trigger model update (e.g. editing headline) it overwrites complete location with whatever you typed in.

I have something like this for catch the geocomplete event and try to set the vueJS value :
$("#get-article-location")
.geocomplete({details: ".details"})
.bind("geocode:result", function (event, result) {
vm.newoffer.location = result.formatted_address;
console.log('done');
});
But something still appears wrong, I think you should really change the name of your vueJS instance (var vm) it may be use by another script and make troubles.

This is because v-model, as two-way binding, on the receiving-user-input way, listens to the input event on the input element, while js plugins (like jquery-geocomplete) obviously set input values via js, which leads to the view model's data not changing as we discussed in other answers.
To fix this, just listen to the geocode:result event of the plugin and manually change the data with code (there seems to be something wrong with jsfiddle so I'm posting it here):
var vueVM = this;
$("#get-offer-location").geocomplete({ details: ".details" });
$("#get-article-location")
.geocomplete({ details: ".details" })
/***** highlight start *****/
.bind("geocode:result", function(event, result){
console.log(result);
//tried result.something but couldn't find the the same thing as `this.value`
vueVM.newarticle.location = this.value;
});
/***** highlight end *****/
extra knowledge: the mechanism of v-model stated above is usually used in making reusable components, by receiving a value prop from the parent, and emitting an input event with the user-input value when detecting change on the input element in the component. And then we can use <my-component v-model='parentData'></my-component> as the child behaves exactly like a simple input element from the parent's perspective. example

How to set the focus of the inputText inside dataTable

Good Afternoon,
Using JSF + Primefaces.
I have a dataTable with inputText field, which performs a listner, and when you end the function or pressing tab, the focus would be to input the low line of the same component.
Googled some things, and it seems that's to be done with JavaScript or jQuery, but I have not much knowledge.
It seems that the clientId of the component has something form: dataTable: 0: input, and the number "0" to manipulate the focus.
Anyone know how to work the focus of components within the dataTable?
Thank you.

You could use the PrimeFaces element <p:focus />, and in the "context" attribute, put the ID of the dataTable. The "context" attribute serves to set the root component to start first input search, so if you are using AJAX, you could update the container where the "dataTable" and the "focus" elements are wrapped, and the first input in the dataTable will recieve the focus after AJAX call:
<p:focus context="dataTable" />
You could use the "for" attribute too, if you want to refer the input directly:
<p:focus for="inputText" />
Take a look to the PrimeFaces documentation: p:focus.

Add proper and dynamic ids for your components then you can identify your elements quite easily.
Consider following code snippet:
<ice:form id="form1"/>
<ice:dataTable id="dataTable1">
...
<ice:inputText id="inputText1" />
<ice:commandButton id="commandButton1" value="Set Focus" onclick="javascript: setFocusOfInput(this);" />
...
</ice:dataTable>
</ice:form>
And the javascript part:
function setFocusOfInput(obj){
var objectId = obj.id;
var requiredIndex = objectId.indexOf(':commandButton1');
var formId = objectId.substring(0, requiredIndex);
alert(formId); /* You will get your form id here, no-matter if you don't set. */
/* Now you can get your required element and do-whatever you want. */
var inputText1 = document.getElementById(formId +':inputText1');
inputText1.focus();
}
Just add a proper id for your element to distinguish it from others.

$().buttonset not working on dialog modal box

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();
});