Does anyone know how to display contents of a file in a dialog box on clicking a link using jQuery?
Any help would be greatly appreciated. Thanks.

11/29/2009 7:18:31 PM

what kind of file?

http://jqueryui.com/demos/dialog/

11/29/2009 7:22:14 PM

Thanks for the quick reply.
I need to display the contents of a HTML file in a dialog box.
The jQueryUI link you suggested, contains the text already embedded in the div tag.
I need the contents to be from an external file.

11/29/2009 7:27:36 PM

I think what you want is a combination of jQuery UI and Ajax (jQuery has an ajax library as well).

basically you'd use jQuery UI to load the dialog box and ajax to update the dialog box contents with this other html page.

11/29/2009 7:59:24 PM

Use $.ajax() w/ dataType : "html" and dump the results on success into an id inside your dialog.

Scroll down here to see some stuff:
http://docs.jquery.com/Ajax/jQuery.ajax#examples

[Edited on November 29, 2009 at 9:12 PM. Reason : -]

11/29/2009 9:10:08 PM

i think i understand what you want to do and if i do, let me suggest the colorbox route:

http://colorpowered.com/colorbox/core/example5/index.html

the iframe and ajax examples are in the last group...it's easy as balls

11/30/2009 8:40:43 AM

Thanks for all your replies. It's been a great help.

11/30/2009 10:14:10 AM

question for those of you that know more than me (which is probably most of you)

i'm using jquery to dynamically duplicate form fields - let's say you have a form field for "url", but you want to allow the user to add up to 5 URLs...well, i've got the duplication of the form field down because that's easy (they click on an "add more" link and a second field identical to the first slides down into view)...what i don't have is the know-how to get it to search the duplicated material and change the name attributes so that they are something like: name="url", name="url_1", name="url_2", etc

this is a simplified explanation...in actuality, it's not a single field, it's a series of fields, and it's found on several pages, so writing a custom script for each page is something i'm trying to avoid...rather, i have the area i want duplicated wrapped in a div with a "duplicate" class...the jquery script finds the data that's wrapped in the div and copies all of it when the "add more" link is clicked...like i said, though, it just duplicates that chunk in its entirety, which i want to do, but with the added feature of appending the name attribute values to be "_1", "_2", "_3", etc.

does that make sense? suggestions?

1/12/2010 2:23:24 PM

The dirty, non-jQuery way is to capture the innerHTML of the DIV and then do a regular expression replacement of the form fields and then shove the innerHTML back in.

The nicer way is to just getElementsByTagName all the INPUT elements in the DIV and then cycle through them replacing the _1 with _#

1/12/2010 2:29:29 PM

well, they're not all INPUTs...there are SELECTs, TEXTAREAs, etc...so since i want all the name attributes to be changed (no two names should be the same, anyway), i thought it was be easier to cycle through the duplicated block and append all name attribute values with "_#" where the # is determined by a simple incremental count variable

also, the label's for values will need to change, too

it doesn't SEEM that difficult, but i can't get it to work

[Edited on January 12, 2010 at 2:56 PM. Reason : .]

1/12/2010 2:37:03 PM

If i understand you correctly what I do in that case is:

1 input field where a user inputs text...
After they input their URL, they click the 'add' button
It clears the field and the url they added now displays in a list of urls underneath. This is just a text list but each one has an 'x' next to it so they can remove one by one if needed.

Also when the user adds a url it verifies that it already doesn't exist in the list and if it does i usually do some kind of effect like 'bounce' the one that already exists.

There would also be a hidden input field that stores all the necessary urls.

If that sounds like something you're trying to do I can tell you how to do it...its quite simple with jQuery. If done right it makes a prettier, more slick UI.

I'm actually working on something similar that i could try and put up as a demo for you if you need.

[Edited on January 12, 2010 at 3:53 PM. Reason : .]

1/12/2010 3:49:04 PM

just use arrays

<textarea name="booger[]"></textarea>

then $_POST['booger'] will be an array that you can access like $_POST['booger'][0], $_POST['booger'][1], etc.

