nikku/jquery-bootstrap-scripting

A number of jQuery plugins to ease scripting of bootstrap featured pages.

jquery-bootstrap-scripting's Issues

Integrate new boostrap styles

To be done.

Improvements on helpers

It'd be nice if we can pass extra arguments to alert, prompt and confirm helpers, like custom title and content, the same way you can set callback fns.
And maybe give the buttons a special class (like for the primary action) and caption (for internationalization purposes, without having to mess up with the source code of the plugin).

Something like this, perhaps:

$("#show-confirm").click(function() {
    $.fn.dialog2.helpers.confirm({
        title: 'Will you do it?',
        message: 'How could you resist with such a fancy confirmation?',
        confirm: {
                 label: '¡Claro que si, amigo!',
                 btnClass: 'success',
                 callback: function() { alert("You said yes!"); }
                 }, 
        decline: function() { alert("You said no!") }
    });
});

What do you think?

No Reload after (dialog2.closed)

Hi,

the modal will close after the page do not reload, it is possible? the modal box will close as when I click on close.

Thank you...

Feature request: should close with esc key

Most modals have 3 ways to close:

• Clicking outside (OK)
• Clicking in close button (OK)
• Pressing esc key (KO)

So, it would be a nice feautre to have.

Alter size based on content

It would be nice if we could alter the size of the modal box, based on the (ajax) content. The default Bootstrap width is 560px, which is not wide enough in some cases.

BUG? document.write(variable); opens new page

If I add to example notice.html code:

var ids = "text"; document.write(ids);

The modal will open for about 1sec, and you will see variable "text" printed.
Than new page will open and you will see exacly same thing as on your modal.

popover

I wonder, can the same thing be done with the bootstrap popover?

Ajax content
Ajax links and form submission in the dialog
Loading indicator

auto closing on final confirmation

It may be useful to have an option to automatically close after successful form submission.

My idea is to add handling of the "close" button, adding this code at the beginnig of __ajaxify function:

            var autoclose = e.find("a.auto-close");
            if (autoclose.length > 0) {
                this.close();
                var href = autoclose.attr('href');
                if (href)
                    window.location.replace(href);
                return
            }

This will allow to have additional class in te markup of the final "confirmation page":

<a class="btn close-dialog auto-close" href="/go-to-here">Close</a>

if href will be empty - it will just close a dialog, if not - main page will reload with specified URL as destination.

Not working together with jquerry validation

I tried you plugin and it works well. But I am not able to integrate jquerry search plugin with this. On the modal popup, I have a form and I want to make the form text box as a required field. Could you tell me how I can achieve this? I was using the example from here: http://docs.jquery.com/Plugins/Validation#Example
But when used with your script it does not validate and also the busy image is shown when the popup loads itself.

How to use this script?

Documentation is not clear what you have to do to make this work.

What you have to add and where?

I add this to header:

<script type="text/javascript" language="javascript" src="scripts/jquery/jquery.controls.js"></script>
<script type="text/javascript" language="javascript" src="scripts/jquery/jquery.form.js"></script>
<script type="text/javascript" language="javascript" src="scripts/jquery/jquery.dialog2.js"></script>
<script type="text/javascript" language="javascript" src="scripts/jquery/jquery.dialog2.helpers.js"></script>
<script type="text/javascript">
      $(document).ready(function() {
        $(document).controls();
      });
</script>

but code below still open new page instead of modal:
<a class="open-dialog" rel="sample2-dialog" href="includes/pages/notice.php">running example</a>

What I'm doing wrong?

Wrong Class for Automatic Links

In the doc, it said "a.ajax links within the dialog content will trigger loading of a new dialog page inside the dialog.". After checking for the source file, it should be "a.open-dialog".

Page buttons not added to bottom

I am trying to rebuild your "Check out running example" sample 2, by having the form's buttons put in the bottom of the form. Somehow, it is not doing this.

Example of what happens:
http://img16.imageshack.us/img16/7310/testcaj.png

onClose callback

It would be handy a callback function fired when the user exits the modal with the Esc key, without pressing any action button.

Integrate bootstraps buttons.js to add button loading animation

.

Tabbing in non-modal forms triggers modal to open

Relevant to 2.0-wip branch.

When tabbing through the elements of a non-modal contained form, a modal is created and brought to focus. This appears to be an issue introduced by the recent patch for issue #30.

A potential fix would be to check whether a modal is currently being displayed (or is currently in focus) before running the setTimeout() method. I'm not familiar with the most lightweight way of doing this for this particular implementation.

Response Text with Ajax Button

Hello,

a form send via ajax the values to a PHP Script and return a Sucess or Wrong text.
In the text was output is a ajax link to come in the next modal.

The ajax link was response load is not work.
But a ajax link was directly in the modal works. Why?

Thank You

Find a way to interact with the url/headers for ajax loading

Hi,

it would be great if we could have a simple way to get and modify the urls before ajax loading: sometimes, we want to know on the server-side if the request has been triggered by the plugin or not, and the standard X-Requested-With header is not always good enough/sufficient in complex applications.

