Develop Reference

How to implement autocomplete in a modal using Jquery in MVC5

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:

.click() function doesn't work javascript / jquery

UPDATE:
Somehow the just work fine after I tried it..
UPDATE
I'm using .click() function on my javascript, but it doesn't work.
Here is my JS code:
src="jquery.js";
var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
var institutionID, acadCareerID;
$(document).ready(function(){
getInstitution();
institutionID = $( "select#institution option:checked" ).val();
if(institutionID == null){
institutionID = 1;
}
getAcadCareerByInstitution(institutionID);
acadCareerID = $( "select#acadCareer option:checked" ).val();
if(acadCareerID == null){
acadCareerID = 1;
}
getPeriodByAcadCareerAndInstitution(acadCareerID);
getDepartmentByAcadCareer(acadCareerID);
$("select#institution").change(function(){
institutionID = $( "select#institution option:checked" ).val();
getAcadCareerByInstitution(institutionID);
})
$("select#acadCareer").change(function(){
acadCareerID = $( "select#acadCareer option:checked" ).val();
getPeriodByAcadCareerAndInstitution(acadCareerID);
getDepartmentByAcadCareer(acadCareerID);
})
$("div#search").click(function(){
alert("The paragraph was clicked.");
console.log("abc");
});
});
all functions like getInstituion(), getAcadCareerByInstitution(institutionID) etc are ajax call.
Here is my HTML code:
<form action="doInsertSchedule" method="POST" enctype="multipart/form-data">
{{csrf_field()}}
<div class="form-group">
<label for="institution">Institution</label>
<select name="institution" class="form-control" id="institution">
</select>
</div>
<div class="form-group">
<label for="acadCareer">Academic Career</label>
<select name="acadCareer" class="form-control" id="acadCareer">
</select>
</div>
<div class="form-group">
<label for="period">Period</label>
<select name="period" class="form-control" id="period">
</select>
</div>
<div class="form-group">
<label for="department">Department</label>
<select name="department" class="form-control" id="department">
</select>
</div>
<div class="form-group">
<label for="date">Deadline Date</label>
<input type="date" class="form-control" id="deadline" placeholder="Deadline Date" name="deadline">
</div>
<button type="submit" class="btn btn-default">Submit</button>
<div id="search" class="btn btn-default">Search</div>
</form>
I already put jquery for my Master Layout (Laravel 5)
<head>
<link rel="stylesheet" type="text/css" href="{{url()}}/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="{{url()}}/css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="{{url()}}/js/tools.js"></script>
<script src="{{url()}}/js/bootstrap.min.js"></script>
<title>BINUS - #yield('title')</title>
<meta name="csrf-token" content="{{ csrf_token() }}" />
</head>
I want the Search Button / Div to do something when I click. I can't see what's wrong here.
I already tried <div> to <button> but it just will work like submit. I also already tried to put event.preventDefault() at my JS code, but it didn't work too.

Maybe you can try with event delegation...
$(document).ready(function(){
$("body").on("click", "#search", function(){
alert("The paragraph was clicked.");
console.log("abc");
});
});

You code works OK. You need to write the jquery library in the final, just before of </body>
...
<script type="text/javascript" src=".../jquery.js"></script>
</body>
Example it works ok!: Example Jsfiddle

<button type="submit" class="btn btn-default">Submit</button>
<div id="search" class="btn btn-default">Search</div>
This looks like it will render on the page as two buttons. Your ID here is attached to the div, not to the button, they should both appear to look like buttons providing bootstrap is loaded, but only the div with "search" as the content will do anything.
This is the only thing that appears odd, the only other problem is you are not loading your jquery as stated elsewhere.

I don't have the reputation to comment, but have you added a jquery library before your script?
Secondly, if you did and the items on the page are loaded after the document has loaded you will need to change your code up, for instance:
Give your form an id
<form action="doInsertSchedule" method="POST" enctype="multipart/form-data" id="postForm">
Then in your jquery script
<script>
$('#postForm').on('click', '#search', function(){
alert("The paragraph was clicked.");
console.log("abc");
});
</script>
The above will allow the javascript to run on items that are bought in after document load, however it is important you set it on a parent element that is avaiable at document load

Javascript function to hide button if textarea is empty does not work

