Form AJAX send inside a twitter bootstrap modal (Symfony2) - javascript

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();
});

Related

How to browse a video in local file on first page and play it on second page?

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>

jquery call not hitting the function in script.

I am trying to call a jquery function with nest json, AJAX and PHP and it does not seem to be hitting the function. I click on the button and nothing happens.
I added an alert to the head of the function and I never get the alert either.
I have a couple of declarations in the script. These are in the head section.
<script src="assets/js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
<script src="assets/js/vendor/jquery.3.2.1.js"></script>
<script src="assets/js/main2.js"></script>
I have tried including the functions in the head section and that does not work. Currently they are in the library at assets/js/main2.js.
I have tried multiple ways of calling the function including a button and anchor tags. Currently this is the section of the code that is relevant.
<div class="contact_content">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="contact_message wow fadeInLeft" data-wow-duration="1.5s">
<form action="#" id="formid">
<div class="form-group"> <input class="form-control" name="name"
placeholder="Name" required="" type="text"> </div>
<div class="form-group"> <input class="form-control" name="email"
placeholder="Email" required="" type="email"> </div>
<div class="form-group">
<div class="Descrizione">
<label for="InserisciDescrizione" class=""><b>Message</b></label>
<textarea class="form-control" id='message' placeholder="Type message:"
name='message' rows='6' cols='50' value=""
title="Message"></textarea>
</div>
</div>
<a id="submit" href="#" class="btn btn-primary">Submit</a>
</form>
</div>
Here is the actual Jquery that is supposed to touch off the nested AJAX and PHP.
$( '#submit').click(function jq1 () {
alert("Handler for .click function called");
doAjax();
}
)
It does not display the alert. It also does not execute the code. Am i supposed to set up a return to get the alert? When I click the submit button nothing happens.
Is there anything I have to set up on the web server? I am using Apache.
I changed the function call to an onclick in a button tag and nothing happens. It presses and depresses but the alert never pops.
Here is the function
<script language="javascript">
function test()
{ alert("Call"); }> </script>
and here it the button tag.
<button type="button" id="btnEmail" onclick="test()" class="btn btn-primary">Submit</button>
If I use a button tag it just presses. If I use an anchor tag it doesn't reload the page, but, it jumps to the top of the page.
Am I simple. This seems simple to me and it is not working.

Firefox mobile prevents input inside iframe

I'm trying to realize a fixed floating panel over my site that loads an iframe with a login form. It seems to work fine with every mobile browser except for firefox mobile (firefox desktop works fine) that prevents every kind of input.
When I try to write something (with stock keyboard on android 6.0.1) in a form inside an iframe it seems to buffer the text but nothing appear on input element. Moreover when I click on any input field outside my iframe, the whole text written before get attached in this field.
<img id="logo" src="icons/logo-little-BLACKBACK.png">
<div id="logingeneric" tabindex="-1" role="dialog" aria-hidden="true">
<div class="generic-dialog">
<div class="generic-content">
<div class="generic-header">
<h4 class="text-center">Login</h4>
</div>
<div class="generic-body">
<form class="form center-block" action="Home.php" method="post">
<div class="form-group">
<input id="email-field" name="username" class="form-control input-lg input-field" placeholder="Email" type="text">
</div>
<div class="form-group">
<input id="password-field" name="password" class="form-control input-lg input-field" placeholder="Password" type="password">
</div>
<div class="form-group">
<button class="btn btn-primary btn-lg btn-block" type="submit">Accedi</button>
</div>
</form>
</div>
<div class="generic-footer">
<span class="pull-right" id="registrati">
Registrati
</span>
<span class="pull-left">
Password dimenticata?
</span>
</div>
</div>
</div>
</div>
This is the body of the page loaded inside my iframe. How can I avoid this strange behaviour of Firefox mobile?
Thank you!
Eventually I got a solution. In our case we override the onResize event that is triggered on every input focus in order to correctly scale the floating panel. This led to a focus lost on every "zoom on focus" on firefox (a bug maybe?).
The solution is to avoid panel scaling if an input element is focused.

How to make an Submit button using Django Forms with html

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>

Replacing the JS confirm(...) box with a custom HTML one

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.

Categories

Resources