For example, we could want to add the "_dialog2=1" parameter on each request (or an equivalent http header) without rewrite the whole loading process .

Thanks!

Finalize Documentation and clean up website

Someone do this :-P

Provide generic option to create dialogs via html markup.

Instead of making .ajax links open ajax dialogs, a generic mechanism should be employed to open both ajax and in-page dialogs.

Typo

The examples page has a typo under "simple dialog". It's "normalLy".

Usability - Enter key does not submit form

For forms loaded via AJAX to a modal, pressing enter does not submit the form.

Can't get automatic linking to work

Hi, I've been having problems trying to set up automatic links, I have this link:

<a href="test.php" class="open-dialog" rel="my-modal">Link</a>

Which in theory should show me the contents of my test.php file in a modal window but instead it just takes me to that page like normal, if I call the modal plugin using JS it works fine, I'm using jQuery 1.6.4 and the latest controls and dialog2 plugins.

I used some alerts() to test if the dialog2 plugin was recognizing the controls plugin and it does so I'm not sure if I'm doing something wrong here.

Cancel button disappears when using custom buttons

In the latest version, the cancel button disappears after loading is complete, and when the custom buttons (from class 'actions') are moved to the bottom of the modal.

Enter key can't automatically submit

For example I have a form, and I can press Enter key in old form , but when I use dialog2, the submit button is hidden, and when I press enter key, it'll not automatically submit. So is it a bug?

Modals not being removed upon close

I am using html markup to create modal links via a.ajax and running $(document).controls(); on document load. When I close modal windows, the .modal div still exists in the DOM, which is causing issues for me. .modal-backdrop and .modal-body are being removed, but not .modal.

Perhaps this behavior is desirable for non-ajax implementations, or perhaps this is a bug. Feedback?

Make dialog closable via escape key.

(When configured).

Option to show loading text

It would be nice if we could have an option to provide a "Please wait, loading.." text, instead of them having to wait in an empty modal with (if specified) a title and a spinner.

Feature request: implement fade class functionality

Bootstrap modal has the ability to specify a fade class which provides a nice animation and fade effect when closing the dialog. Is this a feature you might consider adding?

Really nice plugin btw, I really love it, thanks for sharing!

prompt won't work when ENTER is pressed

At least not in your examples page in Chrome.

Add bootstrap 2.0 support.

Do not focus on button

I'd like to be able to focus on my first form element, but the modalbox is stealing the focus and putting it on the button instead.

Dialog is displayed on load

My dialog is being displayed even though I have style="display: none" for the style.

Here's an example:

http://jsfiddle.net/rboarman/WLpky/

What am I doing wrong?

Overlapped links and text

Using Chrome 13.0.782.220 on Ubuntu 10.04, I see a lot of overlapped text and links on http://nikku.github.com/jquery-bootstrap-scripting/

I used to see that on http://twitter.github.com/bootstrap/ too, but they apparently cleaned that up. Do you know what causes that set of problems, and how to avoid?

Action buttons on reload

If you reload the window, with the same content, during the second load you will immediately see the content but the custom buttons show up later.

Is there a way to fix this somehow?

Ajaxifying modal content after updating content via out-of-band ajax

Is there a way to trigger __ajaxify, or better yet, content-update, after updating some of the content in the modal window via out-of-band means?

Use case: I am using Rails3 remote functionality to place ajax calls to the server from within a modal. The server response updates some of the contents of the modal. This contents includes a.ajax elements. These are not being respected, however, as they haven't been ajaxified.

Bonus: I have custom JS that I've plugged in via the dialog2.closed listener which I'd like to also trigger.

JSON response

