Autofocus does not work in form inside a partial view using MVC3 Razor - forms

I am using MVC 3 Razor and I have a simple form in a PartialView [I am showing this as a popup window]. Some of the features are not working properly in PartialView. For example the autofocus attribute.
#Html.TextBoxFor(model => model.Code, new { style = "width:50px", maxlength = 4, autofocus = "" })
I have tried setting the focus through jQuery script but that doesn't work either.
$('#Code').focus();
Am I missing something? Do I have to import some scripts in my partial view for this to work?
Any help is greatly appreciated.
Thanks in Advance.
Update:
I found the problem... I was loading the window and then showing it after a delay of 700ms. I commented out the setTimeout line and it worked. It must be that the focus worked when form loaded but when I actually did the "open()" it lost focus again.
Previous Code
function openWindow(url, title) {
var window = $("#Window").data("tWindow");
window.ajaxRequest(url);
window.title(title);
setTimeout(showWindow, 700);
}
function showWindow() {
var window = $("#Window").data("tWindow");
window.open().center();
}
New Code
function openWindow(url, title) {
var window = $("#Window").data("tWindow");
window.ajaxRequest(url);
window.title(title).open().center();;
//setTimeout(showWindow, 700);
}
Thanks everyone for your replies. Hope it helps someone.

Try this code:
function openWindow(url, title) {
var window = $("#Window").data("tWindow");
window.ajaxRequest(url);
window.title(title).open().center();
//call after the content has been loaded from the Ajax request
document.getElementById('Code').focus();
}

Related

Open a specific modal only with JS

I found the script I wanted (I am a beginner with JS) : https://stackoverflow.com/a/25060114/4857932
Link HTML
Open Modal
Modal JavaScript
//triggered when modal is about to be shown
$('#my_modal').on('show.bs.modal', function(e) {
//get data-id attribute of the clicked element
var bookId = $(e.relatedTarget).data('book-id');
//populate the textbox
$(e.currentTarget).find('input[name="bookId"]').val(bookId);
});
But I would like to know how to open to modal without using the link. Only using JS. Is that possible ?
I tried this code but it's not working :$('#myModal').modal('show');
Can you help me ?
Thanks for your help ! :)
First of all you have to say that you are using the Twitter Bootstrap framework.
You have to use the .modal - method on the modal content::
$('#my_modal_content').modal('show');
$('#my_modal_content').on('shown.bs.modal', function() {
//get data-id attribute of the clicked element
var bookId = $(e.relatedTarget).data('book-id');
//populate the textbox
$(e.currentTarget).find('input[name="bookId"]').val(bookId);
})

How to capture mouse click on Gtk.Stack

I would like to load the contents of a tab only when the user clicks on the same. Is there some property of the Stack or the Widget which I can use for this. I'm coding in Vala and I have currently worked around this by loading the content on the build of the UI. A sample piece of code will help a lot.
Thanks in advance !
Taken from OPs comment:
stack.add_titled (ports_layout_box, "my-tab", "FOO");
stack.notify["visible-child-name"].connect ((sender, property) => {
if ("my-tab" == stack.get_visible_child_name ()) {
// TO DO
}
});

can't tap on item in google autocomplete list on mobile

