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
Related
I have uploaded a screencast of my issue as it's somewhat difficult to get across: https://www.youtube.com/watch?v=V8Gje44RGKQ
I have a list of Jquery tooltip confirms which when clicked say asks YES or NO. Pretty standard stuff...
$(document).ready(function() {
$('body').on('click', '.jConfirm', function(){
$(this).jConfirm({
message: 'You sure you to delete this?',
confirm: 'YUPPERS',
cancel: 'NO WAY!',
openNow: this,
callback: function(elem){
alert('According to the link you clicked...\r\nType = "'+elem.attr('itemType')+'" \r\n ID = "'+elem.attr('itemId')+'"');
}
});
});
});
A completely seperate thing, I have a DIV that gets populated with the following script:
$(document).ready(function() {
$("body").on("click",".edit", function(){
$("#menu").load("USERS_edit.php?id="+this.value);
});
When I click through the confirmation links, the tooltip appears and is completely functional. However, when I perform the unrelated task of loading a page into a DIV on my page, the original tooltip links do not function (apart from the ones that were already clicked).
I checked the console and I get the following error: $(...).jConfirm is not a function
Please note: The content that is being loaded into the DIV is completely seperate and does not intefer (I dont think!) with the tooltip confirmation buttons. I have stripped every single piece of code out of the file that is loaded into the DIV. I seem to have found that $("#menu").load("USERS_edit.php?id="+this.value); is causing the tooltips to stop firing, and are giving me the $(...).jConfirm is not a function message in console.
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");
I am using Popup.js by Toddish.
http://docs.toddish.co.uk/popup/demos/
Long story short, the popup plugin creates divs by default given the classes ".popup_back" and ".popup_cont".
I have another button I wish to press which should completely delete the added divs with those classes after they have been generated and added to the html. As if they never even existed. Surely this is possible?
I have tried running a function which simply runs:
$(".popup_back").remove();
$(".popup_cont").remove();
As shown in this example:
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_remove
Unfortunately despite the code running, the actual divs are never deleted as required.
Any ideas? I am new to this kind of thing and have googled around and read a lot about DOM etc but am yet to crack it.
Thanks
EDIT:
In reply to the comments:
The Javascript:
function removePopups() { // This function is called to remove the popups.
console.log("removing...");
$(".popup_back").remove();
$(".popup_cont").remove();
}
function func(url) { // url is the url of the image to be displayed within the popup.
removePopups(); // As soon as the function casillas is called, removePopups is used to remove any existing instances of the divs.
$('a.theimage').popup({ // This is where the Popup plugin is utilised.
content : $(url),
type : 'html'
});
}
The HTML:
<a class="theimage" onclick="func('image/image1.jpg')" href="#" >
Long story short, an image is displayed in the popup.
I think the issue is that the popup plugin runs due to the class but the function func is never actually run when the click occurs. However simultaneously "removing..." still prints out in the console which tells me that the function IS being executed. The problem is I want the popup plugin to run together with the javascript function. Is there a solution for this conflict?
Your implementation should really be as simple as this:
<a class="theimage" href="#" >Open</a>
Bind the popup creation to your popup link:
$('a.theimage').popup({
content : 'image/image1.jpg',
type : 'html'
});
I'm speculating here, but what might be happening is that you're invoking the popup twice by binding the popup() call to a click handler in your markup. The popup plugin already binds the popup creation to a click event.
View working demo. Note the 3 external resource: the popup CSS, the popup JS, and the jQuery JS.
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");
});
});
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. :-)