[Edited on January 12, 2010 at 3:58 PM. Reason : plus you don't have to alter the names]

1/12/2010 3:56:20 PM

Golovko, that's not quite what i wanted it to do...i'm probably not explaining it well, but BigMan157's solution will work well enough, even if it doesn't help me figure out how to do what i want to do

i do have another issue, though, related to the fact that microsoft STILL can't manage to produce a browser that acts correctly

i have a simple yes/no radio pair that determines whether or not additional content is shown...since IE is a piece of shit and doesn't know what the fuck to do with a .change event, you have to use .click...click is a crappy option over change for obvious reasons, but thems the breaks since microsoft refuses to put out a decent browser

anyway, the HTML looks like this:

<label for="yesno">Do you like cookies?</label>
<input type="radio" name="yesno" value="1" class="showme" custom:attr="moar" />Yes
<input type="radio" name="yesno" value="0" class="hideme" custom:attr="moar" checked="checked" />No</div>

<div id="moar" class="hidden"><p>cookies are delicious!  moar cookies!</div>

$(".hidden").hide();
var evt = $.browser.msie ? "click" : "change";
$(".showme").bind(evt,function() {
    var id = $(this).attr('custom:attr');
    $("#" + id).slideDown('fast');
    return false;
});
$(".hideme").bind(evt,function() {
    var id = $(this).attr('custom:attr');
    $("#" + id).slideUp('fast');
    return false;
});

1/21/2010 10:41:26 AM

I don't know if you just copy/pasted incorrectly but you are missing a closing < / p > tag

also i would toss in an alert that triggers as the first thing in the bind event. this will help you narrow down if the problem is the bind isn't being triggered or if its something else because IE is more strict about things so if you had the same ID twice on a page by mistake, you'd see similar results.

[Edited on January 21, 2010 at 11:19 AM. Reason : .]

1/21/2010 11:17:00 AM

yeah, i was just minimizing the actual code and forgot the </p>, though it shouldn't make any difference since it's correct in my actual code

i added an alert...it comes up fine in FF, but not at all in IE...that doesn't make any sense, though, does it? it means that it's not doing anything

1/21/2010 11:51:52 AM

ok i think i figured it out. This is how you need to implement radio buttons because there is no event for click/change per individual radio button but rather as a group.

$("input[@name='yesno']").change(function(){ // triggered by the change event of the GROUP
if ($("input[@name='yesno']:checked").val() == '1') // figure out if its your on or off
$("#moar").slideDown('fast');
else
$("#moar").slideUp('fast');
});

1/21/2010 12:00:41 PM

$(function () {
    if ($.browser.msie) {
        $('input:radio').click(function () {
            this.blur();
            this.focus();
        });
    }
});

1/21/2010 12:01:47 PM

side note: jQuery strongly recommends against using browser detection but rather use feature detection

http://docs.jquery.com/Utilities/jQuery.support

[Edited on January 21, 2010 at 12:04 PM. Reason : link]

1/21/2010 12:03:39 PM

^^ here's the funny thing...that's the FIRST thing i did and it didn't seem to do anything...i was on my laptop, where i have 64-bit IE8 and it didn't seem to do a thing, so i tried to do what i posted above and i got the same result

now i'm on my desktop with 32-bit IE8 and both work exactly the same...wtf?

in any case, neither option actually selects the radio buttons...yes, it does what i want in regards to the show/hide, but i can't "select" anything (no black dot in the white circle!)

why anyone uses IE, i'm not sure

1/21/2010 12:33:09 PM

^are you referring to bigman's solution or to the solution i posted?

1/21/2010 12:34:28 PM

^ bigman's...i have almost exactly the same thing commented out since i was trying it and it didn't work...but since i'm not using my desktop and it works (the code i originally posted), i haven't tried your solution...now i'm trying to figure out why the different versions (32 vs 64) aren't acting the same

as for your comment about feature detection, i DO like the option better because it futureproofs, but i'm not experienced enough with jquery to convert my code snippet from browser to feature detection

1/21/2010 12:37:59 PM

I would try out the solution i posted, that might solve your other issue as well. Now it makes sense why your previous attempts weren't working with .change

1/21/2010 12:39:39 PM

in regards to the code i posted above, the radio buttons aren't able to be selected in IE...any idea why? the show/hide works, but you can't get a value on the radio button because it won't let either be checked

ideas? jeebus, i hate IE with a passion

1/26/2010 1:57:32 PM

Lets see if I understand your problem...

You can click on the radio buttons and trigger the show/hide events but the radio buttons themselves visually don't look selected?

1/26/2010 2:18:15 PM

^ correct

i could ignore the visual aspect if it weren't for the the fact that they aren't actually BEING selected (at least according to my jquery and php form validation controls)

1/26/2010 2:28:42 PM

^if you are using the same code that you originally posted I think that might be your problem in the fact that you are binding .click to each individual radio button and not the name of the group of radio buttons, as i posted a few posts up.

1/26/2010 2:30:21 PM

that may be it...i was trying to avoid something limiting, though, so that it could be reused any number of times without me having to create a different function for each instance...which is feasible using a class (instead of id) and a custom:attr to identify the content to shown/hidden

i'll try the code you posted and see if that works...if it does, though, it still means i have to duplicate the code and customize it for every situation and i have way too many to do that

1/26/2010 2:39:11 PM

^you can still do that.

Instead of using the class use the name.

then your id="moar" could then be id="name" name being the same name you used for the radio button group.

1/26/2010 2:51:41 PM

Example:

Do you like cookies?
Yes
No

cookies are delicious!  moar cookies!

1/26/2010 3:00:09 PM

^ i used that same code and while it works to show and hide, the radio buttons still aren't being selected

also, my point was that using that method means that i have to create a new function for each radio button group name, rather than using a single class to trigger the show/hide and the custom:attr option for defining the content to be hidden/shown...i like this because it's going to be used on any number of radio groups and since those groups are being populated by database results, i can them dynamically created each time and don't have to specify for each group in the javascript

does that make sense? though at this point, IE is making something relatively simple into something relatively retarded

1/26/2010 3:10:23 PM

Which IE is it not working in or all of them? I'm going to fire up windows and give it a shot.

1/26/2010 3:13:04 PM

Also what you can do to make your code reusable is this:

$('input:radio').each(function() {
var id = $(this).attr('name');

$(this).change(fucntion() {
if ($("input[@name='"+id+"']:checked").val()) {
$('#'+id).slideDown('fast');
}
else {
$('#'+id).slideUp('fast');
}
});
});

1/26/2010 3:19:25 PM

^ ah

it's not working in IE8...our users only have the option of using IE8 (32-bit, thankfully, since 64-bit doesn't like the code at all for whatever reason) and firefox 3.5+

