I have the follow modal form in Bootstrap, where the user insert data for add a new line but the p:commandbutton never executes lineaBean.insertar() and I don't know what it's doing this when I have a delete modal form that looks equal and works like a charm... any ideas? Here is my code:
<!-- Bootstrap trigger to open modal -->
<div class="hide fade modal" id="insertar-linea">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Alta de linea</h3>
</div>
<h:form class="form-horizontal well" id="form-insertar-linea">
<div class="modal-body">
<fieldset>
<h4>Número: </h4><h:inputText id="numero-form" class="validate[required]" value="#{lineasBean.numero}"></h:inputText>
<h4>Fecha Validacion: </h4><h:inputText id="fecha-form" class="validate[required]" value="#{lineasBean.fechaFact}"></h:inputText>
<h4>Publico: </h4>
<h:selectOneRadio id="publico-form" value="#{lineasBean.publico}">
<f:selectItem itemLabel="SI" itemValue="y"/>
<f:selectItem itemLabel="NO" itemValue="n"/>
</h:selectOneRadio>
</fieldset>
</div>
<div class="modal-footer">
Cancelar
<p:commandButton id="okInsertar" onclick="if($('#form-insertar-linea').validationEngine('validate')===false){return false;}"
styleClass="btn btn-primary ok" value="Ok" action="#{lineasBean.insertar()}"
oncomplete="checkCRUD(xhr, status, args)"/>
</div>
</h:form>
</div>
Finally I found the solution, I was setting up 'fechaFact' on my bean as Date type when I was passing a String... so I make a SimpleDateFormat for parse the String into Date in the method of Managed Bean.
Sounds similar to Unable to execute Backing bean method with the answer "When i made it Session scoped its working Fine."
Does this work for you, too?
try using actionListener instead of action to call the method when press p:command button
Related
I have a case like this, this is the first page:
FirstPage
On the first page i want to browse which video i will play on the second page. This is the view of second page :
SecondPage
What i want is when i choose which video that i will play, so the second page that already opened before, will automatically play the video without redirecting me from first page to second page.
What i've tried is i choose the video on first page by modal form, and pass the video name to monitor.php and on the monitor.php will showing the video name. Then on the second page im using interval function which checking every 1 second whether a post has occured on the monitor.php or not. But, the result is video wont playing on the second page. I've try to checking the video name value on monitor.php, the result is okay, but video still not running on the second page.
this is my code on first page :
<div class="modal fade" id="modalForm" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Tutup</span>
</button>
<h4 class="modal-title" id="labelModalKu">Pilih Video</h4>
</div>
<!-- Modal Body -->
<div class="modal-body">
<p class="statusMsg"></p>
<form action="../apps/coba.php" method="post">
<div class="form-group">
<label>PILIH</label>
<input name="filelocation" type="file" class="form-control" placeholder="Pilih File ..">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Batal</button>
<input type="submit" class="btn btn-primary" value="Simpan">
</div>
</form>
</div>
</div>
</div>
this is the code of monitor.php :
if (isset($_POST["filelocation"])) {
$src = $_POST["filelocation"];
echo json_encode($src);
}
and this is the code on the second page that checking every 1 second on monitor.php :
setInterval(function() {
$.post("../apps/coba.php", function( src ){
var videoNow = src;
showVideo();
}, "json");
}, 1000);
What is inside ../apps/coba.php? I assume this file runs your monitor.php file, but correct me if I'm wrong..
In $_POST are data that Php received in current HTTP request. Each time you make request (like sending <form> or using $.post()) this array will contains different data, independent of previous requests. In second page you send no post data, so $_POST will be always empty.
I assume both pages are opened on the same computer, so you can do this with Javascript only:
Open second page from first with window.open(), so you can have second page in variable:
<button type="button" onclick="var secondPage = window.open('secondPage.html')">Open second page</button>
Instead of sending form with post, run showVideo() function on second page:
<form onsubmit="secondPage.window.showVideo(this.filelocation.value);return false;">
<div class="form-group">
<label>PILIH</label>
<input name="filelocation" type="file" class="form-control" placeholder="Pilih File ..">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Batal</button>
<input type="submit" class="btn btn-primary" value="Simpan">
</div>
</form>
I am making a website in Django in which I am using Django Form ,an my fields are
admin = forms.BooleanField(
required=False,
widget=forms.CheckboxInput(),
label=(u'Admin for the account')
)
owner = forms.BooleanField(
required=False,
widget=forms.CheckboxInput(),
label=(u'Owner for the account')
)
In my html page I want a submit button,On clicking which it will show a pop up ,In which you have an OK button,On clicking which the value of owner (Checkbox) will go.
This is from the documentation of Form class
Note that it does not include the <form> tags, or a submit button. We’ll have to provide those ourselves in the template.
As for following additional functionalities:
In my html page I want a submit button,On clicking which it will show
a pop up ,In which you have an OK button,On clicking which the value
of owner (Checkbox) will go.
You will need to write custom javascript functions if you want to do this. You can use jquery plugin for this. There is more documentation on submitting the form using jquery and additional handling here.
You have to include submit button manually in the html.
Sample Code: Note that I used bootstrap Modal.
<form action="" method="post">{% csrf_token %}
<!-- your input field will go here -->
<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Submit</button>
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<input type="checkbox" name="user" value="user"><br>
<input type="submit" value="Okay">
</div>
</div>
</div>
</form>
I have a marketplace application, and in the payment page, there's a h:form with some validations on the fields. I have a h:commandButton to submit the form and perform an action in the back-end.
The code is this:
<div class="form-actions">
<h:commandButton onclick="setTimeout($('#adios').modal('show'),50)"
value="Pay!" action="#{basketManager.pay(accountManager.currentAccount.username)}"
class="btn btn-primary btn-lg"/>
</div>
The modal just displays a message. But I want this action to be performed after the h:form validations are correctly met, or even better, after the action inside the h:commandButton (which by the way is not working, it only works if I remove the onClick)
Any ideas?
EDIT: Thanks to #SRy for his advice, but there's still problems. This is my code now:
<div class="form-actions">
<p:commandButton oncomplete="$('#adios').modal('show')"
value="Pay!" action="#{basketManager.pay(accountManager.currentAccount.username)}"
styleClass="btn btn-primary btn-lg"/>
</div>
You Can use Primefaces commandbutton p:commandButton for easy execution or you can do somthing like this
<h:commandButton
value="Pay!" action="#{basketManager.pay(accountManager.currentAccount.username)}"
class="btn btn-primary btn-lg">
<f:ajax execute="#this" render="#form" onevent=showdlg();/>
</h:commandButton>
JavaScript
function showdlg(data){
if(data.status=='success'){
setTimeout($('#adios').modal('show'),50);
}
}
After trying every google and stackoverflow result for this, I've decided to ask for your help.
I'm building a Symfony2 app. Within every view of my app, I'm including a twitter bootstrap modal element, with a form that sends a suggestion/question mail. So, from my base twig template, I include this hidden modal.
Modal showing/dismissing works just fine. Modal contains my form, as desired.
What I'm trying to achieve from here is: AJAX submit of the form, mail sending in the controller, response to the view. With that response being json, and a success function to change html of the modal to "*dismiss_button*" + "Email sent" OR "There was a problem".
Seems fairly simple. Well, after trying most solutions out there, I'm not able to prevent the form from submitting. So I decided to keep it really really simple.
Here, the modal code:
<!-- 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">Send your suggestion</h3>
</div>
<div class="modal-body">
{% if is_granted('ROLE_USER') %}<p>We will reply to {{ app.user.mail }}</p>
{% else%}<p>Don't forget to include a reply-to email in your suggestion.</p>
{% endif %}
<form action="{{ path("mgfbc_arrt") }}" method="post" id="arrt">
<div class="control-group">
<label for="username">Text:</label>
<div class="controls">
<textarea id="mail" name="mail" rows="4" style="width:500px;"></textarea>
</div>
</div>
<div class="modal-footer">
<input type="submit" id="butt" class="btn btn-success" value="Send">
</div>
</form>
</div>
And, the JS:
<script type="text/javascript">
$("#butt").on('click', function(e) {
e.preventDefault();
});
</script>
After trying everything, I've reached the point in which THIS javascript does not prevent the form from submitting.
What am I doing wrong?
Thanks in advance.
#gomman Check up the following documentation: http://api.jquery.com/submit/
I think you need to cancel the submit-event of the form element to make it work the way you want.
#Fuser Although delegate() is a bit more readable to me, using on() or delegate() will do the same for this case. Citing jQuery documentation "As of jQuery 1.7, .delegate() has been superseded by the .on() method. For earlier versions, however, it remains the most effective means to use event delegation."
try this:
<form action="{{ path("mgfbc_arrt") }}" method="post" id="arrt">
<div class="control-group">
<label for="username">Text:</label>
<div class="controls">
<textarea id="mail" name="mail" rows="4" style="width:500px;"></textarea>
</div>
</div>
<div class="modal-footer">
<input type="submit" id="butt" class="btn btn-success" value="Send">
</div>
</form>
<script type="text/javascript">
$("#arrt").submit(function(e) {
e.preventDefault();
});
</script>
Don't use the on() function, instead use a delegate, try this:
$("#arrt").delegate("#butt", "click", function(e){
e.preventDefault();
});
I have a HTML button that goes to a page once it has been clicked and a JS confirmation button has been pressed:
<button onclick="return confirm("Are you sure?");
window.location="some_page.php"
type="button" class="btn">Some text
</button>
I want to replace the JS confirmation with a much nicer looking confirmation. I want to use Twitter's bootstrap Javascript 'modal' library (http://twitter.github.com/bootstrap/javascript.html#modal) to achieve this. I already have the HTML written to be the confirmation box:
<div id="modal" class="modal hide fade">
<div class="modal-header">
<h2>Some title</h2>
</div>
<div class="modal-body">
<form>
<fieldset>
<div class="clearfix">
<label for="something">Something</label>
<div class="input">
<input class="xlarge" id="something" size="30" type="text">
</div>
</div><!-- /clearfix -->
</fieldset>
</form>
</div>
<div class="modal-footer">
<input id="close" class="btn" type="button" value="Cancel" />
<input id="close" class="btn primary" type="button" value="Done" />
</div>
</div>
How to I get the onclick event to display my new popup rather than the standard JS confirmation?
Thanks so much :).
I use the jQueryUI Dialog in place of the standard confirm option http://jqueryui.com/demos/dialog/#modal-confirmation
You specify your own buttons in the modal, so you can have "Are you sure?" with buttons "Yes" and "No"
What about window.showModalDialog ?
You can either redefine confirm:
confirm = function(text,yes,no) {
// show the modal window
// set "yes" button to call yes()
// set "no" button to call no()
}
Or what I did, which is to define a custom function and use that instead. I used Confirm, since JS is case-sensitive, but you can use anything.