Is there any way to get JSON response after form submission and do something with it on "dialog2.ajax-complete"?
Sometimes I need my callbacks to do several things depending on response (for example, update table row after it's been edited, update <select> list in "parent" form after I add/edit an item using modal form, etc...).

How can I remove Cancel button?

When I popup this dialog, it always show a "Cancel" button at the bottom right of the window.
I'd like to remove this button.
Please let me know how can I remove this Cancel button.
I've read this library's document, but I can't find the solv.

Thanks in advance.

autoOpen set to false is not being obeyed on onpage div... modal opens on page load

Having an issue, not sure if what I'm doing it incorrect... have tried it several ways but autoOpen is not being obeyed.

a class="open-dialog" rel="export_companies" autoOpen="false"

div style="display: none;" id="export_companies"

I've also tried this...

    $("#export_companies").dialog2({
        showCloseHandle: false,
        removeOnClose: false, 
        autoOpen: false, 
        closeOnEscape: false, 
        closeOnOverlayClick: true
    });

    $("#test").click(function(event) {
        event.preventDefault();
        $("#export_companies").dialog2("open");
    });

Problem POSTing AJAX form

Hi, I'm using TwitterBootstrap+JQuery+Dialog2 with CodeIgniter in the server.
I have this page loaded with your beautiful Dialog2:

<!DOCTYPE html>
<html>
<head>
    <title>Invia Newsletter di Prova</title>
</head>
<body>
    <h1>Invia Newsletter di Test</h1>

    <?if(isset($error)):?>
        <div class="alert alert-error">
            <span class="close" data-dismiss="alert">×</span>
            <h4 class="alert-heading">Attenzione!</h4>
            <?=$error?>
        </div>
    <?endif;?>
    <?if(isset($message)):?>
        <div class="alert alert-info">
            <span class="close" data-dismiss="alert">×</span>
            <h4 class="alert-heading">Informazione:</h4>
            <?=$message?>
        </div>
    <?endif;?>

    <p>some-text</p>

        <form action="/admin/news/<?=$id?>/test.html" method="post" accept-charset="utf-8" class="ajax inline-form">
        <fieldset>
            <input type="text" name="addresses"  class="span6"/><br>
            <span class="help-inline">text  </span>
        </fieldset>

        <div class="form-actions">
            <input type="submit" name="submit" value="Invia Test" class="btn btn-primary" />
            <a class="btn close-dialog" href="#">Close</a>
        </div>
    </form>
</body>
</html>

And this is the JS code that i'm using for the Dialog2:

    $.fn.dialog2.defaults.autoAddCancelButton = false;
    $(".modal-ajax-trigger").click(function(event) {
        event.preventDefault();

        var id = $(this).attr("data-id");
        var mTitle = $(this).attr("modal-title");
        var href = $(this).attr("href");

        $('<div/>').dialog2({
            title: mTitle, 
            content: href, 
            id: "modal-ajax-landing-data",
            showCloseHandle: false,
            removeOnClose: true, 
            closeOnOverlayClick: true,
            showCloseHandle: false,
            initialLoadText: "Caricamento in corso...",
        }).dialog2("removeButton", "Cancel");
    });

But when i submit the form it just loads the new page outside the dialog ignoring the form.ajax .
I haven't figured out why.
Using Chrome 20.0.1132.47 under Mac and no error found in the js console.
Can you help me or just giude me where the problem could be?
Thanks,
esolitos

Pass data to modal

Hello, is it possible to pass data to modal window from several links that open the modal? For instance: a list of people with a link for each one to open a modal with profile data.

For bootstrap this feature is being requesting by many people and somebody wrote a patch for add it, could you add it too?

twbs/bootstrap#531

thanks in advance,
Alex

Option to put all custom buttons in footer

It would be nice if we can have an option that automatically puts all buttons, either with the "btn" class or inside "actions" class and with "btn" class, in the footer of the modal box.

can't use content and buttons simultaneously

When I set content option for ajax and buttons,
I can't see buttons.

After removing content option,
I can see buttons.

Help, please!

Thank you for making great plugins!

Use void for close icon instead of #

I would recommend changing

<a href='#' class='close'></a>

into

<a href='javascript:void(0);' class='close'></a>

as the current implementation will cause you to go to the top of the page, instead of staying at the same position and so that the URL is not modified.

Ajaxifying links on new content

Hi,

I tried everything, and I'm hitting a wall. I have a table that get updated by $.get, now the new content have some links that follow the rules of "Automatically ajaxifying links on a web page", they work fine before I update the table through ajax, but when the table get updated, they stop working, I tried to call

$(document).controls();

but I get an error when I click on the link that says:

Uncaught TypeError: Cannot call method 'prepend' of undefined

following the debugger in chrome, it's complaining about this line:

parentHandle.prepend(new FocusCatcher(this.__handle, true));

Could you help please.

Thanks!

Tab key navigation restriction

When the modal is opened, if you press Tab or Shift + Tab you can focus all the underlying elements.

From a UX point of view, if the purpose of a modal is to catch the user's attention and get something resolved through an action, so it would be extremely useful to restrict the tab key navigation to the focusable elements of the modal.

A quick approach to the logic behind it could be:

1. Listen to the keydown event in the modal DOM element (childs will bubble up)
2. Check each time that the focused element is one of the modal's children
3. If it's not, return focus to the first focusable element (link, input or button)

error when option 'content' has selector

I want to load page from server and I use 'content':'url #selector", but an error occurs. I see the code the var rscript is not defined. is that should be ''' responseText.replace(/<script(.|\s)*?/script>/g, "")
// to avoid any Permission Denied errors in IE

.append( responseText.replace( rscript, "" ) )

z-index problem on ajax loaded content

The modal window using the ajax class is taking a higher z-index priority over jquery ui.

http://artistcolony.skattabrain.com/ - if click the blue Register button, you will see the issue as it pulls in the page. Clicking the "Date Of Birth" Field

Allow multiple button classes to be used

There are multiple additional classes for the buttons (success, info, danger). It would be nice if we could provide this (also in conjunction with #2)

Override buttons

I am not able to override the 'Cancel' button by adding my own buttons. My buttons show up, but so does the cancel button. The documentation and a previous issue says it will be override.

I know that I can remove it via Javascript, but I was really enjoying the html override capabilities and was hoping to use them.

dialog2.ajax-complete fires after dialog2.content-update

Documentation reads:

dialog2.content-update: when the dialogs contents are updated (after ajax-complete)