1/26/2010 3:22:05 PM

^I'll fire up IE8 then and give it a whirl.

Also this line:

$("input[@name='"+id+"']:checked").val()

has a better way of writing it. There is a way to just use $(this) but I'm not 100% sure what the selector would look like in dot syntex i.e. $(this).checked() < not sure if thats valid or if you have to do something else. I do know that $(this+':checked') is not valid though.

and don't copy/paste what i just wrote without fixing my typos if you use that i just noticed i can't spell function*

1/26/2010 3:26:54 PM

i believe the syntax is

$(this).is(":checked")

1/26/2010 3:36:11 PM

^yup, thats right. I've used that many times before but forgot

1/26/2010 3:37:12 PM

i tried something like this

if($(this).is(":checked")) {
    $(this).attr('checked',false);
}
else {
    $(this).attr('checked',true);
}

1/26/2010 3:40:09 PM

Just tested this in IE8, FF, Safari and it works, even the radio buttons appear selected:

$('input:radio').each(function() {
var id = $(this).attr('name');

$(this).click(function() {
if ($(this).val() == 1) {
$('#'+id).slideDown('fast');
}
else {
$('#'+id).slideUp('fast');
}
});
});

[Edited on January 26, 2010 at 3:59 PM. Reason : asdf]

1/26/2010 3:58:46 PM