I have a textarea inside a div with a select dropdown underneath, and underneath that are two buttons. One is to preview, and the other is going to be for Uploading the text to a file.
I am trying to hide the Upload button if the textarea is empty. My javascript is not working since it always hides the button.
Here is the form, button container, and select dropdown (with all of the options left out since there are 20 of them):
<div class="container">
<label for="text-area">Paste your code here: </label>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>">
<textarea name="code_input" id="code_textarea" class="form-control" rows="15" placeholder="Start coding!" required><?= isset($_POST['code_input']) ? $_POST['code_input'] : '' ?></textarea>
<div class="button-container">
<select required name="language-select" class="form-control" id="language_selector">
<option value="" selected disabled>Language</option>
<option>20 options follow</option>
<!-- THIS WILL KEEP THE VALUE IN THE DROPDOWN AFTER SUBMIT -->
<script type="text/javascript">
document.getElementById('language_selector').value = "<?php echo $_POST['language-select'];?>";
</script>
</select>
<br/>
<br/>
<div id="button-container" class="btn-toolbar">
<button id="drive_submit_btn" class="btn btn-md" type="submit">Preview</button>
<button id="upload_btn" class="btn btn-md" type="submit">Upload</button>
</div>
</div>
</form>
<div class="show-code">
<script src="lib/prism.js"></script>
<!-- THIS DISPLAYS THE CODE AFTER SUBMITTING USING THE PRISM.JS PLUGIN FOR SYNTAX HIGHLIGHTING -->
<!-- Get language selection from dropdown and append it to language class. Echo the text as highlighted code -->
<pre><code class="language-<?php echo $language ?>"><?php echo $user_code; ?></code></pre>
</div>
</div>
<!-- THIS IS THE JAVASCRIPT TO HIDE THE BUTTON UNTIL TEXT IS ENTERED.-->
<!-- HOWEVER IT ALWAYS HIDES IT!! -->
<script>
$(document).ready(function() {
/* I EVEN TRIED TO TRIM IT TO NO AVAIL */
var content = $.trim($('#code_textarea').val());
if(content.length === 0) {
$('#upload_btn').hide();
} else {
$('#upload_btn').show();
}
});
</script>
I've seen so many answers that link to their JSFiddle, and they all work fine. What is causing mine not to work correctly? Everything else works fine except for my JS function.

A native javascript solution.
Upload button is hidden from beginning, when a keyup event is fired for the textarea, the content of the textarea is checked and the button is either shown or hidden again
code_textarea.addEventListener('keyup', function(){
if(code_textarea.value){
upload_btn.classList.remove("hidden");
}
else {
upload_btn.classList.add("hidden");
}
});
.hidden {
display:none;
}
<textarea name="code_input" id="code_textarea" class="form-control" rows="5" placeholder="Start coding!" required></textarea>
<button id="upload_btn" class="btn btn-md hidden" type="submit">Upload</button>