I'm making a mobile-app using Phonegap and HTML. Now I'm using the google maps/places autocomplete feature. The problem is: if I run it in my browser on my computer everything works fine and I choose a suggestion to use out of the autocomplete list - if I deploy it on my mobile I still get suggestions but I'm not able to tap one. It seems the "suggestion-overlay" is just ignored and I can tap on the page. Is there a possibility to put focus on the list of suggestions or something that way ?
Hope someone can help me. Thanks in advance.
There is indeed a conflict with FastClick and PAC. I found that I needed to add the needsclick class to both the pac-item and all its children.
$(document).on({
'DOMNodeInserted': function() {
$('.pac-item, .pac-item span', this).addClass('needsclick');
}
}, '.pac-container');
There is currently a pull request on github, but this hasn't been merged yet.
However, you can simply use this patched version of fastclick.
The patch adds the excludeNode option which let's you exclude DOM nodes handled by fastclick via regex. This is how I used it to make google autocomplete work with fastclick:
FastClick.attach(document.body, {
excludeNode: '^pac-'
});
This reply may be too late. But might be helpful for others.
I had the same issue and after debugging for hours, I found out this issue was because of adding "FastClick" library. After removing this, it worked as usual.
So for having fastClick and google suggestions, I have added this code in geo autocomplete
jQuery.fn.addGeoComplete = function(e){
var input = this;
$(input).attr("autocomplete" , "off");
var id = input.attr("id");
$(input).on("keypress", function(e){
var input = this;
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(37.2555, -121.9245),
new google.maps.LatLng(37.2555, -121.9245));
var options = {
bounds: defaultBounds,
mapkey: "xxx"
};
//Fix for fastclick issue
var g_autocomplete = $("body > .pac-container").filter(":visible");
g_autocomplete.bind('DOMNodeInserted DOMNodeRemoved', function(event) {
$(".pac-item", this).addClass("needsclick");
});
//End of fix
autocomplete = new google.maps.places.Autocomplete(document.getElementById(id), options);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
//Handle place selection
});
});
}
if you are using Framework 7, it has a custom implementation of FastClicks. Instead of the needsclick class, F7 has no-fastclick. The function below is how it is implemented in F7:
function targetNeedsFastClick(el) {
var $el = $(el);
if (el.nodeName.toLowerCase() === 'input' && el.type === 'file') return false;
if ($el.hasClass('no-fastclick') || $el.parents('.no-fastclick').length > 0) return false;
return true;
}
So as suggested in other comments, you will only have to add the .no-fastclick class to .pac-item and in all its children
I was having the same problem,
I realized what the problem was that probably the focusout event of pac-container happens before the tap event of the pac-item (only in phonegap built-in browser).
The only way I could solve this, is to add padding-bottom to the input when it is focused and change the top attribute of the pac-container, so that the pac-container resides within the borders of the input.
Therefore when user clicks on item in list the focusout event is not fired.
It's dirty, but it works
worked perfectly for me :
$(document).on({
'DOMNodeInserted': function() {
$('.pac-item, .pac-item span', this).addClass('needsclick');
}
}, '.pac-container');
Configuration: Cordova / iOS iphone 5

JavaScript: Event listener on iFrame resize / height attribute change (FB comment box)

I have the following problem: I need to add an event listener for an iframe (a Facebook comment box) when it changes its height.
I can not access or change the contentWindow because it is cross domain. But there must be a callback function or something that changes the height attribute.
Is there a way to add an event listener on attribute changes or something? I alreade tried onResize and onChange.
I'm getting crazy with that... Anyone has an idea?
Thank you so much!!
Short answer: No.
However, you can use "postMessage" and "receiveMessage" to send from one iframe to another cross domain. (Of course, only if you have access to the iframed content - I suspect not as it's on facebook.)
In any case... for future help....
(on the iframed page)
var ii = {}
ii.window_height = 800;
var sendHeight = function () {
var window_height = $('body').outerHeight(true);
if (window_height != ii.window_height) {
ii.window_height = window_height;
window.parent.postMessage(ii.window_height, "http://containerDomain.com");
}
}
setInterval(sendHeight, 2000);
(on the container page)
function receiveMessage(evt) {
if (evt.origin === 'https://iframedDomain.com')
{
var iframe_content_height = evt.data;
$('#iframe_form').animate({height: iframe_content_height });
}
}
if ($.browser.msie) {
window.attachEvent('onmessage', receiveMessage);
} else {
window.addEventListener('message', receiveMessage, false);
}
Remember to change the domains in each script.
Note: that's using jQuery - It works, but I'm sure someone can write that better then me? Also not too proud of the interval checking the height... might update if i can.

Ajax Auto Suggest v.2 suggestion depends on radio button?

I am using auto suggest v.2.1.3 from brandspankingnew.
I have a form with two radio button and a text field and would like to know how to make the auto suggest script pointing to a different php file if one of the radio button is checked.
I tried this but it doesnt work, its always point to the same php file even if second button is checked
Could you please assist?
Many thanks in advance.
My code is as follows:
function targetvalue()
{
for (i=0;i
/>Business Street
var options = {
script:"autosuggest.php?json=true&limit=6&",
varname:"input",
json:true,
shownoresults:false,
maxresults:10,
callback: function (obj) { document.getElementById('name').value = obj.id; }
};
var as_json = new bsn.AutoSuggest('business', options);
var options_xml = {
script: function (input) { return "autosuggest.php?input="+input+"&testid="+document.getElementById('testid').value; },
varname:"input"
};
var as_xml = new bsn.AutoSuggest('business', options_xml);
As for me, the easiest solution is to pass the the button state to the one script eg only one script but can return different results depending on button state. Otherwise you need to rewrite options each time someone clicks on the radio button. The second solution an lead to unpredictable behavior of auto suggest component.
Sample script:
var selectedValue = getRadioSelectedValue("radioGroupName");
var options_xml = { script: function (input) { return "autosuggest.php?input="+input+"&testid="+document.getElementById('testid').value+"&mode="+selectedValue; },
Write getRadioSelectedValue by yourself to get selected radio button value or set some flag on click. Mode param in GET request will indicates the state of the button, so you can return proper response.