I have a messaging function in my site that when a user clicks on a reply button they get redirected to the message and have the textarea focus based from the anchor link.
so the link structure is like this:
view_message/4fad37da1df#reply
thanks
Try:
if (window.location.hash) {
$(window.location.hash).attr("tabindex", -1).focus();
}
It should check if the url has a hash in it, and if it does, give the target the tabindex attribute with a value of -1 and apply focus.
See https://stackoverflow.com/a/6188217/430191 for the reason for the tabindex attribute (a related issue about keyboard focus in IE/Chrome/Safari)
Related
I have implemented a panel where user can post their thoughts with images. For every post there is a reply box similar to the facebook timeline. User can mention any user while replying to any post and I tried to make this mentioning easier. I have used a JQuery UI(JS and CSS) autocomplete dropdown to suggest the username when # sign and some other letters are typed(similar to FB or Skype ).As expected, the reply box are dynamically generated. I have made a single autocomplete dropdown and attached it with a reply box which get focused. For this I used this function to set the position -
$("#hidden-autocomplete").autocomplete("option", "position", { of: "#" + currentReplyBoxId } );
Everything is working fine except the dropdown position. The dropdown appears over the input field so user can't see what he has typed so far. See the image -
Here I've made a reproducible example.
But I want this like below -
Now dropdown is below the input field , the height is fixed and scrollable. Am I doing something wrong? Could you please help me to get the desired results? TIA
Looks like you need to set all 3 jQuery UI position properties:
my: "left top",
at: "left bottom",
of: "#" + currentId
Here is the working fiddle https://jsfiddle.net/yg5sdxw6/2/
I try to write a web-component to create a simple login menu. it has paper-inputs for name and password and a button which fires a script to check the data.
the right data redirect to the next page while false credentials should open a toast element right above the button with an error message, siimilar to this one:
http://www.polymer-project.org/tools/designer/#6f21f8d26e14d614c9cb
Select the paper-toast-element in the tree-view and check the 'opened'-checkbox get get a vision what I try to do and please excuse the strange style.
The problem:
I included this element in my main page, but the toast element is always visible right from the start. and it doesn't react to the button click if I move the toast away with css.
I don't wanna spam this page with my code, so I uploaded it here:
https://gist.github.com/Gemoron/6b8f41d1bb6ff522e23c
I appreciate any suggestion on how to fix the problem.
You cannot access the hidden shadow DOM of an element directly with jQuery's $ function, nor with document.querySelector. Also jQuery is not needed anyway. Use Polymer's automatic node finding utility instead: this.$.paper_toast.
You can access the paper-input values with this.$.name.inputValue. But i would prefer to use data-binding instead: <paper-input value={{name}}>. Then you can access the input value in your JavaScript with this.name.
The function to display the toast is show().
I'm unable to reproduce the issue that the toast is visible right after the page has loaded. On my computer the toast is initially hidden and displayed when i click on the button (Chrome 37, Polymer 0.3.3).
In line 76 you try to use an "open()" method, which does not exist on paper-toast. It should be "show()". You can find paper-toasr API here: http://www.polymer-project.org/docs/elements/paper-elements.html#paper-toast
Also, because the ids in shadow dom are encapsulated, you should be using the id selection mechanism from Polymer instead of jquery-style selector
this.$.paper_toast.show();
More on automatic node finding in Polymer: http://www.polymer-project.org/docs/polymer/polymer.html#automatic-node-finding
Here's jsbin (you might need to refresh as jsbin sometimes breaks with Polymer imports)
http://jsbin.com/fened/1/edit
I have made an app with jQuery mobile and laravel.
On the first page "mobilepage1" if have a form with a next button.
Also some of the form elements are dropdown menu's. The dropdown select options I get from a table in the database.
In the form on mobilepage1 I have a dropdown list with all department names:
I get this list from my controller like so:
$departmentlist = Company::find($usercompanyid)->departments;
This is how I display the list in the mobilepage1 form:
{{ Form::label('department', 'Department:')}}
<?php
foreach($afdelingslijst as $item) {
$afdelingsarray[$item->afdelingen] = $item->afdelingen;
}
?>
{{Form::select('size',$afdelingsarray)}}
On the second page I want to make a back button.
I tried the jQuery mobile way with a link with: data-rel="back"
But this does not work. I get a page error, it's missing the departmentlist used in mobilepage1. I can make a link to a route to mobilepage1, but I think all the information the user entered in mobilepage1 would be gone.
I see this url in the address bar when I am on mobilepage2 (this is after I filled in the form on mobilepage1 and clicked next).
/public/mobilepage2?size=Personeelszaken&size=32&directechef=Tineke&size=1&size=1&size=1&date-2=&size=1&time=&omschrijving=
Is there a way I can link to the the mobilepage1 route and still keep the information the user entered?
It looks like it would work just by hitting the back button if you passed in the department list with a view composer rather than through a route. Remove it from your route and place this in a file that's being autoloaded...
View::composer('mobilepage2', function($view)
{
$departmentlist = Company::find($usercompanyid)->departments()->lists('afdelingen','afdelingen');
$view->with('departmentlist', $departmentlist);
});
I'm not sure how you are finding $usercompanyid but you should be able to find it within the closure or pass it in by adding use ($usercompanyid) right after the function($view) part.
Also using the lists() function like that will build your array for you so you don't need to worry about the foreach loop in your view.
Since the values are getting passed back and forth as get variables, I think if you use Form::model() instead of Form::open(), it should place all those values back into the input fields for you.
This link helped me to perform autocompleter in struts2. Through this tag i could
A> Show list form database
B> Insert value in database which were not in list
All worked fined..
But, now i have to use struts2-jquery plugin to show that page containing *dojo tag* in a pop-up window. On doing so, the pop up window just appears, and the page is redirected to the form's action. This problem was solved when i removed the dojo tag-sx from the head of that page.
Now the pop up is shown, but i can't insert value which are not in my list. i.e i can't perform the second option mentioned(B)
I've checked this showcase, but struts2-jquery autocompleter tag also couldn't fulfill my second option(B) as it adds an _widget in it's name field
How can i fulfill both option in my case? Thanks in advance
If you mean submit any value that was not originally in the autocompleter list then <sj:autocompleter> tag has forceValidOption attribute for that. See this issue for more information http://code.google.com/p/struts2-jquery/issues/detail?id=587.
I have a single textbox on a form - basically to allow users to change the URL of their site in our mini CMS. We use remote validation to check that the URL is not already taken.
They enter their desired URL and hit the save button. If they do just that and the focus goes from the textbox straight to the submit button - the validation does not happen and the form doesn't submit properly. If they tap into an area of whitespace then the form does.
The issue with the form submitting is that if they tap whitespace we get the name of the submit button posted along with the desired URL - we use the (AcceptParameterAttribute) to allow us to route form submits to the right Action. This uses the submit buttons name attribute to do this. If they don't click whitespace to lose focus on the text box then only the desired URL is posted.
This is a really odd one and it is very annoying. Has anyone seen anything like this before? Is there a way to overcome the problem?
Try adding the following script to the page:
$(":input").live("blur", function () {
$(this.form).validate().element(this);
});
This should cause validation to occur when you click on the submit button. If not, try changing the first line to:
$(":submit").live("click", function () {