Hi I know this question has been asked many times but all the solutions I found are not working for me ....
I am able to make the ajax request and I am getting the response back but the autocomplete menu which is in a modal inside a template is not visible. As suggested i tried changing the z-index and made modifications but they did not work ... Below is my code
$("#startDestination").autocomplete({
appendTo: "#createRequest",
/*close: function (event, ui){
$("#startDestination").autocomplete("option","appendTo","#detailsModal"); // <-- and do this
}*/
});
// $("#startDestination").autocomplete("option", "appendTo", "#detailsModal");
$("#startDestination").autocomplete({
source: function (request, response) {
$.ajax({
url:"http://gd.geobytes.com/AutoCompleteCity?callback=?&q="+request.term,
dataType: "json",
function (data) {
response(data);
}
});
},
minLength: 3,
select: function (event, ui) {
var selectedObj = ui.item;
getcitydetails(selectedObj.value);
$("#startDestination").val(selectedObj.value);
return false;
},
open: function () {
$("#startDestination").removeClass("ui-corner-all").addClass("ui-corner-top");
},
close: function () {
$("#startDestination").removeClass("ui-corner-top").addClass("ui-corner-all");
}
});
I have also tried to use appendTo and attach it to div elements of the modal.
Below is the code for my modal in a template
<div class="col-sm-6">
<div class="form-group">
<div id="test">
<label>Departure Destination</label>
<span class="input-icon input-icon-right">
<input type="text" name="startDestination_1" id="startDestination" class="form-control" ></input>
</span>
</div>
</
my style.css
.ui-autocomplete{
font-family: 'open sans', sans-serif;
z-index:2147483647 !important;
font-size: 16px;
}
my jquery-ui.css
.ui-autocomplete {
position: absolute;
top: 0;
left: 0;
cursor: default;
z-index:2147483647 !important;
}
.ui-front {
z-index: 2147483647;
}
Any help would be appreciated.
Thank you in advance.
Related
The following code is based jQuery Modal form just like https://jqueryui.com/dialog/#modal-form .
I hope to click a button to open a modal form, and select files in the modal form, then click "Upload" button to post data the server side.
But I find the data don't be posted when I click "Upload" button. Why ?
And more, what action is the code form = dialog.find("form").on("submit", function (event) {...} ? I think I can remove the code form = dialog.find("form").on("submit", function (event) {...}, right?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Dialog - Modal form</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<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>
<script>
$(function () {
var dialog, form;
function mySubmit() {
var valid = true;
if (valid) {
dialog.dialog("close");
$("#MyUploadFile").submit();
}
return valid;
}
dialog = $("#dialog-form").dialog({
autoOpen: false,
height: 400,
width: 350,
modal: true,
buttons: {
"Upload": mySubmit,
Cancel: function () {
dialog.dialog("close");
}
},
close: function () {
form[0].reset();
}
});
form = dialog.find("form").on("submit", function (event) {
event.preventDefault();
mySubmit();
});
$("#create-user").button().on("click", function () {
dialog.dialog("open");
});
});
</script>
</head>
<body>
<div id="dialog-form" title="Create new user">
<p class="validateTips">All form fields are required.</p>
<form action="" method="post" enctype="multipart/form-data" id="MyUploadFile">
<input type="file" name="myupload" multiple="multiple" />
</form>
</div>
<button id="create-user">select files and upload</button>
</body>
</html>
Expanding on the example you made reference to and what I said in the comments, I do have a better example for you to consider.
HTML
<div id="dialog-form" title="File Upload">
<p class="validateTips">Select a file to upload.</p>
<form>
<fieldset>
<label for="name">File</label>
<input type="file" id="uploadFile" class="text ui-widget-content ui-corner-all">
<!-- Allow form submission with keyboard without duplicating the dialog button -->
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</form>
</div>
<div id="users-contain" class="ui-widget">
<h1>Uploaded Files:</h1>
<table id="users" class="ui-widget ui-widget-content">
<thead>
<tr class="ui-widget-header ">
<th>File</th>
<th>Folder</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>Archive.xls</td>
<td>/upload</td>
<td>02/28/2017</td>
</tr>
</tbody>
</table>
</div>
<button id="upload-file-button">Upload New File</button>
CSS
label,
input {
display: block;
}
input.text {
margin-bottom: 12px;
width: 95%;
padding: .4em;
}
fieldset {
padding: 0;
border: 0;
margin-top: 25px;
}
h1 {
font-size: 1.2em;
margin: .6em 0;
}
div#users-contain {
width: 350px;
margin: 20px 0;
}
div#users-contain table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
}
div#users-contain table td,
div#users-contain table th {
border: 1px solid #eee;
padding: .6em 10px;
text-align: left;
}
.ui-dialog .ui-state-error {
padding: .3em;
}
.validateTips {
border: 1px solid transparent;
padding: 0.3em;
}
JavaScript
$(function() {
var dialog, form;
function updateTips(t) {
$(".validateTips")
.text(t)
.addClass("ui-state-highlight");
setTimeout(function() {
$(".validateTips").removeClass("ui-state-highlight", 1500);
}, 500);
}
function uploadFile() {
var valid = false;
var $input = $("#uploadFile");
if ($input[0].files.length === 0) {
updateTips("You must select a file.");
return valid;
}
var fileData = new FormData();
$.each($input[0].files, function(k, v) {
fileData.append(k, v);
});
// Barrowed from https://abandon.ie/notebook/simple-file-uploads-using-jquery-ajax
$.ajax({
url: "./php/upload.php",
type: "POST",
data: fileData,
cache: false,
dataType: "JSON",
processData: false,
contentType: false,
success: function(results, textStatus, jqXHR) {
// 'results' will be a JSON object return from our form handler
// 'results.error' may contain error details, like: Path Not Found
if (typeof results.error === 'undefined') {
// At this point, we should have uploaded the file
// our form handler has return some response
// We can update a table to do something with the data
valid = true;
} else {
// Handle errors here
updateTips("Error: " + results.error);
}
},
error: function(jqXHR, textStatus, errorThrown) {
// Handle errors here
updateTips("Error: " + textStatus);
// STOP LOADING SPINNER
}
});
return valid;
}
dialog = $("#dialog-form").dialog({
autoOpen: false,
height: 400,
width: 350,
modal: true,
buttons: {
"Upload": uploadFile,
Cancel: function() {
dialog.dialog("close");
}
},
close: function() {
form[0].reset();
}
});
form = dialog.find("form").on("submit", function(event) {
event.preventDefault();
uploadFile();
});
$("#upload-file-button").button().on("click", function() {
dialog.dialog("open");
});
});
As you can see, this is very similar to the original example in the way it works. It's not there through, since you have more work that has to be done server side.
Remember that jQuery is a framework for JavaScript, which is Client Side Scripting. To handle file uploads, your web server must be able to handle the HTTP POST data in some manner. This may be a CGI, ASP, ASP.NET, or PHP script.
I made a comment about https://abandon.ie/notebook/simple-file-uploads-using-jquery-ajax which is a very straight forward article about using AJAX to upload a file to a PHP Script. I advise you read through it and continue your research so that you can better understand this action. Since now that you're letting users upload content, you are making your web site and possible your whole server open to attack via a backdoor script.
This will set you on the right path but the journey does not end here.
I have a search form which which takes an input and pass the data to a django view.
the form has a search button which on click opens a input box like shown in images given below:
Now when i enter something into the input and press enter, it just collapses the input box and no action occurs. It happens every time. I want it to call the function associated with form. I figured out that the problem is in the javascript but don't know how to fix it.
html:
<form class="navbar-form" role="search" method="POST" action="{% url 'search' %}">
{% csrf_token %}
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="search_box">
<span class="input-group-btn">
<button name="search" type="submit" class="search-btn"> <span class="glyphicon glyphicon-search"> <span class="sr-only">Search</span> </span> </button>
</span>
</div>
</form>
javascript:
e(function() {
function t() {
var t = e('.navbar-collapse form[role="search"].active');
t.find("input").val(""), t.removeClass("active")
}
e('header, .navbar-collapse form[role="search"] button[type="reset"]').on("click keyup", function(n) {
console.log(n.currentTarget), (27 == n.which && e('.navbar-collapse form[role="search"]').hasClass("active") || "reset" == e(n.currentTarget).attr("type")) && t()
}), e(document).on("click", '.navbar-collapse form[role="search"]:not(.active) button[type="submit"]', function(t) {
t.preventDefault();
var n = e(this).closest("form"),
i = n.find("input");
n.addClass("active"), i.focus()
}), e(document).on("click", '.navbar-collapse form[role="search"].active button[type="submit"]', function(n) {
n.preventDefault();
var i = e(this).closest("form"),
s = i.find("input");
e("#showSearchTerm").text(s.val()), t()
})
}
css:
.navbar-collapse form[role="search"] input {
font-size: 18pt;
opacity: 0;
display: none;
height: 48px;
position: relative;
z-index: 2;
float: left;
}
.navbar-collapse form[role="search"].active input {
display: table-cell;
opacity: 1;
z-index: 100;
border-radius: 0;
border: none;
line-height: 45px;
height: 75px;
font-size: 14px;
padding: 0px 25px;
width: 315px;
}
.navbar-collapse {float:right; padding:0px}
its because you didn't submit form
Try this to submit form..
Without AJAX
$('form#myForm').submit();
with performing AJAX
$('input#submitButton').click( function() {
$.post( 'some-url', $('form#myForm').serialize(), function(data) {
... do something with response from server
},
'json' // I expect a JSON response
);
});
$('input#submitButton').click( function() {
$.ajax({
url: 'some-url',
type: 'post',
dataType: 'json',
data: $('form#myForm').serialize(),
success: function(data) {
... do something with the data...
}
});
});
Hope this helps..
Letting you know the step by step procedure.
Set a .keyup event on the search input. $("[name='search_box']").keyup(function(e){ .... });
Check if the keycode of the pressed key is equal to 13 (enter key) if(e.keyCode==13){ ... }
If it is 13 then call the function associated with the form.
Hi my problem isthat the popover that shoud be in the model when toggled, are instead directing to the body behind the modal in the top left corner and not shown in the modal.
here is my index code:
<button type="button" id="example" class="btn btn-default" data-container="body"
data-toggle="popover" data-placement="right"
data-content="And here's some amazing content"
data-original-title="Hej" >
<img/>
</button>
The knouckoutbootstrap.js lookes like this:
$(function () {
$.ajaxSetup({ cache: false });
ko.bindingHandlers.showModal = {
init: function (element, valueAccessor) {
},
update: function (element, valueAccessor) {
var value = valueAccessor();
if (ko.utils.unwrapObservable(value)) {
$(element).removeData("modal").modal();
}
else {
$(element).modal('hide');
}
}
};
$('#example').popover();
var lockerLoanViewModel = new LockerLoanViewModel();
ko.applyBindings(lockerLoanViewModel);
lockerLoanViewModel.initializeViewModel();
});
I don't know if its helpfull but here is the stylesheet:
body {
margin-top: 30px;
margin-left: 30px;
margin-right: 30px;
margin-bottom: 30px;
}
.gridContainer {
margin-top: 30px;
}
.popover {
z-index: 1060;
position: fixed;
display:inherit;
}
If you wanna ask me something pls do i really need help with this. (sorry for bad english :D )
thanks every one i fixed it my self the solution was that i changed the script to
$(function () {
$('.openModal').on('click', function (e) {
$('#editLockerModal')
.modal({
backdrop 'static',
keyboard false
});
$('#example').popover();
});
var lockerLoanViewModel = new LockerLoanViewModel();
ko.applyBindings(lockerLoanViewModel);
lockerLoanViewModel.initializeViewModel();
});
I Have a custom designed grid:
http://jsfiddle.net/97n4K/
when you click a grid item the content div of that item slides open and when you click it again it closes. This works fine.
My problem is i only ever want one content area to open at a time much like a standard accordion.
So for instance i click 'content one' - it opens 'content area one' - now if i click 'content two' i want 'content area one' to close (slideUp) and 'content area two' to open (slideDown) at the same time - just like an accordion does.
Obviously my html is alot different from a standard accordion setup so im stuggling to figure it out how to do it with my limited Jquery knowledge.
Please see my Js Fiddle above - and heres the code if you prefer below:
Thanks
HTML
<div style="width: 100%; height: 68px;">
<div class="expBtn exBlue ex1"><h3>Content<br>one</h3></div>
<div class="expBtn exOlive ex2"><h3>Content<br>two</h3></div>
<div class="expBtn exOrange ex3"><h3>Content<br>three</h3></div>
</div>
<div class="expArea expArea1">
This is content one
</div>
<div class="expArea expArea2">
This is content two
</div>
<div class="expArea expArea3">
This is content three
</div>
CSS
.expBtn {
width: 190px;
height: 68px;
text-decoration: none;
background-color: #000;
float: left;
cursor: pointer;
}
.expBtn h3 {
font-size: 18px;
font-weight: bold;
color: #e8e7e4;
text-transform: none;
line-height: 1.2em;
letter-spacing: 0em;
padding-top: 13px;
padding-left: 13px;
padding-right: 13px;
padding-bottom: 0;
font-family: arial;
margin: 0;
}
.expArea {
display: none;
width: 570px;
background-color: #ccc;
height: 200px;
}
JS
$(".ex1").click(function () {
$(".expArea1").slideToggle(1000);
});
$(".ex2").click(function () {
$(".expArea2").slideToggle(1000);
});
$(".ex3").click(function () {
$(".expArea3").slideToggle(1000);
});
$(".exBlue").hover(function () {
$(this).css("background-color","#0092d2");
}, function() {
$(this).css("background-color","#000");
});
$(".exOlive").hover(function () {
$(this).css("background-color","#9bad2a");
}, function() {
$(this).css("background-color","#000");
});
$(".exOrange").hover(function () {
$(this).css("background-color","#ff8a0c");
}, function() {
$(this).css("background-color","#000");
});
Ok so i have created essentially what i want but i have a massive load of duplicate JS that i know could be simplified by any one with better knowledge of jquery / javascript than me. Please check out this new JS fiddle - any solution to get the JS down would be greatly appreiated!
Thanks
NEW JS FIDDLE
http://jsfiddle.net/97n4K/9/
If you wish to keep your same html structure you can use the following to get what you want;
JS FIDDLE DEMO
Switch your JS click handling to this;
$('.expBtn').on('click', function () {
var area = $(this).index() + 1;
var new_div = $('.expArea' + area);
// do nothing if it's already visible
if (!new_div.is(':visible'))
{
// slide up all first
$('.expArea').slideUp(300);
new_div.slideDown(1000);
}
});
You can easily add more html sections providing you follow the same numbering you've already done.
You can use slideUp or slideDown? Im not 100% sure as to what exactly you want to achieve but this fiddle should help you.
$(".ex1").click(function () {
$(".expArea1").slideToggle(1000);
$(".expArea2").slideUp(1000);
$(".expArea3").slideUp(1000);
});
$(".ex2").click(function () {
$(".expArea2").slideToggle(1000);
$(".expArea1").slideUp(1000);
$(".expArea3").slideUp(1000);
});
$(".ex3").click(function () {
$(".expArea3").slideToggle(1000);
$(".expArea2").slideUp(1000);
$(".expArea1").slideUp(1000);
});
http://jsfiddle.net/97n4K/5/
Basically you can use a plugin for this and it will help better
I have added some simple code so your code can work
<div style="width: 100%; height: 68px;">
<div class="expBtn exBlue ex1" data-accord = "expArea1"><h3>Broadcast + Arts + Media</h3></div>
<div class="expBtn exOlive ex2" data-accord = "expArea2"><h3>Business<br>Services</h3></div>
<div class="expBtn exOrange ex3" data-accord = "expArea3"><h3>Charity +<br>NFP</h3></div>
</div>
<div class="expArea expArea1">
expArea1 content
</div>
<div class="expArea expArea2">
expArea2 content
</div>
<div class="expArea expArea3">
expArea3 content
</div>
Please look at data-accord and it's content
Now for the JS
$('.expBtn').click(function(){
var current = $(this).data('accord');
$('.expArea').each(function(){
if($(this).not('.'+current).css('display') == "block")
{
$(this).slideToggle();
}
});
$('.'+current).slideToggle(1000);
});
$(".exBlue").hover(function () {
$(this).css("background-color","#0092d2");
}, function() {
$(this).css("background-color","#000");
});
$(".exOlive").hover(function () {
$(this).css("background-color","#9bad2a");
}, function() {
$(this).css("background-color","#000");
});
$(".exOrange").hover(function () {
$(this).css("background-color","#ff8a0c");
}, function() {
$(this).css("background-color","#000");
});
You can see it working
http://jsfiddle.net/97n4K/6/
I hope this can help
I´ve the following javascript-function:
<script type="text/javascript">
$(function() {
var data = (<?php include("php/search_new.php"); ?>).Data.Recipes;
var source = [];
for (var i in data) {
source.push({"href": "/php/get_recipe_byID.php?id=" + data[i].ID, "label": data[i].TITLE});
}
$("#searchrecipes").autocomplete({
minLength: 3,
source: source,
select: function(event, ui) {
window.location.href = ui.item.href;
}
});
});
</script>
<input id="searchrecipes" type="text" name="searchrecipes" style="margin-left: 850px; margin-top: 0px; width:170px; background: #fff url(images/search_icon.png) no-repeat 100%;" onblur="this.style.background='#ffffff'; background: #fff url(images/search_icon.png) no-repeat 100%;" onfocus="this.style.background='#c40606'; background: url(images/search_icon.png) no-repeat 100%;" placeholder="Suchen..."></input>
<input type="submit" name="buttonsenden" style="display:none;" value="" width: 5px></input>
The function has already worked but suddenly it stopped working. The problem is, that the href on the dropdown-autocomplete isn´t clickable.
var data = ({"Data":{"Recipes":{"Recipe_5":{"ID":"5","TITLE":"Spaghetti Bolognese"},"Recipe_7":{"ID":"7","TITLE":"Wurstel"},"Recipe_9":{"ID":"9","TITLE":"Schnitzel"},"Recipe_10":{"ID":"10","TITLE":null},"Recipe_19":{"ID":"19","TITLE":null},"Recipe_20":{"ID":"20","TITLE":"Hundefutter"},"Recipe_26":{"ID":"26","TITLE":"Apfelstrudel"},"Recipe_37":{"ID":"37","TITLE":null},"Recipe_38":{"ID":"38","TITLE":"AENDERUNG"},"Recipe_39":{"ID":"39","TITLE":null},"Recipe_40":{"ID":"40","TITLE":"Schnitzel"},"Recipe_42":{"ID":"42","TITLE":"Release-Test"},"Recipe_43":{"ID":"43","TITLE":"Wurstel2"}}},"Message":null,"Code":200}).Data.Recipes;
All the necessary jquery scripts are available.
What can be the problem?
Why not use directly the remote-source, instead of doing this array works?
That's not the way to use PHP and JS together:
var data = (<?php include("php/search_new.php"); ?>)
You can use directly a remote source. It will be loaded by an AJAX request:
$(function() {
$("#searchrecipes").autocomplete({
minLength: 3,
source: "/php/recipe_index.php",
select: function(event, ui) {
window.location.href = ui.item.href;
}
});
See Documentation "source:" parameter or a demo-implementation (view sourcecode)
Cheers. Frank