I'm getting a weird error when trying to concatenate a variable to a multi-line string.
Error: Could not find member 'convertFromStringInterpolationSegment'
func getOpeningHTML() -> String
{
let maxWidth:CGFloat = self.webView.frame.width
return
"<html>" +
"<head>" +
"<style type=\"text/css\">" +
"body {" +
"color: white;" +
"padding:12px;" +
"line-height:140%;" +
"}" +
"a:link {" +
"color: #32b3e3;" +
"}" +
"img {" +
"margin-top: 10px;" +
"margin-bottom: 10px;" +
"margin-right: 10px;" +
"padding:2px; float: left;" +
"clear: both;" +
"border: 1px solid #637981;" +
"max-width: \(maxWidth)px;" + // THIS LINE CAUSES THE ERROR
"}" +
"img[alt~='Clothing'] { display: none; }" +
"img[alt~='shop'] { display: none; }" +
"img[alt~='AppHidden'] { display: none; }" +
"</style>" +
"</head><body>"
}
Edit: Solution:
let maxWidth:CGFloat = self.webView.frame.width
var html:String = "<html>"
html += "<head>"
html += "<style type=\"text/css\">"
html += "body {"
html += "color: white;"
html += "padding:12px;"
html += "line-height:140%;"
html += "}"
html += "a:link {"
html += "color: #32b3e3;"
html += "}"
html += "img {"
html += "margin-top: 10px;"
html += "margin-bottom: 10px;"
html += "margin-right: 10px;"
html += "padding:2px; float: left;"
html += "clear: both;"
html += "border: 1px solid #637981;"
html += "max-width: \(maxWidth)px;"
html += "}"
html += "img[alt~='Clothing'] { display: none; }"
html += "img[alt~='shop'] { display: none; }"
html += "img[alt~='AppHidden'] { display: none; }"
html += "</style>"
html += "</head><body>"
return html
The swift compiler has known problems with long concatenations. Better set a variable and do the concatenations line-by-line:
var s = "<html>"
s += "<head>"
...
return s
As workaround in your example try to convert maxWidth to String and write as:
"max-width:" + String(maxWidth) + "px;"
func getOpeningHTML() -> String
{
let maxWidth = 20
return
"<html>" +
"<head>" +
"<style type=\"text/css\">" +
"body {" +
"color: white;" +
"padding:12px;" +
"line-height:140%;" +
"}" +
"a:link {" +
"color: #32b3e3;" +
"}" +
"img {" +
"margin-top: 10px;" +
"margin-bottom: 10px;" +
"margin-right: 10px;" +
"padding:2px; float: left;" +
"clear: both;" +
"border: 1px solid #637981;" +
"max-width:" + String(maxWidth) + "px;" +
"}" +
"img[alt~='Clothing'] { display: none; }" +
"img[alt~='shop'] { display: none; }" +
"img[alt~='AppHidden'] { display: none; }" +
"</style>" +
"</head><body>"
}
You are returning String in getOpeningHTML() and you have declared "maxwidth" as Int type. Don't forget about Swift's type inference.
Related
I'm looking to show a little pin image next to the column name on columns that are pinned just so it's more obvious.
I'm already using a custom header as I show a menu icon for each column that gives functionality per column, but not sure how to tell if the column is pinned and then display an image when pinned.
Here is my current custom header:
var newValuesColumnHeaderTemplate = '<div role="columnheader"' +
' ng-class="{ \'sortable\': sortable }"' +
' ui-grid-one-bind-aria-labelledby-grid="col.uid + \'-header-text \' + col.uid + \'-sortdir-text\'"' +
' aria-sort="{{col.sort.direction == asc ? \'ascending\' : ( col.sort.direction == desc ? \'descending\' : (!col.sort.direction ? \'none\' : \'other\'))}}">' +
' <div class="list-icon">' +
' <span class="glyphicon glyphicon-list" ng-click="grid.appScope.editOptionValues(col.field)"></span>' +
' </div>' +
'' +
' <div role="button"' +
' tabindex="-1"' +
' style="padding-left:15%"' +
' class="ui-grid-cell-contents ui-grid-header-cell-primary-focus"' +
' col-index="renderIndex"' +
' title="TOOLTIP">' +
' <span class="ui-grid-header-cell-label"' +
' ui-grid-one-bind-id-grid="col.uid + \'-header-text\'">' +
' {{ col.displayName CUSTOM_FILTERS }}' +
' </span>' +
' <span ui-grid-one-bind-id-grid="col.uid + \'-sortdir-text\'"' +
' ui-grid-visible="col.sort.direction"' +
' aria-label="{{getSortDirectionAriaLabel()}}">' +
' <i ng-class="{ \'ui-grid-icon-up-dir\': col.sort.direction == asc, \'ui-grid-icon-down-dir\': col.sort.direction == desc, \'ui-grid-icon-blank\': !col.sort.direction }"' +
' title="{{col.sort.priority ? i18n.headerCell.priority + \' \' + col.sort.priority : null}}"' +
' aria-hidden="true">' +
' </i>' +
' <sub class="ui-grid-sort-priority-number">' +
' {{}}' +
' </sub>' +
' </span>' +
' </div>' +
' <div role="button"' +
' tabindex="-1"' +
' ui-grid-one-bind-id-grid="col.uid + \'-menu-button\'"' +
' class="ui-grid-column-menu-button"' +
' ng-if="grid.options.enableColumnMenus && !col.isRowHeader && col.colDef.enableColumnMenu !== false"' +
' ng-click="toggleMenu($event)"' +
' ng-class="{\'ui-grid-column-menu-button-last-col\': isLastCol}"' +
' ui-grid-one-bind-aria-label="i18n.headerCell.aria.columnMenuButtonLabel"' +
' aria-haspopup="true">' +
' <i class="ui-grid-icon-angle-down"' +
' aria-hidden="true">' +
' ' +
' </i>' +
' </div>' +
' <div ui-grid-filter></div>' +
'</div>';
One way around this may be to target the pinned columns via CSS, e.g. (assuming FontAwesome has been referenced for images):
.ui-grid-pinned-container .ui-grid-header-cell {
position: relative;
}
.ui-grid-pinned-container .ui-grid-header-cell:after {
position: absolute;
font-family: 'FontAwesome';
content: '\f08d'; // fa-thumb-tack
font-size: .75em;
right: 2em;
top: 0.5em;
width: 1em;
height: 1em;
}
See: http://plnkr.co/edit/RU4KnysM6s0aeYzI3KYJ?p=preview
i try to create table in mvc with webgrid, when i click remove button, data in table will change with data from Json Response in ajax jquery. i try to show json response in table but u can't. i try using $.each and still not working for me. i try to followingthis answer but still not work for me.. can some one tell me and help me, how to show data from json result in jquery and change data in my webgrid table??
this my code
my webgrid
#grid.GetHtml(
tableStyle: "grid",
headerStyle: "head",
alternatingRowStyle: "alt",
firstText: "<< First",
previousText: "< Prev",
nextText: "Next >",
lastText: "Last >>",
mode: WebGridPagerModes.All,
columns: grid.Columns(
grid.Column("HotelID", "HotelID", #<text><label id="hotelIDMap
">#item.HotelID</label></text>),
grid.Column("RKI Hotel", "Hotel", #<text>
<div style='width: auto; margin-right: 25px;'>
<div style="width: 65px; float: left;">Hotel Name </div>
: #item.HotelName
<br />
<div style="width: 65px; float: left;">Address </div>
: #item.Address
<br />
<div style="width: 65px; float: left;">Phone </div>
: #item.Telephone
<br />
<div style="width: 65px; float: left;">Fax </div>
: #item.Fax
</div></text>),
grid.Column("Mapping Hotel", "Mapping Hotel", format: (item) =>
{
string tmp = "<div style='text-align: left;color: grey;height:auto;" +
"width: auto;padding: 10px; overflow: auto; overflow-x:hidden;'>";
var sub = new WebGrid(Model.SearchResult.Where(r => r.SearchFromHotel == item.HotelName), canSort: false);
tmp += sub.GetHtml(
tableStyle: "Subgrid",
rowStyle: *"Subrow-" + #item.HotelID*, (i want to change this row)
headerStyle: "Subhead",
alternatingRowStyle: "alt",
columns: sub.Columns(
sub.Column("HotelID", "HotelID", format: (subitem) =>
{
string temp3 = "<div class='idHOtel-" + subitem.HotelID.ToString() + "'style='text-align: left;color: grey;height:auto;" +
"width: auto; overflow: auto; overflow-x:hidden;'>";
temp3 = temp3 + item.HotelID.ToString();
temp3 += "</div>";
return new HtmlString(temp3);
}
),
sub.Column("HotelName", "Hotel", format: (subitem) =>
{
string tmp2 = "<div style='text-align: left;color: grey;height:auto;" +
"width: 175px; padding-right: 1em; overflow: auto; overflow-x:hidden;'>";
tmp2 = tmp2 + "Hotel Name : ";
foreach (var test in subitem.HotelName)
{
tmp2 += test;
}
tmp2 = tmp2 + "<br />";
tmp2 = tmp2 + "Alamat : ";
foreach (var address in subitem.Address)
{
tmp2 += address;
}
tmp2 = tmp2 + "<br />";
tmp2 = tmp2 + "Phone Number : ";
foreach (var Telephone in subitem.Telephone)
{
tmp2 += Telephone;
}
tmp2 = tmp2 + "<br />";
tmp2 = tmp2 + "Fax Number : ";
foreach (var Fax in subitem.Fax)
{
tmp2 += Fax;
}
tmp2 += "</div>";
return new HtmlString(tmp2);
}),
sub.Column("Action", "Action", format: (subitem) =>
{
string tmp3 = "<div style='text-align: left;color: grey;height:auto;" +
"width: auto; overflow: auto; overflow-x:hidden;'>";
tmp3 = tmp3 + "<input id='" + subitem.HotelID + "' class='Mapping-Save' type='button' value='Select' />";
tmp3 = tmp3 + " ";
tmp3 = tmp3 + "<input id='" + subitem.HotelID + "' class='Mapping-Remove' type='button' value='Remove' />";
return new HtmlString(tmp3);
})
));
tmp += "</div>";
return new HtmlString(tmp);
})
)
)
and this my jquery code
$('.Mapping-Remove').on("click", function () {
var tr = $(this).parents('tr:first');
tr.find('.Mapping-Remove, .Mapping-Save').toggle();
var HotelID = $('.idHOtel-' + $(this).attr('id')).text();
$.ajax({
url: '#Url.Action("RemoveMappingHotel", "Mapping")',
type: "Post",
data: {
HotelID: HotelID
},
dataType: 'json',
success: function () {
alert("Success Remove Data");
$.ajax({
url: '#Url.Action("HotelForMapping", "Json")',
type: "Post",
data: {
HotelID: HotelID
},
dataType: 'json',
success: function (data) {
// $('.Subrow-' + HotelID).replaceWith('<tr><td>3</td><td>4</td><td style="width:100px;"><input type="button" value="Remove" /></td><tr>' + ""
//+ '<tr><td>3</td><td>4</td><td style="width:100px;"><input type="button" value="Remove" /></td><tr>' + ""
//+ '<tr><td>3</td><td>4</td><td style="width:100px;"><input type="button" value="Remove" /></td><tr>');
}
});
},
error: function (data) {
alert("Error Mapping Data");
tr.find('.Mapping-Remove, .Mapping-Save').toggle();
}
});
});
please, i need help.. thanks...
Try this after success: function (data) {
$('#NAME OF YOUR Grid content').html(LISTVALUES FROM CONTROLER);
Hi I am trying to get all this content in a string variable which I then used to create a text file
The problem is that it always fails when you use this code:
html: = '
<title> test </ title>
<STYLE type=text/css>
body, a: link {
background-color: black;
color: red;
Courier New;
cursor: crosshair;
font-size: small;
}
input, table.outset, table.bord, table, textarea, select, fieldset, td, tr {
font: normal 10px Verdana, Arial, Helvetica,
sans-serif;
background-color: black;
color: red;
border: 1px solid # 00FF0red0;
border-color: red
}
a: link, a: visited, a: active {
color: red;
font: normal 10px Verdana, Arial, Helvetica,
sans-serif;
text-decoration: none;
}
</ style>
';
What I have to do to make it work ?
You have to properly concatenate the string, using the + string concatenation operator.
html: = '<title> test </ title>' + sLineBreak +
'<STYLE type=text/css>' + sLineBreak + sLineBreak +
'body, a: link {' + sLineBreak +
'background-color: black;' + sLineBreak +
'color: red;' + sLineBreak +
'Courier New;' + sLineBreak +
'cursor: crosshair;' + sLineBreak +
'font-size: small;' + sLineBreak +
'}'; // Keep going with the rest of your text
Or, simply use a TStringList:
var
html: TStringList;
begin
html := TStringList.Create;
try
html.Add('<title> test </ title>');
html.Add('');
html.Add('<STYLE type=text/css>');
html.Add('body, a: link {');
html.Add('background-color: black');
html.Add('color: red;');
html.Add('Courier New;');
html.Add('cursor: crosshair;');
html.Add('font-size: small;');
html.Add('}'; // Keep going with the rest of your text
html.SaveToFile('YourFileName.html');
finally
html.Free;
end;
end;
I'm having a bit of a problem with putting a jQuery UI tab menu inside a Google Map InfoWindow.
The infowindows are created from a Fusion Table which is layered on the base map. I've got an example using the Maps infowindows that works perfectly (still has styling to be done and the data is incomplete, though)
However, the infowindows are a bit too restrictive and I need more flexibility in styling, so I switched over to using InfoBox.js. Thankfully, it fits in pretty well, and all I had to do was change a few selectors so it all matched up. The boxes work perfectly BUT the jquery tabs now don't work at all. The class attributes that should be created in the HTML, aren't.
Here's the original script using infowindows:
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('maps', '3', {other_params:'sensor=false'});
google.load('jquery', '1');
google.load("jqueryui", "1");
</script>
<script type="text/javascript">
function initialize() {
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 7,
center: new google.maps.LatLng(52.51112385136416, -3.718475750781187),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var layer = new google.maps.FusionTablesLayer({
query: {
select: "col2>>1",
from: "1GbF1tKsgQshl1kxOLNDGgw52Wv8bWYL6njpcKVI"
},
styleId: 2,
map: map,
suppressInfoWindows: true
});
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(layer, 'click', function(e) {
var childpoverty = e.row['Child poverty rate'].value;
if (childpoverty > 22) {
pcolour = '<p style="color: red; font-weight: bold;">';
}
else if (childpoverty > 13) {
pcolour = '<p style="color: orange; font-weight: bold;">';
}
else {
pcolour = '<p style="color: green; font-weight: bold;">';
};
var sponsored = e.row['Sponsorship'].value;
if (sponsored == 1) {
contentString = [
'<div class="tabs">',
'<ul>',
'<li><span>Sponsor</span></li>',
'<li><span>Information</span></li>',
'</ul>',
'<div id="tab-1">',
'<p style="font-weight: bold;">' + e.row['Local authority'].value + '</p>',
'<img src="' + e.row['Logo'].value + '" width="100"></img>',
'</div>',
'<div id="tab-2">',
'<p style="font-weight: bold;">' + e.row['Local authority'].value + '</p>',
'<p>' + e.row['Political control'].value + '</p>',
pcolour + e.row['Child poverty rate'].value + '</p>',
'<p>' + e.row['Unemployment rate'].value + '</p>',
'</div>',
'</div>'
].join('')}
else {
contentString = [
'<div class="tabs">',
'<p style="font-weight: bold;">' + e.row['Local authority'].value + '</p>',
'<p>' + e.row['Political control'].value + '</p>',
pcolour + e.row['Child poverty rate'].value + '</p>',
'<p>' + e.row['Unemployment rate'].value + '</p>',
'</div>'
].join('')};
infowindow.setContent(contentString);
infowindow.setPosition(e.latLng);
infowindow.open(map);
$(".tabs").tabs({ selected: 0 });
});
}
</script>
And here's the script with the infowboxes
<link type="text/css" href="http://code.jquery.com/ui/1.8.12/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('maps', '3', {other_params:'sensor=false'});
google.load('jquery', '1');
google.load("jqueryui", '1');
</script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox_packed.js"></script>
<script type="text/javascript">
function initialize() {
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 7,
center: new google.maps.LatLng(52.51112385136416, -3.718475750781187),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var layer = new google.maps.FusionTablesLayer({
query: {
select: "col2>>1",
from: "1GbF1tKsgQshl1kxOLNDGgw52Wv8bWYL6njpcKVI"
},
styleId: 2,
map: map,
suppressInfoWindows: true
});
var ib = new InfoBox();
google.maps.event.addListener(layer, 'click', function(e) {
var childpoverty = e.row['Child poverty rate'].value;
if (childpoverty > 22) {
pcolour = '<p style="color: red; font-weight: bold;">';
}
else if (childpoverty > 13) {
pcolour = '<p style="color: orange; font-weight: bold;">';
}
else {
pcolour = '<p style="color: green; font-weight: bold;">';
};
var sponsored = e.row['Sponsorship'].value;
if (sponsored == 1) {
iboxText = [
'<div class="tabs">',
'<ul>',
'<li><span>Sponsor</span></li>',
'<li><span>Information</span></li>',
'</ul>',
'<div id="tab-1">',
'<p style="font-weight: bold;">' + e.row['Local authority'].value + '</p>',
'<img src="' + e.row['Logo'].value + '" width="100"></img>',
'</div>',
'<div id="tab-2">',
'<p style="font-weight: bold;">' + e.row['Local authority'].value + '</p>',
'<p>' + e.row['Political control'].value + '</p>',
pcolour + e.row['Child poverty rate'].value + '</p>',
'<p>' + e.row['Unemployment rate'].value + '</p>',
'</div>',
'</div>'
].join('')}
else {
iboxText = [
'<div class="tabs">',
'<p style="font-weight: bold;">' + e.row['Local authority'].value + '</p>',
'<p>' + e.row['Political control'].value + '</p>',
pcolour + e.row['Child poverty rate'].value + '</p>',
'<p>' + e.row['Unemployment rate'].value + '</p>',
'</div>'
].join('')};
var myOptions = {
disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(-140, 0)
,zIndex: null
,boxStyle: {
background: "white"
,opacity: 0.75
,width: "280px"
,padding: "5px"
}
,closeBoxMargin: "10px 2px 2px 2px"
,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
,infoBoxClearance: new google.maps.Size(1, 1)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
};
ib.setOptions(myOptions);
ib.setContent(iboxText);
ib.setPosition(e.latLng);
ib.open(map);
$(".tabs").tabs({ selected: 0 })
});
}
</script>
Like I say, virtually completely the same, except the second one, no tabs.
I am SO stuck, any help would be so appreciated.
call $.tabs() when the domready-event of the infobox fires(the infobox has been attached to the DOM at this time, when you call $.tabs() earlier the infobox-content cannot be found by jQuery):
google.maps.event.addListener(ib,'domready',function(){
$(".tabs").tabs({ selected: 0 })
});
This worked for me:
google.maps.event.addListener(infoWindow, 'domready', function() {
jQuery("#tabs").tabs();
});
I have written
1) scripts using datatable.js to show data
2) autocomplete method
PortletDraggable.init();
FormFileUpload.init();
EducationalQualification.init();
WorkExperience.init();
Supervisions.init();
Awards.init();
Publication.init();
All these are datatable methods working properly. But when I add jquery.auto-complete.js script reference, these methods stop working and autocomplete start working.
Where is the problem, please suggest.
<script>
$('.date-picker').datepicker({
format: 'mm/dd/yyyy'
});
// var oTable = null;
jQuery(document).ready(function () {
App.init();
PortletDraggable.init();
FormFileUpload.init();
EducationalQualification.init();
WorkExperience.init();
Supervisions.init();
Awards.init();
Publication.init();
});
var tmpMem = 0; var tmpAward = 0; var tmpPub = 0;
// Js For Autocomplete
$('input[name=SearchUser]').autocomplete({
source: function (request, response) {
tmpMem = 0; tmpAward = 0; tmpPub = 0;
$.ajax({
type: 'GET',
url: '#Url.Action("SearchUser", "Profile")',
data: { FirstName: $("#SearchUser").val() },
// url: "/Profile/SearchUser?FirstName=" + $("#SearchUser").val(),
contentType: "application/json; charset=utf-8",
// dataType: "json",
beforeSend: function () {
// code to show loading image
//$(".ui-content").css("opacity", "0.4");
//$("#imgLoader").attr("style", "display:block");
//var df = document.getElementById('imgLoader');
//df.style.position = 'absolute';
//var wd = ($(window).width() / 2) - 45;
//var hg = ($(window).height() / 2) - 60;
//df.style.left = wd + "px";
//df.style.top = hg + "px";
},
complete: function () {
//hide loading image
$(".ui-content").css("opacity", "1.0");
$("#imgLoader").attr("style", "display:none");
},
success: function (data) {
alert(data.data[0].Fname);
response($.map(data.data, function (item) {
return {
Sn: item.Sn, Fname: item.Fname, Mname: item.Uname, Lname: item.Lname, Title: item.Title,
Image: item.Image, Organization: item.Organization, JobTitle: item.JobTitle,
Awardname: item.Awardname, AwardYear: item.AwardYear, Pubname: item.Pubname, Pubtype: item.Pubtype, TabType: item.TabType
}
}))
}
})
},
select: function (event, ui) {
//var domainURL = $("#domainurl").val();
//window.location = domainURL + "/home/NeighborProfile?id=" + ui.item.id;
// alert(ui.item.Sn);
}
}).data("autocomplete")._renderItem = function (ul, item) {
// alert(item);="
if (item.TabType == "member") {
if (tmpMem == 0) {
tmpMem = 1;
return $("<li class='SearchUserLi'></li>").data("item.autocomplete", item).append(
"<a href=' ' class='SearchUserLink'>" +
"<img src='" + item.Image + "' alt='" + item.Fname + "' class='SearchUserImg'>" +
"<span class='searchUserLight'>" +
item.Title + ". " + item.Fname +
"<span style=' font-weight: bold;color:black'>" + " " + item.Organization + "</span>" +
"</span>" +
"<span style=' font-size : 10px; color: #3B5998;'>" + item.JobTitle + "</span>" +
"</a>"
).prepend("<span class='SearchUsercategory'> Members </span>").appendTo(ul);
}
return $("<li class='SearchUserLi'></li>").data("item.autocomplete", item).append(
"<hr class='SearchUserHr'>" +
"<a href=' ' class='SearchUserLink'>" +
"<img src='" + item.Image + "' alt='" + item.Fname + "' class='SearchUserImg'>" +
"<span class='searchUserLight'>" +
item.Title + ". " + item.Fname +
"<span style=' font-weight: bold;color:black'>" + " " + item.Organization + "</span>" +
"</span>" +
"<span style=' font-size : 10px; color: #3B5998;'>" + item.JobTitle + "</span>" +
"</a>"
).appendTo(ul);
}
else if (item.TabType == "award") {
if (tmpAward == 0) {
tmpAward = 1;
return $("<li style='padding:0px!important;height:80px'></li>").data("item.autocomplete", item).append(
"<a href=' ' class='SearchUserLink'>" +
"<img src='" + item.Image + "' alt='" + item.Fname + "' class='SearchUserImg'>" +
"<span class='searchUserLight'>" +
item.Title + ". " + item.Fname +
"<span style=' font-weight: bold;color:black'>" + " " + item.Organization + "</span>" +
"</span>" +
"<span style=' font-size : 10px; color: #3B5998;'>" + " " + item.Awardname + "(" + item.AwardYear + ")" + "</span>" +
"</a>"
).prepend("<span class='SearchUsercategory'> Awards </span>").appendTo(ul)
}
return $("<li style='padding:0px!important;height:80px'></li>").data("item.autocomplete", item).append(
"<hr class='SearchUserHr'>" +
"<a href=' ' class='SearchUserLink'>" +
"<img src='" + item.Image + "' alt='" + item.Fname + "' class='SearchUserImg'>" +
"<span class='searchUserLight'>" +
item.Title + ". " + item.Fname +
"<span style=' font-weight: bold;color:black'>" + " " + item.Organization + "</span>" +
"</span>" +
"<span style=' font-size : 10px; color: #3B5998;'>" + " " + item.Awardname + "(" + item.AwardYear + ")" + "</span>" +
"</a>"
).appendTo(ul);
}
else if (item.TabType == "publications") {
if (tmpPub == 0) {
tmpPub = 1;
return $("<li style='padding:0px!important;height:80px'></li>").data("item.autocomplete", item).append(
"<a href=' ' class='SearchUserLink'>" +
"<img src='" + item.Image + "' alt='" + item.Fname + "' class='SearchUserImg'>" +
"<span class='searchUserLight'>" +
item.Title + ". " + item.Fname +
"<span style=' font-weight: bold;color:black'>" + " " + item.Organization + "</span>" +
"</span>" +
"<span style=' font-size : 10px; color: #3B5998;'>" + " " + item.Pubname + "," + item.Pubtype + "</span>" +
"</a>"
).prepend("<span class='SearchUsercategory'> Publications </span>").appendTo(ul)
}
return $("<li style='padding:0px!important;height:80px'></li>").data("item.autocomplete", item).append(
"<hr class='SearchUserHr'>" +
"<a href=' ' class='SearchUserLink'>" +
"<img src='" + item.Image + "' alt='" + item.Fname + "' class='SearchUserImg'>" +
"<span class='searchUserLight'>" +
item.Title + ". " + item.Fname +
"<span style=' font-weight: bold;color:black'>" + " " + item.Organization + "</span>" +
"</span>" +
"<span style=' font-size : 10px; color: #3B5998;'>" + " " + item.Pubname + "," + item.Pubtype + "</span>" +
"</a>"
).appendTo(ul);
}
};
</script>
After you include jQuery, add the following in a script tag immediately after it. Hope this solves your problem.
jQuery.noConflict();
I'm not sure how your datepicker or autocomplete would work like this. They are both adding functionality to DOM elements when the DOM may not be ready. Try something like this:
<script>
var initFields = function() {
//Date Picker
$('.date-picker').datepicker({
format: 'mm/dd/yyyy'
});
//Autocomplete
var tmpMem = 0; var tmpAward = 0; var tmpPub = 0;
// Js For Autocomplete
$('input[name=SearchUser]').autocomplete({
source: function (request, response) {
tmpMem = 0; tmpAward = 0; tmpPub = 0;
$.ajax({
type: 'GET',
url: '#Url.Action("SearchUser", "Profile")',
data: { FirstName: $("#SearchUser").val() },
// url: "/Profile/SearchUser?FirstName=" + $("#SearchUser").val(),
contentType: "application/json; charset=utf-8",
// dataType: "json",
beforeSend: function () {
// code to show loading image
//$(".ui-content").css("opacity", "0.4");
//$("#imgLoader").attr("style", "display:block");
//var df = document.getElementById('imgLoader');
//df.style.position = 'absolute';
//var wd = ($(window).width() / 2) - 45;
//var hg = ($(window).height() / 2) - 60;
//df.style.left = wd + "px";
//df.style.top = hg + "px";
},
complete: function () {
//hide loading image
$(".ui-content").css("opacity", "1.0");
$("#imgLoader").attr("style", "display:none");
},
success: function (data) {
alert(data.data[0].Fname);
response($.map(data.data, function (item) {
return {
Sn: item.Sn, Fname: item.Fname, Mname: item.Uname, Lname: item.Lname, Title: item.Title,
Image: item.Image, Organization: item.Organization, JobTitle: item.JobTitle,
Awardname: item.Awardname, AwardYear: item.AwardYear, Pubname: item.Pubname, Pubtype: item.Pubtype, TabType: item.TabType
}
}))
}
})
},
select: function (event, ui) {
//var domainURL = $("#domainurl").val();
//window.location = domainURL + "/home/NeighborProfile?id=" + ui.item.id;
// alert(ui.item.Sn);
}
}).data("autocomplete")._renderItem = function (ul, item) {
// alert(item);="
if (item.TabType == "member") {
if (tmpMem == 0) {
tmpMem = 1;
return $("<li class='SearchUserLi'></li>").data("item.autocomplete", item).append(
"<a href=' ' class='SearchUserLink'>" +
"<img src='" + item.Image + "' alt='" + item.Fname + "' class='SearchUserImg'>" +
"<span class='searchUserLight'>" +
item.Title + ". " + item.Fname +
"<span style=' font-weight: bold;color:black'>" + " " + item.Organization + "</span>" +
"</span>" +
"<span style=' font-size : 10px; color: #3B5998;'>" + item.JobTitle + "</span>" +
"</a>"
).prepend("<span class='SearchUsercategory'> Members </span>").appendTo(ul);
}
return $("<li class='SearchUserLi'></li>").data("item.autocomplete", item).append(
"<hr class='SearchUserHr'>" +
"<a href=' ' class='SearchUserLink'>" +
"<img src='" + item.Image + "' alt='" + item.Fname + "' class='SearchUserImg'>" +
"<span class='searchUserLight'>" +
item.Title + ". " + item.Fname +
"<span style=' font-weight: bold;color:black'>" + " " + item.Organization + "</span>" +
"</span>" +
"<span style=' font-size : 10px; color: #3B5998;'>" + item.JobTitle + "</span>" +
"</a>"
).appendTo(ul);
}
else if (item.TabType == "award") {
if (tmpAward == 0) {
tmpAward = 1;
return $("<li style='padding:0px!important;height:80px'></li>").data("item.autocomplete", item).append(
"<a href=' ' class='SearchUserLink'>" +
"<img src='" + item.Image + "' alt='" + item.Fname + "' class='SearchUserImg'>" +
"<span class='searchUserLight'>" +
item.Title + ". " + item.Fname +
"<span style=' font-weight: bold;color:black'>" + " " + item.Organization + "</span>" +
"</span>" +
"<span style=' font-size : 10px; color: #3B5998;'>" + " " + item.Awardname + "(" + item.AwardYear + ")" + "</span>" +
"</a>"
).prepend("<span class='SearchUsercategory'> Awards </span>").appendTo(ul)
}
return $("<li style='padding:0px!important;height:80px'></li>").data("item.autocomplete", item).append(
"<hr class='SearchUserHr'>" +
"<a href=' ' class='SearchUserLink'>" +
"<img src='" + item.Image + "' alt='" + item.Fname + "' class='SearchUserImg'>" +
"<span class='searchUserLight'>" +
item.Title + ". " + item.Fname +
"<span style=' font-weight: bold;color:black'>" + " " + item.Organization + "</span>" +
"</span>" +
"<span style=' font-size : 10px; color: #3B5998;'>" + " " + item.Awardname + "(" + item.AwardYear + ")" + "</span>" +
"</a>"
).appendTo(ul);
}
else if (item.TabType == "publications") {
if (tmpPub == 0) {
tmpPub = 1;
return $("<li style='padding:0px!important;height:80px'></li>").data("item.autocomplete", item).append(
"<a href=' ' class='SearchUserLink'>" +
"<img src='" + item.Image + "' alt='" + item.Fname + "' class='SearchUserImg'>" +
"<span class='searchUserLight'>" +
item.Title + ". " + item.Fname +
"<span style=' font-weight: bold;color:black'>" + " " + item.Organization + "</span>" +
"</span>" +
"<span style=' font-size : 10px; color: #3B5998;'>" + " " + item.Pubname + "," + item.Pubtype + "</span>" +
"</a>"
).prepend("<span class='SearchUsercategory'> Publications </span>").appendTo(ul)
}
return $("<li style='padding:0px!important;height:80px'></li>").data("item.autocomplete", item).append(
"<hr class='SearchUserHr'>" +
"<a href=' ' class='SearchUserLink'>" +
"<img src='" + item.Image + "' alt='" + item.Fname + "' class='SearchUserImg'>" +
"<span class='searchUserLight'>" +
item.Title + ". " + item.Fname +
"<span style=' font-weight: bold;color:black'>" + " " + item.Organization + "</span>" +
"</span>" +
"<span style=' font-size : 10px; color: #3B5998;'>" + " " + item.Pubname + "," + item.Pubtype + "</span>" +
"</a>"
).appendTo(ul);
}
};
};
// var oTable = null;
jQuery(document).ready(function () {
App.init();
PortletDraggable.init();
FormFileUpload.init();
EducationalQualification.init();
WorkExperience.init();
Supervisions.init();
Awards.init();
Publication.init();
initFields();
});
</script>
If that doesn't work, then you may want to check what all JavaScript files you are including to ensure all their versions are compatible, and no two are defining the same functions/objects.
Rather than adding a single Autocomplete script reference, simply add jquery.ui complete bundle script reference. I had a similar problem, but after adding jquery.ui and removing autocomplete scripts, everything started to work fine. Hope it helps