I have a modal window where I want to display an Autocomplete of Jquery UI, this object is inside a form that will then be sent with a submit button to a controller action
my modal window in my main view:
<div class="modal fade" id="agregarProducto">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Agregar Material</h5>
</div>
<form id="myForm">
<label>Producto</label>
<input type="text" class="form-control" name="nombreproducto" id="nombreproducto" autofocus="" />
<br />
<label>Precio Producto</label>
<br />
<input type="text" class="form-control" name="precio" id="idprecioproducto" />
</form>
</div>
<div class="modal-footer">
<input type="submit" value="Agregar Material" class="btn btn-primary" id="btnSubmit" />
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
my Javascript code in my main view calls a JsonResult method that looks for a product:
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
<script>
$(function () {
$("#nombreproducto").autocomplete({
source: "/Recepcions/BuscarProducto"
});
});
</script>
}
my controller:
public JsonResult BuscarProducto(string term)
{
using (DataContext db = new DataContext())
{
var resultado = db.Productoes.Where(x => x.v_Nombre.Contains(term)).Select(y => y.v_Nombre).Take(10).ToList();
return Json(resultado, JsonRequestBehavior.AllowGet);
}
}
How can I establish that by pressing the button that calls my modal window
Agregar Material
Can my modal window be displayed with the autocomplete my products?
I have to call the event from my button? Where do I put the Jquery code? It's the first time that I have to develop something like that ... what Jquery events do I have to handle?
PS: this implementation goes to my controller's JsonResult, but obviously it's not displaying anything, why?
any example or help for me?
What version are you using? If you are using these versions based on the documentation of JQuery UI Autocomplete, this might not work on your bootstrap modal due to conflicts.
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Try to use these versions on your Javascript code and it works:
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
Here is the screenshot based on your code:
Related
I have a form like this:
$(document).ready(function() {
$('#create_lop_monhoc_modal').on('show.bs.modal', function(event) {
var button = $(event.relatedTarget)
var tenmh = button.data('tenmh')
var mamh = button.data('mamh')
var modal = $(this)
modal.find('#input_tenmh').val(tenmh).trigger("change")
modal.find('#tenmh').text(tenmh).trigger("change")
modal.find('#input_mamh').val(mamh).trigger("change")
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="modal fade " id="create_lop_monhoc_modal">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<form action="/monhoc" method="POST">
<input type="hidden" value="" id="input_mamh" name="mamh" />
<input type="hidden" value="" id="input_tenmh" name="tenmh" />
<div class="modal-body">
<h4 id="mamh"></h4>
<div>
<div class="modal-footer">
<button type="submit" class="btn btn-success">Crate</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<button type="button" data-toggle="modal" data-target="#create_lop_monhoc_modal" data-tenmh="tenmh" data-mamh="mamh">
Open Modal
</button>
When i click 'Open Modal', the value of input hidden was put, but when i submit that form, the value of it is not submit. when i click back button of browser and submit again, this submit success!.
I dont know why, please help!!
I think my problem is caused by another javascript library, namely due to bootstrap-datepicker.js. Because when i click datepicker input, value of it is reset.
I solved this problem by remove datepicker and try submit again, and it is working.
In my question, i think I think that .trigger("change") is no longer needed:
modal.find('#input_tenmh').val('tenmh').trigger("change")
modal.find('#tenmh').text('tenmh').trigger("change")
modal.find('#input_mamh').val('mamh').trigger("change")
after that:
modal.find('#input_tenmh').val('tenmh')
modal.find('#tenmh').text('tenmh')
modal.find('#input_mamh').val('mamh')
Thank for all!
So I'm currently working on this project and I am stuck this problem. I tried looking at the console but it doesn't show anything when I clicked the button. What I'm trying to do is when I click the button, it will trigger the file input, but so far, when I clicked it, nothing happens, not even an error is shown.(The code is based on the answer in this question: Bootstrap form upload file layout) Can you guys help me find out what I did wrong
These are the codes
TabUploadDokumen.html
<script>
$(document).ready(function () {
/* Some code here */
});
$('#btn_IdentitasKTP/Paspor').on('click', function () {
$('#file_IdentitasKTP/Paspor').trigger('click')
});
$('#file_IdentitasKTP/Paspor').change(function () {
var file_name = this.value.replace(/\\/g, '/').replace(/.*\//, '');
$('#text_IdentitasKTP/Paspor').val(file_name);
});
</script>
<!--Some other code -->
<div class='form-group'>
<label class='control-label'>Nama Dokumen<br /><span style='font-weight:normal;'>Silahkan scan/foto dokumen Anda disini</span></label>
<div class='form-group'>
<label for="text_IdentitasKTP/Paspor" id="lbl_IdentitasKTP/Paspor" class="control-label">Identitas(KTP/Paspor)</label>
</div>
<div class="input-group">
<input type="file" id="file_IdentitasKTP/Paspor" name="name_file_IdentitasKTP/Paspor" accept="image/jpg,image/jpeg,application/pdf,image/png" style="display: none" />
<input type="text" class="form-control" id="text_IdentitasKTP/Paspor" readonly />
<span class="input-group-btn">
<button class="btn btn-default" type="button" id="btn_IdentitasKTP/Paspor">Upload KTP/Paspor</button>
</span>
</div>`
</div>
<!-- Some other code -->
I'm using ASP.NET MVC 5 and Bootstrap version 3.00 and Jquery version jquery version 1.11.1 if it is any help.
Thanks in advance
Your selectors contain forward slashes that need to be escaped like this:
$("#btn_IdentitasKTP\\/Paspor'")
Ensure that your jQuery code is sat within your document.ready() function.
Escape the selectors that contain forward slashes (click here for more)
I would also replace
$('#btn_IdentitasKTP/Paspor').on('click', function () {
with
$('document').on('click','#btn_IdentitasKTP\\/Paspor', function () {
The on('click') function needs to run in the $(document).ready function, otherwise it will run before the DOM is ready and won't find the element it's supposed to bind to.
$(document).ready(function () {
$('#btn_IdentitasKTP\\/Paspor').on('click', function () {
$('#file_IdentitasKTP\\/Paspor').trigger('click')
});
});
(And escape the slashes as suggested in another answer)
it doesn't work because script tag is render before the html elements. it will work if you change the code as below,
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--Some other code -->
<div class='form-group'>
<label class='control-label'>Nama Dokumen<br /><span style='font-weight:normal;'>Silahkan scan/foto dokumen Anda disini</span></label>
<div class='form-group'>
<label for="text_IdentitasKTP_Paspor" id="lbl_IdentitasKTP_Paspor" class="control-label">Identitas(KTP/Paspor)</label>
</div>
<div class="input-group">
<input type="file" id="file_IdentitasKTP_Paspor" name="name_file_IdentitasKTP_Paspor" accept="image/jpg,image/jpeg,application/pdf,image/png" style="display: none" />
<input type="text" class="form-control" id="text_IdentitasKTP_Paspor" readonly />
<span class="input-group-btn">
<button class="btn btn-default" type="button" id="btn_IdentitasKTP_Paspor" >Upload KTP/Paspor</button>
</span>
</div>`
</div>
<script>
$(document).ready(function () {
/* Some code here */
});
$('#btn_IdentitasKTP_Paspor').on('click', function () {
$("#file_IdentitasKTP_Paspor").click()
});
$('#file_IdentitasKTP_Paspor').change(function () {
var file_name = this.value.replace(/\\/g, '/').replace(/.*\//, '');
$('#text_IdentitasKTP_Paspor').val(file_name);
});
</script>
<!-- Some other code -->
I'm wondering how I can make this work, unfortunately my code doesn't work. I want my form to have two buttons; one goes to the other PHP file, and the other goes to another PHP file.
The first button, SUBMIT, is working fine. But the second button, SEE RANK, is not working, nothing happens after clicking it
<section class="small-section bg-gray-lighter" id="start">
<div class="container relative">
<!-- FORMS -->
<form id="format" class="form align-center" action="Algorithms/article.php" method = "GET">
<form id="rank" class="form align-center" action="Algorithms/Main2.php" method = "GET">
<div class="row">
<div class="col-md-8 align-center col-md-offset-2">
<div class="newsletter-label font-alt">
Type the description of your case below
</div>
<div class="mb-20">
<!-- INPUT TEXT FIELD -->
<input placeholder="Start typing here" name = "caseInput" class="newsletter-field form-control input-md round mb-xs-12" type="text" required/>
</form>
</form>
<!-- BUTTONS -->
<button form="format" type="submit" class="btn btn-mod btn-medium btn-round mb-xs-10">
Submit
</button>
<button form="rank" type="submit" class="btn btn-mod btn-medium btn-round mb-xs-10">
See rank
</button>
<!-- END OF BUTTONS -->
</div>
<div class="form-tip">
<i class="fa fa-info-circle"></i> Ex. "The father killed her daughter."
</div>
<div id="subscribe-result"></div>
</div>
</div>
</div>
</section>
And it looks like this:
First, it doesn't make sense to use <form> inside <form>. There are couple of ways to do this:
Method 1
Use 2 forms instead.
<form method="post" action="php_file_1.php" id="form1">
<!-- Your further HTML Code Goes Here... -->
</form>
<form method="post" action="php_file_2.php" id="form2">
<!-- Your further HTML Code Goes Here... -->
</form>
Method 2
Use a single PHP file. But perform different function on each button click.
<form method="post" action="functions.php" id="form">
<!-- Your further HTML Code Goes Here... -->
<input type="submit" name="action_1" id="button1">
<input type="submit" name="action_2" id="button2">
</form>
Then in your functions.php file:
if(isset($_POST['action_1'])){
action1(); // Your Function Name...
}
elseif(isset($_POST['action_2'])){
action2(); // Your second function
}
You cannot have a form inside a form. (This is why your second buton does not work)
So, your solution will be to have 2 'submit' elements with different names in your form. Then, on form submission, detect and process accordingly depending on which button was pressed.
<!-- BUTTONS -->
<input type="submit" name='submitAction1' class="btn..." value='Submit'>
<input type="submit" name='submitAction2' class="btn..." value='See rank'>
if(isset($_POST['submitAction1'])){
// process form 1
} elseif (isset($_POST['submitAction2'])){
// process form 2
}
From XHTML™ 1.0 The Extensible HyperText Markup Language (Second Edition) - B. Element Prohibitions
form must not contain other form elements
Implementation example with a javascript function which changes the form's action:
<html>
<body>
<script>
function mySubmit(wtf) {
if ('article' == wtf ) {
document.forms['myForm'].action = 'Algorithms/article.php';
} else if ('Main2' == wtf ) {
document.forms['myForm'].action = 'Algorithms/Main2.php';
} else
return false;
document.forms['myForm'].submit();
}
</script>
<form name="myForm">
<input type ="button" value="submit article" class="btn btn-mod btn-medium btn-round mb-xs-10" onClick="mySubmit('article')">
<input type ="button" value="submit Main2" class="btn btn-mod btn-medium btn-round mb-xs-10" onClick="mySubmit('Main2')">
</form>
</body>
</html>
I am new to Meteor and Javascript. I have slowly figured out how to set up a modal form that will show up when I click a button, and can capture my form data and have the form close when I click submit. Where I am stuck is that whenever I click the button to add more data, the previous values are still in the modal form. I have tried most of the other answer and examples I have found, but I can't seem to figure out what I need to do to make it clear the values. Any suggestions would be appreciated. Here is what I have currently:
Modal Template
<template name="addButton">
<div class="modal fade" id="addButton">
<form>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Add Button</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="buttonOrder">Button Order</label>
<input type="text" class="form-control" name="buttonOrder">
</div>
<div class="form-group">
<label for="buttonName">Button Name</label>
<input type="text" class="form-control" name="buttonName">
</div>
<div class="form-group">
<label for="buttonDescription">Button Description</label>
<input type="text" class="form-control" name="buttonDescription">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
<input type="submit" value="Submit" class="btn btn-primary"/>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</form>
</div>
</template>
Modal JS Helper
Template.addButton.events({
'submit form': function(e) {
e.preventDefault();
var button = {
buttonOrder: $(e.target).find('[name=buttonOrder]').val(),
buttonName: $(e.target).find('[name=buttonName]').val(),
buttonDescription: $(e.target).find('[name=buttonDescription]').val()
}
button._id = Buttons.insert(button);
$('#addButton').modal('hide');
$(this).removeData('#addButton.modal');
}
})
#Jeremy-s
I couldn't get your suggestion to work, although the Session key suggestion got me a solution that did for work with Bootstrap 2 but not with Bootstrap 3. I did finally get things working with Bootstrap 3, although I doubt it is the most elegant solution. I added ids to the elements and just set the value for each element to null like so:
$('#addButton').modal('hide')
$('#buttonOrder').val(null);
$('#buttonName').val(null);
$('#buttonDescription').val(null);
Now I just need to figure out why I can't get it to work with the Session key and Bootstrap 3.
One possible way to go is to use Meteor's findAll to find the inputs in the template, then iterate through them and set the value of each input to null. The findAll is a jquery selector but is limited here to the context of the template.
Template.addButton.events({
'submit form': function(e) {
e.preventDefault();
var button = {
buttonOrder: $(e.target).find('[name=buttonOrder]').val(),
buttonName: $(e.target).find('[name=buttonName]').val(),
buttonDescription: $(e.target).find('[name=buttonDescription]').val()
}
button._id = Buttons.insert(button);
_.each(
this.findAll("input"),
function(element){element.value = null}
);
$('#addButton').modal('hide');
}
})
Note also that instead of using jquery to show and hide the modal, Meteor's preferred approach would be to add and remove it completely from the DOM based on a reactive source like a Session key. I would look at Meteor's reactivity summary for additional guidance on how to do this.
I am very new to jQuery and I'm looking for an explanation as to why this code does not seem to work. I think it is something with the "action" not sure. Can someone help me understand my mistake here. thanks
<script src="/jquery.validationEngine.js"></script>
<script>
$("#contact_body").submit(function(e) {
e.preventDefault(); // Prevents the page from refreshing
var $this = $(this); // `this` refers to the current form element
if ($("#contact_body").validationEngine('validate')) {
//Post Data to Node Server
$.post(
$this.attr("action"), // Gets the URL to sent the post to
$this.serialize(), // Serializes form data in standard format
function(data) { /** code to handle response **/ },
"json" // The format the response should be in
);
//Notify User That the Email Was Sent to the Server & Thanks!
//$('#contactThanksModal').modal('show');
$('#contactModal').modal('hide');
alert("success");
}
else {
//handle Invalid Email Format Error
alert("error");
}
});
</script>
<!--pop up contact form -->
<div id="contact" class="modal hide fade in" style="display: none;">
<div class="modal-header">
<a class="close" data-dismiss="modal">x</a>
<h3>Send us a message</h3>
</div>
<div class="modal-body">
<form id="contact_body"class="contact_body" name="contact_body" action="/contact">
<label class="label" for="form_name">Your Name</label><br>
<input type="text" name="form_name" id="form_name" class="input-xlarge"><br>
<label class="label" for="form_email">Your E-mail</label><br>
<input type="form_email" name="form_email" class="input-xlarge"><br>
<label class="label" for="form_msg">Enter a Message</label><br>
<textarea name="form_msg" class="input-xlarge"></textarea>
</form>
</div>
<div class="modal-footer">
<input class="btn btn-success" type="submit" value="Send!" id="submit">
Nah.
</div>
<!-- <div id="thanks"><p><a data-toggle="modal" href="#contact" class="btn btn-primary btn-large">Modal powers, activate!</a></p></div> -->
You need to wrap your JQuery scripts in a
$(document).ready(function() {
...your_code_here...
});
This will then wait for the whole document to load before trying to attach events to objects.
Without this you may be trying to bind events to objects that have yet to be "created".
You need to put your code in a document ready handler:
<script src="/jquery.validationEngine.js"></script>
<script>
$(function() {
$("#contact_body").submit(function(e) {
// your code...
});
});
</script>
Your code is currently trying to add the submit() handler before the element exists in the DOM.