First of all I am new to this joomla CMS. I have a joomla project. here i have customized the userprofile plugin and added some more fields .
in registration form i need an extra button named "Save for later ". thus my form contains 3 button ( save for later, Register and cancel )
i need to write a javascript function in the onclick event of "save for later button ".
So i have done
In components/com_user/views/registration/tpl/default.php I have created a button as in normal way. and wrote a javascript function call on this
<input type="submit" class="validate" value="Save For Later" name="SaveDraft" onclick="fnSaveDraft()">
At the top of the page i write the function
<script language="javascript" type="text/javascript">
function fnSaveDraft() {
alert('hai');
return false;
}
</script>
But nothing happend
Please advise me
I would like to suggest you to that don't change the core file unless you really needed.You can use the template overridden method for task.For detail go to that link.
How to override the output from the Joomla! core.
And for your problem your are using the input type as submit that why your form will submitted and your function was not call. You can use type as button then your task will be done.Replace your input field with this.
<input type="button" class="validate" value="Save For Later" name="SaveDraft" onclick="fnSaveDraft()">
Related
I have a django register form .On the event of an invalid form submission, page is reloading.I need to stay on that same page if the data entered is invalid.
Is there any way to get this done without ajax ?
If not, how to do this with ajax
Well if you want to validate the data before submitting then you can just use plain javascript to validate the values and update your html displaying output as shown below.
Consider this below form.
<form>
<input id="target" type="text" value="">
</form>
<div id="other">
Trigger the handler
</div>
Use below script
<script>
$("#target").keyup(function () {
console.log(this.value);
});
</script>
In above script once you get the value you can write the logic to valid the same and update you result in html accordingly.
NOTE: Main point here is the event handler as you type anything it calls the function.
Obviously this may not be the best way to achieve this but consider this as demonstration.
I am using Django and Bootrap 2.32. I want to include this wysiwyg-bootrap-themed text editor: http://mindmup.github.io/bootstrap-wysiwyg/. The usage of this editor is fairly simple, including
$('#editor').wysiwyg();
in the JS-declaration will render each
<div class=editor></div>
into a beatiful wysiwyg text-editor.
Now the problem: I want to include this editor into one of my django form field. I have the single form:
class Article_Form(ModelForm):
Article_text = CharField(widget=Textarea(attrs = {'id' : 'editor'}))
class Meta:
model= Article
, whereas the Article model includes one simple CharField . Is there any chance, to get the editor work inside the Article_text form-field? With the above-mentioned widget, the created textarea cannot be controlled by the wysiwyg-editor-control buttons. Wrapping the form-template-tag like this
<div id="editor">
{{ Article_Form.Article_text }}
</div>
doesn't work either. The problem thus is that Django creates a textarea, wheras the editor would need a <div> to render correctly. Do you guys have any idea how to get this to work (without refering to django-wysiwyg).
Thanks!
I don't know enough about Django but I wrote the editor you're referring to, so here's a suggestion. Assuming the other answer on this page is correct and you can't generate a div directly, you can generate a text area using whatever Django templates you would normally do, then assign two events:
1) page onload event that would copy the textarea contents into the div, something like
$('#editor').html($('#textarea').val())
2) form onsubmit event that would reverse copy the current div contents into the textarea before it gets submitted
$('#textarea').val($('#editor').html())
Take a look at this.
Summernote is a simple WYSIWYG editor based on Twitter's Bootstrap.
django-summernote plugin allows you to embed Summernote into your Django admin page very handy.
https://github.com/lqez/django-summernote
Are you sure that this "plugin" doesn't work with textarea?
{{ Article_Form.Article_text }}
will be rendered to something like:
<textarea cols="40" id="id_Article_text" name="Article_text" rows="10"></textarea>
So there is a chance that you can initialize the wysiwyg editor like:
$('#id_Article_text').wysiwyg();
However after checking the plugin, I doubt that would be possible since it is using contenteditable="true" attribute of HTML5 and probably the plugin works with div only.
So there is no way you can make it work natively with Django form. The solution should be display other fields of your form manually, hide the one with textarea and display the editor instead:
<form action="" method="POST">
{{ Article_Form.field1 }}
{{ Article_Form.field2 }}
<div class=editor></div>
{% csrf_token %}
<input type="submit" value="Submit" id="submit-btn" />
</form>
Then you can use JS to submit your form:
$('#submit-btn').click(function (e) {
e.preventDefault();
$.ajax({
// do your magic here.
// note that you can get the content of the editor with: $('#editor').cleanHtml();
})
});
This way is hackish I agree so I don't recommend you go for it, just find other plugin then. Also please read PEP 8 carefully.
Hope it helps.
Take a look at this repo: https://github.com/rochapps/django-secure-input
I think it solves most of your problems.
I have a simple form that I want to be shown on a button click. i.e a button says "Add new User", then a the page expands and a form is shown, after the user finishes work with the form the form collapse back and a message is shown to the user.
The first problem i am facing is:
using this code
function AngularUI($scope, $window) {
$scope.collapse = function (selector) {
angular.element(selector).collapse();
}
}
and
<div class="ang-ui-test">
<button ng-click="collapse('#collapsible')">
using angular.element
</button>
<div id="collapsible" class="collapse">
some thing in here ...... !
</div>
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
simple collapsible
</button>
<div id="demo" class="collapse in">This one work properly</div>
</div>
the second one that does not uses angular.element.collapse works properly.
The second problem is : how do I test the behavior mentioned above.
on the first button press, the one that uses angular.element if the div is hidden it is shown but, it does not hide the collapsible after it is shown.
( i.e a button says "Add new User", then a the page expands and a form is shown, after the user finishes work with the form the form collapse back and a message is shown to the user.
thanks in advance.
You're doing it wrong. It's bad juju to do DOM manipulations in the controller because you are trying to look for / manipulate the DOM before it had a chance to render/refresh/update. Think of all the JS in the controller being executed in it's own phase, and THEN all the HTML is updated to reflect the final model state.
Try using ng-class="{collapse:someBoolExpression}"
You could also take a look at ui-hide, ui-show and ui-toggle (from AngularUI, but I think we should probably add a ticket to let you customize the class used.
Try to get the mindset of doing DOM manipulation manually out of your head. It takes a while, but once you get used to it your development speed picks up exponentially. When you finally hit a wall where Angular can't already do the job for you, start reading up on directives and checkout AngularUI's source code for some good, commented examples.
When i create a new form in sitecore by using the sitecore webform for marketer module.the form already have a default submit button , but i want to add another button like clear form function.
How could i add a new button in the form design backend?
Thanks.
I don't believe there's a built-in way to add a clear button, but you should refer to the WFFM User Guide (PDF link) on the SDN on how to use the Form Builder GUI to add fields and buttons/actions.
There's not a built-in way to add a clear button,but you may customize via jquery:
1.add a sublayout(ascx) page ,then do following
<div class="myDiv sub">
<sc:Placeholder ID="phForm" runat="server" Key="Form" />
<asp:HiddenField runat="server" ID="hfCancelButtonText" ClientIDMode="Static" />
<div class="clear"></div>
</div>
Then do following in jquery
//adding reset-button in web-forms
if ($('.scfForm .scfSubmitButtonBorder').length > 0) {
$('.myDiv .scfForm .scfSubmitButtonBorder').prepend('<input type="Reset" class="reset-button" />');
}
//adding reset-button text in My-Account web-form
var $hfCancelButtonText = $('.myDiv').find('#hfCancelButtonText').val();
$('.my-account-detail').find('.reset-button').val($hfCancelButtonText);
I know how to pass a next get parameter to a view so that when the view redirects, it goes to whatever url is in next. Is it possible to do this with the cancel button of a form?
If my form buttons are like this:
<input type="submit" value="Save Changes"><input type="button" value="Cancel Changes" onclick="window.location.href='/systems/'">
Is there some way to add the next parameter into the href instead of /systems/?
Thanks!
Well, this is just HTML in your template, so why can't you do
onclick="window.location.href='{{ myurl }}'">
?
Edit after comment
Sounds like you need a context processor, which automatically adds the value of the next GET parameter to the context. As simple as:
def get_next(request):
if 'next' in request.GET:
return {'next': request.GET['next']}
Now add this to the list of CONTEXT_PROCESSORS in settings.py, and make sure you use a RequestContext when rendering your template (or just the new render() shortcut).