Has anyone used a progress indicator on an async remote validator using knockout.validation?
I'm doing a jQuery AJAX get to determine if a username is unique, and would like to show a progress indicator or spinner while this is happening.
I'm not sure if this is possible out of the box, but if there is any guidance on how to do this or if anyone has done this already and is willing to share their experience, that would be great :)
you're in luck. there is an isValidating function that gets attached to observables so you can track when the async rule is running on it.
in your markup, you could then just put some spinner image or whatever like this:
<div data-bind="visible: someObservable.isValidating()">
<img src="spinner.gif"/>
</div>
Related
I use casperjs 1.1 (phantom 1.9.8) for loggin a website.
After login, there's the spinning throbber and I have:
<div id=throbber style='display: block'></div>
<div id=main style='display: none'></div>
Some dynamic content is loaded in the main div, so after loading:
<div id=throbber style='display: none'></div>
<div id=main style='display: block'>some content</div>
I tried to get a screenshot of the loaded content, since I need to perform clicks and operations, but I always get the throbber picture. I tried to wait 30 seconds, to waitforselector, waitfor document.getElementById('throbber').style.display == 'none' but without luck...
I use the alwex/php-casperjs wrapper (with some handmade additions) so my last try looks like this:
$casper->click('button[type="submit"]');
$casper->waitFor("document.getElementById('throbber').style.display == 'none'"); //implicit 5000 timeout
$casper->capture($screenshot_large, time().'.png');
This particular try returns "'null' is not an object (evaluating 'document.getElementById('throbber').style')" but I'm opened to any alternative.
Thank you for any suggestion or alternative.
casperjs demonstrated to be unreliable with such webpages.
A different solution based on Selenium perfectly worked.
Is it possible to know where an image has been dropped?
Assume we have a checkerboard with different divs
<div id="jquery-wrapped-fine-uploader"></div>
<div id="checkerboard">
<div id="A1" class="ffup"></div>
<div id="A2" class="ffup"></div>
<div id="A3" class="ffup"></div>
<div id="A4" class="ffup"></div>
......
</div>
<script>
$(document).ready(function () {
$('#jquery-wrapped-fine-uploader').fineUploader({
request: {
endpoint: 'endpoint.php'
},
dragAndDrop: {
extraDropzones: [$('.ffup')]
}
});
});
</script>
First of all, your code will only designate the first ffup div (A1) as it currently stands. You will need to pass a selector for each individual drop zone into your extraDropzones array. The jQuery wrapper will only pass the first element covered by your jQuery selector to the library. Ideally, it would pass along all items represented by the selector, but, to do this, it would have to be aware of the intended type of the parameter. The jQuery wrapper must convert all jQuery objects to HTMLElements before passing the data on to Fine Uploader's core code (which is not aware of jQuery). This is something I'd like to look into more in the future, but this is the way it has worked since 3.0. Note that this limitation does NOT apply to the target of a Fine Uploader plug-in instance, i.e. $(".myTarget").fineUploader(...).
As to your question, Fine Uploader does not currently pass any information along to callbacks that would allow you to determine which drop zone received an associated file. This is an interesting feature, and I can see how it may be useful. Please open up a feature request in the issue tracker so we can discuss and prioritize this for a future release.
You'll have to forgive me for asking a somewhat trivial question here, but I'm generally curious if there's a better way of detecting if a button has been pressed. I'm guessing this would apply to anchor tags also.
Presently I have two submit buttons (so I cannot use $(form).submit in this case), both of which will change another field when they are activated:
<button id="accept" type="submit">Accept</button>
<button id="decline" type="submit">Decline</button>
To achieve this I have detected a click event, and the Enter keypress event separately:
$('#accept').click(function(){ $('#decision').val('Agree'); })
$("#accept").keyup(function(event){
if(event.keyCode == 13){
$('#decision').val('Agree');
}
});
I guess more than anything I'm wondering if there is a way to simplify this code, as it's rather cumbersome, especially if there's a lot of processing (you could create a function, but that's yet another step) and since jQuery seems to have most things covered, I'm surprised after trawling the internet I can't find a cleaner solution.
(with the above I was worried about other ways to mimic the button press, such as hitting space, although that seems to be covered!)
Thanks!
For a button element, both the spacebar and the enter key being presses on a button will generate a click event according W3C event specifications. You should not have to do any special processing to handle that.
As for using $(form).submit(), you can. Just change your buttons to not implicitly submit the form by chaning them to push buttons (W3C):
<button type="button" id="...">...</button>
Then in your handler you can do:
$('#accept,#decline').click(function(event){
$('#decision').val($(event.target).text());
$(form).submit();
}
If you need to you can do some processing on $(event.target).text() to make 'Decline' null/emptystring if necessary.
you can do something like this to make the click a little better: (using a function is necessary here to get something better):
function setDecision(value){
$('#decision').val(value);
}
$('button[type=submit]').click(function() {
var val = $(this).text();
setDecision(val);
});
$("button[type=submit]").keyup(function(event){
var val = $(this).text();
if(event.keyCode == 13){
setDecision(val);
}
});
I think I understand your question, and there may be some precedence to be found in this related topic.
jQuery: how to get which button was clicked upon form submission?
This method avoids adding the .click() event to each button, though that may be a viable option for your application.
Hope this helps!
Mason
Add name="decision" and value="Accept" / value="Decline" (accordingly) to the submit buttons
This way you do not need javascript to handle this at all...
And if the 'Accept' button is the first, then pressing enter inside any form field will also trigger that one
Sample:
<form action="1.html" method="get">
<input type="text" name="in">
<button type="submit" name="decision" value="Accept">Accept</button>
<button type="submit" name="decision" value="Decline">Decline</button>
</form>
I've got a simple AJAX POST form set up in a jQTouch application. We're talking out-of-the-box simple here:
<form id="contact" class="topPage" method="post" action="/process/mobile-submit.cfm">
<!-- Various form guts go here -->
</form>
And this works just great. My users punch in their info, my server-side script does its job and gobbles up the lead data and spits back an out-of-the-box simple response.
<div>
<div class="toolbar">
Back
</div>
<div class="info">
<strong>Thank You For Your Submission</strong><br />
We have received your inquiry, and blah blah blah jibber jabber.
</div>
</div>
Everyone's happy... except those of us who are trying to track the conversion in Google Analytics. Now, I've got virtual pageviews set up on each panel in this application using the pageAnimationEnd event, which is easy as pie when you know what selectors those are going to be attached to in advance, but when jQTouch creates a new segment from the form return, it has a generic serialized ID like #page-N.
I've tried adding a loose script block into the form return. That works fine for Firefox on my desktop, not so much for Safari on my phone.
Since I've allowed jQTouch to handle the AJAX particulars for me in this instance, is there a straightforward way to attach a success handler to it? Or am I better off trying to bind a pageAnimationEnd handler on $('[id^=page-]') and hope the business doesn't want me to do anything else with ad hoc form returns until we replace this app with one written in jQuery Mobile?
Worked it out.
The return fragment can declare its own ID, naturally, and jQTouch will then treat it as though it were an original part of the document. I had previously assumed jQTouch didn't give a toss about what attributes I gave the fragment; I was wrong.
This means that you could goTo it like any other portion of the document. It also means that you can bind a pageAnimationEnd handler on the return fragment either by ID or by class name and it will behave as expected. Thus:
<div class="formResult">
<div class="toolbar">
Back
</div>
<div class="info">
<strong>Thank You For Your Submission</strong><br />
We have received your inquiry, and blah blah blah jibber jabber.
</div>
And:
$('.formReturn').live('pageAnimationEnd', function(evt, info) {
if (info.direction == 'in') {
// Goal completion code
} else {
$(this).remove();
}
});
I'm trying to change my index.html to show a modal window if the referer to my site == (eg, if they come from Google, show a "Welcome Googler" dialog box with an image inside of it).
I'm using FancyBox, but I'm not married to it.
Any suggestions on how to code it? I'm a C++ programmer -- Javascript isn't my forte, so straight examples would be very much appreciated.
Thanks in advance.
You're going to need a couple things: document.referrer, and jQuery UI. jQuery UI makes dialog boxes trivially easy.
You can find an in depth example from the documentation page but for the most part, this is what you are going to need:
<script type="javascript/text">
if (document.referrer.indexOf('google.com') > -1){
$("#my-dialog").dialog("open");
}
// this is the jquery code to set up the dialog box
$(function() {
// options would go inside the dialog() function
$("#dialog").dialog();
});
</script>
Needed HTML:
<div id="my-dialog">
This is where things get displayed
</div>