w3hello.com logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML Categories
Twitter bootstrap modal call controller action
Your code is perfect and it works for me after a minor change in the code. You are using # that represents the id not the class. $('#modal-body').html(data); replace # with . e.g $('.modal-body').html(data); Try this and enjoy............. EDIT............................................................................. $.ajax({ type: "GET", url: "${createLink(controller: 'mGMatrices', action: 'popup')}", data: "inputField="+$("[name='inputField']").val()+"&fieldName="+$("[name='fieldNAme']").val() }).done(function(data) { $('#modal-body').html(data); });

Categories : Ajax

how do I call a controller method on a button that displays a bootstrap modal?
I've got this in a modal and it works just fine: <%= form_for(Order.new, remote: true, html: {"data-type" => :json}, :validate => true) do |f| %> <%= f.check_box(:user_accepts, :class => 'acceptance') %> <%= f.hidden_field(:quantity, :value => p.quantity) %> <%= f.hidden_field(:price, :value => p.price) %> <%= f.submit "Confirm", :class => 'btn btn-primary orderconfirm' %> <% end %> With this coffeescript: jQuery -> $("form.new_order").on "ajax:success", (event, data, status, xhr) -> $('.modal').modal('hide') window.location.replace("/");

Categories : Ruby On Rails

Twitter Bootstrap: Set data to the parent div of Modal
Not entirely sure what you're doing, but it sounds like you are trying to figure the source of the click event. If "searchClient" is the "parent divs" you are talking about, you should change their IDs to classes (e.g. <div class="searchClient">) You could then do something like: var parentClicked; //i'm global! $('.searchClient').click(function(e) { parentClicked = e.target; ///etc.... });

Categories : Javascript

Implement twitter bootstrap modal window call html
you can achieve this by putting your HTML inside a file called remote.html, then run this: <a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a> Alternatively, you can insert HTML into the modal window using jquery, kind of like this: $('.modal-button').click(function() { var myHTML = "[YOUR HTML]"; $('.modal-body').html(myHTML); });

Categories : PHP

Twitter Bootstrap: Modal to modal switch
try this <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <link href="Styles/bootstrap.css" rel="stylesheet" type="text/css" /> </head> <body> <input type="button" name="name" class="btn btn-danger" value="open first modal" onclick="$('#modal1').modal('show')"/> <div class="modal hide fade" id="modal1"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> &times;</button> <h3> Modal 1 header</h3> </div> <div class="modal-body"> <a onclick="$('#modal1').modal('hide');$('#modal2').modal('show');" cl

Categories : Javascript

How to call method on presenting view controller from modal view controller
You call the method on the UIViewController that is your MainView, and pass it your UIViewController you want to be the ActionSheet. UIActionSheet *actionSheetController =[[UIActionSheet alloc] initWithTitle:nil delegate:self cancelButtonTitle:@"Cancel" destructiveButtonTitle:nil otherButtonTitles:@"show otherview", nil]; [self presentModalViewController:actionSheetController animated:YES ]; To dismiss the UIActionSheet, dimissWithClickedButtonIndex:animated: is a method for the UIActionSheet that you can implement. The method can be called by whoever (so if you want to dismiss it from your mainview have a reference to the action sheet and do something like -(void)actionSheet:(UIActionSheet *)actionSheet clickedButtonAtIndex:(NSInteger)buttonIndex { { switch (buttonIndex){

Categories : IOS

Twitter Bootstrap Modal within Modal?
Use the jQuery's method html() to replace innerHtml of your first modal by the text. Here is a JSFiddle Example where you only change the modal window's body. Here is another JSFiddle Example where you change all modal's content.

Categories : Javascript

Twitter BootStrap Modal and ASP.NET
There really is not point in using an asp:LinkButton if you are not going to do a postback and refresh the page. You need to use AJAX to update your values and show changes on your page if you do want to do a full postback to the server. A jQuery setup using a jQuery click event binding to a a html or and a jQuery AJAX call to a web service is the step in the right direction. Looking towards an UpdatePanel as a solution only creates unnecessary complexity and guides you in the direction of not understanding web applications fully. Since this is an older question I will assume you figured things out but if you haven't I show you some code examples of how to do it.

Categories : Asp Net

Twitter Bootstrap Modal submit button to submit and open modal in Rails
You should do an AJAX post and have an endpoint to receive the data. HTML: %a.btn{class: 'btn btn-inverse btn-large', id: 'submit-btn', :role => "button"} Press to Complete Visit #myModal.modal.hide.fade{"aria-hidden" => "true", "aria-labelledby" => "myModalLabel", :role => "dialog", :tabindex => "-1"} Javascript: $('#submit-btn').click(function() { $.ajax({ type: post, url: '/your-end-point', data: your_data, success: function() { $('#myModal').show(); } }) }) Rails: routes.rb post 'your_end_point' => 'your_controller#submit' your_controller.rb def submit # Save form data... render :json => 'success' end

Categories : Ruby On Rails

Why this Twitter Bootstrap 3 Modal Won't Fade?
Firstly, thanks for the comments above. In the end I commented out some unnecessary javascript includes and that solved the problem. Presumably it was a namespacing issue? Interesting to see that it could manifest in such a subtle manner.

Categories : Javascript

Twitter Bootstrap Modal example does not work for me
You are missing a reference to bootstrap.js orbootstrap.min.js which you need in addition to the bootstrap.min.css file that you have already referenced. See this updated working fiddle http://jsfiddle.net/cKH8X/2/

Categories : Jquery

Twitter bootstrap modal URL arguments
http://getbootstrap.com/javascript/#modals tells you $('#myModal').modal('show') opens a window manually. So with your modal got id="myModal", try this: //from: http://stackoverflow.com/questions/3788125/jquery-querystring function querystring(key) { var re=new RegExp('(?:\?|&)'+key+'=(.*?)(?=&|$)','gi'); var r=[], m; while ((m=re.exec(document.location.search)) != null) r.push(m[1]); return r; } var querystring = querystring('modal'); if (querystring.length && querystring[0]==='true' ) {$('#myModal').modal('show');} This will open the modal when ?modal=true is has been set. Reference: jQuery querystring

Categories : Javascript

Twitter Bootstrap Modal Not Working in DNN
You might try adjusting the z-index for .DnnModule that class has a z-index of 900 something and always causes problems. In my skins I always set it at 100 You can see a sample of one of my skin.css files at https://multifunction.codeplex.com/SourceControl/latest#skin.css

Categories : Dotnet

twitter bootstrap - creating a two panel modal
Try putting a row-fluid inside the modal-body, and then 2 span6 inside that.. <div class="modal-body"> <div class="row-fluid"> <form class="span6"> </form> <div class="span6"> </div> </div> </div> You may also want to increase the default width of the modal.. .modal { width:45%; left:45%; } Demo on Bootply: http://bootply.com/69517

Categories : CSS

Hide Modal in Twitter Bootstrap when clicked
From bootstrap doc : Manually hides a modal. .modal('hide') $('.modal').modal('hide') So if you want to hide it on click you can bind this action to the click event $('#yourid').on('click' , function() { $('.modal').modal('hide') }); if you want to hide it after some second that you loaded the document you can try with a timeout $(function(){ //document ready .. .. //your code .. setTimeout(function(){ $('.modal').modal('hide') }, 2000); //2000 = 2 second .. }) UPDATE 1 To bind it on the close button give him a class or id <a href="#" class="btn closebtn">Close</a> now $('.closebtn').on('click',function() { $('.modal').modal('hide'); }); If you want to bind only on that close button use an id instead of a class

Categories : Javascript

Link to a modal on another page twitter bootstrap
Ok So I have managed to resolve this (quite easily in the end). Helps if you actually think things through. SO the solution is as follows On Index.php <li><a href="<?php echo site_url('site/invoice#mdx');?>" data-toggle="modal" title="">Open order screen</a></li> On invoice.php Add this to the end of the document <script> $(document).ready(function () { var hash = window.location.hash; if (hash == "#mdx") { $('#myModal').modal(); } }); </script>

Categories : Twitter

Twitter bootstrap Modal with Asp.net Webforms disappears
You need to move your UpdatePanel tags; where you have them at the moment you are enclosing the entire modal where you need to be only enclosing the modal content. For example: <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> <a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a> <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:TextBox ID="txtMessage" runat="server"></asp:TextBox> <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> <asp:Butto

Categories : Twitter

enable anchor in twitter bootstrap modal
It might be in the way you are marking up your modal. Could also be some custom JS that you are using in your project. Notice I didn't apply the .ext_link class not did I use any custom JS to get the anchor to work. Check this working example It's a simple copy and paste from the documentation. Please note that this is Bootstrap 2.3.2 HTML: <!-- Button to trigger modal --> <a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a> <!-- Modal --> <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="myModalLabel

Categories : Jquery

twitter bootstrap modal with popover inside
As far as I can tell, the show event of the popover is propagating from the #myModal div, so the event handler: // should fire when modal only $("body").on("show", "#myModal", function(){ alert('modal on show event'); }); is firing correctly. As a workaround, the following will only alert if the modal is shown: // should fire when modal only $("body").on("show", "#myModal", function(e){ if ($(e.target).hasClass("modal")) { alert('modal on show event'); } });

Categories : Jquery

How to render a `pdf file` in a modal in twitter bootstrap?
It would be relatively similar to using the JQuery UI dialog. (http://jqueryui.com/download/) You include these scripts inside tag <link href="css/smoothness/jquery-ui-1.9.0.custom.css" rel="stylesheet"> <script language="javascript" type="text/javascript" src="jquery-1.8.2.js"></script> <script src="js/jquery-ui-1.9.0.custom.js"></script> JQuery code <script language="javascript" type="text/javascript"> $(document).ready(function() { $('#trigger').click(function(){ $("#dialog").dialog(); }); }); </script> HTML code within (using an iFrame to load the PDF) <a href="#" id="trigger">this link</a> <div id="dialog" style="display:none"> <div> <iframe src="yourpdffile.pdf"

Categories : Twitter

Twitter Bootstrap - Center Modal Dialog
This is just matter of applying some CSS to the pleaseWaitDialog ID. You have to set position:absolute and the margin-top and margin-left need to be half of the height and width. So your CSS should look something like this: #pleaseWaitDialog { width: 400px; height: 50px; position: absolute; top: 50%; left: 50%; margin-top: -25px; margin-left: -200px; padding: 20px; } You will need to play with the numbers in order to achieve the box size that fits what you want but that should get you started.

Categories : Twitter

reset Twitter's Bootstrap 2.x modal in Angularjs
Looking to the javascript plugin code. The tooltip and popover both have a destroy function. For some reason the modal lacks such function. Try to add a destroy function to the modal plugin or destroy your modal in the same way: , destroy: function () { this.hide().$element.off('.' + this.type).removeData(this.type) } Callback function after tooltip / popover is created with twitter bootstrap? shows you how to extend the plugin functions. In this case you could extend the hideModal function. var tmp = $.fn.modal.Constructor.prototype.hideModal; $.fn.modal.Constructor.prototype.hideModal = function () { tmp.call(this); /*reset your modal here */ } After the modal has been hide you could reset the form input and remove the class. See:

Categories : Twitter

ember twitter bootstrap modal dialog
Lots have been discussed on this. There was a post by Adam Hawkins. And some pullrequests regarding this, PR1, PR2 There is a discuss thread too on this. Inspired by all these, Here is the latest Jsbin for Ember-Bootstrap Modals

Categories : Twitter

Twitter bootstrap modal backdrop not working in IE
While making a jsFiddle, i traced the problem to the bootstrap CSS file i was using. I am not sure how but it was missing some CSS. I changed to the correct version, and it's now working fine in IE.

Categories : Jquery

jQuery working with Twitter bootstrap modal
edit: Okay I missunderstood the question, check out this code it should add your wanted behaivour, but also consider saving the state in a cookie or something otherwise every refresh would kill the state or if needed take appropriate server side handling if this buttons are meant to be only clicked once $(document).ready(function(){ $(document).on('click', ".paid-custom", function() { $(this).addClass('active'); $('#paid-custom-modal').modal().find('btn-primary'); }); $(document).on('click', ".paid-custom-confirm", function() { $('.active').html('CLICKED'); $('#paid-custom-modal').modal('hide'); }); $(document).on('click', ".paid-custom-cancel", function() { $('.active').removeClass('active'); $('#paid

Categories : Jquery

angularjs twitter bootstrap modal not showing
It's normal, you should use directive for this components. You can use angular-strap directives http://mgcrea.github.io/angular-strap/#/modal or angular-ui http://angular-ui.github.io/bootstrap/#/modal

Categories : Javascript

Twitter Bootstrap: Modal Wont Fire
After some investigation, I believe you're not including all of the bootstrap files you need. Correct me if I'm wrong, but I couldn't find bootstrap-transition.js, which is definitely required for modal usage: http://getbootstrap.com/2.3.2/javascript.html#transitions Hope this helps!

Categories : Jquery

Making Twitter Bootstrap Modal window bigger
When we show images with bootstrap modal, we use the following css: #myModal { max-height: 80%; overflow-y: auto; .modal-body { max-height: none; text-align: center; } } And then just do $('#myModal').modal("show"); The crux is setting the max-height on .modal-body to none.

Categories : Javascript

How to make Twitter bootstrap modal full screen
The following class will make a full-screen modal in Bootstrap: .full-screen { width: 100%; height: 100%; margin: 0; top: 0; left: 0; } I'm not sure how the inner content of your modal is structured, this may have an effect on the overall height depending on the CSS that is associated with it.

Categories : CSS

Twitter Bootstrap 3 modal: image not resizing vertically
I think I see the problem. Your image doesnt have a height, it only has a width. <img class=""src="img/project_image.png" width="100%" style="" /> but the real problem starts here. If you put height at 100% the image might look distorted. So you might want to write a JQuery for the image. Something like, when the window height is this big, the image use height="100%" and when the window width is this big use width="100%"

Categories : CSS

Twitter bootstrap form-horizontal inside a modal
My working code: <div id="deleteGroupForm" class="modal hide fade in"> <form method="POST" action="${home}/administrator/groups" class="non-margined"> <input type="hidden" name="_method" value="DELETE" /> <input type="hidden" class="id-holder" name="id" value="" /> <div class="modal-header"> <button type='button' class='close' data-dismiss='modal'>×</button> <h3><spring:message code="delete" /></h3> </div> <div class="modal-body form-horizontal"> <p><spring:message code="delete.confirmation" /></p> <div class="alert"> <strong><spring:message code="warning" />!</strong>&

Categories : Twitter

Twitter bootstrap modal hidden event only fires once
Couldn't figure this out - everything looks OK, but there's a fair amount of js being added by the rails pipeline so I couldn't exclude the possibility something was interfering with my js. Now using jquery's native modals instead.

Categories : Javascript

Open specific page in twitter bootstrap modal
Try this instead: Markup: Create a placeholder DIV to show the modal content within, like this: <a data-target="#myModal" class="quick-btn" data-toggle="modal" href="/SystemSettings/NewUser.aspx">Click Me</a> <div class="modal hide fade" id="myModal"> </div> JavaScript: Add the .aspx page's content to an iframe, like this: $(document).ready(function() { $('[data-toggle="modal"]').click(function(e) { e.preventDefault(); var url = $(this).attr('href'); $(".modal-body").html('<iframe width="100%" height="100%" frameborder="0" scrolling="no" allowtransparency="true" src="'+url+'"></iframe>') }); });

Categories : C#

Jquery validate messages on Twitter Bootstrap modal?
I've made it myself.... thanks anyway http://jsfiddle.net/dzorz/Q585q/ just added this to last if: $('<div id="errors"/>').html(errors).appendTo('.modal-body'); $('#errorModal').modal('show');

Categories : Jquery

How to resize and animate Twitter's Bootstrap 2 modal window?
What should trigger the resize? Look here: http://stackoverflow.com/a/245011/1596547 You can use this to resize your modal. See: http://bootply.com/71672 For Twitter's Bootstrap 3, see: http://stackoverflow.com/a/18042644/1596547 html: <div class="container"> <!-- Button to trigger modal --> <a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a> <!-- Modal --> <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button> <h3 id="myModalLabel">Modal header</h3> </div> <div class="modal-body">

Categories : Twitter

Django application does not properly load Twitter bootstrap 3 modal
I solved this issue by defining my modal code outside the ul tags, I put my modal code just after start of the body tag and it worked for me. This is my code <!-- Modal 1 --> <!-- define the sign up modal finished --> <!-- sign up modal --> <!-- Modal --> <div class="modal fade" id="signup"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title">TrackLeech Sign Up</h4>

Categories : Django

Twitter bootstrap input tooltip on modal. Focus not working
I think you have problem in displaying tooltip for the form input that are displayed inside the modal. See the problem here is that the tooltips are displayed even for the inputs inside the modal but as the z-index of modal is greater than the toopltip you would not be able to see them. I changed the z-index of the tooptip element and now it is working, so you can refer this JSFIDDLE to see a live example HTML : <input type="text" data-trigger="focus" data-toggle="tooltip" data-container="body" data-placement="right" data-title="Foo"> <br> <input type="text" data-trigger="focus" data-toggle="tooltip" data-container="body" data-placement="right" data-title="Bar"> <br><br> <!-- Button trigger modal --> <a data-toggle="modal" href="#myMo

Categories : Jquery

Unable to change options for Twitter Bootstrap modal WHILE visible
Here is an example of how you should use it. $('#my-modal').modal({ show : true, keyboard : true, backdrop : true }); You can also find this question answered here: How do I specify multiple javascript modal parameters with Twitter Bootstrap?

Categories : Javascript

Twitter Bootstrap Modal remote function not working properly
try $('#myModal').empty() in the first line of your popIt function. it might be cause of delay in getting response from the server if not you could try fusing a get request and the modal e.g., $.get(url,function(data){ $('#myModal').html(data) }

Categories : Javascript

Multiple fields with Twitter's Bootstrap typehead inside a modal
I found the same problem (looks like some kind of a bug, see: https://github.com/twitter/bootstrap/pull/8436 for a possible fix). The menu with options gets a css top with position absolute. When using the typeahead in a modal the scroll height is not used in the calculation of the top. This issue has been fixed in: https://github.com/bassjobsen/Bootstrap-3-Typeahead The scrolling of the modal cause the problem not the use of multiple fields (with typeahead). The best solution i found (update!): function scrollHeight() { return $('.modal-body').scrollTop(); } $.fn.typeahead.Constructor.prototype.show = function () { var pos = $.extend({}, this.$element.position(), { height: this.$element[0].offsetHeight }) this.$menu .insertAfter(this.$element)

Categories : Javascript



© Copyright 2017 w3hello.com Publishing Limited. All rights reserved.