- Screen name: bcamp1973
bcamp1973's Profile
24 Posts
38 Responses
0
Followers
Show:
- Expanded view
- List view
Private Message
- 08-May-2013 01:28 PM
- Forum: Using jQuery
I imagine I'm doing something wrong at a very basic level, but I guess i've been staring at it too long to figure it out. I'm trying to bind simple custom "enable" and "disable" methods to both forms and form fields. The idea is that disabling a field disables the field itself, disabling a form disables any corresponding :submit buttons. However, when I $.fn.trigger() my custom events, they seem to fire on EVERY form/field on the page, not just the one selected. I've created a fiddle to demonstrate and my JS is below...- //Disable FORM event handler
- $('body').on('disable', 'form', function () {
- console.log(this.nodeName);
- var $form = $(this);
- $form
- .find(':submit')
- .trigger('disable');
- return $form;
- });
- //Disable field event handler
- $('form').on('disable', 'input,select,textarea,button', function () {
- console.log(this.nodeName);
- var $field = $(this)
- $field
- .addClass('disabled')
- .prop('disabled', true);
- return $field
- });
- /*
- These fire on ALL input elements on the page????
- */
- $('#my_form').trigger('disable');
- $('#my_text').trigger('disable');
- 08-Dec-2011 02:28 PM
- Forum: Using jQuery Plugins
I'm at a loss. I've been using jquery-ujs to simplify async requests in my rails project and it's worked quite well. I've upgraded from jQuery 1.6+ to 1.7.1. An async form submission that was working before no longer works. It's as though the the async request is never successful, but i get a 200 and the correct response type (html). Before upgrading jQuery, my JS looked like this..- $("#myForm").live({
- 'submit': function() { alert("Processing..."); },
- 'ajax:success': function() { alert("Success!"); },
- 'ajax:error': function() { alert("Error!"); }
- });
When that stopped working I refactored it to get away from live() and use the new on() handler...- $(document)
- .on('submit', '#myForm', function(){ alert("Processing..."); })
- .on('ajax:success', '#myForm', function(){ alert("Success!"); })
- .on('ajax:error', '#myForm', function(){ alert("Error!"); });
Unfortunately that didn't fix the issue. My form isn't anything special...- <form id="myForm" method="post" action="/some/path" data-remote="true" data-type="html">
- ...
- </form>
Has anyone else seen anything like this?- I would like to override the default transition to "fade". This isn't working...
- ( function ($) {
- $.mobile.defaultPageTransition('fade');
- })(jQuery);
I've read the docs, but their examples don't make sense in this context (to me anyway)- 20-Jun-2011 11:51 AM
- Forum: jQuery Mobile
.ui-btn-right doesn't have any effect in the footer toolbars. is there a built in solution or do I need to get funky with css?- in my widget i want to call this.element._trigger(), but only *after* everything is complete. What syntax do i use to accomplish this?
- $.widget('ui.myWidget', {
- ...
- disappear: function () {
- this.element.fadeOut( function () {
- this._trigger('fadeOut'); // <= doesn't work
- })
- }
- this._trigger('fadeOut'); // <= works but fires *before* animation is complete
- ...
- });
- 13-Jun-2011 01:37 PM
- Forum: jQuery Mobile
When my response returns multiple data-role="page" elements, only the first one is loaded into the DOM, the rest are discarded. how do I load them all? This application is too large to load everything at once, but i do want to load groups of pages in chunks. is it even possible?- 04-May-2011 12:33 PM
- Forum: Using jQuery Plugins
I'm trying to set a modal to the top right corner of the screen using block ui. In IE 6 the right margin is working, but it's ignoring the top margin and centering the modal in the window. In other browsers it behaves as expected. anyone else experience this behavior?- I want the <a/> in an <li/> to be triggered when the click happens anywhere within the </li>. So given the html...
- <ul>
- <li><a href="javascript:alert('clicked!')">test</a> <span>some other stuff</span></li>
- <li><a href="javascript:alert('clicked!')">test</a> <span>some other stuff</span></li>
- <li><a href="javascript:alert('clicked!')">test</a> <span>some other stuff</span></li>
- </ul>
...why doesn't this work?- $(function () {
- $('ul').delegate('li','click', function () {
- $(this).find('a').first().trigger('click');
- });
- });
Instead I get an error...RangeError: Maximum call stack size exceeded.- 03-Mar-2011 12:23 PM
- Forum: jQuery Mobile
- (function($, window, undefined ) {
- // do stuff
- })( jQuery, this )
- I'm trying to progressively enhance a web application I'm developing. Similar to jQuery Mobile, the UI is defined using data attributes (<div data-role="page"/>) that JS then applies classes to. The problem is I'm getting the FOUC on page load and I haven't figured out a way around it yet. jQuery Mobile seems to have sorted out this issue. I've been searching through the jQuery Mobile source code, but so far I haven't found my answer. Currently, my page looks like this...
- <!doctype html>
- <html lang="en" class="no-js">
- <head>
- <meta charset="utf-8"/>
- <title>My Application</title>
- <link rel="stylesheet" href="/stylesheets/styles.combined.css"/>
- <script src="/javascripts/scripts.combined.js"></script>
- </head>
- <body>
- <div data-role="page">
- <header data-role="header">My Application</header>
- <div data-role="content">content</div>
- <footer data-role="footer">footer</footer>
- </div>
- </body>
- </html>
the scripts.combined.js file includes modernizr, jquery and all my plugins etc. Anyone have any suggestions?- 22-Jan-2011 08:47 PM
- Forum: jQuery Mobile
assuming this...- <span data-setvalue="xyz"></span>
why doesn't this work?- $( '[data-setvalue]' ).live( 'pagebeforeshow' , function () {
- alert( 'foobar!' );
- });
- 22-Jan-2011 05:24 PM
- Forum: jQuery Mobile
my list...- <ul data-role="listview" id="resident-records">
- <li>
- <h3><a href="resident_profile.html" data-resident-id="84736">Harry Ballzonya</a></h3>
- <p>Room # 1234</p>
- </li>
- ...
- </ul>
I've tried this, and it doesn't work...what's the secret?- $('#resident-records').delegate('[data-resident-id]', 'click tap', function () {
- alert( $(this).data('resident-id') );
- });
- I'd like to try running the latest code from gitHub. I've cloned the repository. Now I just need to build...how is this done? Not finding anything in the docs
- 20-Jan-2011 01:06 PM
- Forum: jQuery Mobile
I get this in Safari...TypeError: Result of expression 'to.data("page")' [undefined] is not an object. (line 3259)And this in FireFoxto.data( ... (line 3259)When I click on any link on this page...- <!DOCTYPE html>
- <html>
- <head>
- <title>Test</title>
- <link rel="stylesheet" href="/javascripts/jquery.mobile-1.0a2/jquery.mobile-1.0a2.css" />
- <link rel="stylesheet" href="/stylesheets/application.css"/>
- <script src="/javascripts/jquery-1.4.4.min.js"></script>
- <script src="/javascripts/application.js"></script>
- <script src="/javascripts/jquery.mobile-1.0a2/jquery.mobile-1.0a2.js"></script>
- </head>
- <body>
- <div data-role="page" data-theme="a" id="am-home">
- <div data-role="header">
- <h1>Test</h1>
- </div><!-- /header -->
- <div data-role="content">
- <ul data-role="listview" data-theme="c" data-split-icon="delete" data-split-theme="c" data-filter="true">
- <li data-role="list-divider">3827321231</li>
- <li><a href="assessment_types.html">3826374832</a><a href="delete_resident.html" data-transition="pop" data-rel="dialog">Delete</a></li>
- <li><a href="assessment_types.html">8376545982</a><a href="delete_resident.html" data-transition="pop" data-rel="dialog">Delete</a></li>
- <li><a href="assessment_types.html">2364533932</a><a href="delete_resident.html" data-transition="pop" data-rel="dialog">Delete</a></li>
- <li><a href="assessment_types.html">8432475664</a><a href="delete_resident.html" data-transition="pop" data-rel="dialog">Delete</a></li>
- <li data-role="list-divider">7364435193</li>
- <li><a href="assessment_types.html">3826374832</a><a href="delete_resident.html" data-transition="pop" data-rel="dialog">Delete</a></li>
- <li><a href="assessment_types.html">8376545982</a><a href="delete_resident.html" data-transition="pop" data-rel="dialog">Delete</a></li>
- <li><a href="assessment_types.html">2364533932</a><a href="delete_resident.html" data-transition="pop" data-rel="dialog">Delete</a></li>
- </ul>
- </div><!-- /content -->
- <div data-role="footer">
- <div data-role="navbar" data-iconpos="top">
- <ul>
- <li><a href="add_user.html" data-icon="plus">Add User</a></li>
- <li><a href="settings.html" data-icon="gear">Settings</a></li>
- </ul>
- </div><!-- /navbar -->
- </div><!-- /header -->
- </div><!-- /page -->
- </body>
- </html>
It doesn't seem to matter what page is being loaded...even if the new page is blank.- 19-Jan-2011 01:47 PM
- Forum: jQuery Mobile
i'm creating an interface for some webcams that provide an mjpeg stream. when switching from the thumbnail view to a camera view I want to pause or stop the streams on the previous page...not sure how to do this? Ideas?- 21-Sep-2010 10:54 PM
- Forum: Using jQuery
Given this...- <label for="field_id">Field Name</label>
- <input type="..." id="field_id"/> <!-- or textarea/button/select -->
...I'm doing this...- $(':input').each(function(){
- var $field = $(this).wrap('<div class="wrapper"/>');
- var $wrapper = $field.parent();
- var $fieldID = $field.attr('id');
- var $label = $('label[for="' + $fieldID + '"]:first');
- $wrapper.prepend($label);
- });
...to get this...- <div class="wrapper">
- <label for="field_id">Field Name</label>
- <input type="..." id="field_id"/>
- </div>
It feels pretty clumsyIs there a more elegant way? Maybe even through chaining? Sometimes the <label/> will be before the field and sometimes after...
- 20-Sep-2010 04:38 PM
- Forum: Using jQuery
I just came across this article http://www.julienlecomte.net/blog/2007/10/28/ ...it made my brain hurt to read it. But, it makes me wonder......is this...- $('td').each(function{}(
- $(this).trigger('my_heavy_duty_cpu_crushing_method');
- ));
...faster than this...- $('td').trigger('my_heavy_duty_cpu_crushing_method');
...?- Is there a performance difference between chaining and not chaining? For example, given that I've set the jQuery wrapped set to a variable like so...
- var $mySpiffyDiv = $('#mySpiffyDiv');
...is this...- $mySpiffyDiv
- .bind('doFoo',function(){
- alert('doing Foo now');
- })
- .bind('doBar',function(){
- alert('doing Bar now');
- });
...more efficient (better performance) than this?...- $mySpiffyDiv
- .bind('doFoo',function(){
- alert('doing Foo now');
- });
- $mySpiffyDiv
- .bind('doBar',function(){
- alert('doing Bar now');
- });
I ask, because I'm binding a lot of methods to an object and it might be easier to separate it out for comments etc...- 16-Sep-2010 06:09 PM
- Forum: Using jQuery
Since IE 6 doesn't recognize type selectors in css (input[type=xxx] {}) I'm adding classes to elements dynamically so I have handles for the different types of <input/> elements. Here's what I'm using, but it feels sloppy (maybe not the most efficient approach?). Is there a better/less verbose/more efficient way to do this?- $('input')
- .filter('[type=text]').addClass('input_text').end()
- .filter('[type=radio]').addClass('input_radio').end()
- .filter('[type=checkbox]').addClass('input_checkbox').end()
- .filter('[type=submit]').addClass('input_submit').end()
- .filter('[type=reset]').addClass('input_reset').end()
- .filter('[type=button]').addClass('input_button').end()
- .filter('[type=password]').addClass('input_password').end()
- .filter('[type=image]').addClass('input_image').end()
- .filter('[type=file]').addClass('input_file').end()
- .filter('[readonly]').addClass('readonly_attr').end()
- .filter('[disabled]').addClass('disabled_attr');
----------------------------I just simplified to this...but still wondering if there's a better way to handle it?- $('input')
- .filter(':text').addClass('input_text').end()
- .filter(':radio').addClass('input_radio').end()
- .filter(':checkbox').addClass('input_checkbox').end()
- .filter(':submit').addClass('input_submit').end()
- .filter(':reset').addClass('input_reset').end()
- .filter(':button').addClass('input_button').end()
- .filter(':password').addClass('input_password').end()
- .filter(':image').addClass('input_image').end()
- .filter(':file').addClass('input_file').end()
- .filter('[readonly]').addClass('readonly_attr').end()
- .filter(':disabled').addClass('disabled_attr');
- i have a link to a dynamically generated report download. when you click the link it takes a while for the server to do the number crunching and return the file. i need to execute some JS on completion of the file download. is this even possible??
- 03-Aug-2010 12:26 PM
- Forum: Using jQuery
This is more a general JS question, but it's making me nuts. I use a "spinner" (with the $.blockUI plugin) in a few places to let the user know something is still happening and to be patient...like so...Sexy eh? Anyway, in one example I put the spinner up when a link is clicked as it takes a while for the next page to load (a report that's generated dynamically). When the next page loads obviously the spinner goes away. However, if the user clicks the back button, the spinner is cached with the page...just sitting there, spinning away. Not sure how to get around this? Any ideas?- 03-May-2010 03:27 PM
- Forum: Using jQuery
All i want is the width of a table cell...in pixels...here's one way I've tried to get it that's not working...tried several and it's making me nuts...- $('#mytable').find('thead th').each(function(){
- console.log( $(this).width() ); // <== returns 0 ???
- })
- Since updating jQuery livequery seems to only work intermittently. When content is loaded via AJAX (using jQuery) livequery doesn't seem to pick up the event. However, if i trigger another event (that has a method associated with it) suddenly the livequery "fires" and applies it's magic. Very odd...it's happening on the PC in both IE and FF and on the Mac in Safari and FF...it's making me nuts! Thoughts?
I'm trying to create a very simple plugin to control the pulse (fadeIn()/fadeOut()) effect and use a callback. The pulse itself works, but the callback doesn't. I'm not sure what i'm doing wrong?
- (function($){ $.fn.pulse = function(options) { return this.each(function(){ var $this = $(this), settings = $.extend({}, $.fn.pulse.defaults, options); $this .fadeIn(settings.speed,function(){ for(var n=settings.count-1; n>=0; n--){ $(this) .fadeOut(settings.speed) .fadeIn(settings.speed,function(){ if(n == 0){ settings.callback(); // not working! } }); } }); }); }; $.fn.pulse.defaults = { count : 3, speed : 'fast', callback : function(){alert('Done!')} }; })(jQuery);
- «Prev
- Next »
Moderate user : bcamp1973
© 2013 jQuery Foundation
Sponsored by
and others.