I have a link which opens a Bootstrap popver. Inside of this popover, I have a text field that I want to use as a Jquery Autocomplete. The problem is, I am unsure how to access the Div ID for the text box that is in the popover -- using conventional methods don't work. My Autocomplete works fine on a standalone page, but not on popover. Please help!
Text: <input type="text" id="add_game_search"/></div>'>Popover
$(document).ready(function () {
$('[data-toggle="add_game"]').popover({
'trigger': 'click',
'html': 'true',
'placement': 'bottom'
});
});
$(document).ready(function () {
$('.add_game_search').autocomplete({
source: function (request, response) {
$.ajax({
global: false,
url: "http://www.google.com",
dataType: "html",
success: function (data) {
response($.map(data, function (item) {
alert("in response");
}));
}
});
}
});
});
js fiddle: http://jsfiddle.net/hwEp6/2/
simplified fs fiddle proving the concept: http://jsfiddle.net/hwEp6/3/
Here the problem is not with jQuery autocomplete or bootstrap. The actual reason is #add_game_search is generated dynamically when you click the Popover which you have not handled.
Change your code as below,
$(document).ready(function () {
$('body').on('click', '#add_game_search', function () {
alert("here");
});
});
JSFiddle
Related
I use jquery ui 1.10.4 to implement the autocomplete, and it work fine.
but now i have to use the jquery ui 1.9.2, but the autocomplete will not work.
1.The search result will not display, so I add the open() and close() function to solved it. Reference by jqueryUI autocomplete menu show effect
2.But the select function not working now, it will direct to the other page before. I write a conosle.log in the select function, but it not show.
Have anyone can help me to solve it?
$("#tags").autocomplete({
enable: true,
delay: 300,
open: function () {
$('ul.ui-autocomplete').addClass('opened');
},
close: function () {
$('ul.ui-autocomplete')
.removeClass('opened')
.css('display', 'block');
},
source: function (request, response) {
// get data
},
select: function (e, ui) {
console.log('TEST');
location.href = "http://domain/Page?id=" + ui.item.data;
},
autoFocus: true
});
It should work, just change ui.item.data by ui.item.value. Don't know why your console.log doesn't work. What version of jquery core do you use?
$("#tags").autocomplete({
enable: true,
delay: 300,
open: function () {
$('ul.ui-autocomplete').addClass('opened');
},
close: function () {
$('ul.ui-autocomplete')
.removeClass('opened')
.css('display', 'block');
},
source: ['apple','banana','orange'],
select: function (e, ui) {
alert(ui.item.value);
},
autoFocus: true
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/themes/blitzer/jquery-ui.css"/>
<input id="tags" name="tags" type="text"/>
I have an infowindow in a google map like so,
var content = '<div id="link"><input type="button" value="Report this light" id="reportBtn"/></div>';
i am using jquery mobile to bind a 'click' event when the infowindow pops open on the map but it doens't fire, my code:
$(document).on('pageinit', function() {
$('#reportBtn').on('click', function() {
alert('it works');
});
});
You need to use event delegation. Try
$(document).on('pageinit', function() {
$(document).on('click', '#reportBtn', function() {
alert('it works');
});
});
Instead of document you can use nearest static element that is a parent to <div id="link">.
$('#nearestparent').on('click', '#reportBtn', function() {...});
Hi I'm trying to load a script to create some charts in a dialog box using JQuery.
In my view I have a partial ready and waiting that is in the dialog when I inspect it with Chrome Tools:
<div id="mydialog">
#Html.Partial("_fooChart", "Home")
</div>
I then have the dialog box that fires on click, the dialog opens but it is blank. If you inspect it with Chrome Tools you can see the elements from the partial are there. (The elements don't contain content, the function will create the content based on id's.)
Here is the dialog:
$(function () {
$('#mydialog').dialog({
autoOpen: false,
height: 800,
width: 800,
resizable: false,
open: function () {
$('#mydialog').load($('#mydialog'), function () {
fooChartLoad()
});
},
title: 'Foo Chart',
modal: true,
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
$('#my-button').click(function () {
$('#mydialog').dialog("open")
});
});
And here is the script I am trying to load:
function fooChartLoad() {
setTimeout(function () {
createFooChart();
$('#fooChartContainer').bind("kendo:skinChange", function (e) {
createFooChart();
});
}, 200);
}
Basically I'm trying to figure out why the dialog is not loading up the fooChartLoad when I call it with the open -> load function in JQuery dialog.
I had attempted to have a partial populate the dialog HTML before the .load called the scripts that would render data visuals, but .load it would appear works better when I loaded the partial and scripts at the same time as below:
open: function () {
$('#fooChartDialog').load($('#fooChartDialog').data('url'), function () {
fooChartLoad()
});
Friends I have a problem
We need to make a user control that has the ability to delete itself, I made it but we did not clear the mechanism for removal, it should be tied to a nice picture. Code that is attached to the frame is given below, but not
$('#delete').bind('click', function () {
alert('test');
var urlA = '<%=Url.Action("DeleteMessage","Ticket")%>';
$.ajax({
url: urlA,
type: 'POST',
data: { idMessage:$(this).parents("div:first").find("input[name='MessageID']").val(),idticket:$('#TicketID').val() },
success: function (data) {
alert(data);
}
});
});
But when I write this, but to throw me to the homepage what's wrong
$('#delete').live('click', function ()
$("#delete").live("click", function(){
//code
$(this).remove(); //delete itself
});
If your image is declared as input type="image" then it will behave like a submit button and submit your page. You should prevent the default behavior of submitting the page by adding an event.preventDefault() or equivalent to your javascript function.
I've found here that to overwrite one of the autocomplete events. But can somebody please provide me with example how to do the same?
The appendTo option does indeed work as expected, and if you inspect at the DOM, the <ul> results element will be attached to the element. However, due to absolute positioning generated by jQueryUI, the list still appears directly under the <input>.
That said, you can override the internal _renderItem to directly append results to a completely different element, for example:
HTML
<input id="autocomplete"/>
<div class="test">Output goes here:<br/><ul></ul></div>
JavaScript
$('input').autocomplete({
search: function(event, ui) {
$('.test ul').empty();
},
source: ["something", "something-else"]
}).data('autocomplete')._renderItem = function(ul, item) {
return $('<li/>')
.data('item.autocomplete', item)
.append(item.value)
.appendTo($('.test ul'));
};
I have also created a demo to demonstrate this. Please note that the latest jQuery library has not had jQueryUI tested against it fully, so I am using the previous version which allows me to select to include jQueryUI directly with the jsFiddle options.
<div class="test">Output goes here:<br/></div>
<script>
$("input#autocomplete").autocomplete({
source: ["something", "something-else"],
appendTo: ".text",
position: { my: "left top", at: "left bottom", of: ".test" }
// other options here
});
</script>
I needed more control over where to put the data, so this is how I went about it:
$("#input").autocomplete({
minLength: 3,
source: [
"ActionScript",
"AppleScript",
"Asp"
],
response: function(event, ui) {
console.log(ui.content);
// put the content somewhere
},
open: function(event, ui) {
// close the widget
$(this).autocomplete('close');
}
});
hle's answer worked awesome for me and gives you more flexibility! Here is my test code that was modified by his answer:
$("#autocomplete").autocomplete({
minLength: 3,
source: ["something", "something-else"],
response: function(event, ui)
{
console.log(ui.content);
// put the content somewhere
},
open: function(event, ui)
{
// close the widget
$(this).autocomplete('close');
}
});
Although this question is pretty old but i got a pretty easy solution. No hack, nothing just in jQuery way:
Instead of autocomplete response function, just add response data in div on success
$(document).ready(function () {
$("#book-code-search").autocomplete({
minLength: 2,
delay: 500,
source: function (request, response) {
$.ajax( {
url: "server side path that returns json data",
data: { searchText: request.term, param2 : $("#type").val()},
type: "POST",
dataType: "json",
success: function( data ) {
$("#data-success").html(data.returnedData); //returnedData is json data return from server side response
/* response($.map(data, function (item) {
return {
label: item.FullDesc,
value: item.FullDesc
}
})) */
}
});
}
});
});
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id='data-success' style='color: green;'></div>
<input type='text' placeholder='Enter Book Code' id='book-code-search' />
<input type='hidden' id='type' value='book'>