C5-8.0+ How to make PNotify text input form?
Permalink
Following this:
https://documentation.concrete5.org/tutorials/how-to-create-alert-no...
I have an image in the add block form. I want to click on the image to pop up a form with a text input to save on clicking the form 'Save' button. How can I make such PNotify text input form in Concrete5?
Thank you.
https://documentation.concrete5.org/tutorials/how-to-create-alert-no...
I have an image in the add block form. I want to click on the image to pop up a form with a text input to save on clicking the form 'Save' button. How can I make such PNotify text input form in Concrete5?
Thank you.
Oh, I missed the point I could use PNotify directly. Thank you for pointing that out.
This works:
This works:
var form = $( '<form class="text-form" id="text_form">' + '<div class="form-group">' + '<input type="text" name="text">' + '<button type="button" name="cancel" class="btn btn-secondary" style="width: 100px;">Cancel</button>' + '<button type="button" name="save" class="btn btn-secondary" style="width: 100px;">Save</button>' + '</div>' + '</form>' + ); notice = new PNotify({ title: 'Enter text', text: form, icon: 'fa fa-question', addclass: 'custom', hide: false,
Viewing 15 lines of 30 lines. View entire code block.
anyone know how to make the notice buttons to work?
The following throws a "notice.close is not a function":
If I change notice.close() to notice.remove() [although the documentation says Alias for close(). (Deprecated)], the notice does get closed but instead of appending a single <p>, it appends multiples <p>: one with entered text and empty ones adding +1 after every new click on a new notice.
The following throws a "notice.close is not a function":
$('#text_form button[name=cancel]').on('click', function(){ notice.close(); }); $('#text_form button[name=save]').on('click', function(){ $('#map').append('<p class="tip_text">' + $.trim($('#text').val()) + '</p>'); notice.close(); });
If I change notice.close() to notice.remove() [although the documentation says Alias for close(). (Deprecated)], the notice does get closed but instead of appending a single <p>, it appends multiples <p>: one with entered text and empty ones adding +1 after every new click on a new notice.
when writing notice = ... you forgot to declare notice with var. So it should be var notice = ...
Also, did you check if the doc you read applies to the version shipped with C5?
Last but not least, what you say is a bit weird because the paragraphs are appended independently of the close() function. The close happens after appending the paragraph, they are not linked to each other. So why would it interfere in that way? Are you sure you don't have something else at play here?
Also, did you check if the doc you read applies to the version shipped with C5?
Last but not least, what you say is a bit weird because the paragraphs are appended independently of the close() function. The close happens after appending the paragraph, they are not linked to each other. So why would it interfere in that way? Are you sure you don't have something else at play here?
Did you check their demo page? There's a forms example with codehttps://sciactive.com/pnotify/#demos-simple...
The problem is actually not related to PNotify.
The buttons are created as
and I'm listening for
BUT (!) C5 actually creates <input> elements, NOT <button> elements.
So changing button for input fixes that:
Any reason why buttons are created as inputs?
The buttons are created as
$form->button("cancel"...
and I'm listening for
$('#text_form button[name=cancel]').on('click'...
BUT (!) C5 actually creates <input> elements, NOT <button> elements.
So changing button for input fixes that:
$('#text_form input[name=cancel]').on('click'...
Any reason why buttons are created as inputs?
That's just the way it is. If you look at the form helper it creates inputs of type button.
But you don't have to use it. You can just add the button manually if you prefer.
And you can also rewrite your code like this
It should work and then button or input, it won't make a difference.
But you don't have to use it. You can just add the button manually if you prefer.
And you can also rewrite your code like this
$('#text_form [name=cancel]').on('click'...
It should work and then button or input, it won't make a difference.
The tutorial explains how to use them in the context of Concrete5's wrapper around them. These wrappers are built specifically for c5 purpose.
If you want to use pNotify specifically to do what you want, you should look at the explanation titled "Using PNotify Directly" in the tutorial. And then you should look at pNotify's documentation in Github to see how to achieve what you want.
If it's not possible you might want to try with the other one, based on jQueryUI. Again you'll have to look at jQueryUI's doc and use it directly. Here's where it shows how to add a form to the dialog:http://jqueryui.com/dialog/#modal-form...
Alternatively, depending on what you're trying to achieve, there might be an easier way. For instance, if what you need is a normal text input why not simply use a normal JS prompt() method?