Jquery dialog box with accordions and form elements in it.
Hi, Can you please help with Jquery dialog box with accordions. Each accordions has form elements. Dialog box will have submit button to submit all form elements value. Appreciate if someone can give a demo code for this.
Someone help with this please, .modal dialog in a page loaded through .load
This is my main page: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="newpage.aspx.cs" Inherits="newpage" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <link href="StyleSheet.css" rel="stylesheet" type="text/css" /> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet"
Sortable
When initializing Sortable, I submitted only 'cancel' options and then bound the update event. $( "#sortable-group" ).sortable({ cancel: ':input,button,.contenteditable', }); $( "#sortable-group" ).bind( "sortupdate", function(event, ui) {...}); At one stage in my js code I needed to trigger the update process manually, using $( #sortable-group" ).trigger( "sortupdate"; ); During this trigger, the 'ui' object is not passed to the function. The 'event' object is there, but the 'ui'
How to attach text to the Jquery UI Slider button...
Hello, I have what may be a really simple or really complicated request: how can I attach an element to the bottom of the slider button such that the value of the slider sits right below where you would click and drag to adjust the slider value? Thank you for your time. Regards, ckoeber
jQueryUI dialog cropping content?
Here is a fiddle which demonstrates the problem. First I display a jQueryUI dialog with a fixed size. Then I enlarge it via an animation to a new fixed size. Then I add new content to the dialog. The new content is being cropped by the height of the original dialog window. Alas, my research on how to fix this is coming up blank. $(function() { var dg = $("#dialog"); dg.dialog( { height: 200, width: 80, modal: true, draggable: false,
Checkbox - unchecking if other box is checked
I used checkboxes recently to allow a box to be selected if yes or if no. The problem is that the boxes can both be checked at the same time. I'd like them to toggle the other if checked. So if "Yes" is checked, then "No" would uncheck. Below is my code. The buttons work great. The checking to see if a value is true, then setting it to false works...but the checkbox button still reads as though selected. Any help you have would be appreciated. $(function() { $( "#checkWelcomeFormat" ).buttonset();
How to put a simple hr tag inside accordion?
Hello! I have created a styled hr tag and want to use it inside ui accordion after every item like this code: <div id="accordion"> <h3><a href="#">item#1</a></h3> <div><p></p></div> <hr /> <h3><a href="#">item#2</a></h3> <div><p></p></div> <hr /> <h3><a href="#">item#3</a></h3> <div><p></p></div> <hr /> <h3><a href="#">item#4</a></h3> <div><p></p></div> <hr /> </div><!-- End accordion --> But when I put these hr tags, accordion doesn't work. I really in need of
Drag Events on mobile devices
Hello, I am investigating different technologies so I am completely new to JQuery Mobile. My understanding is that this API should allow a web page to behave exactly the same on a tablet as it does on a desktop. I see on the main page of jquerymobile.com there is an example from Codiqa that allows a user to drag elements onto the "tablet" canvas. This works great on a desktop, but when I try dragging the elements on a tablet, it doesn't drag them it just moves the page up and down. Am I misunderstanding
Validation error placement
I have a page with divs and li's see below. When i click submit the error message goes right through the radio buttons and underneath the text boxes. How can I place each error message at a fixed (aligned) location on the same line as the object? Also could you show me how I could highlight the WHOLE line in (say red) if its not been filled in or invalid. Many thanks,Darryl CODE: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
jquery ui tab 1.8.2 multiple slider problem
i have 2 sliders in 2 tabs. Only the slider which is loaded with the first tab is shown. when i press the second tab slider isn't shown. but code turns display:hidden to block. There was a solution for that... ...my slider, Google Map, sIFR etc. not work when placed in a hidden (inactive) tab? Any component that requires some dimensional computation for its initialization won't work in a hidden tab, because the tab panel itself is hidden via display: none so that any elements inside won't report
3 section Sortable UI problem
Hey Guys, I'm using sortable for a 3 section UI. I want the ability to shift the mainToolbar and subToolbar layers around while maintaining nav functionality so that people with pref for right/left hand nav can customise the UI. The sorting all works well when there's four layers of equal size, but when I drop to 3 layers (with one as full width) the positioning gets a little disrupted. Since I'm a newbie at this coding stuff I thought you guys might be able to show me the way? <!doctype html>
32x32 Icon Sprite?
Is there a place I can find an image sprite of the jQuery UI icon site in a 32x32 size?
Button widget very slow (especially in IE)
I've been experiencing performance problems wrt the button widget which usually manifest itself when there's a lot a button being created. I've posted a question on Stack Overflow but I haven't had any luck yet. I'm hoping for more constructive answer if I post my question directly here. To resume what's the problem, when I have lots of button on the same page it takes a crazy long time to load, say around 8-10s for 800 buttons in IE, but when I don't use the button widget but plain html buttons
_super Not Working the Way I Expect
I have created a few jQuery UI Widgets. I noticed that when I try to change an option after the widget is created, it is not working correctly. Here is what my _setOption syntax looks like: _setOption: function (key, value) { this._super('_setOption', key, value ); }Of course, I do use a switch statement to run any special code as needed depending on what option is being changed. Here is my syntax to change an option: $('.ui-mywidget').cform('option', 'myOption', 'newValue'); Instead
accordion and form in the title
Button <input type="button" value="Cancella" onclick="location.href='index.php?tipo=1&sezione=10&pers=<?php echo $persona;?>&funzione=CANC¬a=<?php echo $row_dati['id_schecollo']; ?>'"> Form <form action="index.php?tipo=1&sezione=10&pers=<?php echo $persona;?>&funzione=CANC¬a=<?php echo $row_dati['id_schecollo'];?>" method="post"> Colloquio avvenuto in data <b><?php echo ScoDate ($row_dati['data_colloquio']); ?></b><b><?php echo " " . $row_dati['animatori']; ?></b> <input
modal windows shows gibberish when trying to output a video
has anyone come across this issue? I'm trying to pull a .mp4 video in the dialog box you can see a demo of the gibberish output here just click on the first video item. I've also tried an .flv file and get the same results using jqueryui/1.9.2/jquery-ui.min.js
How do I restrict the start date and the end date to the same month?
<script type="text/javascript"> $(function() { $( "#from" ).datepicker({ defaultDate: "+1w", numberOfMonths: 1, onSelect: function( selectedDate ) { $( "#to" ).datepicker( "option", "minDate", selectedDate ); } }); $( "#to" ).datepicker({ defaultDate: "+1w", numberOfMonths: 1, onSelect: function( selectedDate ) { $( "#from" ).datepicker(
How to access JavaScript object that WidgetFactory instantiates
Hi guys, Thanks for all the great work you do on JQuery UI! I'm trying to access the JavaScript object that WidgetFactory instantiates and wraps around my DOM element. I tried: 1. Calling my widget method with no args, but that returns the DOM element 2. Calling http://api.jqueryui.com/jQuery.widget/#method-widget but that returns the DOM element 3. Adding a new method 'returnThis' but JQuery appears to mangle that somehow? See code below, and fiddle here: http://jsfiddle.net/MfegM/521 I've found
Jquery UI Tabs with a lot of data slow on change
Hi all. I have a page wrote in c# with seven gridviews, each one in a different tab. On page load, i bind all the gridviews with data and using paging to reduce the amount of data of the grid. When i change from one tabs to another one, it get a lot of seconds to show the content of the other, but the page don't do a new bind. The time is waste just to jquery ui hide the old tab and unhide the selected. Is there anything to do to reduce this time? I think there is no reason to this delay just to
Reg Resize of Div not working on the click of an image in JQuery
Hi I have HTML as below. <div id="sidebar-border"> <img id="hidePanel" src="~/images/arrow.png" /> </div> I have JQuery syntax as below. $("#hidePanel").click(function () { $('#sidebar-border').resizable({ minWidth: 210, maxWidth: 350, maxHeight: 290, minHeight: 290 }); }); The above code is not working that is <div> is not getting resized when I click the image. But same code works when called directly from <script> tag as below. <script type="text/javascript">
Jquery Resizable Scroll
I want to create a resizing ELEMENT which I can resize beyound the bottom limit of a DIV container. As long as I keep the mouse below (DIV container height-25px) the ELEMENT should keep increasing in size and the DIV should keep scrolling. In my case the ELEMENT should increase with +25px and the DIV should scroll down with 25px. This works fine to set the resized element's height but as soon as I move the mouse again the elements continues to resize from where it was left. Thank you guys/girls What
Nesting UI Controls
Hi I have used a Tab-control and a Accordion-control separately. And they work. 100% as pe rthe examples on the webpages. When i nest the accordion inside one if the tabs of the tab control, the accordion's values are lost. Please advise <div id="tabs"> <ul> <li><a href="#tabs-1">Nunc tincidunt</a></li> <li><a href="#tabs-2">Proin dolor</a></li> <li><a href="#tabs-3">Aenean lacinia</a></li> </ul> <div id="tabs-1"> <p>Proin elit arcu, rutrum commodo, vehicula
Can't append a div into the same space as another.
I have tried to append a draggable div tag on my site but when I add more than one they appear after the previous even though the element has been dragged away form that location. I have tried prepending and this solves the problem but then the dragged element moves across the page! I have set up a JS fiddle for this http://jsfiddle.net/uJ4CB/10/ Many thanks
Datepicker problem
I have been using Datepicker as supplied with Coffee Cup Software's Web Form Builder and to date I have successfully amended the code as shown below i.e. minDate: 1 maxDate: 60. (That's quite simple and I can cope with that) but exactly how would I amend the code to exclude weekends? I believe it's to do with code lines 93,94 & 95 - showDay but I can't seem to get a result! Many Thanks /* * jQuery UI Datepicker @VERSION * * Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about) * Dual licensed
Jquery version problem
Hello i have updated the spring version from 3.1.2 to 3.2.0 as before data in my table was displaying on page and after updating the version its jst showing loading..... nothing is been displayed. i doubt the there is a conflict between spring version and jquery version pls help me out....
Clearing file input field
Hi, I am trying to clear the File input on certain criteria. I am trying the following code and testing in IE and it doesnot work. Could anyone please help? //For IE $("#filesToUpload").replaceWith($("#filesToUpload").clone(true)); //For other browsers $('#filesToUpload').val(""); Thanks.
[jQuery][tooltip] Showing a tooltip for the [head][title] on Firefox
Hello, My jqueryUI version is 1.9.2. I'm having a problem only on Firefox (17.0.1), it works on Chrome, IE and Safari. My problem is that I get at the bottom of my website page (any page) a tooltip with the content of the website title.... If I have <head><title>WEBSITE TITLE</title></head>Then I get a tooltip containing WEBSITE TITLE ... I have no idea what's wrong. Any help would be appreciated
Date picker don't work online
I uploaded all files , but it don't work online, see testpage:http://www.mastercar.be/fr/DetailCeremonie.php?AutoNrT=M3520 when I test it local, it works!
looking for a jquery horizontal menu bar
I am looking for a jquery horizontal menu bar， could anyone recommend some good one to me?
date picker locale not working?!
Hi, First of all, sorry for my english! Does anyone get date picker locale work? I've tried in safari, chrome and FF with mac and didn't get what I was expecting to. Even in the jquery UI page doesn't works. http://jqueryui.com/datepicker/#localization thanks!
UI Tabs problem
I have my own ajax request in content that loads with tabs. When I click on second tabs the request send 2 times, when I click on 3rd tab it sends 3 times etc. So it duplucates. Why and how solve this problem? It`s important because when you click on tabs 5-6 times the request is overloading the page. Sorry for poor English and thank you.
Inconsistent behavior of Dialog instantiation
Hi, I have moved this post for jQuery UI Dialog API redesign to here as that is what the observers of that topic suggested. So this is a repost of one of the comments #21 at http://forum.jquery.com/topic/dialog-api-redesign. Hi Team, Love your work and I'd love to know how to post some updates to the existing documentation. I am using a dev pattern of running all my jquery and jquery-ui stuff inside of a $(document).ready(function() { // code in here ;}); construct. And I found the only way I
Some trouble with UI Tabs
Hello buddies. Happy New Year to all. I faced with one strange behaviour using UI tabs. I just copied the very first example from demos page: <div id="tabs"> <ul> <li><a href="#tabs-1">Nunc tincidunt</a></li> <li><a href="#tabs-2">Proin dolor</a></li> <li><a href="#tabs-3">Aenean lacinia</a></li> </ul> <div id="tabs-1">Nevermind</div> <div id="tabs-2">Nevermind</div> <div id="tabs-3">Nevermind</div> </div> <script> $(function() { $( "#tabs"
Is there a reference list to CSS selectors that are tied to the UI objects?
Hi I'm fairly new to JQuery coming from a decent JavaScript background I'm stumbling my way through and figured out a bit through sample codes etc and the API documentation. Looking into the accordion demo I realized you can apply styles to objects with something like this .ui-accordion .ui-accordion-header { display: block; cursor: pointer; position: relative; margin-top: 2px; padding: .5em .5em .5em .7em; zoom: 1; } .ui-accordion .ui-accordion-icons { padding-left: 2.2em; } .ui-accordion .ui-accordion-noicons
VALIDATION ERROR MESSAGE WITH CHECKBOXES
I have: <li id="li_9"> <label class="description" for="element_9">Gender *</label> <span> <input id="element_9_1" name="element_9" class="required" type="radio" value="1" /> <label class="choice" for="element_9_1">M</label> <input id="element_9_2" name="element_9" class="required" type="radio" value="2" /> <label class="choice" for="element_9_2">F</label> </span> </li> Yet if none are chosen, the error message cuts right through the middle of the
Fileselect control
I have created a textbox control. Now I want to create a fileselect control and use the textbox control to display the file selected. How do I do that? Basically , I should be able to enter the input in the textbox or select the file. I want to use the same area used by the id orignum to display the file selected? <label for="Orig Number">Orig Number</label> <input id="orignum" name="orignum" /> <input type="file" name="filesToUpload" id="filesToUpload"> Both the controls appear inside the
Correct syntax for Definition List (<dl>) in jQuery UI's Nested Menu?
I’m trying to combine jQuery UI’s nested menu with definition list (<dl>) elements, but I'm having trouble figuring out the correct syntax because a nested menu starts with <ul> and a definition list starts with <dl>. My reason for doing this is to create nested dropdown boxes, and I'm using the script and css in this fiddle to have the DL elements look and act like dropdown boxes. This code is the closest I've gotten, but it's not quite right because when the <dl> element is clicked, instead of
How to handle json returned to autocomplete from servlet
I'm trying to use the autocomplete widget to and to populate it I am using a servlet which is returning a JSON array. Bear with me, I'm not sure how much you need to see so I'm going to include a lot. Here is how I am constructing the autocomplete right now. It's not complete yet because I don't really know how to finish: $('#usernamesearch').autocomplete({ minLength: 2, source: function(request, response) { $.ajax({
Dialog box not opening in IE8
I am using jQuery v1.8.1 with jQuery UI v1.8.23. I am trying to open a dialog box on load of the screen. I am having the following div in my JSP. <div id="error-message1" title="This is the title!"> This is a test error message. </div> and I am invoking the dialog box like below $("#error-message1").dialog({ autoOpen: true, modal: true, height: 300, width: 300 }); The dialog box is opening in Firefox 16.0.2 but not in IE8. My entire screen is masked since I have
Using sortable() on AJAX-generated results
Hi all, I have been playing around with the sortable() functionality and I have got it working fine on static DB results, however I have noticed that I can't get it to work on AJAX-generated DB results. I feel it has something to do with how I call the sortable() function within the $(document).ready(function() however I am not 100% sure. I have searched this forum and other forums to see if anyone else has this problem but I haven't found anything similar yet, so here's my attempt to describe my
Next Page