The project I'm working on renders several pages (such as login pages and signup forms) as modals, which is accomplished by giving those links the class .modal so the following piece of JavaScript would trigger:
$('.modal').click(function(){
var url = this.href;
var dialog = $('<div id="modal" style="display:none"></div>').prepend('#barhappy_container');
dialog.load(url, function(){
dialog.dialog({
modal: true,
draggable: false,
position: 'center',
dialogClass: 'no-title',
width: 'auto',
/* height: 'auto', */
resizable: false,
open: function(){
$.getScript('/assets/modal/in-modal-open.js');
},
close: function(event, ui){
dialog.remove();
}
});
});
return false;
});
However, I now need a page rendered by a Controller to display the same way, but there's no link to click that can be given the class .modal.
So, is there a way to call this JavaScript function from my Rails controller and pass it the proper parameters?
Figured it out!
I added a js file to my contact_messages view folder called create.js.erb.
Then I had my Contact Messages controller activate that js file with a respond_to block.
Inside the js file, I called a variation of the modal function...
Related
I have been searching myself silly for this and can't find anything to help.
I want to add 2 buttons to my nav_menu one for register and one for login.
also i want it to popup with the ajax and can't seem to find that either.
I don't want to use the pages for registration or login.
Can somebody help me on this.
Thank You
You can accomplish this in a few ways. I would suggest using jquery/javascript to bind to those menu options and use jquery dialog to view the page in a popup.
$("#dialog").dialog({
autoOpen: false,
position: 'center' ,
title: 'EDIT',
draggable: false,
width : 300,
height : 40,
resizable : false,
modal : true,
});
$("#loginOption").click( function() {
$("#dialog").load('path/to/file.html', function() {
$("#dialog").dialog("open");
});
});
jQuery Dialog Docs: https://jqueryui.com/dialog/
Here are my routes:
ExtractCreator.Router.map(function () {
this.route('filter', { path: '/' }, function () {
this.route('geog_levels');
});
});
Here's my view which creates the jquery ui popup:
ExtractCreator.FilterGeogLevelsView = Ember.View.extend({
didInsertElement : function(){
var controller = this.controller;
$('#filter-dialog').dialog({
modal:true,
stack: false,
title: "Geogography Levels Filter",
close: function(e,ui) {
controller.transitionToRoute('filter');
},
}).dialog("moveToTop");
}
});
And the template:
{{#each geog_level_group in model}}
<h3>{{geog_level_group.label}}</h3>
{{#each geog_level_filter in geog_level_group.geog_level_filters}}
<div {{bind-attr class="geog_level_filter.disabled?:disabled"}}>
<label>{{geog_level_filter.label}} - {{geog_level_filter.id}}</label>
{{input type="text" value=geog_level_filter.label }}
</div>
{{/each}}
{{/each}}
I'm binding the inputs to my model in the template, but whenever I type anything in the input field it doesn't update anywhere else on the page, nor does it show as updated in my (chrome) ember inspector's view of the model.
If I change the value manually from the ember inspector, then it updates inside the popup correctly.
If I take it out of the popup (or just remove the popup code), then everything binds correctly and the label will update when I change the input value.
How do I get correct binding behavior to work from inside the dialog?
Well i faced once the same kind of strange behaviors and the problem is mayBe due to the didInsertElement with child views. (yes you some how have child views as you use an each and an ember {{input}} which is a view aswell).
One way which may solve your problem is tu run your modal after ember has finished to render everything in the queue. You may achieve this by modifying your code as follow :
didInsertElement : function(){
var controller = this.controller;
Ember.run.scheduleOnce('afterRender', this ,function(){
$('#filter-dialog').dialog({
modal:true,
stack: false,
title: "Geogography Levels Filter",
close: function(e,ui) {
controller.transitionToRoute('filter');
},}).dialog("moveToTop");
});
}
It turns out that the reason the binding wasn't occurring is that the jQuery-ui dialog function was appending the "#filter-dialog" element to the the body tag, but on creation of my Ember app I used the "rootElement" option to limit the scope of Ember to another div with id of "extract-creator".
My application creation code:
ExtractCreator = Ember.Application.create({
rootElement: '#extract-creator'
});
Using the appendTo option when creating the dialog, I can keep it within the scope of the Ember application:
ExtractCreator.FilterGeogLevelsView = Ember.View.extend({
didInsertElement : function(){
var controller = this.controller;
$('#filter-dialog').dialog({
modal:true,
stack: false,
title: "Geogography Levels Filter",
appendTo: "#extract-creator",
close: function(e,ui) {
controller.transitionToRoute('filter');
},
}).dialog("moveToTop");
}
});
An alternative solution would have been to remove the "rootElement" line from the Ember create option hash, making it default to the body tag.
Special thanks to Buck Doyle for posting a working JSBin in the comments.
I have this piece of code:
function onRegisterPostSucces(data){
$("#registerForm").dialog("close");
$("#registerDialog").text(data);
$("#registerDialog").dialog( "open" );
What I want to do is send register data from dialog form, and on success I want to close register dialog and open new dialog with information about creating a new account.
But in line with dialog("close") I got this error:
Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'
I tried following solutions:
$("#registerForm").dialog().dialog("close");
And
$("#registerForm").hide
But both didn't close the dialog - only hide that which was is dialog (for example inputs), dialog was still open. What I am doing wrong? Thank you in advance.
UPDATE Initialization:
$("#registerDialog").dialog({autoOpen: false});
$("#registerBar").dialog({autoOpen: false,
modal: true,
width: 400, height: 600,
buttons: {"Zamknij": function(){
$(this).dialog("close");
}}});
(...)
In #registerBar I have #registerForm:
$("#registerForm").submit(sendRegisterFormData);
function sendRegisterFormData(e){
var contextPath='<%=request.getContextPath()%>';
$.post(contextPath+"/login/AddUser", $("#registerForm").serialize(),
onRegisterPostSucces);
e.preventDefault();
}
And onRegisterPostSuccess I want to close the dialog. Button which triggered POST is not "dialog-owned" button.
I do not see where you instantiated your dialog, like so (as an example):
$("#registerForm").dialog("close");
function onRegisterPostSucces(data){
$("#registerForm").hide();
$("#registerBar").dialog('close');
$("#registerDialog").text(data);
$("#registerDialog").dialog( "open" );
// this is just an an example, you probably don't need this.
$("#registerForm").dialog({
autoOpen: false,
height: 300,
width: 300,
modal: true,
// etc.. other things
close: function() {
$(this).dialog("close");
}
});
My guess is that you didn't instantiate it yet or the 'this' reference is not correct? Sorry if I am offbase, as I do not have eyes on the full breadth of your code.
I have a JQuery UI modal:
$('#avatar-manager').click(function () {
$('#dialog').dialog('open');
return false;
});
$('#dialog').dialog({
autoOpen: false,
resizeable: false,
modal: true,
position: 'center',
width: 600,
open: function () {
$(this).load('/a/path/to/my/page.aspx');
}
});
And it works wonderfully. page.aspx (example name) contains my upload functionality for images. What I'd like to do is on completion of the upload, to redirect the user to another modal:
uploader.bind('FileUploaded', function (up, file, obj) {
alert("I've done uploading stuff...");
//redirect to another modal here...
});
I know I can't use windows.location and the like, because that will change the main parent window, so I'm not sure how - or even if I can - do this...
Have you tried simply close the current dialog and open another one?
$('#dialog2').dialog({
autoOpen: false;
modal: true
});
uploader.bind('FileUploaded', function (up, file, obj) {
$('#dialog').dialog('close');
$('#dialog2').html('Upload finished').dialog('open');
});
Edit:
You can refer to the dialog several ways depending on how you want to do it. If you want absolute reference, just use $('#dialog'); if you want a relative reference, you could make use of $.proxy(), apply() or call() to pass in the dialog as the substituting context, so you can use $(this) to refer to the dialog.
I have a button that when clicked loads an external page (same domain) in to a div and displays that div as a jQuery UI dialog box.
<div id="Dialog_box"></div>
<script type="text/javascript">
$(function() {
$("#Dialog_box").dialog({
autoOpen: false,
modal: true,
width: 500,
height: 400,
title: "Dialog",
close: function(event, ui) {
$("#Dialog_box").html(""); // Ensure the page is no longer loaded
}
});
});
function openDialog() {
$(document).ready(function() {
$("#Dialog_box").load("dialog.php").dialog('open');
});
}
</script>
<button onclick="openDialog();">Open Dialog</button>
The first time the button is clicked it opens fine. After closing it then it will no longer come back up.
First I verified that it was in fact being closed upon hitting the 'X'
$("#Dialog_box").dialog({
...
close: function(event, ui) {
alert("Closed");
}
});
And the alert was being shown. I then tried using my normal code but did not load in the page
$("#Dialog_box").dialog('open');
At this point, the dialog would open and close properly without any problems. Although I don't believe it should matter, I even tried separating out the load and dialog commands
function openDialog() {
$(document).ready(function() {
$("#Dialog_box").load("dialog.php");
$("#Dialog_box").dialog('open');
});
}
Once again, the box would display the first time but would not reappear after that.
My external file essentially looks like this
<link type="text/css" href="path/to/style.css" rel="stylesheet" />
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#Submit_button").click(function() {
// Do stuff with form data
// POST data without changing page
});
});
</script>
<form action=''>
// Input fields
<input type="button" id="Submit_button" />
</form>
Just for clarification, the problem occurs whether or not I post my form.
Why won't the dialog box re-open after I've loaded (and to my understanding, unloaded) a page in to it?
Remove the line to embed jquery.js from the external file.
This line will load jQuery again, overwrite the existing jQuery, what will destroy the already instantiated dialog-object, because it's registered in the overwritten jQuery-instance.
To clarify: you don't need to embed jquery and jqueryui again, because if you use $.load() the returned fragment will be a part of the DOM of the requesting document(they already exist there).
$(function() {
$( "#btnCallCompany" ).button().click(function() {
$( "#divOpenConversation" ).dialog({
autoOpen: true,
height: 500,
width: 650,
modal: true
});
$.get("/Conversation.aspx",function(data){
$( "#divOpenConversation" ).html(data);
});
});
});//end func