Search Results

Search found 34127 results on 1366 pages for 'jquery form wizard'.

facebook twitter digg google delicious technorati stumbleupon myspace wordpress linkedin gmail igoogle windows live tumblr viadeo yahoo buzz yahoo mail yahoo bookmarks favorites email print

Page 21/1366 | < Previous Page | 17 18 19 20 21 22 23 24 25 26 27 28  | Next Page >

  • jQuery ajaxSubmit ignored by IE8

    - by George Burrell
    Hi there, I am combing the jQuery validation plug-in with the jQuery Form Plugin to submit the form via AJAX. This works perfectly in Firefox & Chrome, but (as usual) Internet Explorer is being a pain. For reasons that are alluding me, IE is ignoring the ajaxSubmit, as a result it submits the form in the normal fashion. I've followed the validation plug-in's documentation when constructing my code: JS: $(document).ready(function() { var validator = $("#form_notify").validate({ messages: { email: { required: 'Please insert your email address. Without your email address we will not be able to contact you!', email:'Please enter a valid email address. Without a valid email address we will not be able to contact you!' } }, errorLabelContainer: "#error", success: "valid", submitHandler: function(form) {$(form).ajaxSubmit();} }); $('#email').blur(function() { if (validator.numberOfInvalids() 0) { $("#label").addClass("label_error"); return false; } else {$("#label").removeClass("label_error");} }); $('#form_notify').submit(function() { if (validator.numberOfInvalids() == 0) { $(this).fadeOut('fast', function() {$('#thank-you').fadeIn();}); return true; } return false; }); }); Form HTML: <form id="form_notify" class="cmxform" name="form_notify" action="optin.pl" method="get"> <fieldset> <div class="input"> <label id="label" for="email">Email Address:</label> <input type="text" id="email" name="email" value="" title="email address" class="{required:true, email:true}"/> <div class="clearfix"></div> </div> <input type="hidden" name="key" value="sub-745-9.224;1.0.0.0.0.0.0.0.0.0.0.0.0.0.0.0;;subscribe-224.htm"> <input type="hidden" name="followup" value="19"> <input type="submit" name="submit" id="submit-button" value="Notify Me"> <div id="error"></div> </fieldset> </form> I can't understand what is causing IE to act differently, any assistance would be greatly appreciated. I can provide more information if needed. Thanks in advance!

    Read the article

  • Form graphics not set when form loads

    - by Jimmy
    My form has a group box which contains two overlapping rectangles. The form's other controls are two sets of four numeric up down controls to set the rectangles' colors. (nudF1,2,3 and 4 set the rectangle that's in front, and nudB1,2,3 and 4 set the rectangle that's behind.) Everything works fine, except that the rectangles do not display the colors set in the numeric up downs when the form first loads. The numeric up down controls' ChangeValue events all call the ShowColors() method. The form's Load event calls the csColorsForm_Load() method. Any suggestions? namespace csColors { public partial class csColorsForm : Form { public csColorsForm() { InitializeComponent(); } private void csColorsForm_Load(object sender, EventArgs e) { this.BackColor = System.Drawing.Color.DarkBlue; SetColors(sender, e); } private void SetColors(object sender, EventArgs e) { Control control = (Control)sender; String ctrlName = control.Name; Graphics objGraphics; Rectangle rect1, rect2; int colorBack, colorFore; objGraphics = this.grpColor.CreateGraphics(); // If calling control is not a forecolor control, paint backcolor rectangle if (ctrlName.Substring(0,4)!="nudF") { colorBack = int.Parse(SetColorsB("nudB"), NumberStyles.HexNumber); SolidBrush BrushB = new SolidBrush(Color.FromArgb(colorBack)); rect1 = new Rectangle(this.grpColor.Left, this.grpColor.Top, this.grpColor.Width, this.grpColor.Height); objGraphics.FillRectangle(BrushB, rect1); } // Always paint forecolor rectangle colorFore = int.Parse(SetColorsB("nudF"), NumberStyles.HexNumber); SolidBrush BrushF = new SolidBrush(Color.FromArgb(colorFore)); rect2 = new Rectangle(this.grpColor.Left, this.grpColor.Top, this.grpColor.Width, this.grpColor.Height); objGraphics.FillRectangle(BrushF, rect2); objGraphics.Dispose(); } private string SetColorsB(string nam) { string txt=""; for (int n = 1; n <= 4; ++n) { var ud = Controls[nam + n] as NumericUpDown; int hex = (int)ud.Value; txt += hex.ToString("X2"); } return txt; } private void btnClose_Click(object sender, EventArgs e) { this.Close(); } } }

    Read the article

  • Different button's name at the opening of jquery dialog

    - by Luca Belluco
    Hello, I have a dialog form and when I open it I have the button "add a task", I would like to keep this "name", when I open the form from an empty case, but I want to have a button named "edit this task" when I open an already existing task. I also want to send the form with this button when I push enter key, no matter where I am on the form. Thank you.

    Read the article

  • SharePoint: Can't Connect to a Configuration Database When Using Configuration Wizard

    - by Denis
    Hello everyone. I wonder if you could help me with the following problem: We have a SharePoint farm consisted of two servers with an NLB (a load balancer), a database server and an index server (4 servers in total). The issues initially appeared when we were trying to change Search settings via Shared services provider and an error was appearing with the message I can’t even remember now. To fix that problem, we decided to restart Search services on the Index server via Central Administration… and the process had stuck with a status “stopping” for several days. We’ve found a few solutions on the forums, but nothing had helped. Then we’ve tried to exclude the Index server from the farm, but yet again, Search services would not stop. However, after a week we’ve noticed that the services finally stopped. That was a prologue. So, after the Search services have finally stopped, we decided to return the Index server back to the farm via the SharePoint Configuration wizard. When we click on a button “Search database instances” (don’t know the exact name in English, we have a Russian version), a correct database name and user are automatically appear in the relevant fields. Then we supply a password for the user and click “next” two times and the configuration begins. Unfortunately, at the second stage we receive the error “Could not connect to a configuration database” with the exception in the log file: “Exception: System.Reflection.TargetInvocationException: Exception has been thrown by the target of an invocation.” Now we can’t figure out why the configuration wizard can’t connect to the configuration database. Any suggestions will be really appreciated.

    Read the article

  • Problem retrieving values from Zend_Form_SubForms - no values returned

    - by anu iyer
    I have a Zend_Form that has 4 or more subforms. /** Code Snippet **/ $bigForm = new Zend_Form(); $littleForm1 = new Form_LittleForm1(); $littleForm1->setMethod('post'); $littleForm2 = new Form_LittleForm2(); $littleForm2->setMethod('post'); $bigForm->addSubForm($littleForm1,'littleForm1',0); $bigForm->addSubForm($littleForm2,'littleForm2',0); On clicking the 'submit' button, I'm trying to print out the values entered into the forms, like so: /** Code snippet, currently not validating, just printing **/ if($this-_request-getPost()){ $formData = array(); foreach($bigForm->getSubForms() as $subForm){ $formData = array_merge($formData, $subForm->getValues()); } /* Testing */ echo "<pre>"; print_r($formData); echo "</pre>"; } The end result is that - all the elements in the form do get printed, but the values entered before posting the form don't get printed. Any thoughts are appreciated...I have run around circles working on this! Thanks in advance!

    Read the article

  • jquery form select (if exists in $_POST)

    - by SoulieBaby
    Hi all, I'm trying to redo this in jQuery: <script language="JavaScript" type="text/javascript"> var thisIsSelected = '<?php echo $_POST['image']; ?>'; var sel1= document.getElementById('image'); sel1.value = thisIsSelected; </script> But I seem to keep breaking it lol Basically I want jQuery to check if $_POST['image'] exists and if so make it selected on the form. I'm assuming if it's possibly with javascript, jquery can do it easier ;)

    Read the article

  • jQuery for XUL?

    - by Aaron de Windt
    I have read on the internet and found out that jQuery works OK on XUL. My questions are: Are there any jQuery plugins that are specially made to work with XUL? Is there any other jQuery-like library that was specially made for XUL? I have not yet tested jQuery on XUL, I'm just asking these questions for curiosity.

    Read the article

  • Is Bootstrap 2.1 compatible with jQuery UI?

    - by Ghopper21
    It's a known problem that the older Bootstrap didn't work out of the box with jQuery UI, as you can see from this github discussion. There are a few mashups of the two, including jQuery Bootstrap by John Seigers and jQuery UI Bootstrap by Addy Osmani. Are those mashups still necessary with the new version of Bootstrap, or can you now just use Bootstrap and jQuery UI out of the box (as is alluded to vaguely in the github discussion)?

    Read the article

  • mvc jquery passing form values after user presses "Accept" button

    - by gdubs
    So I have a form and a submit button that posts the form to an action. But I wanted to show a popup where the user can deny or accept an agreement. Here's my jquery $(document).ready((function () { var dialog = $('#confirmation-dialog').dialog({ autoOpen: false, width: 500, height: 600, resizable: false, modal: true, buttons: { "Accept": function () { $(this).dialog('close'); $.ajax({ type: 'POST', data: {__RequestVerificationToken: $("input[name=__RequestVerificationToken]").val()} }); }, "Cancel": function () { $(this).dialog('close'); } } }); $('#registration-submit').click(function (e) { var action = $(this.form); console.log(action); var form = $('form'); dialog.dialog("open"); return false; }); })); My problem with this is that it would post, but it would only send my AntiforgeryToken, and not the values of the form. But when it goes through the TryupdateModel it would go through for some reason but will not Save (cuz of the missing data that wasn't passed on the formcollection).

    Read the article

  • Sorting the columns of an HTML table using JQuery

    - by nikolaosk
    In this post I will show you how easy is to sort the columns of an HTML table. I will use an external library,called Tablesorter which makes life so much easier for developers. ?here are other posts in my blog regarding JQuery.You can find them all here. You can find another post regarding HTML tables and JQuery here. We will demonstrate this with a step by step example. I will use Visual Studio 2012 Ultimate. You can also use Visual Studio 2012 Express Edition. You can also use VS 2010 editions.   1) Launch Visual Studio. Create an ASP.Net Empty Web application. Choose an appropriate name for your application. 2) Add a web form, default.aspx page to the application. 3) Add a table from the HTML controls tab control (from the Toolbox) on the default.aspx page 4) Now we need to download the JQuery library. Please visit the http://jquery.com/ and download the minified version.Then we need to download the Tablesorter JQuery plugin. Please donwload it, here. 5) We need to reference the JQuery library and the external JQuery Plugin. In the head section ? add the following lines.   <script src="jquery-1_8_2_min.js" type="text/javascript"></script>  <script src="jquery.tablesorter.js" type="text/javascript"></script>6) We need to type the HTML markup, the HTML table and its columns <body>    <form id="form1" runat="server">    <div>        <h1>Liverpool Legends</h1>        <table style="width: 50%;" border="1" cellpadding="10" cellspacing ="10" class="liverpool">            <thead>                <tr><th>Defenders</th><th>MidFielders</th><th>Strikers</th></tr>            </thead>            <tbody>            <tr>                <td>Alan Hansen</td>                <td>Graeme Souness</td>                <td>Ian Rush</td>            </tr>            <tr>                <td>Alan Kennedy</td>                <td>Steven Gerrard</td>                <td>Michael Owen</td>            </tr>            <tr>                <td>Jamie Garragher</td>                <td>Kenny Dalglish</td>                <td>Robbie Fowler</td>            </tr>            <tr>                <td>Rob Jones</td>                <td>Xabi Alonso</td>                <td>Dirk Kuyt</td>            </tr>                </tbody>        </table>            </div>    </form></body> 7) Inside the head section we also write the simple JQuery code.   <script type="text/javascript"> $(document).ready(function() { $('.liverpool').tablesorter(); }); </script> 8) Run your application.This is how the HTML table looks before the table is sorted on the basis of the selected column.   9) Now I will click on the Midfielders header.Have a look at the picture below  Tablesorter is an excellent JQuery plugin that makes sorting HTML tables a piece of cake. Hope it helps!!!

    Read the article

  • piecing together a jquery form mailer

    - by Joel
    Hi guys, My newbieness is shining through here...I managed to piece together a form mailer that works great, but now I need to add two more fields, and I'm at a loss as to how to do it. Over the months, I have commented out some things I didn't need, but now I'm stuck. I borrowed from this tutorial to make the original form: http://trevordavis.net/blog/tutorial/ajax-forms-with-jquery/ But then I cannibalized it to make an email signup form for a newsletter, so the fields I need are: recipient email (me-hard coded in) senders email address subject (hardcoded in) first name and city in the body of the message For my form, I have this: <div> <?php include('verify.php'); ?> <form action="index_success.php" method="post" id="sendEmail" class="email"> <h3 class="register2">Newsletter Signup:</h3> <ul class="forms email"> <li class="name"><label for="yourName">Name: </label> <input type="text" name="yourName" class="info" id="yourName" value=" " /><br> </li> <li class="city"><label for="yourCity">City: </label> <input type="text" name="yourCity" class="info" id="yourCity" value=" " /><br> </li> <li class="email"><label for="emailFrom">Email: </label> <input type="text" name="emailFrom" class="info" id="emailFrom" value="<?= $_POST['emailFrom']; ?>" /> <?php if(isset($emailFromError)) echo '<span class="error">'.$emailFromError.'</span>'; ?> </li> <li class="buttons email"> <button type="submit" id="submit">Send</button> <input type="hidden" name="submitted" id="submitted" value="true" /> </li> </ul> </form> </div> emailcontact.js: $(document).ready(function(){ $("#submit").click(function(){ $(".error").hide(); var hasError = false; var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; var emailFromVal = $("#emailFrom").val(); if(emailFromVal == '') { $("#emailFrom").after('<span class="error">You forgot to enter the email address to send from.</span>'); hasError = true; } else if(!emailReg.test(emailFromVal)) { $("#emailFrom").after('<span class="error">Enter a valid email address to send from.</span>'); hasError = true; } var subjectVal = $("#subject").val(); if(subjectVal == '') { $("#subject").after('<span class="error">You forgot to enter your name.</span>'); hasError = true; } var messageVal = $("#message").val(); if(messageVal == '') { $("#message").after('<span class="error">You forgot to enter your city.</span>'); hasError = true; } if(hasError == false) { $(this).hide(); $("#sendEmail li.buttons").append('<img src="/wp-content/themes/default/images/template/loading.gif" alt="Loading" id="loading" />'); $.post("/includes/sendemail.php", //emailTo: emailToVal, { emailFrom: emailFromVal, subject: subjectVal, message: messageVal }, function(data){ $("#sendEmail").slideUp("normal", function() { $("#sendEmail").before('<h3 class="register2">Success!</h3><p class="emailbox">You are on the Newsletter email list.</p>'); }); } ); } return false; }); }); sendmail.php: <?php $mailTo = $_POST['emailTo']; $mailFrom = $_POST['emailFrom']; $subject = $_POST['yourName']; $message = $_POST['yourCity']; mail('[email protected]','Rattletree Newsletter', 'Name='.$subject. ' City='.$message, "From: ".$mailFrom); ?> Thanks for any help! I'm going crosseyed trying to figure this one out.

    Read the article

  • eLearning event on HTML5 for Mobile with jQuery Mobile

    - by Wallym
    I'll be doing an eLearning event on HTML5 for Mobile with jQuery Mobile. There will also be a few items sprinkled in on ASP.NET Razor. Mobile development is a hot item. Customers are buying iPhones, iPads, Android devices, and many other mobile computing devices at an ever increasing record pace. Devices based on iOS and Android are nearly 80 percent of the marketplace. RIM continues to be dominant in the business area across the world. Nokia's growth with Windows Phone will grow on a worldwide basis. At the same time, clearly web development is a tremendous driver of applications, both on the public Internet and on private networks. How can developers target these various mobile platforms with web technologies? Developers can write web applications that take advantage of each mobile platform, but that is a lot of work. Into this space, the jQuery Mobile framework was developed. This eLearning series will provide an overview of mobile web development with jQuery Mobile, a detailed look at what the jQuery Mobile framework provides for us, how we can customize jQuery Mobile, and how we can use jQuery Mobile inside of ASP.NET.Link: http://elearning.left-brain.com/event/mobile-web-development

    Read the article

  • Problems re-populating select options in Rails when form returned with errors

    - by Rick
    I have a form with 2 select options in it -- frequency and duration. When there are errors with the form, and it is returned to the browser, the select options are not re-populated with the selections the user made even though the returned values for those fields match the values of options in the selects. Also, when the form is returned, these fields are not marked as having errors even though their values are blank. Here's the frequency and duration fields in Rails <%= frequency_select c, :frequency %> <%= duration_select c, :duration %> The method for frequency_select is def frequency_select(f, method) options = [["day", 1.day], ["other day", 2.days], ["week", 1.week]] f.select method, options, :include_blank => true end And the method for duration_select is def duration_select(f, method, unit="day" ) values, units = *case unit when "day" : [[[5, 5], [15, 15], [30, 29]], "days"] when "other day" : [[[15, 15], [30, 29], [45,45]], "days"] when "week" : [[[4, 29], [6, 43], [8, 57]], "weeks"] end f.select method, values.map {|(label, i)| ["#{label} #{units}", i.days]}, :include_blank => true end If you enter a value into one or both of these fields and submit the form without completing part of it (any part of it), the form is returned to the user (as would be expected), but the duration and frequency fields are not re-populated with the user's selection. If I add this bit of code to the form <p><%= @challenge.attributes.inspect %></p> I see that this for duration and frequency when the form is returned to the browser: "duration"=>3888000, "frequency"=>172800 These values match values on the options in the select fields. Is there anything special in Rails that needs to be done so that the select fields are re-populated with the user's selections? Any thoughts on what the problem could be or what I should try next? Help is greatly appreciated! -Rick PS If you look at some of the other questions, you'll notice I've asked about this in the past. At one point, I thought the form was returning values for frequency and duration in days rather than seconds, but that's not the case. PPS Here's one other bit of information that might matter, but my tests indicate that it probably does not. (Though, I'm a bit of a newbie to this, so don't take my word for it.) These two fields are chained together using the cascade jquery plugin. The javascript is included on the page (not in a separate file) and some of the js is being created by Rails. First, here are the scripts as they appear in the browser. The first is the script to generate the options for the duration select and the second is the script required by the Cascade plugin to trigger the field chaining. <script type="text/javascript"> var list1 = [ {'When':'86400','Value':' ','Text':' '}, {'When':'172800','Value':' ','Text':' '}, {'When':'604800','Value':' ','Text':' '}, {'When':'86400','Value':'432000','Text':'5 days'}, {'When':'86400','Value':'1296000','Text':'15 days'}, {'When':'86400','Value':'2505600','Text':'30 days'}, {'When':'172800','Value':'1296000','Text':'15 days'}, {'When':'172800','Value':'2505600','Text':'30 days'}, {'When':'172800','Value':'3888000','Text':'45 days'}, {'When':'604800','Value':'2505600','Text':'4 weeks'}, {'When':'604800','Value':'3715200','Text':'6 weeks'}, {'When':'604800','Value':'4924800','Text':'8 weeks'} ]; function commonTemplate(item) { return "<option value='" + item.Value + "'>" + item.Text + "</option>"; }; function commonMatch(selectedValue) { return this.When == selectedValue; }; </script> <script type="text/javascript"> jQuery(document).ready(function(){ jQuery("#challenge_duration, #user_challenge_duration").cascade("#challenge_frequency, #user_challenge_frequency",{ list: list1, template: commonTemplate, match: commonMatch }) }); </script> And here's a bit of the the first script as it is in the erb file -- you see that some of the script is being generated by Rails <%= [ [1.day, [[5, 5], [15,15], [30, 29]], "days"], [2.days, [[15, 15], [30, 29], [45, 45]], "days"], [1.week, [[4, 29], [6, 43], [8, 57]], "weeks"]].map do |(frequency, durations, unit)| durations.map do |(label, value)| "{'When':'#{frequency}','Value':'#{value.days}','Text':'#{label} #{unit}'}" end end.join(",\n") -%> Now, the reason I don't think that it matters whether the duration is being generated with JS is the problem still exists if I remove all the JS the problem also affects the frequency field, whose options are not being generated by the JS

    Read the article

  • A jQuery Plug-in to monitor Html Element CSS Changes

    - by Rick Strahl
    Here's a scenario I've run into on a few occasions: I need to be able to monitor certain CSS properties on an HTML element and know when that CSS element changes. The need for this arose out of wanting to build generic components that could 'attach' themselves to other objects and monitor changes on the ‘parent’ object so the dependent object can adjust itself accordingly. What I wanted to create is a jQuery plug-in that allows me to specify a list of CSS properties to monitor and have a function fire in response to any change to any of those CSS properties. The result are the .watch() and .unwatch() jQuery plug-ins. Here’s a simple example page of this plug-in that demonstrates tracking changes to an element being moved with draggable and closable behavior: http://www.west-wind.com/WestWindWebToolkit/samples/Ajax/jQueryPluginSamples/WatcherPlugin.htm Try it with different browsers – IE and FireFox use the DOM event handlers and Chrome, Safari and Opera use setInterval handlers to manage this behavior. It should work in all of them but all but IE and FireFox will show a bit of lag between the changes in the main element and the shadow. The relevant HTML for this example is this fragment of a main <div> (#notebox) and an element that is to mimic a shadow (#shadow). <div class="containercontent"> <div id="notebox" style="width: 200px; height: 150px;position: absolute; z-index: 20; padding: 20px; background-color: lightsteelblue;"> Go ahead drag me around and close me! </div> <div id="shadow" style="background-color: Gray; z-index: 19;position:absolute;display: none;"> </div> </div> The watcher plug in is then applied to the main <div> and shadow in sync with the following plug-in code: <script type="text/javascript"> $(document).ready(function () { var counter = 0; $("#notebox").watch("top,left,height,width,display,opacity", function (data, i) { var el = $(this); var sh = $("#shadow"); var propChanged = data.props[i]; var valChanged = data.vals[i]; counter++; showStatus("Prop: " + propChanged + " value: " + valChanged + " " + counter); var pos = el.position(); var w = el.outerWidth(); var h = el.outerHeight(); sh.css({ width: w, height: h, left: pos.left + 5, top: pos.top + 5, display: el.css("display"), opacity: el.css("opacity") }); }) .draggable() .closable() .css("left", 10); }); </script> When you run this page as you drag the #notebox element the #shadow element will maintain and stay pinned underneath the #notebox element effectively keeping the shadow attached to the main element. Likewise, if you hide or fadeOut() the #notebox element the shadow will also go away – show the #notebox element and the shadow also re-appears because we are assigning the display property from the parent on the shadow. Note we’re attaching the .watch() plug-in to the #notebox element and have it fire whenever top,left,height,width,opacity or display CSS properties are changed. The passed data element contains a props[] and vals[] array that holds the properties monitored and their current values. An index passed as the second parm tells you which property has changed and what its current value is (propChanged/valChanged in the code above). The rest of the watcher handler code then deals with figuring out the main element’s position and recalculating and setting the shadow’s position using the jQuery .css() function. Note that this is just an example to demonstrate the watch() behavior here – this is not the best way to create a shadow. If you’re interested in a more efficient and cleaner way to handle shadows with a plug-in check out the .shadow() plug-in in ww.jquery.js (code search for fn.shadow) which uses native CSS features when available but falls back to a tracked shadow element on browsers that don’t support it, which is how this watch() plug-in came about in the first place :-) How does it work? The plug-in works by letting the user specify a list of properties to monitor as a comma delimited string and a handler function: el.watch("top,left,height,width,display,opacity", function (data, i) {}, 100, id) You can also specify an interval (if no DOM event monitoring isn’t available in the browser) and an ID that identifies the event handler uniquely. The watch plug-in works by hooking up to DOMAttrModified in FireFox, to onPropertyChanged in Internet Explorer, or by using a timer with setInterval to handle the detection of changes for other browsers. Unfortunately WebKit doesn’t support DOMAttrModified consistently at the moment so Safari and Chrome currently have to use the slower setInterval mechanism. In response to a changed property (or a setInterval timer hit) a JavaScript handler is fired which then runs through all the properties monitored and determines if and which one has changed. The DOM events fire on all property/style changes so the intermediate plug-in handler filters only those hits we’re interested in. If one of our monitored properties has changed the specified event handler function is called along with a data object and an index that identifies the property that’s changed in the data.props/data.vals arrays. The jQuery plugin to implement this functionality looks like this: (function($){ $.fn.watch = function (props, func, interval, id) { /// <summary> /// Allows you to monitor changes in a specific /// CSS property of an element by polling the value. /// when the value changes a function is called. /// The function called is called in the context /// of the selected element (ie. this) /// </summary> /// <param name="prop" type="String">CSS Properties to watch sep. by commas</param> /// <param name="func" type="Function"> /// Function called when the value has changed. /// </param> /// <param name="interval" type="Number"> /// Optional interval for browsers that don't support DOMAttrModified or propertychange events. /// Determines the interval used for setInterval calls. /// </param> /// <param name="id" type="String">A unique ID that identifies this watch instance on this element</param> /// <returns type="jQuery" /> if (!interval) interval = 100; if (!id) id = "_watcher"; return this.each(function () { var _t = this; var el$ = $(this); var fnc = function () { __watcher.call(_t, id) }; var data = { id: id, props: props.split(","), vals: [props.split(",").length], func: func, fnc: fnc, origProps: props, interval: interval, intervalId: null }; // store initial props and values $.each(data.props, function (i) { data.vals[i] = el$.css(data.props[i]); }); el$.data(id, data); hookChange(el$, id, data); }); function hookChange(el$, id, data) { el$.each(function () { var el = $(this); if (typeof (el.get(0).onpropertychange) == "object") el.bind("propertychange." + id, data.fnc); else if ($.browser.mozilla) el.bind("DOMAttrModified." + id, data.fnc); else data.intervalId = setInterval(data.fnc, interval); }); } function __watcher(id) { var el$ = $(this); var w = el$.data(id); if (!w) return; var _t = this; if (!w.func) return; // must unbind or else unwanted recursion may occur el$.unwatch(id); var changed = false; var i = 0; for (i; i < w.props.length; i++) { var newVal = el$.css(w.props[i]); if (w.vals[i] != newVal) { w.vals[i] = newVal; changed = true; break; } } if (changed) w.func.call(_t, w, i); // rebind event hookChange(el$, id, w); } } $.fn.unwatch = function (id) { this.each(function () { var el = $(this); var data = el.data(id); try { if (typeof (this.onpropertychange) == "object") el.unbind("propertychange." + id, data.fnc); else if ($.browser.mozilla) el.unbind("DOMAttrModified." + id, data.fnc); else clearInterval(data.intervalId); } // ignore if element was already unbound catch (e) { } }); return this; } })(jQuery); Note that there’s a corresponding .unwatch() plug-in that can be used to stop monitoring properties. The ID parameter is optional both on watch() and unwatch() – a standard name is used if you don’t specify one, but it’s a good idea to use unique names for each element watched to avoid overlap in event ids especially if you’re monitoring many elements. The syntax is: $.fn.watch = function(props, func, interval, id) props A comma delimited list of CSS style properties that are to be watched for changes. If any of the specified properties changes the function specified in the second parameter is fired. func The function fired in response to a changed styles. Receives this as the element changed and an object parameter that represents the watched properties and their respective values. The first parameter is passed in this structure: { id: watcherId, props: [], vals: [], func: thisFunc, fnc: internalHandler, origProps: strPropertyListOnWatcher }; A second parameter is the index of the changed property so data.props[i] or data.vals[i] gets the property and changed value. interval The interval for setInterval() for those browsers that don't support property watching in the DOM. In milliseconds. id An optional id that identifies this watcher. Required only if multiple watchers might be hooked up to the same element. The default is _watcher if not specified. It’s been a Journey I started building this plug-in about two years ago and had to make many modifications to it in response to changes in jQuery and also in browser behaviors. I think the latest round of changes made should make this plug-in fairly future proof going forward (although I hope there will be better cross-browser change event notifications in the future). One of the big problems I ran into had to do with recursive change notifications – it looks like starting with jQuery 1.44 and later, jQuery internally modifies element properties on some calls to some .css()  property retrievals and things like outerHeight/Width(). In IE this would cause nasty lock up issues at times. In response to this I changed the code to unbind the events when the handler function is called and then rebind when it exits. This also makes user code less prone to stack overflow recursion as you can actually change properties on the base element. It also means though that if you change one of the monitors properties in the handler the watch() handler won’t fire in response – you need to resort to a setTimeout() call instead to force the code to run outside of the handler: $("#notebox") el.watch("top,left,height,width,display,opacity", function (data, i) { var el = $(this); … // this makes el changes work setTimeout(function () { el.css("top", 10) },10); }) Since I’ve built this component I’ve had a lot of good uses for it. The .shadow() fallback functionality is one of them. Resources The watch() plug-in is part of ww.jquery.js and the West Wind West Wind Web Toolkit. You’re free to use this code here or the code from the toolkit. West Wind Web Toolkit Latest version of ww.jquery.js (search for fn.watch) watch plug-in documentation © Rick Strahl, West Wind Technologies, 2005-2011Posted in ASP.NET  JavaScript  jQuery  

    Read the article

  • Getting Exception thrown and not caught error on jquery ui tabs in ie8

    - by Jason
    I am getting the following error (pointing to jquery-1.4.2.js): Message: Exception thrown and not caught Line: 2904 Char: 2 Code: 0 With the following: IE8 jquery 1.4.2 jquery ui 1.8.1 When I do the following: $("#theTabs").tabs(); On the same page I also have two instances of the jquery ui dialog and one instance of the jquery ui accordion. Am I missing something? This does not happen in FF on Windows (nor in Safari or FF on OS X) I use the same code elsewhere for tabs and they work just fine.

    Read the article

  • Using Wicked with Devise for a sign up wizard

    - by demondeac11
    I am using devise with wicked to create a sign up wizard, but I am unsure about a problem I am having creating profiles. After a user provides their email & password they are forwarded to a step to create a profile based on whether they have specified they are a shipper or carrier. However I am unsure what the code should be in the controller and the forms to generically create a profile. Here is the code I have for the application: The steps controller: class UserStepsController < ApplicationController include Wicked::Wizard steps :carrier_profile, :shipper_profile def create @user = User.last case step when :carrier_profile @profile = CarrierProfile.create!(:dot => params[:dot]) if @profile.save render_wizard @user else flash[:alert] = "Record not saved" end when :shipper_profile @profile = ShipperProfile.create!(params[:shipper_profile) if @profile.save render_wizard @user else flash[:alert] = "Record not saved" end end end end end def show @user = User.last @carrier_profile = CarrierProfile.new @shipper_profile = ShipperProfile.new case step when :carrier_profile skip_step if @user.shipper? when :shipper_profile skip_step if @user.carrier? end render_wizard end end The form for a carrier profile: <% form_for @carrier_profile , url: wizard_path, method: :post do |f| %> <div> <%= f.label :dot, "Please enter your DOT Number:" %> <%= f.text_field :dot %> </div> <%= f.submit "Next Step", class: "btn btn-primary" %> <% end %> The form for a shipper profile: <% form_for @shipper_profile , url: wizard_path, method: :post do |f| %> <div> <%= f.label :company_name, "What is your company name?" %> <%= f.text_field :company_name %> </div> <%= f.submit "Next Step", class: "btn btn-primary" %> <% end %> The user model: class User < ActiveRecord::Base has_one :carrier_profile has_one :shipper_profile end How would I be able to write a generic new and create method to handle creating both profiles? With the current code it is stating that the user_steps controller has no POST method, although if I run rake routes I find that this is untrue.

    Read the article

  • JQuery UI sortable is slow in IE8, but works good in IE7 and IE8 compatible mode

    - by artvolk
    JQuery UI sortable (including demos) are slow in all IE8 I can test, but runs smoothly in IE7 and IE8 compatible mode. The more complex is a markup on the page, the more IE8 is slowing down (that's I can understand, the DOM tree became more complex). I'm using JQuery 1.3.2 and JQuery UI 1.7.2 (tested with 1.7.3 -- the same story). I've found a lot of similar reports (for the new JQuery UI 1.8.x with JQuery 1.4 too), but no answers. May be there is a some solution (EXCEPT turning IE8 into IE7 compatibility mode by metatag or header). Thanks in advance!

    Read the article

  • Performing both client side and server side validation using jQuery and CodeIgniter

    - by Vasu
    What is the right way of doing both client side and server side validation using jQuery and CodeIgniter? I am using the jQuery form plugin for form submit. I would like to use jQuery validation plugin (http://docs.jquery.com/Plugins/Validation) for client side validation and CodeIgniter form validation on the server side. However the two don't seem to gel together (or I am unable to get my head around it). Can someone help please? Whether its a client side validation or server side validation, the user should see consistent UI displaying error messages next to the input fields.

    Read the article

  • jQuery to populate form fields based on first entered value where number of fields is unknown

    - by da5id
    Greetings, I have a form with a variable number of inputs, a simplified version of which looks like this: <form> <label for="same">all the same as first?</label> <input id="same" name="same" type="checkbox" /> <input type="text" id="foo[1]" name="foo[1]" value="" /> <input type="text" id="foo[2]" name="foo[2]" value="" /> <input type="text" id="foo[3]" name="foo[3]" value="" /> <input type="text" id="foo[4]" name="foo[4]" value="" /> <input type="text" id="foo[5]" name="foo[5]" value="" /> </form> The idea is to tick the #same checkbox and have jQuery copy the value from #foo[1] into #foo[2], #foo[3], etc. They also need to clear if #same is unchecked. There can be any number of #foo inputs, based upon input from a previous stage of the form, and this bit is giving me trouble. I'm sure I'm missing something obvious, but I can't get any variation on $('#dest').val($('#source').val()); to work. Help!

    Read the article

  • Using will_paginate with AJAX live search with jQuery in Rails

    - by Mark Richman
    I am using will_paginate to successfully page through records. I am also using AJAX live search via jQuery to update my results div. No problem so far. The issue I have is when trying to paginate through those live search results. I simply get "Page is loading..." with no div update. Am I missing something fundamental? # index.html.erb <form id="searchform" accept-charset="utf-8" method="get" action="/search"> Search: <input id="search" name="search" type="text" autocomplete="off" title="Search location, company, description..." /> <%= image_tag("spinner.gif", :id => "spinner", :style =>"display: none;" ) %> </form> # JobsController#search def search if params[:search].nil? @jobs = Job.paginate :page => params[:page], :order => "created_at desc" elsif params[:search] and request.xhr? @jobs = Job.search params[:search], params[:page] end render :partial => "jobs", :layout => false, :locals => { :jobs => @jobs } end # Job#search def self.search(search, page) logger.debug "Job.paginate #{search}, #{page}" paginate :per_page => @@per_page, :page => page, :conditions => ["description LIKE ? or title LIKE ? or company LIKE ?", "%#{search}%", "%#{search}%", "%#{search}%"], :order => 'created_at DESC' end # search.js $(document).ready(function(){ $("#search").keyup(function() { $("#spinner").show(); // show the spinner var form = $(this).parents("form"); // grab the form wrapping the search bar. var url = form.attr("action"); // grab the URL from the form's action value. var formData = form.serialize(); // grab the data in the form $.get(url, formData, function(html) { // perform an AJAX get, the trailing function is what happens on successful get. $("#spinner").hide(); // hide the spinner $("#jobs").html(html); // replace the "results" div with the result of action taken }); }); });

    Read the article

  • jquery use return data from 2 functions in another function ---always get undefined. why ??

    - by user253530
    Function socialbookmarksTableData(data) is called by another function to generate the content of a table -- data is a JSON object. Inside the function i call 2 other functions that use getJSON and POST (with json as a return object) to get some data. The problem is: though the functions execute correctly i get undefined value for the 2 variables (bookmarkingSites, bookmarkCategories). Help with a solution please. function socialbookmarksGetBookmarkCategories(bookmarkID) { var toReturn = ''; $.post("php/socialbookmark-get-bookmark-categories.php",{ bookmarkID: bookmarkID },function(data){ $.each(data,function(i,categID){ toReturn += '<option value ="' + data[i].categID + '">' + data[i].categName + '</option>'; }) return toReturn; },"JSON"); } function socialbookmarksGetBookmarkSites() { var bookmarkingSites = ''; $.getJSON("php/socialbookmark-get-bookmarking-sites.php",function(bookmarks){ for(var i = 0; i < bookmarks.length; i++){ //alert( bookmarks[i].id); bookmarkingSites += '<option value = "' + bookmarks[i].id + '">' + bookmarks[i].title + '</option>'; } return bookmarkingSites; }); } function socialbookmarksTableData(data) { var toAppend = ''; var bookmarkingSites = socialbookmarksGetBookmarkSites(); $.each(data.results, function(i, id){ var bookmarkCategories = socialbookmarksGetBookmarkCategories(data.results[i].bookmarkID); //rest of the code is not important }); $("#searchTable tbody").append(toAppend); }

    Read the article

  • Ajax call to parent window after form submission

    - by David
    Hi all, Pardon the complicated title. Here's my situation: I'm working on a Grails app, and using jQuery for some of the more complex UI stuff. The way the system is set up, I have an item, which can have various files (user-supplied) associated with it. On my Item/show view, there is a link to add a file. This link pops up a jQuery modal dialog, which displays my file upload form (a remote .gsp). So, the user selects the file and enters a comment, and when the form is submitted, the dialog gets closed, and the list of files on the Item/show view is refreshed. I was initially accomplishing this by adding onclick="javascript:window.parent.$('#myDialog').dialog('close');" to my submit button. This worked fine, but when submitting some larger files, I end up with a race condition where the dialog closes and the file list is refreshed before the new file is saved, and so the list of files is out of date (the file still gets saved properly). So my question is, what is the best way to ensure that the dialog is not closed until after the form submit operation completes? I've tried using the <g:formRemote tag in Grails, and closing the dialog in the "after" attribute (according to the Grails docs, the script is called after form submission), but I receive an error (taken from FireBug) stating that window.parent.$('#myDialog').dialog is not a function Is this a simple JavaScript/Grails syntax issue that I'm missing here, or am I going about this entirely wrong? Thanks so much for your time and assistance!

    Read the article

  • Force jQuery to accept XHTML string as XML?

    - by MidnightLightning
    So, as part of a baseline OpenID implementation in Javascript, I'm fetching a remote page source through AJAX, and looking for the <link rel="openid.server" href="http://www.example.com" /> tag in the head. I'm using the jQuery javascript library for the AJAX request, but am unable to parse out the link tags. Several other online sources talk about using the usual jQuery selectors to grab tags from XML/XHTML sources, but it seems jQuery can only get content from the body of an HTML document, not the head (which is where the link tags are; $(response).find('link') returns null). So, I'd either need to get jQuery to force this document into XML mode or otherwise get at the head tags. Is there a way to force jQuery to parse the response of an AJAX query as XML, when it's in reality XHTML? Or do I need to fall back to regular expressions to get the link tags out?

    Read the article

facebook twitter digg google delicious technorati stumbleupon myspace wordpress linkedin gmail igoogle windows live tumblr viadeo yahoo buzz yahoo mail yahoo bookmarks favorites email print

< Previous Page | 17 18 19 20 21 22 23 24 25 26 27 28  | Next Page >