i'm heading out but i'll check that out tonight or tomorrow...fwiw, it looks close to what you had above, and this is what i just tried (and which didn't work):

$('input:radio').each(function() {
	var id = $(this).attr('name');
	$(this).change(function() {
		if($('input[@name="'+id+'"]:checked').val()) {
			$('#'+id).slideDown('fast');
		}
		else {
			$('#'+id).slideUp('fast');
		}
	});
});

1/26/2010 4:02:16 PM

no prob...here is the link for what I did...its the only javascript on the page...you never know, maybe something else is causing all this headache.

1/26/2010 4:07:00 PM

^ okay, that did it...sort of

it DOES work, but i now remember why that solution wasn't ideal...aside from the fact that it relies on a 1/0 trigger (1 for "yes", 0 for "no" or similar), it ONLY works if "yes" is what shows the hidden fields...if, for instance, the question is something like "are you an NC resident?" where "no" is what shows hidden content (so they can input their state of birth), it shows the content on the wrong selection

my original code was essentially a toggle that supported more options than just on/off (which, as far as i could decide, made it useful for any situation)...of course, it's easy to change this on an individual basis for those rare occasions where it operates in an opposite manner, but that defeats the purpose of creating a generic reusable snippet...i AM grateful, however, because the buttons actually work in IE8 now

oh, the reason my code didn't work is because i was using the "change" event (you were using "click")...since IE is retarded and doesn't know what "change" means, i just had to implement the click/change event switch, since change is preferable to click...also, i had to change the identifier to type='radio' since the pseudo-element language throws hard CSS errors the site has to pass strict validation

this is what it looks like now (for reference for anyone who stumbles across the thread):

var evt = $.browser.msie ? "click" : "change";
$("input[type='radio']").each(function() {
    var id = $(this).attr('name');
    $(this).bind(evt,function() {
        if($(this).val() == 1) {
            $("#"+id).slideDown('fast');
        }
        else {
            $("#"+id).slideUp('fast');
        }
    });
});

1/27/2010 8:14:25 AM

Quote :

"oh, the reason my code didn't work is because i was using the "change" event (you were using "click")...since IE is retarded and doesn't know what "change" means"

After you were clicked on a different radio button in IE, did you then click elsewhere? In regards to input fields, IE doesn't fire onchange events until after the object has lost focus.

This is, however, "working as intended" according to the HTML 4.01 spec (and I can't find anything that has mentioned it's changed since then) http://www.w3.org/TR/REC-html40/interact/scripts.html#adef-onchange -- basically, "change" doesn't mean what you think it means.

[Edited on January 27, 2010 at 8:59 AM. Reason : .]

1/27/2010 8:56:59 AM

^ okay, i can accept that (i won't pretend to be especially knowledgeable on the details of the spec)...so can you explain to me what the difference between click and change is? if i'm understanding that correctly, "click" will fire on click (durr), regardless of whether or not a change in selection has occurred (which has its uses, no doubt) while "change" will fire when the selection changes (yay!)...what the spec is saying is that the change event is not supposed to take place until after the focus is lost?

okay, so perhaps my IE hate is misplaced...should i be hating on a retarded spec that, while it made sense at the time in theory, is stupid beyond belief in practice? are you saying that IE is the ONLY browser that is doing what it's supposed to do, then?

[Edited on January 27, 2010 at 9:05 AM. Reason : .]

1/27/2010 9:04:33 AM

Quote :

"so can you explain to me what the difference between click and change is? if i'm understanding that correctly, "click" will fire on click (durr), regardless of whether or not a change in selection has occurred (which has its uses, no doubt) while "change" will fire when the selection changes (yay!)...what the spec is saying is that the change event is not supposed to take place until after the focus is lost?"

Correct. 'onchange' has pretty much always been a really, really awkward to implement function when it comes to INPUT fields. That's why everyone avoids it. Depending on the type of INPUT, 'onclick' or 'onkeydown' lead to much more reliable results.

Quote :

" are you saying that IE is the ONLY browser that is doing what it's supposed to do, then?"

I can't say it's the only browser that does it, but apparently Firefox seems to have it wrong.

1/27/2010 11:34:38 AM

Quote :

"I can't say it's the only browser that does it, but apparently Firefox seems to have it wrong."

well, it seems that only IE8 is the only one to do it and that all of the other browsers i've tested (safari, opera, chrome, firefox) so far do it wrong

*shrug*

1/27/2010 12:45:44 PM

Glad its working now! Also, 1 and 0 doesn't have to be yes and no. It can mean 1 is show and 0 is hide. The only difference is when you setup the radio buttons, make sure the value of the button that will show (regardless if its yes or no) has the value of 1. This way you don't have to modify or add any new javascript.

1/27/2010 1:05:39 PM

so...i wrote myself a little jquery script that limits text entry by either characters or words...obviously they exist already, but i prefer a more dynamic approach so that i can use it throughout a site without specifying each instance...also, i had a hard time finding a script that worked with copypasta'd text, so i figured it'd be easier to start from scratch

anyway, since "maxlength" isn't a valid attribute on the textarea element, i decided i'd use that:

<label for="test">test:</label>
<textarea name="test" cols="50" rows="5" maxlength="50" custom:attr="words"></textarea>
<p class="remaining"><span id="test"></span> remaining</p>

$(document).ready(function() {
    $('textarea[maxlength]').keydown(function() {
        var id = $(this).attr('name');
        var limit = parseInt($(this).attr('maxlength'));
        var text = $(this).val();
        if($(this).attr('custom:attr') == "words") {
            var content = text.split(/\b[\s,\.-:;]*/).length;
        }
        else {
            var content = text.length;
        }
        if(content > limit) {
            var newtxt = text.substr(0,limit);
            $(this).val(newtxt);
        }
        var rem = limit - content;
        $('span#'+id).html((rem < 1) ? '0' : rem);
    });
});

3/3/2010 9:43:34 AM

I don't understand what you mean by

Quote :

"obviously they exist already, but i prefer a more dynamic approach so that i can use it throughout a site without specifying each instance"

3/3/2010 10:07:05 AM

He means he doesn't want to have to call the plugin for each instance he wants it used but rather have the plugin find all textareas on page load

Quote :

"$(document).ready(function() { $('textarea[maxlength]').keydown(function() {"

[Edited on March 3, 2010 at 10:13 AM. Reason : .]

3/3/2010 10:12:47 AM

quagmire02 said:

Quote :

"anyway, since "maxlength" isn't a valid attribute on the textarea element, i decided i'd use that:"

man why are you not just using a class instead of doing something you know is wrong

[Edited on March 3, 2010 at 10:18 AM. Reason : class="setemup"]

3/3/2010 10:16:09 AM