Link in AJAX HTML response loses onclick after being clicked - javascript

I have an element containing data from an AJAX request. The AJAX data is returned from another page. The returned data in the element contains a link, which when clicked, opens a jQuery overlay. The onclick event is attached to the link (a onclick="...") from the external data, and the overlay function is on my main page.
This all works fine until the user clicks the link which opens the overlay. When the overlay is closed, the link becomes disabled, losing its onclick event, and the overlay cannot then be reopened.
Is this a focusing problem or do I somehow have to rebind the event to that link? I'm not sure what is going on here, or how to fix it, I hope some kind person can help me out.
This is what loads the external data in to the element:
function load_upload_queue() {
$.ajax({ type : 'GET', url : myDomain,
dataType : 'html',
success : function(data) { $('#myElement').html(data); },
error : function() { // do something }
});
}
This is the link inside of the element, which comes from AJAX call above:
<a onclick="show_error_overlay(id)">Show Errors</a>
This is my open overlay function, sitting on the main page:
function show_error_overlay(token) {
$("#show_error_overlay").overlay({
mask: '#111111',
close: "a.closeOverlayBtn",
closeOnClick: false,
closeOnEsc: false,
load: true,
onLoad: function() { // do something },
onClose: function() { // do something }
});
}
Any help gratefully received, any questions please do not hesitate to ask :)

I would use Firefox+Firebug to monitor whether that A tag is being touched (moved, changed) by anything as the overlay opens and closes. See if it maintains the same position; most importantly, check if it still has the onclick value after the overlay goes away. Inspect your "do somethings" in onLoad and onClose for any code that may be doing something to that link. Also, check for JS errors, especially during/after closing the overlay - sometimes errors interrupt the process, leaving unrelated things in unexpected state, causing unrelated problems.

Related

JQuery not opening the already opened window when clicked twice

I am relatively new to JQuery. I have an anchor tag in JSP which when clicked calls a function and it in turn calls an action class. If the result is success, it has to open a window. It works fine for the first time. But when i click on the anchored url for the 2nd time, control goes to action class but it doesnt pop up the already opened window. It doesnt even open a new window. Please suggest how to resolve it ?I need to pop up the already opened window.. I am sure it is due to jquery ajax call because the functionality works fine with out using ajax jquery. But i need to use it in my scenario
Sample code:
Open W3Schools
function func1() {
$.ajax({
url: "abc.do",
success: function(response){
window.open("https://www.w3schools.com","MyWindow","left=10,top=20,width=1200,height=700,scrollbars=1,resizable=1, status=1, modal=yes");
},
error: function(e){
alert('Error: ' , e);
}
}); }
Probably your browser detects a pop-up and blocks it without telling your program. How are you calling your function? Usually repeated window.open calls will only work in an event listener like
button.addEventListener("click", ()=>{
func1();
});
So if you have it in a loop or a similar thing, there's not much you can do about pop-up protection.
Try passing an empty name to your window instead of MyWindow, like this:
function func1() {
$.ajax({
url: "abc.do",
success: function(response){ window.open("https://www.w3schools.com","","left=10,top=20,width=1200,height=700,scrollbars=1,resizable=1, status=1, modal=yes");
},
error: function(e){
alert('Error: ' , e);
}
}); }

JQuery UI Dialog dont update on second click

I have this problem with my JQuery UI Modal window. Its used when i click a button, then it opens up and append contents to it trough an Ajax call to a php file. Works perfectly the first time i open it, but then when i click another button that should show different content, it still shows the old content in it, and i have to refresh the page for it to work.
This is my Dialog open event which is triggered by a switch, and the last part which appends data to my select box on creation.
$( "#attack" ).dialog({
resizable: false,
width:"400px",
buttons: {
Attack: function() {
$(this).dialog("close");
},
Cancel: function() {
$(this).dialog("close");
}
}
});
$("#users").selectmenu({
create: function( event, ui ) {
$.ajax({
type: "POST",
url: "mapfunctions/FetchUsers.php",
data: {RegionID: RegionID},
success: function(data) {
$("#users").append(data);
}
});
}
});
The dialog looks like this: http://i.imgur.com/02a2GYB.png
The HTML for it is a bit long, so i hope you dont need that dialog code, if so, let me know and i will add.
Its the Select menu which keeps the old data from the first ajax call.
I tried using Destroy and such on close, but then the dialog would simply never open again heh.
Thanks a lot people, hope this is enough for a clear understanding
This is very common problem with ajax and modal windows.. on clicking next button you have to reset the form and load it new.
for eg:
If you are using form with id "myForm" then on clicking another button reset the form like $("#myForm").trigger('reset'); in jQuery. or any other way

how to put dialog box inside the page refresh?

i want to put this dialog box inside the page refresh. i mean. when i refresh the page this must be the out put.
<script>
$(function() {
$("#dialog").dialog({
modal: true,
resizable: false,
buttons: {
"I want to Continue the Exam": function() {
$(this).dialog("close");
},
"I Refresh": function() {
$(this).dialog("close");
}
}
});
});
</script>
As far as I know, when you 'refresh' a page then all the JS objects are destroyed (those that are written in script).In other words the script is re-loaded. So you can't persist your script while the page is in transition.
Type I (classical Single Page App)-
So if you simply want to reload a particular part of the Application then use $.ajax() methods like beforeSend() for showing whatever (alert or best a loading spinner/div) you want during the data request or 'page-refresh'. And then you can hide them on done().
Type II (using routers)
JS frameworks like Angular give you options to reload a particular route of your App without reloading/refreshing your entire app - $route.reload(). You can show/hide some div/directive based on manipulation in your controller.
So you have to use some form of asynchronous scripting to deal with this "PROMPT while REFRESH" situation.
Using $.ajax() to simulate (pseudo code)-
$.ajax({
url: "_URL_to_get_or_post_data__",
beforeSend: function( xhr ) {
$popup.show();
}
})
.done(function( data ) {
$popup.hide();
}
});
Browsers have a security feature that will not let a page prevent users from leaving the page. By leaving a page it means closing tab/browser, navigating to a different page or refreshing. The only way to stop the user is to assign a function to onbeforeunload. Like this:
onbeforeunload = function () { return "You have unsaved data. Are you sure you want to exit?"; }
This message is synchronous, it will stop all javascript running on the page. If user presses ok the browser will leave the page (or refresh) else it will stay on the page.
EDIT
Usage: when user have changed something and have unsaved data - you assign a function to onbeforeunload:
onbeforeunload = function () { return "some message"; }
after the data is saved set onbeforeunload to null:
onbeforeunload = null;

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

Appended data does not seem to in markup when viewing source

I have a website with some AJAX on it, basically the users clicks on a link, and some AJAX goes and fires a method that returns some HTML as show below, as the title says the data that is returned does not seem to be going into the HTML, is this why my accordions are not being made? It is strange becuase results are being returned because they out put onto my screen.
$(document).ready(function() {
// hides the main_menu as soon as the DOM is ready
// (a little sooner than page load)
$('#main_menu').hide();
// shows the slickbox on clicking the noted link
$('h3#show-menu a').click(function() {
$('#main_menu').toggle('slow');
return false;
});
//try and hide the left content when it is null
$("#left-content:empty").hide();
//style up the scroll bar
$('#left-content').jScrollPane();
//do some AJAX to call the method instead of the browser
$("a.navlink").click(function (ev) {
$(this).toggleClass("active");
ev.preventDefault();
var id = $(this).attr("id")
if ($(this).hasClass("active")) {
$("."+id).remove();
}
else {
//$(this).toggleClass("active");
var url = $(this).attr("href");
$.ajax ({
url: url,
type: "GET",
success : function (html) {
$("#accordion").append(html);
$('#accordion').accordion({
active: 0,
header:'h2'
});
//alert(accordion())
}
});
}
});
});
As I am sure you can gather from the code, the returned HTML is appended to the <div id="accordion> and then it is 'turned' into an accordion, however this is not happening, all I get are the classes getting added to the div that would give accordion functionality but I get no real functionality.
I noticed that when I view source whether or not the AJAX has fired there is no content in <div id="accordion> even though I can see the returned data, how can I get the accordion to work?
=======What gets returned by the AJAX======
?php
if(isset($content)) {
// var_dump($content);
foreach($content as $row) {
print "<h2 class='$row[category_name]'><a href='#'>$row[category_name]</a></h2>";
print "<div class='$row[category_name]'>$row[content_title]</div>";
}
}
?>
=========Where the AJAX html goes=========
<div id="right-content">
<div id="accordion"></div>
</div>
View source shows the source code of the file your machine downloaded, ie. the file BEFORE any AJAX changes. No matter what you do in Javascript, nothing will ever change in view source (unless of course you go to a new page).
If you want to see how the current DOM looks for your page, you need to use a tool like Firebug or the IE Developer toolbar.
Actually you don't need Firebug from Firefox but firebug is a fantastic tool.. Select the field you think should change, right click and select "View Selection Source" (Firefox only).

Categories