Attach your handler to textarea's 'keyup' event.
(And start with invisible btn.)
$(document).keyup('.code_textarea',function() {
/* I EVEN TRIED TO TRIM IT TO NO AVAIL */
var content = $.trim($('#code_textarea').val());
if(content.length === 0) {
$('#upload_btn').hide();
} else {
$('#upload_btn').show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<label for="text-area">Paste your code here: </label>
<form method="post" >
<textarea name="code_input" id="code_textarea" class="form-control" rows="5" placeholder="Start coding!" required></textarea>
<div class="button-container">
<select required name="language-select" class="form-control" id="language_selector">
<option value="" selected disabled>Language</option>
<option>20 options follow</option>
<!-- THIS WILL KEEP THE VALUE IN THE DROPDOWN AFTER SUBMIT -->
<script type="text/javascript">
document.getElementById('language_selector').value = "";
</script>
</select>
<br/>
<br/>
<div id="button-container" class="btn-toolbar">
<button id="drive_submit_btn" class="btn btn-md" type="submit">Preview</button>
<button style="display:none" id="upload_btn" class="btn btn-md" type="submit">Upload</button>
</div>
</div>
</form>
<div class="show-code">
<script src="lib/prism.js"></script>
<!-- THIS DISPLAYS THE CODE AFTER SUBMITTING USING THE PRISM.JS PLUGIN FOR SYNTAX HIGHLIGHTING -->
<!-- Get language selection from dropdown and append it to language class. Echo the text as highlighted code -->
<pre><code class="language-"></code></pre>
</div>
</div>
<!-- THIS IS THE JAVASCRIPT TO HIDE THE BUTTON UNTIL TEXT IS ENTERED.-->
<!-- HOWEVER IT ALWAYS HIDES IT!! -->

jQuery onclick does not change HTML input

When I click the zero button, I expect the the function zero to change the input to zero, but it seems to be not working. Is there anyway to do this in JavaScript instead of jQuery?
HTML
<div class="display" id="out">test</div>
<div class="form-group">
<label for="comment">value:</label>
<input class="form-control" type="text" value="0.00" id="in"></input>
</div>
<button id="zero" onclick="setzero()">
<span class="glyphicon glyphicon-fire"></span> Zero
</button>
jQuery
$('#in').on("change", function(){
$('#out').html($(this).val());
});
function setzero() {
$('#in').val(0);
}
http://jsfiddle.net/ahpu8wwx/12/

try you updated I have updated adding a new variable sum
var sum = 0;
$('#in').on("change", function(){
sum += parseInt($(this).val());
$('#out').html(sum);
setzero();
});
function setzero() {
$('#in').val(0);
}
Demo

Tushar needs to put his comment to the answer:
You code is correct, but you run it in a wrong context in fiddle, you need to set "No Wrap" option like

The onlick is not working because the the function setzero() is not in global context so you need to move it outside the document ready handler
You can use click() event handler and trigger change event using cahnge()
$('#in').on("change", function() {
$('#out').html($(this).val());
});
$('#zero').click(function() {
$('#in').val(0).change();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="display" id="out">test</div>
<div class="form-group">
<label for="comment">value:</label>
<input class="form-control" type="text" value="0.00" id="in">
</div>
<button id="zero">
<span class="glyphicon glyphicon-fire"></span> Zero
</button>
Update : Or you need to define the function outside the $(document).ready(function(){..}); handler
$(document).ready(function() {
$('#in').on("change", function() {
$('#out').html($(this).val());
});
});
function setzero() {
$('#in').val(0).change();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="display" id="out">test</div>
<div class="form-group">
<label for="comment">value:</label>
<input class="form-control" type="text" value="0.00" id="in">
</div>
<button id="zero" onclick="setzero(this)">
<span class="glyphicon glyphicon-fire"></span> Zero
</button>

I think it is better to use jquery events, using it for the click is working
$('#zero').on('click', function(e){
$('#in').val(0);
e.preventDefault();
});

Input button click is not invoked through JavaScript in IE9

I'm working with MVC 3, javascript and jQuery.
I've got a hidden button which click() function needs to be called from javascript.
This works great on every browser except IE9.
$('#fakeSubmitBt').click(function () {
$('#fileUplSubmitBt').click();
});
Here, fileUplSubmitBt is the hidden button and fakeSubmitBt is the visible button which I need to click instead.
I noticed that if a call three times
$('#fileUplSubmitBt').click();
then the form is submitted, but in the backend the elements of the form are not recognized.
UPDATE:
thanks to the hints given by Ricardo and Jay, I tried to use trigger('click') but also this path failed.
In the following I post the code that is shaming me (it's MVC3 using Razor):
<script type="text/javascript">
function s2cPanelReady() {
$('#fakeBrowseBt').click(function () {
$('#fileUplRadio').prop("checked", true);
$('#gravatarRadio').prop('checked', false);
$('#realFileUpload').click();
});
$('#fakeSubmitBt').click(function () {
if ($('#gravatarRadio').prop("checked")) {
$('#grvatarSubmitBt').click();
} else if ($('#fileUplRadio').prop("checked")) {
$('#fileUplSubmitBt').trigger('click');
}
});
}
</script>
<div class="inputForm">
<div class="inputField">
<div class="userPicLargeFrame">
<img src="/Images/Get?id=#Model.ID&size=40" class="userPicLarge" />
</div>
</div>
#using (Html.BeginForm("ChangePicture", "User"))
{
<div class="inputField">
<input type="radio" id="gravatarRadio" />
<span class="inputLabel">Gravatar:</span>
#Html.EditorFor(model => model.Preferences.GravatarEmail)
#Html.ValidationMessageFor(model => model.Preferences.GravatarEmail)
</div>
<input id="grvatarSubmitBt" type="submit" value="Save Pic" style="display:none;" />
}
#using (Html.BeginForm("UploadPicture", "User", FormMethod.Post, new { encType = "multipart/form-data", name = "uplPicForm" }))
{
<div class="inputField">
<input type="radio" id="fileUplRadio" />
<span class="inputLabel">Save your own pic:</span>
<span class="inputLabel">
<span style="display:inline-block; position:relative;">
<input type="file" id="realFileUpload" name="fileUpload" style="position:relative; opacity:0; -moz-opacity:0 ;" />
<span style="display:inline-block; position:absolute; top:0px; left:0px;">
<input id="fakePathBox" type="text" value="" readonly />
<input id="fakeBrowseBt" type="button" value="..."/>
</span>
</span>
</span>
<input id="fileUplSubmitBt" type="submit" name="submit" value="Upload" style="display:none;" />
</div>
}
<div class="inputField">
<span class="inputLabel">
<input id="fakeSubmitBt" type="button" value="Submit" class="s2cButton" />
</span>
</div>
</div>
UPDATE N.2: I tried to remove all javascript stuff, and simply put the file upload HTML tag with a simple submit button: nor in this case on IE9 I'm able to submit the form!!
Sometimes it runs, sometimes it is not fired at the first click, but only at the second click (and in this case the submitted form hasn't got the selected file, so server-side this results in an error...), sometimes it simply doesn't fire the submit button, no matters how many click I do.
This issue starts to make me crazy....
Any other hint?
Thank you very much!
Best
cghersi

I've had a similar problem and ended up just transforming the button into an anchor (<a>) and invoked the jquery-ui function $.button()
NOTE: the jquery ui is required http://jqueryui.com/
That way the link still looked like a button and the $.click() event worked.
html
<div class="input">
Submit
</div>
jquery
$("#emulate-button").button();
//Set event when clicked
$("#emulate-button").click(function () {
//.... your logic here
});

Like Ricardo said, you need to use trigger: http://jsfiddle.net/5hgsW/1/

If the $('#fileUplSubmitBt').click event wasn't defined in JQuery, the .click() trigger may not work.
Put everything from the $('#fileUplSubmitBt').click event inside a function then bind it in the $('#fakeSubmitBt').click and $('#fileUplSubmitBt').click events.