Below is my jquery code which do following thing:
Load the content form URL and fill into DIV.
Bind the data into html form.
Problem: first time, it bind correct data and after each call, it just load the empty form (and data not populated which called through BindForm function as shown below.)
When I tried replace - tag.html with $("#div").load(url,function(){}) then it works but, using below code not work.
Now, I can not change implementation to use load but, any alternative or solution in below code will helpful.
Basically, I need $("<div id=" + diaolgID + "></div>") line to preserve as it is and then load dialog within this.
var tag = $("<div id=" + diaolgID + "></div>");
$.ajax({
url: url,
cache: false,
success: function(data) {
var htmlContainerObject = tag.html(data);
htmlContainerObject.dialog({
modal: true,
hide: {
effect: "none",
duration: 150
},
show: {
effect: "none",
duration: 150
},
title: title,
width: 950,
height: 'auto'
}).dialog('open');
BindForm();
}
});
Change your first line to this:
var tag = $('<div id="' + diaolgID + '"></div>').appendTo('body');
Related
In one of my js files, I am using a jquery-UI dialog function to display both confirmation messages and user inputs, according to parameters of the function.
( The following question is more about “the way to do it” if it is possible, rather than about “jquery-UI dialog”, that's why I titled this topic with “Javascript” )
Here is the simplified content of my function, to focus on the question :
function dialog_Handler({title, message, buttons, input}){
// Creates object with autoOpen: false to be able to modify it before opening
var dialog = $("<p>" + message + "</p>").dialog({
autoOpen: false,
open: function(event, ui){
$("div.ui-widget-overlay").css({"background": "#000", "opacity": "0.4"});
$(".ui-widget-overlay").hide().fadeIn();
},
title: title,
buttons: buttons,
modal: true,
});
// Adds some more configuration if input needed
if(input){
// Adds input field right under the message
dialog.dialog({
open: function(event, ui){
$("div.ui-widget-overlay").css({"background": "#000", "opacity": "0.4"}); // SAME AS ABOVE
$(".ui-widget-overlay").hide().fadeIn(); // SAME AS ABOVE
$(this).append('<br /><br /><input type="text" value="' + input + '"><br />');
},
});
}
// Dialog opening
dialog.dialog("open");
return;}
As you can notice, when input is needed (!= false), I have to “append” an instruction in the “open” function of dialog.
Is there any way to add something in the function instead of rewriting it completely ?
Something that would look like this ?
dialog.dialog({
open: function.append{
$(this).append('<br /><br /><input type="text" value="' + input + '"><br />');
},
});
Thanks in advance for any reply.
I am trying to display formatted html that is received from a servlet response in a qTip2 tooltip within a jsp. The ajax and tooltip are working, except the text displayed in the tooltip is not formatted as I expect.
The text received from the servlet is something like this:
<table>
<tr><td>Employee1</td><td>JobName1</td></tr>
<tr><td>Employee2</td><td>JobName2</td></tr>
<tr><td>Employee3</td><td>JobName3</td></tr>
</table>
The items in the table are of different lengths, and they show up in the tooltip unformatted, something like this:
FirstName001 LastName0001 JobName0001
FirstName0000000001 LastName001 JobName0001
FirstName1 LastName0000001 JobName0001
In other words, it appears the text is not formatted as an HTML table. Am I missing something in the code below to make that work?
The ajax and tooltips are fired on a 'mouseenter' action over links that have been given the class 'ajax_link'. I've confirmed the servlet is sending back html as expected.
Ajax call in jsp
$(".ajax_link").mouseenter(function(e) {
e.preventDefault(); //Stops link from changing the page
var $this=$(this); // needed to keep 'this' in scope below
var link = $(this).attr('href');
$.ajax({ type: "GET",
url: link,
cache: false,
dataType : "html"
}).done(function( html ) {
$this.qtip({
content : {
text : html
},
position: {
my: 'top right', // Position my top left...
at: 'bottom left' // at the bottom right of...
},
show: {
ready: true,
solo: true
},
hide: {
event: 'mouseleave',
delay: 1000,
fixed: true
},
style: {
classes: 'qtip-dark qtip-shadow'
}
});
});
});
I want to load an external page in a modal window. by default i've already added some text in the modal window, but i want to delete the text which says "<p> hello folks, good evening</p>" and instead call an external page into the modal window which contains a different message
var openModal = function () {
// close button
var closeBtn = $('Close');
// text you get from Ajax
var content = "<p> hello folks, good evening</p>";
// Popup body - set width is optional - append button and Ajax msg
var popup = $("<div/>", {
"data-role": "popup"
}).css({
width: $(window).width() / 0 + "px",
padding: 5 + "px"
}).append(closeBtn).append(content);
// Append it to active page
$.mobile.pageContainer.append(popup);
// Create it and add listener to delete it once it's closed
// open it
$("[data-role=popup]").popup({
dismissible: false,
history: false,
theme: "b",
/* or a */
positionTo: "window",
overlayTheme: "b",
/* "b" is recommended for overlay */
transition: "pop",
beforeposition: function () {
$.mobile.pageContainer.pagecontainer("getActivePage")
.addClass("blur-filter");
},
afterclose: function () {
$(this).remove();
$(".blur-filter").removeClass("blur-filter");
},
afteropen: function () {
/* do something */
}
}).popup("open");
};
If you are trying to load a page from an external website I would imagine it would be as simple as loading in an iframe and passing the URL to the site you want to load in. In your JQuery just change this line:
var content = "<p> hello folks, good evening</p>";
to
var content = "<iframe src='http://google.com' width='200' height='200'></iframe>";
Change the properties as needed. Hope that helps.
You can change your content var to equal '<iframe style="border: 0px; " src="YOUR_URL" width="100%" height="100%"></iframe>'. For example, '<iframe style="border: 0px; " src="http://jquery.com/" width="100%" height="100%"></iframe>'
I added your code to a fiddle so you can try it out:
http://jsfiddle.net/4pjndrsc/1/
Hope that helps. Best of luck!
If you prefer to load in the content from an external page rather than embedding an iframe, you can add the $.ajax call into your function:
var openModal = function () {
// close button
var closeBtn = $('Close');
// create the ajax call and create modal in the callback
$.ajax({
url: "content_page.html",
dataType: "html",
success: function (response) {
// text you get from Ajax
var content = response;
// Popup body - set width is optional - append button and Ajax msg
var popup = $("<div/>", {
"data-role": "popup"
}).css({
width: $(window).width() / 0 + "px",
padding: 5 + "px"
}).append(closeBtn).append(content);
// Append it to active page
$.mobile.pageContainer.append(popup);
// Create it and add listener to delete it once it's closed
// open it
$("[data-role=popup]").popup({
dismissible: false,
history: false,
theme: "b",
/* or a */
positionTo: "window",
overlayTheme: "b",
/* "b" is recommended for overlay */
transition: "pop",
beforeposition: function () {
$.mobile.pageContainer.pagecontainer("getActivePage")
.addClass("blur-filter");
},
afterclose: function () {
$(this).remove();
$(".blur-filter").removeClass("blur-filter");
},
afteropen: function () {
/* do something */
}
}).popup("open");
},
error: function () {
//handle error here
}
});
};
I have a table in my website and when i hover over a link i create a tooltip, the issue is that when i move my mouse over the links quickly multiple tooltips will be displayed as seen in the screenshot below,
I need to have only one tooltip on screen at a time and remove it if the user is no longer hovering. I create the tooltips in side the success function of an ajax call so i will only display the tooltip if the controller returns a status of true. The code for this can also be found below. Any suggestions on how i can ensure only one tooltip is displayed at a time. Thank you for any help you can give.
function tooltip(){
$('#tblOrder').on('mouseenter', '#alarmsTooltip', function(event) {
var id = $(this).attr('value');
var statusResponse;
var selector = $(this);
$.ajax({
url: '<%=Url.Action("Alarms") %>',
type: 'POST',
data: {id: id},
dataType: "json",
success: function (Response) {
if(Response.status == true)
{
var alarmTrans = '<%=GetTranslation(TranslationType.Label, "Alarms.tooltip", "Alarms") %>';
var warningTrans = '<%=GetTranslation(TranslationType.Label, "Warnings.tooltip", "Warnings") %>';
var html = "<table border='1' style= 'border: 1px solid black; border-collapse: collapse;'> <tr><th>" + alarmTrans + "<img src='" + '<%=Url.Content("~/App_Themes/Shared/Icons/bullet_red.png")%>' + "' style='float: right' >" + "</th><th> " + warningTrans + "<img src='" + '<%=Url.Content("~/App_Themes/Shared/Icons/bullet_orange.png")%>' + "' style='float: right'>" + "</th></tr>";
$(selector).qtip({
content: {
text: html + Response.Response,
title: {
text: '<%=GetTranslation(TranslationType.Label, "Alarms and Warnings.tooltip", "Alarms and Warnings") %>'
}
},
position: {
target: 'mouse',
adjust: {x:5,y:5}
},
show: {
ready: true,
effect: function () {
$(this).slideDown();
}
},
style: {
//classes: 'qtip-dark'
classes: 'qtip-green'
},
hide: {
effect: function () {
$(this).slideUp();
}
},
api: {
beforeShow: function() {
$('.qtip:visible').not(this.elements.tooltip).qtip('hide').qtip('disable');
},
beforeHide: function() {
$('.qtip:visible').not(this.elements.tooltip).qtip('enable');
}
}
}, event);
}
}
});
});
};
Again thank you for any help.
Right now your function is called on the event mouseenter.
Create another event mouseleave with a function that aborts the ajax call with storedAjax.abort(). However for this to work you need to store the ajax call in a global variable first.
Store the AJAX call in a global variable
requestAjax = $.ajax({ ... });
On the top of the function tooltip() just do
if(requestAjax) requestAjax.abort();
and then hide all the tooltips and and then proceed with the rest of the code.
and Add
$("#tblOrder").mouseleave(function(){
$(this).qtip("hide");;
});
I'm creating a dialog on the fly. What I'm trying to do next is to bind some of the inputs with .datepicker(), but I can't seem to find the inputs at all. What I'm I missing here?
JSFIDDLE
function createDialog(top, dialog_width, data) {
$('<div></div>')
.addClass('add-dialog')
.appendTo('body')
.dialog({
title: 'test',
closeText: '<i class="fa fa-times"></i>',
close: function () {
$(this).remove();
},
open: function (event, ui) {
//has the full html with the inputs
console.log(this);
//trying to get them
var inputs = $(this).find('input');
console.log(inputs.length);
//also tried this, no luck
//$(this).parent().promise().done(function() {
// var t = $(this).find('input');
//});
},
modal: true,
width: dialog_width,
position: ['center', (top - 12)],
draggable: false,
resizable: false
}).html(data);
}
Simply change the initialization order.... add the html, then initialize the dialog
$('<div></div>').html(data).dialog({ /*opts*/})
You are adding the html after the dialog is initialized so the open event has already occurred and there is no element yet to be found
DEMO
You can asign a class to each element you need, something like:
<input type='text' class='needIt'/>
and then use:
$(this).find('.needIt')
You need to save reference to the jquery object after it has been inserted into DOM, then get reference to jquery UI dialog instance. And this instance has many useful properties. Example:
$('form').append($body); // I've appended dialog as last element inside form in my document, $body is markup, received from AJAX
$body.dialog({...}); // I've turned markup into jquery UI dialog
var dialogInstance = $body.dialog('instance'); // I receive reference to jquery UI dialog instance in any place, for instance, button click event
dialogInstance.uiDialogButtonPane.hide(); // I can access button pane in the dialog and many other objects, like caption area, etc.
try this add html after appendTo()
function createDialog(top, dialog_width, data) {
$('<div></div>')
.addClass('add-dialog')
.html(data)// added html here
.appendTo('body')
.dialog({
title: 'test',
closeText: '<i class="fa fa-times"></i>',
close: function () {
$(this).remove();
},
open: function (event, ui) {
//has the full html with the inputs
console.log(this);
//trying to get them
var inputs = $(this).find('input');
console.log(inputs.length);
//also tried this, no luck
//$(this).parent().promise().done(function() {
// var t = $(this).find('input');
//});
},
modal: true,
width: dialog_width,
position: ['center', (top - 12)],
draggable: false,
resizable: false
});
}