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);
}
}); }
Related
I'm developing a web based document management for my final year project. The user interacts with only one page and the respective pages will be called using AJAX when the user click the respective tabs (Used tabs for navigation).
Due to multiple user levels (admin, managers, etc.) I've put the javascripts into the correspondent web pages.
When user requests the user request everythings work perfectly except some situations where some functions are triggered multiple times. I found the problem. It is each time the user clicks a tab it loads same scripts as new instance and both of them will be triggered when I call a function.
to load the content I tired
.load and $.ajax(); non of them address the issue.
I tried to put all into the main page at that time my jQueryUI does not work. I tired
$(document).load('click', $('#tab_root li'), function(){});
Same issue remain.
Can anyone help me out this issue?
--Edit--
$(function){
$(document).on('click','#tabs',function(e){
getAjax($(this))
});
}
//method to load via AJAX
function getAjax(lst){
var cont = $(lst).text();
$.ajax({
url:'../MainPageAjaxSupport',
data: {
"cont":cont
},
error: function(request, status, error){
if(status==404){
$('#ajax_body').html("The requested page is not found. Please try again shortly");
}
},
success: function(data){
$('#ajax_body').html(data);
},
});
}
You can't undo JavaScript after it has been executed by simply unloading the file or removing the script element.
The best solution would probably be to set a variable in each JavaScript file you include in your ajax data and include them from an online inline JavaScript inside the ajax data along with a conditional like such:
<script>
if(!tab1Var) $.getScript("filename");
<script>
Older Solutions
You can manually unbind each event before setting them with off.
$(function){
$('#tabs').off('click');
$('#tabs').on('click',function(e){
getAjax($(this));
});
}
Alternatively you can initialize a global variable (eventsBound1=false) for each tab in the main html:
$(function){
if(!eventsBound1){
$('#tabs').on('click', function(e){
getAjax($(this));
});
eventsBound1 = true;
}
}
The tabs click event is only an example you have to do this for each time you bind an event in the scripts that are being reloaded.
if all the events are bound to things inside ajax_body, a final thing you can try is:
success: function(data){
$('#ajax_body').empty();
$('#ajax_body').html(data);
},
You have bind an event click on 'document' so getAjax() only replace the '#ajax_body' not the 'document'.
This means old event is still attached to the 'document' all you need is to unbind event by using $(document).off('click'); or change 'document' to other elements.
In jQuery Mobile, if user clicks on a button, a loading icon appears and then it loads the new webpage via Ajax.
But, The server may be not respond in my case. Isn't there any way to put a timeout (e.g. 10 seconds) for ajax navigation feature? (If time limit exceeds, stop trying to navigate and show an error message)
To set a timeout i think you should not do it in a static way ( using "data-transition" )
you can make a listener to the link ('onclick') and within the listener make an ajax call to load your page. Use $.mobile.changePage() to do that.
The $.mobile.changePage() function is used in a number of places in jQuery Mobile. For example, when a link is clicked, its href attribute is normalized and then $.mobile.changePage() handles the rest.
so your code could seem like this :
$('#link_id').click(function() {
$.ajax({
url: "page_served_from_server",
error: function(jqXHR, strError){
if(strError == 'timeout')
{
//do something. Try again perhaps?
}
},
success: function(){
//charge your page :
// $.mobile.changePage('yourPageAdress',"turn",false,true);
},
// here you can specify your timeout in milliseconds
timeout:3000
});
});
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.
I have a click function that has a popup window that I need to open once the ajax call is successful. I have tried setting async: false. I tried putting the popup in the ajax call but that makes the popup blocked by the browser. And my last attempt was to set a timeout until the ajax call completes and each with no luck. Any suggestions???
var currentStatus = "false";
var success = "false";
function waitForSuccess(){
if (success == "false"){
var t = setTimeout("waitForSuccess()", 300);
}
else{
stopTimer(t);
return "true";
}
}
function stopTimer(t){
clearTimeout(t);
}
function checkReps(clicked){
$.ajax({
cache: false,
url: "chat_new_files/chat_new.php",
success: function(data){
success = "true";
}
});
$('#chatT').live('click', function (event) {
success = "false";
checkReps("true");
var changed = waitForSuccess();
if(changed == "true"){
BG.startChatWithIssueId('0', true); //THIS IS THE POPUP
}
});
I am thinking that my logic for this last attempt with the setTimeout is messed up. So any ideas on how to fix this or a brand new idea? Thanks!
Open the popup in the success: function for the ajax call. That is the only place that you both know that the ajax call has completely successfully and that you have access to the data that is returned from the ajax call.
Do not use timers to try to guess when the ajax function is done.
You are over-complicating things:
$('#chatT').live('click',function(){
$.ajax({
cache: false,
url: "chat_new_files/chat_new.php",
success: function(data){
BG.startChatWithIssueId('0', true);
}
});
});
As far as the browser popup blocker issue, a simple work-around is to create a div which acts as a popup container, like <div id="popup"></div>. Inside that div you can add an iframe with the url being the same of what your oldskool popup was. Initially, give that div the CSS #popup { display:none; position:relative; z-index:99999; /* etc...*/ } Then in your click event, you simply show() or fadeIn() that div.
Example, check out Colorbox - on the demo page, click the link that reads "Outside Webpage (Iframe)"
Use a callback that you can call in success of $.ajax(). Then open you popup window in the callback.
function checkReps(clicked){
$.ajax({
cache: false,
url: "chat_new_files/chat_new.php",
success: function(data){
success = "true";
openPopup();
}
});
Browsers tend to block popups that aren't originated from an event handler because those popups tend not to be user-initiated (duh). To get around this, you have 2 choices:
launch the popup immedately and have its content be filler, probably
including some sort of http://ajaxload.info spinner gif
avoid opening a new window, and instead put your content in a 'modal' div that you
show and hide as required.
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