Search jQuery

jQuery Forum

Screen name:
incutonez

incutonez's Profile

12 Posts

28 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

jQuery UI modal dialog focus bug?
[2Replies]
- 13-May-2013 07:02 AM
- Forum: Using jQuery UI
I am trying to create a modal dialog box that has a vertical scroll for content that overflows. For demo purposes, this dialog box contains an anchor and a bunch of divs (to overflow). Here is my code:

The HTML
1. <body>
2. <div id="dialog">
3. <a href="javascript:void(null);">blah blah blah</a>
4. <div>some content to make the dialog scroll appear</div>
5. <div>some content to make the dialog scroll appear</div>
6. <div>some content to make the dialog scroll appear</div>
7. <div>some content to make the dialog scroll appear</div>
8. <div>some content to make the dialog scroll appear</div>
9. <div>some content to make the dialog scroll appear</div>
10. </div>
11. </body>
The jQuery
1. $(document).ready(function () {
2. $('#dialog').dialog({
3. position: 'center',
4. height: 300,
5. width: 200,
6. modal: true
7. });
8. });
The Demo: JS Bin

To reproduce the issue:

1. Scroll down to the bottom of the dialog box
2. Lose focus on the actual browser window (go to another window, click the desktop, etc.)
3. Hover over the dialog box in the unfocused browser window
4. Click in the dialog box (or just minimize/maximize your browser window)

The result should be the dialog box scrolling back to the topmost anchor tag ("blah blah blah"). (This may require several attempts to lose focus/click in the dialog box) The JS Bin code is using jQuery UI 1.10.2, but it happens in .3 as well.

I believe my issue may be similar to this SO question, but it's a little different because I'm using anchor tags... however, the line hasFocus.eq(0).focus(); is the culprit. When that part executes for me, it has my anchor tag as the first element in the hasFocus array.

Now, the interesting part is once you take away modal: true, the issue is no longer there... so I'm not really sure if this is a bug or if it's a "feature." Does anyone have any thoughts?

Also, I've only tested this in Firefox, and you can view the original Stack Overflow thread here.

jQuery UI Draggable Clone Focus
[1Reply]
- 15-Apr-2013 09:25 PM
- Forum: Using jQuery UI
Hi all. I posted this on StackOverflow, but I haven't had much success yet, so I figured I'd post here for more eyes. I'm trying to build a draggable/droppable folder-file view with jQuery UI, but I'm running into a problem with, what I believe is attributed to the helper. Here is my code:

The HTML
1. <body>
2. <div id="topContainer">
3. <span>Parent Directory 1</span>
4. </div>
5. <span id="topFolder" class="folder">
6. <div class="drop">
7. </div>
8. </span>
9. <hr />
10. <div id="container" class="container">
11. <div class="dropzone">
12. <span>Parent Directory 2</span>
13. </div>
14. <div id="cont1" class="container">
15. <div class="dropzone">
16. <span>Folder 1</span>
17. </div>
18. <span id="folder1" class="folder">
19. <div class="drop">
20. <div class="drag"> </div>
21. <div class="drag"> </div>
22. <div class="drag"> </div>
23. <div class="drag"> </div>
24. <div class="drag"> </div>
25. <div class="drag"> </div>
26. <div class="drag"> </div>
27. <div class="drag"> </div>
28. <div class="drag"> </div>
29. <div class="drag"> </div>
30. <div class="drag"> </div>
31. <div class="drag"> </div>
32. </div>
33. </span>
34. </div>
35. <div id="cont2" class="container">
36. <div class="dropzone">
37. <span>Folder 2</span>
38. </div>
39. <span id="folder2" class="folder">
40. <div class="drop">
41. </div>
42. </span>
43. </div>
44. <div id="cont3" class="container">
45. <div class="dropzone">
46. <span>Folder 3</span>
47. </div>
48. <span id="folder3" class="folder">
49. <div class="drop">
50. </div>
51. </span>
52. </div>
53. <span id="mainFolder" class="folder">
54. <div class="drop">
55. <div class="drag"> </div>
56. </div>
57. </span>
58. </div>
59. </body>
The jQuery
1. $(document).ready(function () {
2. var opts = {
3. helper: 'clone',
4. appendTo: 'body'
5. //appendTo: '#container'
6. };
7. $('div.drag').each(function () {
8. $(this).draggable(opts);
9. });
11. $('.dropzone, #topContainer').droppable({
12. drop: function (e, ui) {
13. var clone = $(ui.draggable).clone();
14. clone.draggable(opts);
15. $(this).siblings('.folder').children('.drop').append(clone);
16. $(this).removeClass('over');
17. },
18. over: function (e, ui) {
19. $(this).addClass('over');
20. },
21. out: function (e, ui) {
22. $(this).removeClass('over');
23. }
24. });
25. });
The CSS
1. .dropzone {
2. height: 300px;
3. width: 100px;
4. border: 1px solid black;
5. }
6. .drag {
7. clear: both;
8. height: 50px;
9. width: 80px;
10. background-color: black;
11. position: relative;
12. cursor: pointer;
13. }
14. #topContainer, .dropzone {
15. height: 50px;
16. width: 300px;
17. border: 2px solid black;
18. text-align: center;
19. }
20. .folder .drag {
21. margin: 5px;
22. }
23. .container {
24. border: 2px solid blue;
25. margin: 10px;
26. }
27. .over {
28. background-color: yellow;
29. }
30. #container {
31. width: 800px;
32. height: 600px;
33. overflow-y: scroll;
34. border-color: red;
35. position: relative;
36. }
The Fiddle: jsFiddle

