Is anyone using tokeninput plugin and successfully setting focus on a token input field? I'm trying to achieve this.
Solved:
In case anyone else needs, the solution:
$(document).ready(function() {
$("#YourTokenInput").tokenInput("http://shell.loopj.com/tokeninput/tvshows.php",
{ theme: "facebook"
}).focus();
});
OP's solution didn't work for me. Not sure if it is a browser issue, or a issue with the elements being loaded in time, or what, but this is what I had to do (after initializing the token input:
setTimeout(function() { $('#token-input-search-input').focus(); }, 50);
Note: (testing in Chrome)
Related
I think I've found an issue with cy.session(), but before opening one in the GitHub wanted to hear your ideas on my problem itself:
Implemented cy.session(), and it worked! For most of the pages...
The issue is with pages with <select> elements. After session() was implemented, the cy.select() stopped working. It chose the right option, and then it went right back to the previously selected option. The strangest thing is that is not seen even in the DOM snapshots. Removing cy.session() made everything work again.
So, my question is:
Does it feel like a cypress bug? Has anyone encountered this issue and got it somehow resolved? Cannot imagine any way how cy.selecting elements is related to sessions.
EDIT:
After further investigation, I found that selecting a page option changes one specific cookie value. This cookie has the page type code, thus I think that the new value is not saved to the cookie as it was before without cy.session()
Manually selecting in the browser from cypress open doesn't work either! After discovering that, I am pretty sure that it is the cypress bug.
As it was requested, here is my code:
commands.ts
Cypress.Commands.add('login', (user: User) => {
return cy.session(
[user.api_key],
() => {
cy.request({
...
});
},
{
validate() {
cy.visit('/');
cy.contains(user.username, { matchCase: false });
},
cacheAcrossSpecs: true,
}
);
});
e2e.ts
beforeEach(() => {
cy.getCurrentUser().then((user) => {
cy.login(user);
});
});
This issue gets resolved in Cypress 10.10!
Opened issue in cypress' GitHub and got an answer:
https://github.com/cypress-io/cypress/issues/24149
I'm using TinyMCE with great results, the only problem now is that using the autosave plugin and after submitting a form, when I try to create a new record the draft for the last submitted form gets loaded.
I've spent some hours looking for a solution without success so, if anyone knows how can I clear the draft after submitting (or onSubmit, or something) I'd be very grateful.
Thanks!
Would the following help?
<script>
$('#myForm').submit(function(e) {
e.preventDefault();
// clear tinymce contents
tinyMCE.activeEditor.setContent('');
});
</script>
After the form has been submitted and you can clean up, e.g. empty the content are, also clear the localStorage by key:
// https://www.tiny.cloud/docs/tinymce/6/autosave/#autosave_prefix
localStorage.removeItem(
`tinymce-autosave-${window.location.pathname}${window.location.hash}${window.location.search}-comment-editor-draft`
);
There's this website I'm developing which can be found here. It's a photography website and my client asked for me to implement something that would allow her to move the photos around and change the order of which they appear. They come from a MySQL database and are displayed with jQuery Masonry.
I thought instantly of jQuery UI Sortable, and I've been trying to implement it with absolutely no luck at all.
How can I achieve this? Can someone point me in the right direction, please?
Thanks in advance!
I am struggling with the same issue, so far my answer has been to change classes with jquery's sortable start, stop, change and sort events. Like so:
$('#sortable').sortable({
start: function(event, ui) {
console.log(ui);
ui.item.removeClass('masonry');
ui.item.parent().masonry('reloadItems')
},
change: function(event, ui) {
ui.item.parent().masonry('reloadItems');
},
stop: function(event, ui) {
ui.item.addClass('masonry');
ui.item.parent().masonry('reloadItems');
});
Here is a working example and a JS Fiddle on the subject. It's a start.
However, this is not a 'presto' solution, this examples work with older versions of masonry, the latest version has a few bugs implementing it since the "reload" method was replaced with layout() and reloadItems().
Or... you can use the old masonry versions, if it works for you.
Alternatively you can use jQuery.Shapeshift(), which does basically what you're looking for.
I am trying to run a function on page load but its not working. I've added it in every place I can think of and the ONLY thing that works is:
$("html").mousemove(function(event) {
$('#project_thumbs_container').masonry('reload');
});
I've tried delays but I have resorted to the hacky above method :(
Does anyone have any suggestions as to why my function won't run?
UPDATE:
I am using masonry for jquery. My problem is when I load a page that uses masonry with ajax, it shows them in a single column. $('#project_thumbs_container').masonry('reload'); resets it properly, but it only works using the above mousemove method.
It sounds like you have one of two problems:
1) Malformed HTML which is causing an error, which isn't allowing the code to parse correctly when using the document onReady syntax: $(function() { ... });
2) Masonry might be loading asynchronously, which means that the "onReady" callback might not be the one that you want to be using. Your Ajax call would look more like this:
$('body').load('index.html', function() {
$('#project_thumbs_container').masonry();
});
Unless someone has a better answer, I just put the code in my fadeIn(); snippet after ajax call is complete:
this.fadeIn('slow', function() {
$('#project_thumbs_container').masonry('reload');
});
Seems to work.
Try something like this.
$(document).ready(function(){
$('#project_thumbs_container').masonry('reload');
});
You can put this code anywhere on the page and it should work, as long as the dependencies have already been loaded.
Just put your function in this
$(document).ready(function() {
// Handler for .ready() called.
// your function
});
when your page load the function will execute
I have noticed a strange jQuery Validation plugin behaviour, possible a bug (tested with the latest version at http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js).
Suppose I have several forms on a page.
This code leads to only first form to be validated:
$(document).ready(function() {
$("form").validate();
});
But this one attaches data validator to all forms:
$(document).ready(function() {
$("form").each(function() {
$(this).validate();
});
});
Is it by design? Why can't I handle all forms at once?
The api for validate does state that it "Validates the selected form" (not forms), but I agree that that's not very jQueryish. Maybe you should suggest it as an enhancement, I can't imagine that breaking any old code?