I am having a small issue with the dialog UI. I marked the zIndex value to high number but it seems that it is ignoring it.
The following is my code
$( "#number-add" ).dialog({
resizable: false,
width: 500,
modal: false,
autoOpen: false,
stack: false,
zIndex: 9999,
buttons: {
"Add Contact": function(e) {
var formData = $('#number-add-form').serialize();
//submit record
$.ajax({
type: 'POST',
url: 'ajax/handler-add-new-account-number.php',
data: formData,
dataType: 'json',
cache: false,
timeout: 7000,
success: function(data) {
$('#responceAddNumber').removeClass().addClass((data.error === true) ? 'errorBox' : 'passBox').html(data.msg).fadeIn('fast');
if ($('#responceAddNumber').hasClass('passBox')) {
$('#responceAddNumber').fadeIn('fast');
$('#add-form').hide();
window.location.reload();
setTimeout(function() {
$(this).dialog( "close" );
}, 1000);
}
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
$('#response-add').removeClass().addClass('errorBox')
.html('<p>There was an<strong> ' + errorThrown +
'</strong> error due to a<strong> ' + textStatus +
'</strong> condition.</p>').fadeIn('fast');
},
complete: function(XMLHttpRequest, status) {
if ( $('#response-add').hasClass('passBox') ){
$('form')[0].reset();
}
}
});
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
I set the stack value to false and the zIndex to 9999. What am I doing wrong here for the zIndex not to work? I am using jQuery UI Dialog 1.10.2.
Thanks for your help.
I spent far too long grappling with this issue in jQuery UI 1.9. Eventually I settled on this somewhat brute force approach to setting the z-index for my modal dialogs.
$('#dialog').dialog({
modal: true,
zIndex: 25,
stack: false,
open: function (event, ui) {
$('#dialog').parent('.ui-dialog').css('zIndex', 26)
.nextAll('.ui-widget-overlay').css('zIndex', 25);
}
});
You may need to play with the DOM traversal in the open event to properly select your overlay, or omit it if you are not using a modal dialog, but this has given me good reliable results.
Looks like applying the resizeable:false option makes it so the position does not get set which is needed for z-index to work
either set resizeable:true, remove it, or set the parent ui-dialog to have a position:absolute
//after .dialog() call
$( "#number-add" ).parent(".ui-dialog").css({position:"absolute"});
or set a css style have the ui-dialog to have position:absolute
.ui-dialog {
position:absolute;
}
though not sure how this overall style will affect the functionality of jQuery UI Dialog
Related
I have following code in jQgrid and I am using jQuery ui autocomplete in one of the field. But the pop up of autocomplete displays somewhere else as shown in figure. From IE developer tools I noticed the results are attached to body tag, which is at the end of the page. I tried using appendTo, but that doesn't help.
{
name: 'nameAccount',
index: 'nameAccount',
width: 300,
editable: true, sortable: false, resizable: false,
shrinkToFit: true
,editoptions: {
dataInit: function (elem) {
var autocompleteSource = function(request, response,term) {
var param = request.term;
$.ajax({
url: myUrl,
contentType: "application/json; charset=utf-8",
dataType: "json",
type: "GET",
success: function (myyydata) {
//alert('HI-Success');
//response( myyydata );
response($.map(myyydata, function (item) {
return {
label: item.AccountInfo,
value: item.AccountInfo
}
}));
} ,
error: function (res, status) {
alert('HI-error');
//alert(res.status+" : "+res.statusText+". Status: "+status);
}
});//END AJAX
};
$(elem).autocomplete({
source: autocompleteSource,
//appendTo: "#"+elem.id,
position: { collision: "flip" },
minLength: 2
});//END AUOTOCOMPLETE
}//END Dataint
}//END Dataint
},
minnu4515. i guess it is because of the css misalignment. i faced the similar problem and i manually set the z-index alignmnet. that solved my issue.
$('.ui-autocomplete').css('zIndex',1000);
so I have a dialog UI with a form once a user click on a link it opens. Once they click "Add button" it create a AJAX call that submits the data into the database. What I need to add is reload() function to refresh the page.
How can I add the reload function?
I have tried to add windows.localtion.reload(); you can see it my code. That line does not work for some reason
//Update contact dialog box
$( "#contact-edit" ).dialog({
resizable: false,
width: 500,
modal: true,
autoOpen: false,
buttons: {
"Update Info": function(e) {
var formData = $('#edit-form').serialize();
//submit record
$.ajax({
type: 'POST',
url: 'ajax/handler-contact-update.php',
data: formData,
dataType: 'json',
cache: false,
timeout: 7000,
success: function(data) {
$('#response-edit').removeClass().addClass((data.error === true) ? 'errorBox' : 'passBox').html(data.msg).fadeIn('fast');
if ($('#response-edit').hasClass('passBox')) {
$('#response-edit').fadeIn('fast');
$('#edit-form').hide();
$( "#contact-edit" ).dialog("close");
windows.localtion.reload();
}
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
$('#response-edit').removeClass().addClass('errorBox')
.html('<p>There was an<strong> ' + errorThrown +
'</strong> error due to a<strong> ' + textStatus +
'</strong> condition.</p>').fadeIn('fast');
},
complete: function(XMLHttpRequest, status) {
$('form')[0].reset();
//$( this ).dialog( "close" );
}
});
},
Cancel: function() {
$( this ).dialog( "close" );
},
Submit: function(){
$('form')[0].submit();
}
}
});
You have a typo:
windows.localtion.reload();
Should be
window.location.reload();
You can try many ways to reload the page, I have tried few, at least few may help somebody.
location.reload()
location.reload(false)
window.location = window.location
window.location.reload();
If you using link then use this :
location.href = location.href
I want to load all events on FullCalendar using AJAX when I clicked next-previous-button in agenda-views.
I guess, when will click on next-previous-button then I'll send current date('y-m-d') to url: 'fetch-events.php' then it will return event{ id: ,title: , start: , end: , allDay: } format data for rendering on calendar
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
selectable: false,
selectHelper: false,
editable: false,
events: // on-click next-previous button load events using Ajax
// post date using Ajax, then query to fetch all events and return data
});
JSON not working in my case
From the FullCalendar Online Documentation
FullCalendar will call this function whenever it needs new event data.
This is triggered when the user clicks prev/next or switches views.
This function will be given start and end parameters, which are
Moments denoting the range the calendar needs events for.
timezone is a string/boolean describing the calendar's current
timezone. It is the exact value of the timezone option.
It will also be given callback, a function that must be called when
the custom event function has generated its events. It is the event
function's responsibility to make sure callback is being called with
an array of Event Objects.
Here is an example showing how to use an event function to fetch
events from a hypothetical XML feed:
$('#calendar').fullCalendar({
events: function(start, end, timezone, callback) {
$.ajax({
url: 'myxmlfeed.php',
dataType: 'xml',
data: {
// our hypothetical feed requires UNIX timestamps
start: start.unix(),
end: end.unix()
},
success: function(doc) {
var events = [];
$(doc).find('event').each(function() {
events.push({
title: $(this).attr('title'),
start: $(this).attr('start') // will be parsed
});
});
callback(events);
}
});
}
});
Source
I made some little changes:
$('#calendar').fullCalendar({
events: function(start, end, timezone, callback) {
jQuery.ajax({
url: 'schedule.php/load',
type: 'POST',
dataType: 'json',
data: {
start: start.format(),
end: end.format()
},
success: function(doc) {
var events = [];
if(!!doc.result){
$.map( doc.result, function( r ) {
events.push({
id: r.id,
title: r.title,
start: r.date_start,
end: r.date_end
});
});
}
callback(events);
}
});
}
});
Notes: start and end MUST be ISO 8601. Another change was the use of format instead of unix (this made easier for me to deal with the code-behind)
There is a built in option avaliable
var calendar = new FullCalendar.Calendar(calendarEl, {
events: '/myfeed.php'
})
more details https://fullcalendar.io/docs/events-json-feed
This is perfect way to load data properly.
// if you want to empty events already in calendar.
$('#calendar').fullCalendar('destroy');
$.ajax({
url: 'ABC.com/Calendar/GetAllCalendar/',
type: 'POST',
async: false,
data: { Id: 1 },
success: function (data) {
obj = JSON.stringify(data);
},
error: function (xhr, err) {
alert("readyState: " + xhr.readyState + "\nstatus: " + xhr.status);
alert("responseText: " + xhr.responseText);
}
});
/* initialize the external events
-----------------------------------------------------------------*/
$('#external-events div.external-event').each(function () {
// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
// it doesn't need to have a start or end
var eventObject = {
title: $.trim($(this).text()) // use the element's text as the event title
};
// store the Event Object in the DOM element so we can get to it later
$(this).data('eventObject', eventObject);
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
/* initialize the calendar
-----------------------------------------------------------------*/
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
//isRTL: true,
buttonHtml: {
prev: '<i class="ace-icon fa fa-chevron-left"></i>',
next: '<i class="ace-icon fa fa-chevron-right"></i>'
},
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
//obj that we get json result from ajax
events: JSON.parse(obj)
,
editable: true,
selectable: true
});
fullCalendar already uses ajax, so you don't have to type it. When I was starting to implement fullCalendar I used the solution of the most voted answer here:
https://stackoverflow.com/a/25404081/3927450
but then I could prove, that fullCalendar is in charge of making the ajax call the times the view changes without you having to do anything. I find this plugin very useful, although the documentation did not seem very clear to me.
So this code:
events: function(start, end, timezone, callback) {
jQuery.ajax({
url: 'schedule.php/load',
type: 'POST',
dataType: 'json',
is exactly this:
events: schedule.php/load,
you only have to provide the url. Off course you have to deal with a proper JSON response from the server. Or if you need more params you can do it like this:
events: {
url: '/myfeed.php',
method: 'POST',
extraParams: {
custom_param1: 'something',
custom_param2: 'somethingelse'
},
failure: function() {
alert('there was an error while fetching events!');
},
color: 'yellow', // a non-ajax option
textColor: 'black' // a non-ajax option
}
var events= '';
$.ajax({
url: '/eventoscalendar',
dataType: 'json',
type: 'GET',
success: function(data) {
events= JSON.stringify(data);
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
editable: true,
displayEventTime: true,
selectable: true,
droppable: false,
events: JSON.parse(events)
});
}
});
y en /eventoscalendar
public function eventoscalendar()
{
$events[]= [
"title" =>'Meeting',
"start"=> date('Y-m-d'),
"allDay"=> false,
"url"=> 'http://google.com/'
];
return JsonResponse::create($events, 200, array('Content-Type'=>'application/json; charset=utf-8' ));
}
I have some tabs (jQuery UI tabs) in the "index.php" of a page. This page not only shows content, but also retrieves the $_GET variable to show some other content below the tabs.
The problem is how to tell jQuery UI that the href (attr of the clicked ) is a value for the key "href" that has to send (GET) to the current index.php page, called in JS has window.location.pathname (I can't use PHP generated JavaScript).
The code is this, and i'm out of options for how to make things work.
jQuery('#front-tab').tabs({
spinner: "Loading...",
select: '#tab-one',
cache: true,
fx: { height: 'toggle', opacity: 'toggle' },
url: window.location.pathname,
ajaxOptions: {
type: 'get',
success: function(){alert('Sucess');},
error: function(){alert('I HAZ FAIL');};
},
dataType: 'html'
}
});
The HTML:
<div id="front-tab">
<ul>
<li><span>Home</span></li>
<li><span>Tab Content 1</span></li>
<li><span>Tab Content 2</span></li>
<li><span>Tab Content 3</span></li>
<li><span>Tab Content 4</span></li>
</ul>
<div id="tab-home">
content...
</div>
</div>
Yep, this gets me full of "I HAZ FAIL" every time I try to load other tabs. The first tab is inline HTML, but the rest is Ajax. url: window.location.pathname doesn't seems to work or point to the right direction. Well, I don't know if that does what I am looking for.
function initTabs(elementHref) {
jQuery('#front-tab').tabs({
spinner: "Loading...",
select: '#tab-one',
cache: true,
fx: { height: 'toggle', opacity: 'toggle' },
url: elementHref,
ajaxOptions: {
type: 'get',
success: function(){alert('Sucess');},
error: function(){alert('I HAZ FAIL');};
},
dataType: 'html'
}
});
}
jQuery('yourLink').on('click', function() {
initTabs(jQuery(this).attr('href'));
});
Well, after noting the inflexibility of jQuery UI Tabs I had to replicate the action on my own. Better yet, few lines of code compared to two plugins.
front_tab.click(function(e) {
// Content parent
tab_content = $('#tab-content');
// other variables
var tab_visible = tab_content.children('div.visible'),
span = $(this).children('span'),
span_value = span.html(),
value = $(this).attr('href'),
// This gets our target div (if exists)
target = tab_content.children(value);
// There is no anchor
e.preventDefault();
// Don't do nothing if we are animating or "ajaxing"
if (tab_content.children().is(':animated') || is_ajaxing) { return; };
// Put the "selected" style to the clicked tab
if (!$(this).hasClass('selected')) {
front_tab.removeClass('selected');
$(this).addClass('selected');
}
// If is target div, call it
if (target.length > 0) {
is_ajaxing = true;
span.html('Loading...');
tab_content.children().removeAttr('class');
tab_visible.slideUp('slow', 'swing', function(){
// Some timeout to slow down the animation
setTimeout(function() {
target.attr('class', 'visible').slideDown('slow');
if (value = '#tpopular') { update_postbox(); }
is_ajaxing = false;
span.html(span_value)
}, 400);
});
// So, the target div doesn't exists. We have to call it.
} else {
is_ajaxing = true;
span.html('Cargando...');
$.get(
window.location.pathname,
{ href : value },
function(data) {
tab_visible.slideUp('slow', 'swing', function(){
setTimeout(function() {
tab_content.children().removeAttr('class');
tab_content
.append(unescape(data))
.children(value)
.css('display', 'none')
.attr('class', 'visible')
.slideDown('slow');
if (value = '#tpopular') { update_postbox(); }
is_ajaxing = false;
span.html(span_value)
}, 800);
});
},
'html');
}
});
The next problem is to make a nice error warning, but that is the solution.
Greetings,
I have a jqueryui autocomplete input that uses an ajax call to populate the suggestions. How do I ensure when the form is submitted, the suggestions do not appear? I've tried calling the "close" method, but that doesn't work since the form may be submitted before the ajax call has completed.
I have created a fiddle demonstrating my problem here:
http://jsfiddle.net/P7VJf/5/
This is based on the jqueryui demo here:
http://jqueryui.com/demos/autocomplete/#remote-jsonp
Here is the code:
$(function(){
$('form').submit(function(){
/*
when the form is submitted, i want to cancel auto complete
if the ajax call hasn't completed, the suggestions
will still show even if we call close here
*/
$("#city").autocomplete("close");
$('span').html(Math.random() * 3);
return false;
});
$("#city").autocomplete({
delay: 300,
source: function( request, response ) {
$.ajax({
url: "http://ws.geonames.org/searchJSON",
dataType: "jsonp",
data: {
featureClass: "P",
style: "full",
maxRows: 12,
name_startsWith: request.term
},
success: function( data ) {
response( $.map( data.geonames, function( item ) {
return {
label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
value: item.name
}
}));
}
});
},
minLength: 2
});
});
Any help is greatly appreciated.
Building on Xnake's answer, I've got this working by using the 'destroy' command. The trouble is that this totally kills the autocomplete, so you'll then need to reconfigure it again. I did this by refactoring the initial call to autocomplete into a separate function that I can then call again after the destroy command. Like this:
function configureAutocomplete() {
$("#city").autocomplete({
delay: 300,
source: function( request, response ) {
$.ajax({
url: "http://ws.geonames.org/searchJSON",
dataType: "jsonp",
data: {
featureClass: "P",
style: "full",
maxRows: 12,
name_startsWith: request.term
},
success: function( data ) {
response( $.map( data.geonames, function( item ) {
return {
label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
value: item.name
}
}));
}
});
},
minLength: 2
});
}
$(function(){
$('form').submit(function(){
/*
when the form is submitted, i want to cancel auto complete
if the ajax call hasn't completed, so destroy the existing
autocomplete and set up a new one
*/
$("#city").autocomplete("destroy");
configureAutocomplete();
$('span').html(Math.random() * 3);
return false;
});
configureAutocomplete();
});
Have you tried using destroy instead, i.e.: $("#city").autocomplete("destroy"); ?