So the idea is... you drag one of the black blocks to the desired folder (Parent Directory 1, Parent Directory 2, Folder 1, etc.). That all seems to work fine.

What doesn't work fine is when the parent (#container) or body have an overflow. If you click on a block to drag and try to mousewheel scroll, you can't... or if you keep trying, you sometimes can. (It's not obvious with my screen resolution, but in the Fiddle code, there is a scrollbar for the #container element) I'm assuming this has something to do with the focus of where I'm appending the helper to.

Because I started thinking the latter, I started appending the helper to different locations. With #container being the area I'm most interested in, I can append the helper there and get the scroll to work just fine (uncomment //appendTo: '#container' and comment out the appendTo: 'body').

However, this introduces another problem. Now that I'm appending to the #container element, my block cannot be seen when it is dragged to the **Parent Directory 1** folder, which lead me to believe that there is just something wrong with helper.

Sure enough, if you don't user **helper: 'clone'**, you can scroll just beautifully. This is not an option because I like having my clone there. So I turn to y'all. How can I fix my problem, and what exactly is going on? Does anyone have any advice? I'd love to hear it.

It's also good to note that I've tried setting the zIndex and stack options for the draggable, but no go. I'm assuming I'll have to make a custom helper function, and make it aware of what it's currently being dragged over... but I'm hoping there's an easier fix.

Thanks!

Dragged item in dialog box displays behind.
[3Replies]
- 06-Oct-2011 10:28 AM
- Forum: Using jQuery UI
So I have a dialog box that contains an accordion, and in the accordion I have an unordered list with draggable list items. That all displays just fine.

The problem is, when I go to drag one of these list items, the dragged item appears behind the dialog. I've been messing around with z-indices and trying to make the dragged item's index larger than the dialog (which I can successfully do), but nothing appears to happen.

I was able to overcome this problem with "stack: false", but then my dialog box was always behind everything (including other dialog boxes), which is not what I want.

Does anyone have any insight as to why simply setting z-index doesn't work for the draggable item and how I can fix this problem?

Appending to an iFrame with jQuery.
[7Replies]
- 22-Aug-2011 12:51 PM
- Forum: Using jQuery
Hi all. I'm trying to get some user text (which is html), throw that into an iFrame, then append something to the iFrame's head tag, but this doesn't seem to be working... here's my code:
1. <html>
  <head>
  <script type=text/javascript src=jquery.js></script>
  <script type=text/javascript>
  $(document).ready(function() {
  $('#submit').click(function(e) {
  var doc = $('#fr')[0].contentDocument;
2. if (!doc) // for IE
      doc = document.frames('fr').document;
    doc.open('text/html');
    doc.write($('#html').val());
    doc.close();
3. $('#fr').contents().find('head').append("<script type=text\/javascript>alert('here!');<\/script>"); // I had to escape the forward slashes here... not sure why though.
  });
  });
  </script>
  </head>
  <body>
  <input type=button value=Submit id=submit></input><br>
  <textarea id=html style="height: 300; width: 300;"></textarea>
  <iframe id=fr></iframe>
  </body>
  </html>
If I try to append (bolded above), it will run whatever's in the script tag, but it doesn't actually add it to the iFrame's head... so I'm wondering if I can't append to the head, or what's going on?

Any insight would be wonderful, and if you need me to explain something further, please ask!

Drag and Drop for Select tags.
[9Replies]
- 23-Jun-2011 02:13 PM
- Forum: Using jQuery UI
Hello all, I'm trying to have two lists, like so:
1. <select size=10 class=select multiple=multiple>
2. <option>blah</option>
3. <option>bleh</option>
4. <option>Jurassic Park</option>
5. </select>
7. <select size=10 class=select multiple=multiple>
8. <option>hi</option>
9. <option>howdy</option>
10. <option>Jack Johnson</option>
11. </select>
So I want to be able to drag text from one list to the other and vice versa. I know there's a way to do this with jQuery-UI, but that seems to only apply to ul and li tags... I was wondering if it was possible through select tags (or some similar structure that has a list of text values you can pick from and drag over to another list)? I'm hoping to find something that exists in jQuery UI or something that I can easily implement.

Also, it's good to note that I want something like http://jqueryui.com/demos/sortable/#empty-lists but obviously with a list of text... the reason why I'm not going this route is because with the select tag, the user can see what they're selecting and if I have a lot of text values, I get a scroll window.

Any ideas would be greatly appreciated! Thanks.

Saving a data structure to a file...
[1Reply]
- 01-Mar-2011 09:22 AM
- Forum: Using jQuery
I have a JSON data structure that I'm pulling in VIA an AJAX call. What I want to be able to do is click a button/link and be able to save this data structure to disk, but I'm not really sure how to go about this. I've been experimenting with the following:

The link has the following format "<a href='data:application/json, " + data_structure + "'>Click here!</a>" I've been able to replace data_structure with text and /json to /rtf, which gives me a pop-up 'SaveAs' dialog box, and when I open the file, it has my text in there. However, if I do data_structure, I just get [Objectobject], which is telling me that I'm passing in the object, but that's basically it, I need to expand it out? I'm not really sure how to do that...

Which leads me to calling a perl script. So I make an ajax call like so:

$.ajax({
      'dataType': 'JSON',
      'type': 'GET',
      'url': 'cgi-bin/save-text.pl',
      'async': false,
      'processData': false,
      'data': data_structure,
      'success': function(data) {
            alert(data);
      }
});

save-text.pl

print "Content-Type: text;\n\n";
print $ENV{QUERY_STRING};

This has given me mixed results. If I create a data structure from scratch, say:

var pink = new Object();
pink['floyd'] = new Object();
pink['floyd'][0] = 'The Wall';
pink['floyd'][1] = 'Animals';

And pass this in as my data parameter, I get some good looking return pink['floyd'][0]=The+Wall&pink['floyd'][1]=Animals but if I try to pass in my JSON object, I can receive an error, undefined, just a blank pop-up box, or [Object object]. I think the problem is in the Perl script, but I'm not sure how I can access passed in hash values... like if I passed in my above data structure, how would I access that in a Perl script?

$ENV{QUERY_STRING}->{'pink'}{'floyd'}[0] doesn't seem to work... nor does it if I take the arrow away.

So I'm confused. If someone could shed some light on this subject or possibly post a link to some page that'll help me out, then that'd be awesome. Thanks!

Save As dialog box.
[1Reply]
- 18-Feb-2011 08:42 AM
- Forum: Using jQuery
I know this is more of a plain old Javascripting question, but I'm going to ask it here as well.

What I'm trying to do is have a 'Save As' dialog box pop up when I click an anchor tag. What's hidden in the anchor tag is base64 information, so my anchors look like this:

<a href=# src='data:application/octet-stream;base64, (base64 string)'>file name</a>

So when I click on this, it gives me the option of downloading my base64 info just fine, but the problem is, the name of it looks to be just the entire base64 string. I was wondering if there was a way I could set this name? I can get the file name, so I'd love to just put 'blah.jpg' as the name that the user downloads.

The reason I'm asking is because when I download the file, it comes out as (random characters).bin.part, and if I know the download is a pdf, I try opening it with a pdf viewer, but get yelled at by the MIME type... however, if I simply change '.bin.part' to '.pdf', I can open the file just fine, so I'd love for an automatic naming system, but not sure how to implement that.

I've tried the document.execCommand('saveAs', '1', '<filename here>'), but I think this is for an actual file that you serve from the server... I don't have the actual file, just the base64.

Any help would be appreciated. Thanks!

BlockUI Question.
[3Replies]
- 05-Feb-2011 10:29 AM
- Forum: Using jQuery Plugins
Hi all. I'm looking to use blockUI as a loading screen for when my Javascript does some processing, but I can't seem to get it to work. Basically what I want to happen is... I have a loop that will be running and creating some output for the user, so I want to throw a loading screen around this for loop, but what I'm currently doing doesn't seem to work. Here's an example...

$.blockUI({message: "Loading, please wait..."});
for (i = 0; i < 10000000; i++) {}
$.unblockUI();

So what happens is, the loop runs (and completes), then the blockUI loading message shows up and goes away really quickly. I just want it to show up, let the loop run until finished, then go away. Am I doing something completely stupid here? Any help would be appreciated!

Calling a Perl script with an ajax call.
[11Replies]
- 11-Jan-2011 02:36 PM
- Forum: Using jQuery
Hi all, I've been looking at how to call a perl script using a $.ajax, but I can't seem to get it to properly work. What I want to do is call a perl script from my jQuery code, let the perl script do some processing and then return the results to my jQuery code. So what I have is this:

$.ajax({

      'type': 'GET',

      'url': '/home/jquery/test.pl',

      'async': false,

      'success': function(data) {

            alert(data);

      }

});

test.pl

#!/usr/local/bin/perl

use strict;

print "Content-Type: text/html\n\n";

print "Hello!\n";

So whenever my alert(data) goes, it just prints the 'test.pl' code, so test.pl doesn't actually execute. I want test.pl to execute, so how would I go about doing this?

I've also tried using xmlhttp, like so:

xmlhttp = new XMLHttpRequest();

xmlhttp.open('GET', '/home/jquery/test.pl?file=' + encodeURI('blah.txt'), true);

xmlhttp.onreadystatechange = updatePage;

xmlhttp.setRequestHeader(

      'Content-Type',

      'application/x-www-form-urlencoded'

);

xmlhttp.send(null);

function updatePage() {

      if (xmlhttp.readyState == 4) {

            alert(xmlhttp.responseText);

      }

}

So then my test.pl looks like:

#!/usr/local/bin/perl

use strict;

use CGI qw/param/;

use URI::Escape;

print "Content-Type: text/html\n\n";

my $file = param('file');

$file = uri_unescape($file);

print "hello\n$file\n";

Still prints just the code, and the perl scripts are executable because I can run them just fine from the command line... I have to be doing something wrong. Any help would be appreciated. Also, how do I put in the code tags since [CODE] doesn't seem to work?

Close all open accordion elements.
[2Replies]
- 10-Jan-2011 09:25 PM
- Forum: Using jQuery UI
Hello all. I've been doing some googling and looking on these boards, but I can't find an answer that works for me. What I'm trying to do is this...

I have a bunch of accordions, and I can open as many of them as I want at the same time, but when I make a button to close them all, I guess I'm not using the right function to close all open accordion elements. I've tried using:

$('.accordion').accordion('activate', -1); // where 'accordion' is the class name

And I've tried messing around with a bunch of other options that I forget right now, but I was wondering if anyone had any advice? I just want the user to be able to close all open accordion elements with the click of a button. I'm sure there's a tutorial around, I just can't find it. Any help would be appreciated!

Problem with encoding in a file?
[7Replies]
- 03-Jan-2011 06:00 PM
- Forum: Using jQuery
Hello all. I'm trying to display a '.eml' file to the user, but I'm running into some trouble. When I just do an AJAX call like:

[code]
$.ajax({
      url: '/home/01.eml',
      async: false,
      success: function(data) {
            $('#tmp').html(data);
      }
});
[/code]

I don't get any pleasing results... in the file, there are 'quoted printable' characters that are displayed as their corresponding hex value, and their encoding seems to be in windows-1256. I've tried messing around with contentType but didn't get any results.

I cannot modify the '.eml' files, so I have to load and process them in jQuery (hopefully). So is there some sort of library or built-in function that I can use? Also, I've given a very general explanation of what I want to accomplish, so if anyone needs more information, please ask.

Question about using Dialog.
[2Replies]
- 20-Dec-2010 06:37 PM
- Forum: Using jQuery UI
Hello all. I'm brand new to jQuery/Javascript, so hopefully I don't sound like a complete idiot. I seem to be having a problem with loading a dialog box...

My HTML:
[code]
<html>
<head>
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript" src="test.js"></script>
<script type='text/javascript' src='jquery-ui-1.8.7.custom.js'></script>
<script type='text/javascript' src='demos.css'></script>
</head>
<body>
<div id=’tmp’ title=’sha sha’><p>Howdy!</p></div>
</body>
</html>
[/code]

My jQuery:
[code]
$(document).ready(function() {
var diag = $('#tmp').dialog();
});
[/code]

All of the files are in the same directory... and actually, that's another quick question. When I try to load the complete path of the files, they don't seem to load (thanks to Firebug for pointing this out). I'm on a Windows machine, so I don't think I need to do escape characters (since I tried that too), but doing "C:\<location>\jquery-1.4.4.js" doesn't seem to work. Any ideas?

Anyway, Firebug is yelling at me for the demos.css file, saying:

[code]
missing ; before statement
file:///C:/Users/Jef/Downloads/jQuery/ui/demos.css
Line 1
[/code]

I haven't changed anything in demos.css and all of its lines seem to have semicolons, so I don't know why it's saying this. Any help for my two problems would be awesome. Thanks!

**How do I make code tags?

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend