I am using jquery ui Dialog box to create multiple notes in my Web Application. So there is a add-note button which clicks to open a note (dialog box at center).
User can open multiple notes (dialogs) together and fill content save, delete, etc on each.
Problem arises when multiple notes are opened and I start deleting some randomly. So on deletion the positioning of the opened dialog gets affected. The opened dialogs after deletion of any start moving upwards on the screen.
I have been trying to solve this from quite some time. Plz help.
My JS:
function createNote(note, noteContent, newNote){
var noteDiv = $('<div> <textarea class="note-textarea" style="width:100%;background-color:#D3D3D3;"></textarea> </div>');
noteDiv.clone(true).attr("id", noteId)
.dialog({
modal : false,
draggable : false,
resizable : false,
open: function(){
$("#"+ noteId).find('textarea').val(noteContent);
$("#"+ noteId).find('textarea').css({
'height': $("#" + noteId).parent().height()
});
}, create: function(){
// Create Title Textfield inside note top bar
$("<input type = 'text' placeholder='Title' class='note-title'></input>").appendTo($("#"+ noteId).prev(".ui-dialog-titlebar").find('span'));
$("#"+ noteId).prev(".ui-dialog-titlebar").find('input').val(noteTitle);
if(!jQuery.isEmptyObject(note)){
createLastModifiedSpan($("#"+ noteId), lastModified);
}
},
buttons : [ {
text : "Save",
disabled: true,
click : function() {
......AJAX CALL to SAVE
}],
beforeClose: function(event, ui) {
if(confirm('Are you sure you want to delete this note?')){
$.ajax({
type: 'POST',
url: "/common/deleteNote.action",
data:
{
'note.id.operatorId':$('#operatorId').val(),
'note.id.noteId':noteId
},
success: function(data, textStatus, jqXHR){
if(data.result == 'success'){
alert('Deleted Successfully');
numberOfNotesCreated--;
}else
alert('Error in Deleting. Contact Admin');
},
error: function(data){
alert("Error in DB!");
}
});
}else
return false;
},
resize: function(event, ui) {alert('dskjfsf')},
position:[10,100]
});
$("#"+ noteId).dialog('open');
$("#" + noteId).parent().draggable()
.resizable();/*.position({
my: "center",
at: "center",
of: window
});*/
//Fire event on Either textarea or note title
$("#"+ noteId).find('.note-textarea')
.add($("#"+ noteId).prev('.ui-dialog-titlebar').find('.note-title')).keydown(function(event) {
if($(this).val() != '') {
toggleSaveButton($( "#" + noteId ), "enable");
}
});
if(newNote){
elementCount++;
numberOfNotesCreated++;
}
prevNoteId = noteId;
}
EDIT: If I add notes in sequence say 1, 2, 3, 4 and start deleting from the recently added like 4, 3, 2.. the positiong does not give a problem, however when I start deleting randomly 2, 1.. then the other notes postioning gets disturbed.
Found this on the jquery form which solved my problem :
https://forum.jquery.com/topic/bug-when-closing-one-dialog-within-multiple-stacked-dialogs
Put this in close function of the dialog:
var widget = $(this).dialog("widget"), height = widget.height();
widget
.nextAll(".ui-dialog").not(widget.get(0))
.each(function() { var t = $(this); t.css("top", (parseInt(t.css("top")) + height) + "px"); });
Related
jquery autocomplete for a textbox should not allow data other than the autocomplete list.,but the problem is i need to allow only data from the list autocomplete list but not any other data, even if the user enter any another data we i need to show a message that please select from the autocomplete list.
The link show below is also allowing any data other than the autocomplete suggestions:
$("#field").autocomplete({
source: countries_starting_with_A,
minLength: 1,
select: function(event, ui) {
// feed hidden id field
$("#field_id").val(ui.item.id);
// update number of returned rows
$('#results_count').html('');
},
open: function(event, ui) {
// update number of returned rows
var len = $('.ui-autocomplete > li').length;
$('#results_count').html('(#' + len + ')');
},
close: function(event, ui) {
// update number of returned rows
$('#results_count').html('');
},
// mustMatch implementation
change: function (event, ui) {
if (ui.item === null) {
$(this).val('');
$('#field_id').val('');
}
}
});
http://jsfiddle.net/handtrix/32Bck/
There are lots of ways to do this. Here is one suggestion:
Working Example: http://jsfiddle.net/Twisty/32Bck/560/
HTML
<div class="ui-widget" style="position: relative;">
<input type="text" placeholder="type something ..." id="suggest" />
</div>
CSS
body {
padding: 30px;
}
input.ui-state-alert {
border: 1px inset #F00;
}
JavaScript
var makeSelect = false;
$(document).ready(function() {
function requiredValid(target) {
target = $(target);
// Return Focus
target.focus();
// Add alert class
target.addClass("ui-state-alert");
$("<div>", {
class: "required-alert-text",
style: "color: #F00; font-size: 10px; display: inline-block; position: absolute;"
}).html("Must select from list.").insertAfter(target).position({
my: "bottom",
at: "top+5",
of: target
});
}
$("#suggest").autocomplete({
delay: 100,
source: function(request, response) {
// Suggest URL
var suggestURL = "http://suggestqueries.google.com/complete/search?client=chrome&q=" + request.term;
// JSONP Request
$.ajax({
method: 'GET',
dataType: 'jsonp',
jsonpCallback: 'jsonCallback',
url: suggestURL
})
.success(function(data) {
response(data[1]);
});
},
select: function(e, ui) {
makeSelect = true;
},
close: function(e, ui) {
if (makeSelect) {
makeSelect = false;
$(".ui-state-alert").removeClass("ui-state-alert");
$(".required-alert-text").remove();
} else {
requiredValid(this);
}
}
});
$(".ui-state-alert").on("blur", function() {
$(this).focus();
})
});
This will not cover all cases. Basically, we want to know if the user made a selection from the list. I created makeSelect and assigned it as false. We assume upfront that the user has not done this.
When the user selects a list option, select callback is triggered and updates out variable. This also triggers close callback as it is now closing the list. If the user has made a selection, we move one and reset for the next time. If not, we apply some techniques to alert the user and keep focus until they make a selection.
How can I call jQuery Lightbox2 with AJAX.
I am using this function for my project.
$(document).ready(function() {
$(".paylasimi-goster").click(function() {
event.preventDefault();
var id = $(this).data("id");
$.ajax({
url: "gonderiyi_goster.php?msg_id=" + id,
type: 'get',
beforeSend: function() {
$("#loader").fadeIn(100);
},
}).done(function(data) {
$("#loader").fadeOut(100);
$(".sidebar").fadeIn().find(".sidebar-content").animate({
"right": 0
}, 200).html(data);
imgResize(jQuery, 'smartresize');
});
});
$(".sidebar").click(function() {
$(".sidebar-content").animate({
"right": "-565px"
}, 200, function() {
$(".sidebar").fadeOut();
})
});
$(".sidebar-content").click(function(e) {
e.stopPropagation();
});
});
Also I have created this DEMO from jsfiddle. In this jsfiddle you can see there white div. Click any white div then see the right sidebar. So in the sidebar have one image. The problem is here : Lightbox2 does not work when you click on the image.
How can I call Lightbox2 with ajax.
The issue here is the e. stopPropagation() on the .sidebar-content click event which is preventing the lightbox from triggering. You can remove that altogether and inside the .sidebar click event instead call:
$(".sidebar").click(function(e){
var preventClick = $(".sidebar-content");
if (!preventClick.is(e.target) && preventClick.has(e.target).length === 0){
//run the hide animate function + callback
$(".sidebar-content").animate({"right":"-200px"},200,function(){
$(".sidebar").fadeOut();
});
};
});
FIDDLE
I am trying to join two ajax calls into one. One fires on a checkbox change in the form, and the other fires when the jQuery slider "slides". I would like to combine the two.
I was thinking of using a .bind(), but I need to use more than one jQuery selector, and more than one event.
The two jQuery selectors would be:
$("input[type=checkbox]")
$( "#pay_range" ).slider
The two different events would be, respectively
.click()
.slide()
Obviously, the different event listeners have to go with the correct jQuery selectors.
the js for the checkboxes:
// when a checkbox is clicked
$("input[type=checkbox]").click(function() {
// remove the original results
$('#original_results').css("display", "none");
// which filter section does it belong to
var filter_section = $(this).attr('name');
// should it be filtered out or left in
var remove = $(this).prop('checked');
// if needs to be filtered
if (!remove)
{
// add it to our filter list for the specified section
filters[filter_section].push(this.value);
}
else
{
// take it off the list for the specified section
var index = filters[filter_section].indexOf(this.value);
if (index > -1)
{
filters[filter_section].splice(index, 1);
}
}
$.ajax({
type: 'POST',
url: '/results/search_filter',
//url: url,
beforeSend: function() {
//Display a loading message while waiting for the ajax call to complete
$('#filter_updating').html("Filtering your search...");
},
success: function(response) {
//inject the results
$('#search_results').html(response);
},
data: { filters: filters, criteria: criteria }
}); // end ajax setup
});
the js for the slider:
$(function() {
$( "#pay_range" ).slider({
range: true,
min: pay_min,
max: pay_max,
values: [ pay_min, pay_max ],
slide: function( event, ui ) {
$( "#filter_by_pay" ).html( "Pay Range: ¥" + ui.values[ 0 ] + " - ¥" + ui.values[ 1 ] ).css("color", "black");
$.ajax({
type:'POST',
url: '/results/search_filter',
beforeSend: function() {
//Display a loading message while waiting for the ajax call to complete
$('#filter_updating').html("Filtering your search...");
},
success: function(response) {
//inject the results
$('#search_results').html(response);
},
data: { min: ui.values[0], max: ui.values[1] }
});
}
});
});
You can simplify down to one function:
function doAjax() {
var ranges = $('#pay_range').slider('values')
var data = {
min: ranges[0],
max: ranges[1],
filters: filters,
criteria: criteria
}
/* show loading*/
$.post('ajaxData.html',data,function(response){
$('#search_results').html(response);
})
}
Then for slider:
$("#pay_range").slider({
range: true,
min: pay_min,
max: pay_max,
values: [pay_min, pay_max],
stop: function(event, ui) {
doAjax();
}
});
Do same thing in checkbox handler after you adjust filters
Your code doesn't show where citeria comes from
DEMO
I have zozo tabs script and i want make ajax request at change tabs.
Here is my preview
Animation doesn't work here- i don't now why, but you can see javascript code:
$(document).ready(function () {
checkOrientation("vertical");
var onSelect = function(event, item) {
console.log("Selected tab text: " + item.tab.text()); alert('dsadsa');
};
var tabbedNav = $("#tabbed-nav").zozoTabs({
orientation: "vertical",
animation: { duration: 200 },
defaultTab: "tab1",
effects: "slideD",
easing: "easeOutQuad",
select: onSelect
});
$("#ddl-orientation").bind("change", function (e) {
var orientation = $(this).val();
checkOrientation(orientation);
tabbedNav.data('zozoTabs').setOptions({ "orientation": orientation });
});
$("#ddl-position").bind("change", function (e) {
tabbedNav.data('zozoTabs').setOptions({ "position": $(this).val() });
});
function checkOrientation(orientation) {
jQuery('#ddl-position').children('option[data-orientation="h"]').attr('disabled', !(orientation === "horizontal"));
}
});
Apparently this animation is easy to use in ajax.
here is documentation
I don't know well javascript and i don't have idea what i must do.
Could you show me where i must put code to active ajax ? simple alert message will by ok : ) I will be grateful too, if you tell me how return ajax request to content tab.
function onSelect(event,item)
{
if(item.tab.text() == 'some tab name')
{
alert("i can rollerblade");
}
}
I have used 'select' attribute of zozo tabs but it never worked for me.
But I have found an alternative for it
Put a class or id in li.
$("li#123").live("click", function(e){
if($(this).text() == 'some tab name')
{
alert("i can rollerblade");
$.ajax({
..........
});
}
}
I'm trying to allow users to delete multiple records, they click a link "delete" and a dialog shows saying are you sure? On clicking OK it should delete.
It works for the first time I do it, but for any other delete buttons I click it doesn't work. I'm setting a hidden field to store some information then getting that information in the dialog.
I have identified the problem see comment in code, but not sure why its a problem.
This is for the delete buttons:
$(".delete-item").click(function () {
$(this).css('font-weight', 'bold');
var delId = $(this).attr("id");
$("#hidden-itemid").val(delId);
$("#dialog-delete-sure").dialog("open");
});
heres the dialog:
$("#dialog-delete-sure").dialog({
autoOpen: false,
resizable: false,
height: 140,
modal: true,
buttons: {
Ok: function () {
var hiddenId = $("#hidden-itemid").val();//*** This comes back undefined the second time***//
var itemId = $("#hidden-itemid").val().split('-')[1];
var iType = $("#hidden-itemid").val().split('-')[0];
$.post('/User/Delete/', { id: itemId, itemType: iType }, function (json) {
if (json.success) {
$("#" + iType + "-row-" + itemId).hide('slow', function () { $("#hidden-itemid").remove(); });
$("#dialog-success-delete").dialog("open");
} else {
if (json.error == "unknown") {
$("#dialog-unknown-error").dialog("open");
}
if (json.error == "unauthenticated") {
$("#dialog-unauthenticated").dialog("open");
}
}
});
$("#hidden-itemid").css('font-weight', 'normal');
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
a typical delete button looks like this:
<a id="event-63" class="delete-item">Delete</a>
any ideas?
You are running
$("#hidden-itemid").remove();
on json.success so you remove the element from the DOM .. next time it does not exists and thus you get an error..