jQuery UI Dialog - change the content of an open dialog (Ajax) - javascript

I've got some links I want to have dynamically open in a jQuery UI Dialog using jQuery.load(). Once the dialog is open, I want the links load inside the already opened dialog.
So, the site loads, you click a link, and it opens in a dialog. That's fine. You can close and open it as many times as you want.
While it's open, if you click on one of the links from the loaded content, it doesn't work.
An Ajax GET request IS performed, but the resulting content is not successfully loaded into the dialog. (Firebug shows the request)
The previous dialog title and dialog content is erased. But the new content is not shown, NOR is it inserted into the DOM. (The generated source does not show content anywhere.)
The links look like this...
<a href="http://www.example.com/index.php?action=something&search=somethingelse#fragment" rel="dialog" title="Title Attribute">
The click event is bound...
$('body').delegate("a[rel~=dialog]", "click", function(e){return ajax_dialog(this, e);});
The ajax_dialog function checks to see if there's a dialog, calls to create one if there isn't, calls to load the content, sets the title, and opens the dialog if it's not open.
function ajax_dialog(_this, _event){
var urlToLoad = $(_this).attr("href").replace("#", "&ajax=true #");
var linkTitle = $(_this).attr("title");
// Create dialog
if(!$('body').find('#ajaxDialog').size()){
$('body').append('not yet init<br />'); // This shows up the first click only.
init_dialog('#ajaxDialog');
}
// Load Dialog Content
load_dialog('#ajaxDialog', urlToLoad);
// Add title
$('#ajaxDialog').dialog('option', 'title', linkTitle);
// Open dialog (or reload)
if(!$('#ajaxDialog').dialog('isOpen')){
$('#ajaxDialog').dialog('open');
$('body').append('not yet open<br />'); // This shows up the first click only.
}
return false;
}
The init_dialog function creates the dialog if there isn't one...
function init_dialog(_this){
$('body').append('<div id="ajaxDialog"></div>');
// Set Dialog Options
$(_this).dialog({
modal:true,
autoOpen:false,
width:900,
height:400,
position:['center','center'],
zIndex: 9999,
//open:function(){load_dialog(this, urlToLoad);}, This didn't work without destroying the dialog for each click.
close:function(){$(this).empty();}
});
}
The load_dialog function loads the desired content into the dialog.
function load_dialog(_this, urlToLoad){
$(_this).load(urlToLoad, function(){
$('body').append(urlToLoad + ' load function<br />'); // This shows up each click
$(_this).append("Hihi?"); // This shows up each click
});
// The loaded information only shows the first click, other times show an empty dialog.
}

Hah. As shown in the code, I was using $jQuery.load() and pulling the exact href of the link as the URL to request. All the URLs had fragments/anchors on the end, that is: ....html#id-of-div.
In this case, the script itself was working fine, but the #id-of-div didn't exist on the page yet. That's why I could see content returned, but the dialog just ended up blank. :-)

Related

How to print the pop up window content with the main content

I want to print the content of my page. But that contain a popup. I need to display the pop up window content in my main page contain a button name Details. When I click the button a pop up will show.
When I click my print button.Only show the main content. The particular field for the pop up displaying window is blank (Details button)
I'm using window.print();
print button=> 'onclick="printpage()"'
function
function printpage()
{
$('#hiddendiv').html($('#view_popup_descriptive_index').html());
$('#hiddendiv').show();
window.print();
$('#hiddendiv').hide();
}
Any method to display the popup content.
You may try appending the HTML from the popup to the page before printing.
$("#print").on('click', function(){
//find HTML
var $popupContent = $('.popup').html();
//console.log($popupContent); //see what you really get from the popup
//create a div before the button and put the popup content there
$(this).before($('<div />', {
'class': 'created',
'html': $popupContent
}));
//trigger printing
window.print();
//remove the dynamically created container
$('.created').remove();
})
You can see it working online here - https://jsfiddle.net/skip405/6dt2dhm7/

Making jquery Dialog working between two pages

I have a dialog setup as follow
$("#myDialog").dialog({
autoOpen: true,
close: function(event, ui) {
$("#myDialog-content").html("");
$(this).dialog("destroy");
}
});
$("#myDialog").css("min-height","");
$("#myDialog-content").html("Loading...");
$.ajax({
...
success: function(response) {
$("#myDialog-content").html(response);
}
});
This working fine I load and close dialog in same page but not able to make it work properly where I move between pages.
Here is a my page flow
From source page(say PageA) I make AJAX call to load the page containing dialog div(say PageB).
Link on this page call above method to display dialog. (For first time it runs OK).
When I click close button. Dialog close and with firebug I can still see dialog div at the end with UI classes but in hidden state.
If I go back to source page (Page A) and reload the PageB.In firebug I can see two div - one originally from JSP and second one from step 3.
Now if I click button to load dialog box - It used hidden to populate new data and never use new div created by jquery. So I just have blank dialog box.
I am not sure if this is jquery Dialog issue or my page flow. One possible solution I though of is use remove in close function to remove dialog div completely but it puts burden to create this div everytime page PageB is loaded. Is there any other way or any thing I am doing wrong in this scenario?
If i understood correctly the situation, You have 2 options:
If you somehow cleaning the content of "Page B", remove the modal
then.
If you do not have the cleaning mechanism like that, just
.remove() content of modal on close
Sidenote: i would advise not to use jquery for .css and .html('Loading...'). Also, it is good to cache jquery elements in variables e.g var dialog = $("#myDialog");

