Member Avatar for benjaminFowl87

Hi

My problem is.

I'll break down the problem to make it clear.

<html>
<head>
<body>

<!-- ajax call that opens a jQuery UI Dialog box -->

<a href="#" onclick="$.ajax({beforeSend:function(request){$('#onboarding_accounts').show();}, complete:function(request){$('#onboarding_accounts').hide();}, data:'', dataType:'script', type:'post', url:'/proxy/account/load_create_account?method=get'}); return false;">Create New Account</a>

</body>
</html>

It should be noted that the dialog html is loaded on this ajax call, so the html does not exist on the page until the link and call is made.

Now once this Dialog form has loaded I have an Autocomplete, I have tried just doing the simple default functionality example. The problem is that the autocomplete won't work and I think its because the script binds the autocomplete on document ready.

I need to bind the function once the Dialog box has loaded, what functions are available in jQuery to do this.

Any help will be much appreciated

<script>
	$(function() {
		var availableTags = [
			"ActionScript",
			"AppleScript",
			"Asp",
			"BASIC",
			"C",
			"C++",
			"Clojure",
			"COBOL",
			"ColdFusion",
			"Erlang",
			"Fortran",
			"Groovy",
			"Haskell",
			"Java",
			"JavaScript",
			"Lisp",
			"Perl",
			"PHP",
			"Python",
			"Ruby",
			"Scala",
			"Scheme"
		];
		$( "#tags" ).autocomplete({
			source: availableTags
		});
	});
	</script>


	
<div class="demo">

<div class="ui-widget">
	<label for="tags">Tags: </label>
	<input id="tags">
</div>

</div><!-- End demo -->

<div class="demo-description" style="display: none; ">
<p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for programming languages, give "ja" (for Java or JavaScript) a try.</p>
<p>The datasource is a simple JavaScript array, provided to the widget using the source-option.</p>
</div><!-- End demo-description -->
Edited by benjaminFowl87 because: n/a
  • 2 Contributors
  • 6 Replies
  • 1K Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by benjaminFowl87

Recommended Answers

All 6 Replies

Member Avatar for Airshow

Benjamin,

Why is the dialog fetched by ajax and not hard-coded on the page?

Airshow

Member Avatar for benjaminFowl87

We don't want all of the html that will be in the dialog boxes loaded for each page.

There is more than just one dialog box.

Member Avatar for Airshow

Benjamin,

The reason I ask is because the $.ajax function expects a the response to be a javascript script (dataType:'script') but, if I understand correctly, it is mixed javascript and HTML.

If I recall correctly, this will cause a silent error to occur (ie. a javascript error that is caught by jQuery internally and not reported in the browser's javascript error console).

There's a number of ways to get it working, but I need to know more about the diversity of dialog boxes before I could advise of a way ahead.

Airshow

Edited by Airshow because: n/a
Member Avatar for benjaminFowl87

Solution found

$(function(){

    //namespace for which button was clicked
    //left blank to be overwritten
    $.buttonClicked = {
        onboarding : ""
    }
    
    $( "#dialog-form" ).dialog({
        autoOpen: false,
        position: 'center',
        modal: true,
        open: function(event, ui) {
            $.ajax({
            url: $.buttonClicked.oboarding,
            success: function(data) {
                $('#dialog-form').html(data);
                
                switch($.buttonClicked.oboarding){
                    case 'views/create_account.html':
                        var availableTags = ['apple','apps'];
                        $( "#tags" ).autocomplete({
                            source: availableTags
                        });
                        break;
                    case 'view/enable_account':
                        break;
                    case '':
                        break
                }
            }
            });
        }
    });

    $( "#create_new_account" )
        .click(function() {
                $.buttonClicked.oboarding = 'views/create_account.html';
                $( "#dialog-form" ).dialog("open");
        });

    $( "#enable_account" )
        .click(function() {
                $.buttonClicked.oboarding = 'views/enable_account.html';
                $( "#dialog-form" ).dialog("open");
        });

    $( "#setup_new_contact" )
        .click(function() {
                $.buttonClicked.oboarding = 'views/setup_contact.html';
                $( "#dialog-form" ).dialog("option","draggable",false);
                $( "#dialog-form" ).dialog("open");
        });

    $( "#edit_contact" )
        .click(function() {
                $.buttonClicked.oboarding = 'views/edit_contact.html';
                $( "#dialog-form" ).dialog("option","draggable",false);
                $( "#dialog-form" ).dialog("open");
        });    
});

You just need to put the ajax request in the open option, have all of your code in the success and it should all work.

Member Avatar for Airshow

Benjamin,

Neat.

Just a couple of points.

If each of the dialogs is always the same, then its html can be hard-coded rather than fetching it by ajax.

IIRC, one of the common browser's js engines doesn't like a line break before a method invocation.

//change
$( "#xxxxxxx" )
        .click(function() {
//to
$( "#xxxxxxx" ).click(function() {

Airshow

Member Avatar for benjaminFowl87

Ok, the dialogs are all different, the code i posted is the bare minimum to get it working.

Thanks for the tip on the line break, I was unaware of that.

Also, A nice dialog box that makes this alot easier is called colorbox

http://colorpowered.com/colorbox/

It has a nice bind feature that sorts all of this out for you, just place your additional functionality for the dialog within the document bind and it will just work :)

This works very well when dealing with ruby on rails,

I have one dialog box that has multiple select options, each load a different view within the dialog box, you can do further AJAX calls to your controller using .getJSON. Just be sure to keep everything you write with the jquery dialog in the open option.

Hope this has helped anyone looking for a similar solution.

Edited by benjaminFowl87 because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.