jquery ui autocomplete conflicts with foundation install with nuget
Question
I used nuget to install foundation and jquery ui (which installs jquery). I have a an MVC 5 website that I am working on.
Before I added foundation the jquery autocomplete control was working fine. However, after install the control still kinda works but the dropdown that you make your selection in disappears.
I ran across this solution Style autocomplete with Zurb Foundation and this is from the same guy I think ... http://ezra.keddell.co.nz/implementing-jquery-autocomplete-in-zurb-foundation-4/ . They were the only solutions I ran across in my searches. However I don't think it will work for me because from what I can tell when you install foundation via nuget it doesn't come with jquery. So the files he wants to modify with the following code isn't valid and I wouldn't know which files would be the correct ones. Nor do I understand why this makes sense.
<script>
document.write('<script src=' +
('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
'.js><\/script>')
</script>
I guess I'm looking for a way to get jquery ui and foundation to work together for the purpose of the autocomplet control. Is it possible to tell Foundation to stop working for a while or to have it not affect the styles for the autocomplete control.
The exact code that I have is ...
Layout.cshtml
<head>
<meta charset="utf-8" />
@Styles.Render("~/Content/foundation/css")
@Styles.Render("~/Content/site.css")
@RenderSection("head", required: false)
@Scripts.Render("~/bundles/modernizr")
</head>
<div id="mainWrap" class="row">
<div class="Columns small-12 small-centered">
@RenderBody()
</div>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/foundation")
<script>
$(document).foundation();
</script>
@*Use the Scripts section to define page specific scripts*@
@RenderSection("scripts", required: false)
index.cshtml
<script>
$(document).ready(function () {
$("#Name").autocomplete({
// how does the request get a value?
source: function GetRemoteData(request, response) {
var name = $("#Name").val();
$.ajax({
type: "GET",
url: "/api/attendees/" + name,
cache: false,
data: request,
dataType: "json",
success: function (json) {
// call autocomplete callback method with
response($.map(json, function (name, val) {
return {
label: name,
value: val
};
}));
},
error: function (XMLHttpRequest, textStatus, e) {
alert("error - " + textStatus);
console.log("error", textStatus, errorThrown);
}
}); // end $.ajax
},
minLength: 2,
select: function (event, ui) {
alert("you have selected " + ui.item.label + "Id: " + ui.item.value);
$("#Name").val(ui.item.label);
return false;
}
}); // end autocomplete
// supposedly to help foundation and jquery ui work together.
$('.ui-autocomplete').addClass('f-dropdown');
}); // end ready
</script>
@using (Html.BeginForm("Submit", "Home")) {
@*<label>Your Name:</label> <input type="text" id="Name" name="Name" value="@Html.Raw(Model.Firstname) @Html.Raw(Model.LastName)" /> <br />*@
<label>Your Name:</label> <input type="text" id="Name" name="Name" value="" /> <br />
@Html.LabelFor( x=> x.Attending ) @Html.CheckBoxFor( x=> x.Attending ) @*<label>Attending:</label>*@ @*<input type="checkbox" id="Attending" name="Attending" />*@ <br />
@Html.LabelFor( x => x.Windermere ) @Html.CheckBoxFor( x => x.Windermere ) @*<label>Staying at the Windermere Manor:</label>*@ @*<input type="radio" id="radioYes" /> <input type="radio" id="radioNo" /> <input type="radio" id="radioMaybe" />*@ <br />
@Html.TextAreaFor( x => x.Notes )<label>Notes:</label> @*<textarea id="AttendanceNotes" name="AttendanceNotes"> </textarea>*@ <br />
<button id="Submit" name="Sumbit">Submit</button>
}
1 answers
solution1
0 ACCPTED 2014-11-24 23:10:01
确实很不幸，但这并不是Foundation和jquery ui之间的冲突。如果您仔细查看上方的内容，您会注意到我没有包括jquery UI css样式表。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.