Open link in same page and once link is open, execute some code

I have several pop-ups on home page. I open and close them by selecting them with ID and using fadeIn() and fadeOut(). Now I want to open a specific pop-up by clicking on link from another window? For example, if from that new window I click on 'Pop Up 1', I want home page to open and then show 'Pop Up 1'.
I tried using this code below but while writing this code I realized that the script gets reloaded and thus my function of loading a pop-up does not work.
So my question is, is there some elegant solution you could recommend to show element in one page while a link that specifies which element has to be shown is in another?
$("#galleryNav a").on('click', function() {
window.open("/pixeleyes",'_self',false);
setTimeout(function() {
var popToShow = $(this).attr('data-pop');
$(".text-content-outer").hide();
$("#" + popToShow).fadeIn();
}, 5000);
});
One idea might work is
When you are opening a new page using the below line then send some parameter or hash value with it.
window.open("/pixeleyes",'_self',false);
like
window.open("/pixeleyes#openpopup",'_self',false);
Then in the page ready of this page check if the hash exists open the popup otherwise do nothing.
Not sure if this is what you are looking for.
$("#galleryNav a").on('click', function() {
window.open("/pixeleyes#showpopup",'_self',false);
});
showpopup could be anything that you want to open as popup...

"onclick" of a button in a popup works only once

I have an html/php webpage (the file is called searchresults.php) that imports jquery mobile. When you enter the page, the url is usually something like
www.domain.com/searchresults.php?&sort="off"&max="5"
In this example sorting is off and only 5 items are displayed. On that page is a button that opens a popup where I want the user to be able to change these settings. I use the built-in jquery mobile popup. On that popup you can toggle "sort" on/off and you can enter a new maximum. On the popup is an "ok" button to confirm your new settings. It looks like this:
OK
The sortAgain(); function in javascript looks like this:
function sortAgain();
{
//some code to get the necessary variables//
...
//change the href of the button so you reload the page
document.getElementById("okbutton").href = "searchresults.php" + "?keyword=" + var1 + "&sort=" + var2 + "&max=" + var3
}
So, basically, right before the "ok" button navigates to another page, I set its href of the page where it should navigate too.
This scheme works, and the searchresults.php file is fetched again from the server and re-interpreted (with the new variables in the url).
However, if i try to change the settings again after changing it once, the popup just does nothing! In other words, the href of the ok button on the popup stays empty and the javascript function sortAgain() is not called. I don't understand why it calls the onclick method perfectly fine the first time, but then refuses to call it again?
I assume it has something to do with the fact that the popup html code is an integral part of searchresult.php file, and that hrefing to the same page gives problems? The popup is pure html, no php is involved in the popup code. and again, it works fine the first time.
You should check out how to attach events via JavaScript. See here: javascript attaching events
You need to use the "pageinit" event when setting up click handlers in JQM: http://api.jquerymobile.com/category/events/
Here is an example of how to bind click handlers when the page is first loaded.
$( document ).on( "pageinit", "#that-page", function() {
$('#okbutton').on( "click", "#that-page", function( e ) {
$(this).attr("href", "searchreslts.php");
});
});

jQuery modal and load problem

I'm having a problem with jQuery dialog and load on a web application i'm developing.
On a search result page, on each entry i have a link that give a quick view of the result, firing a modal dialog that retrieves and show html content using jQuery load.
Everything works great and i can close and open dialogs as i want without any problem.
I would like to add a feature to this dialog with a link at the bottom of it that should trigger another jQuery load showing another little tiny part of html.
This feature works just the first time; when i close the dialog picking another one preview, first load works perfectly as usual, but clicking the link does not show anything.
This is a snippet of my code:
function preview(question_id, service){
var jQuerydialog = jQuery('<div>loading</div>');
jQuerydialog.dialog({
title: 'Preview',
modal: true,
jQuerydialog.load('/url...','', function (responseText, textStatus, XMLHttpRequest) {
}
);
return false;
}
function preview_see_more(answer_id, service){
jQuery('#see_more').append('<div>loading </div>').load('/url....','', function (responseText, textStatus, XMLHttpRequest) {
alert('performed!')
}
);
return false;
}
Adding an alert ('performed') on preview_see_more load callback, this alert is fired everytime function is called and with firebug i can see ajax call triggered with status 200.
preview function is used to load the main preview; at the bottom of the main preview there is a link pointing to preview_see_more function that should add another part of html (this actually happens just the first time a main preview is created)
Any hints?
EDIT:
here an example of search result.
Clicking on [Q], preview function is triggered.
I'm working (still on my test machine) to add a link at the bottom of the dialog that should trigger the preview_see_more function.
EDIT2:
here an example with the problem in evidence.
Click on the [Q] of the first link; then click on "show accepted answer"..close the dialog and try again.
I would like to take a look at the page with preview_see_more link still on the page. What I suspect is that you binding the link to function just once and reloading the content and not binding the function next time. But it would be much more clear if you could add the link
Edit:
I added this to the code and it worked.
function quicklook_accepted_answer(answer_id, service){
jQuery('#accepted_answer_block :last').append('<div>loading <img src="/images/indicator.gif"/></div>').load('/quicklookanswer?answer='+ answer_id +'&service='+service,'', function (responseText, textStatus, XMLHttpRequest) {
}
);
return false;
}
But the main problem is there are many instances of modal popup being created what you can do is delete the modal box when a new 'Q' button is clicked

Categories