I'm using Google places AutoComplete on a textbox and it's essentially working, picking the locations and stuffing them into the textboxes.
The problem is that I want to only stuff the selection name - not the full name + address formatting out of the list that the AutoComplete list produces. I can't seem to find a way to override what goes into the textbox.
var $name = $("#txtName");
$name.focus();
var autocomplete = new google.maps.places.Autocomplete($name[0]);
google.maps.event.addListener(autocomplete, 'place_changed', function () {
var place = autocomplete.getPlace();
// explicitly update model
// but doesn't display in UI
$scope.locationData.Name = place.name;
// explicitly update the input box - doesn't update UI
$name.val(place.name);
return false; // doesn't work - updates UI
});
Basically what I'd like to do is take over the input box text assignment myself by doing the assignment myself and forcing autocomplete to not set the textbox value.
Is this possible?
Set the value with a short delay.
$('#NameBox').on('blur change', function () { $(this).val(place.name).off('blur change'); });
setTimeout(function () { $('#NameBox').val(place.name); }, 150);
Using .off() allows the user to edit the name if they wish. If you wish to only allow the places API name remove .off().
Related
I am using MVC hmtl helper syntax for textbox i.e.#Html.TextBoxFor(m => m.Id). I have quite lengthy form with multiple textboxes, radio buttons and drop downs.
Problem is that when I am refreshing the page, the values filled in the controls i.e. textbox,dropdown,radio-buttons filled get lost.
How can I avoid this and restore the filled values of the form even if user refreshes the page? Any other method than localstorage/cookies etc.?
you can create your jquery custom method with sessionStorage and you can add it to jquery.fn object to keep your form data even after page refresh
(function($){
// To Load your form values from sessionStorage, and set sessionStorage when value is changed.
$.fn.keepValue = function(name) {
if(!name) {
name= "";
}
return this.each(function() {
var $this = $(this);
var id = $this.attr('id');
var storage_name = namespace + id;
var value;
// Store form changes in a cookie
$this.change(function() {
sessionStorage.setItem(storage_name, $this.val());
});
value = sessionStorage.getItem(id);
// Don't overwrite value if it's already exist
if(!$this.val()) {
$this.val(name + value);
}
});
};
})(jQuery);
$(document).ready(function(){
$('#YourElementId').keepValue();
});
I am creating a custom confirmation dialog in Google App Maker and would like the Confirm button to call a passed-in function. I don't see an "onclick" event in the button widget. Any suggestions on how to do this?
function confirmationDialog(msg, confirmFunction)
{
var desc = app.pageFragments.ConfirmationDialog.descendants;
var label = desc.Label;
var confirmButton = desc.Confirm;
label.text = msg;
confirmButton.onClick = confirmFunction; // does not work
app.showDialog(app.pageFragments.ConfirmationDialog);
}
Thanks
It'd be great if this was a bit easier, but the best bet is to use Custom Properties (https://developers.google.com/appmaker/ui/viewfragments).
You can set up a custom property of type "Dynamic" and call it anything, take "onConfirmCallback", for example. Then you can set the function on that custom property:
Code to invoke dialog:
app.pageFragments.ConfirmationDialog.properties.onConfirmCallback = function(param) {
alert(param);
};
app.showDialog(app.pageFragments.ConfirmationDialog);
And then in the onClick for the close button:
app.pageFragments.ConfirmationDialog.properties.onConfirmCallback("hi");
app.closeDialog();
Also note that there are slightly better ways to set up labels than in your example, also using custom properties.
Create custom properties for any widget properties you want to customize, and then bind those custom properties (#properties.propertyName) to the widget property. For example you might have a confirmText property, with the confirm buttons text property boudn to #properties.confirmText.
Then when you invoke your dialog, you can just set those custom properties. Quick modification of your example code using properties for everything:
function confirmationDialog(msg, confirmFunction)
{
var properties = app.pageFragments.ConfirmationDialog.properties;
properties.text = msg;
properties.confirmCallback = confirmFunction;
app.showDialog(app.pageFragments.ConfirmationDialog);
}
For my confirmation dialogs, I just set the onclick of the OK button before I show the dialog (everything is in one place, which is easier for the dummy (me) who will have to maintain it in six months:
var dialog=app.pages.ConfirmationDialog;
dialog.descendants.message.text='Are you sure...?'
dialog.descendants.btnOk.getElement().onclick=function(){
//do something here
app.closeDialog();
});
};
app.showDialog(dialog);
}
Basically I want that the Title field(Combo Box) should not allow me to enter more than 40 characters.
Can you provide any pointers?
I looks like the control itself does not have that functionality, so you will probably have to write your own version.
You could create a custom control to extend the ComboxBox control. Check out this blog post.
Another idea is to use jQuery to prevent more than 40 characters from being added to the input control the ComboBox control generates:
$(function() {
var comboxBoxControlInput = $("#<%=comboBoxControlId.ClientID%>$TextBox");
$(comboxBoxControlInput).keyup(function() {
limitLenth(this, 40);
});
});
function limitLength(control, length) {
var currentContent = $(control).val();
var currentLength = currentContent.length;
if(currentLength > length) {
$(control).val(currentContent.substr(0, length));
return false;
}
}
Unfortunately it's a bit hacky. You have to get the ClientID of the ComboBox control (<%=comboBoxControlId.ClientID%>) and then append $TextBox to the end in order for jQuery to select the correct control.
Edit:
Another way to select the correct input control is to do this:
$("#<%=comboBoxControlId.ClientId%>").find("input[type=text]");
This selects the first text input within the div the ComboBox control creates.
I have created a jquery slider usercontrol in asp.net using jquery UI slider. The user control have some javascript functions to set the value of the slider when the textbox value changes in the main page. Everything works fine if I have only usercontrol. But if I have multiple user controls, I am not sure how to namespace the javascript so that it calls the function inside the specific user control.
Thanks,
Sridhar.
I would suggest object orienting your code - something like this (Obviously this is only pseudocode...)
function Slider(parentElement, id){
var element = ... // get / create your element here
// attach appropriate event listeners here...
element.onclick = function(){
//event handling code...
}
this.setValue = function(value){
// set value of element
}
this.getValue = function(){
//get value of element
}
}
var sliderA = new Slider(document.getElementById('anElement'));
var sliderB = new Slider(document.getElementById('anotherElement'));
I'm trying to implement a side menu that saves it previous state (or selected item) after a submit or after the user refreshes the page.
I decided to use cookies to save the index of the selected item of the menu.
However, is not working everytime. What's going on?
Here's my code:
$(document).ready(function () {
var cookie = $.cookie("SelectedNode");
$('.t-link').click(function () {
var name = "SelectedNode";
var index = getIndex($(this));
$.cookie(name, null); //delete previous value
$.cookie(name, index);
alert("It should save: " + index + " but it saved: " + $.cookie("SelectedNode"));
});
});
I would go like this, I don't think you need to delete the cookie value, it just overrides the existing one.
$(document).ready(function () {
var name = "SelectedNode";
$('.t-link').click(function () {
var cookie = $.cookie(name, getIndex($(this)));
});
});
Updating the same cookie with constantly evolving values is sometimes flaky depending on the browser you are using. I remember Firefox and Safari both being a PITA when trying to do this 2 years ago.
Anyway, you might consider a completely different tact and read/write the value into a hidden form field whose value is simply emitted back by your master page.