This AngularJs function works only when the page loads for the first time and when I refresh it will work and when I go to other page and come back to this page it will not work.
I need this function to work even when I visit back from other pages.
Is there any alternative?
angular.element(document).ready(function () {
$("#SearchBox1").autocomplete('/api/search/predicateNames', {
formType: "POST",
dataType: "json",
scroll: false,
matchSubset: false,
width: 300,
max: 10,
selectFirst: false,
cacheLength: 1,
formatItem: formatResultItem,
parse: parseResultData,
selectedRearch: selectedRearchForMobile
});
});
Related
Observed that page takes too much time to load due to the script, I have similar 8-9 scripts on page, how to avoid script loading.
This a simple script to open pop up which can used for static and dynamic content.
<script> $(function () {
$("#LoginOpener").dialog({
autoOpen: false,
height: 350,
resizable: false,
modal: true,
minHeight: 250,`enter code here`
delay: 5000,
open: function (event, ui) {
$(event.target).dialog('widget')
.css({position: 'fixed'})
.position({my: 'center', at: 'center', of: window});
$('.test').addClass('test');
},
width: 600,
show: {
duration: 1000
},
hide: {
duration: 1000
}
});
$.ajax({
type: "GET",
cache: false,
url: "pagename.jsp"
});
$(".LoginOpener").click(function () {
$("#LoginOpener").dialog("open");
});
function closeCommentPopup()
{
$("#LoginOpener").dialog("close");
}
}); <script>
Got it ..it was due to "<%#include file="pagename.jsp" %>". So page always considers everything pagename.jsp during load. Hence it was loading.
Handled include through iFrame. It worked.
Have some issues with the Dialog Widgetm when displaying dialog, it shows as this:
But when using the mouse to resize the dialog, this issue dissapears, resizing the dialog.
Now what I want is force resizing the dialog by code.
This is the way I initialize the dialog and how I calles it:
$(document).ready(function () {
$("#dialogAccess").dialog({
autoOpen: false,
height: 300,
width:'auto',
resize:'auto',
modal: true,
position: {
my: "center",
at: "center",
of: window
},
open: function (event, ui) {
$(this).dialog('option', {
width: 300, height: 400, position: {
my: "center",
at: "center",
of: window
},
});
}
});
});
function accessQuestions(event) {
$.ajax({
url: someUrl,
type: 'GET',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
if (msg.d == true) {
$("#dialogAccess").dialog("open");
}
}
});
}
How can I trigger a resize event or force re-drawing the dialog?
The problem was caused by css, it was modified several times, by the designers of the ui. So I downloaded the original file from the jquery.ui page and replace it. then the issue disappear.
I'm using MVC 4 for my project and im trying to edit or display my data on popup.
When I call my open popup code 6 or 7 times I take javascript errors.
my controller is
public ActionResult OpenEditForm(string objectParam, string formStatus)
{
BranchNotesDetailViewModel viewModel = new BranchNotesDetailViewModel();
//..................
return PartialView("Edit", viewModel);
}
and my javascript code is
myDialog = $("<div> </div>");
function CreateDialog(name) {
myDialog.dialog({
autoOpen: false,
title: name,
resizable: false,
position: 'center',
stack: true,
height: 'auto',
width: 'auto',
modal: true,
close: function (event, ui) {
// remove div with all data and events
myDialog.remove();
//myDialog.dialog('close')
}
});
}
$('#brancNotesList .grid-row').click(function () {
var json = $(this).children('td:eq(1)').text().trim();
$.ajax({
contentType: 'application/html',
url: '#Url.Action("OpenEditForm", "BranchNotes")',
dataType: 'html',
type: 'GET',
data: {
objectParam: json,
formStatus: "1"
}
}).done(function (result) {
CreateDialog('Detail');
myDialog.html(result).dialog('open');
});
});
$(function () {
$(document).ajaxComplete(function (event, request, settings) {
//re-parse the DOM after Ajax to enable client validation for any new form fields that have it enabled
$.validator.unobtrusive.parse(document);
});
});
function openFormCreate() {
$.ajax({
contentType: 'application/html',
url: '#Url.Action("OpenEditForm", "BranchNotes")',
dataType: 'html',
type: 'GET',
data: {
formStatus: '2'
}
}).done(function (result) {
CreateDialog('Detail');
myDialog.html(result).dialog().dialog('open');
});
}
When i open dialogs one or two times it works but after fifth or sixth time it crashes with exception
JavaScript runtime error: Could not complete the operation due to error 80020101
I tried to find a memory problem or something after ajax call but i cant find where or what. Is there any way to handle that? I read about that problem some forums they say comments fields cause that but it not works for me.
I found my error. I have two layouts, one for main page one for edit page and i noticed some Jquery script files rendered in both pages. I cleaned the edit layout from jquery scripts then everything works fine.
I'm using the prime-ui autocomplete control (because the primefaces autocomplete control does not support partial update). I have my control defined thus:
$(document).on('click','.amd_auto_look_up',
function(event){
$('.amd_auto_look_up').puiautocomplete({
effect: 'fade',
effectSpeed: 'fast',
forceSelection: true,
delay: 100,
select: function (event, item) {
updateFunder(item, "amd", $(this))
},
completeSource:function(request, response) {
$.ajax({
type: "GET",
url: 'http://www.myURI',
data: {query: request.query},
dataType: "jsonp",
context: this,
success: function(data) {
response.call(this, data);
}
});
}
});
event.stopPropagation();
}
);
If I set
forceSelection: false,
all works fine. If I set
forceSelection: true,
the autocomplete popup fails to display altogether. Would anyone be able to point me in the direction of a solution/workaround for this please?
Answering my own question. Also posted in Prime ui forum. It was a bug. Now fixed. view response here: forceSelection fix
I am trying to display a popover for a element after a ajax call has been made. Everything works as far as the ajax request and getting the data the first time, except no data is displayed when mouseover event happens. But when you hover over it again, You can see the data in the popover. I looked around on here and the web and found similar situation but less complex than my situation (No mouseover event and ajax). I understand that popover seems not to be initialized when I first call it in my situation. But the thing is, that I only can show it after the ajax is being called and it has to be mouseenter. Can anyone modify or guide me to showing the popover on first try. Thanks for any help (Please note that there are two on my page I am just showing 1 of them).
Element
Access Count:
Javascript
$('#users').mouseenter(function () {
$.ajax({
type: "GET",
url: "/album/feature_getaccess",
data: { aID: modelID },
success: function (result) {
$('#users').popover({ content: result, html: true, placement: 'top', trigger: 'hover', delay: { show: 500, hide: 1500 } });
}
});
});
Works fine after the second mouse in.
Just remove the mouseenter stuff, the popover will still only appear on mouseenter, because you have it set to trigger: 'hover'
$.ajax({
type: "GET",
url: "/album/feature_getaccess",
data: { aID: modelID },
success: function (result) {
$('#users').popover({ content: result, html: true, placement: 'top', trigger: 'hover', delay: { show: 500, hide: 1500 } });
}
});