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/
Related
I am using a jQuery pop-up script Magnific Popup. It works well in a WooCommerce store but when I filter products using an Ajax Filter Plugin (YITH) it stops triggering. I understand this is because Ajax has changed the page and so the event is no longer bound to the link class in the page but not sure how to solve it.
From what I have read I can use on but I am unsure how this applies to the way I am triggering the Magnific Popup script which is below.
jQuery('.product').magnificPopup({
type:'inline',
midClick: true,
gallery:{
enabled:false
},
delegate: 'a.wpb_wl_preview',
removalDelay: 500, //delay removal by X to allow out-animation
callbacks: {
beforeOpen: function() {
this.st.mainClass = this.st.el.attr('data-effect');
}
},
closeOnContentClick: false,
});
Thank you all. I have found there is a jQuery function to detect when Ajax has been executed which is below. Not sure if this is the best method, so interested to see other answers but this works.
jQuery(document).ajaxSuccess(function() {
//code to trigger here
});
Does anyone have any viable suggestions for the replacement of the showModalDialog() functionality in Chrome 37? I understand that there is the path until May 2015, but that's not 'viable' in my opinion, and if I can avoid changing everything to window.open() functions that would be great.
Do you have some of the code you are tying use? I see you've tagged jQuery. So I will provide a jQuery answer.
You can use the following code to 'open' or 'show' a jquery Dialog
$(divSelector).dialog('open');
$(divSelector).dialog({
autoOpen: false,
width: 200,
modal: true,
closeOnEscape: true,
draggable: false,
resizable: false,
buttons: {'Ok': function(){
$(this).dialog('close');
}}
});
the .dialog('open') will trigger the dialog to open up. I am not sure how difficult it would be to wrap your dialog div in the $(divSelector).dialog tags and include the jQuery UI css and javascript into your application.
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.
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...
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.