We Keep Coding

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);
}
}); }

Delay page unload after submitting form

Is it possible to delay the moment when the unload method is called on a web page?
I have N pages and each page contains a form. I don't want users to click on a submit button so I simulated a click on the hidden submit button via javascript. This is activated everytime the user change page:
window.onbeforeunload = function() {
document.getElementById('submit_id').click();
}
This doesn't work but if I put an alert after .click ()
window.onbeforeunload = function() {
document.getElementById('submit_id').click();
alert("submitting form");
}
everything works like a charm. This because the alert gives the form the time to actually submit its data; without the alert the page unloads before the form has been submitted and therefore the changes are not saved.
I tried to put a dummy setTimeout after .click()
window.onbeforeunload = function() {
document.getElementById('submit_id').click();
setTimeout(console.log("dummy"), 200);
}
but it didn't work. Any help or feedback on this would be greatly appreciated.

if you use jquery, you can try to save via ajax. and maybe adding async to false, not recomended but could work in your example if save function is really fast.
http://api.jquery.com/jQuery.ajax/
here is how i save:
var $form = $('#formId');
$.ajax({
type: "POST",
url: $form.attr('action'),
data: $form.serialize(),
error: function (xhr, status, error) {
// error
},
success: function (response) {
// sucess
}
});

JqGrid Advanced Search - Save search

I am creating a website and have a jqGrid on my page. I am using the advanced search feature by adding a custom button to my navgrid (pager) that calls the jqGrid 'searchGrid' function.
$('#My_Grid_Id').jqGrid(settingsObject)
.navGrid('My_Grid_Id_toolbar1',{del:false,add:false,edit:false,refresh:false,search:false})
.navButtonAdd('My_Grid_Id_toolbar1',
{
caption: 'Search',
buttonicon: 'ui-icon-search',
title: 'Search',
onClickButton: function() {
$(gridSelector).jqGrid ('searchGrid', {
caption: 'Search',
multipleSearch:true,
overlay: false,
multipleGroup:true,
recreateFilter: true
});
}
});
I would like to be able to save the search settings when the user leaves the page so I can reload them when the user returns. I almost have a working solution, but after I have saved and reloaded the search settings, the 'Reset' button on the search dialog window does not work as expected. The search setting do seem to be reset in the background but the window does not refresh and the grid still shows the old results.
To explain a bit more. I catch the window unload event and store the search settings by sending the potdata.filters parameter to the server with an ajax call. I then store the data in a cookie which I can load later.
$(window).unload( function () {
$.ajax({
type: "POST",
url: saveUrl,
dataType: 'json',
traditional: true,
async: false,
data: {
searchSettings: $('#My_Grid_Id').getGridParam('postData').filters
}
});
});
When I reload the grid I check if my cookie has a value then insert the saved filters back into the grid in the constructor.
postData: {
filters: mySavedSearchSettings
},
At this point the grid works well, the search has been saved and the results show as expected. When I open the search window dialog the search options appear as expected. But when I click the 'Reset' button the window does not update properly and neither do the grid results. I have attempted to add an onclick event to the reset button to manually reset the search but nothing seems to happen.
afterShowSearch: function() {
$('.fm-button-icon-left').click(function(){
$('#My_Grid_Id').jqGrid('setGridParam', { search: false, postData: { "filters": ""} }).trigger("reloadGrid");
});
}
Can anyone offer any help? I think I am close, I just need to reset the search window somehow then reload the grid.

The answer turned out to be two things.
Firstly, the grid was not reloading the correct data as I did not correctly handle the server side code. I have recently started using php and I had a bug where the code did not correctly identify that the filter post data was null/empty.
Secondly, I was able to reset the search window dialog by calling the 'searchGrid' function to open it again. So after the search is shown I add an on click event to the reset button as follows:-
$(gridSelector).navButtonAdd(gridSelector + '_toolbar1',
{
caption: 'Search',
buttonicon: 'ui-icon-search',
title: 'Search',
onClickButton: function() { OpenAdvancedSearchDialog(gridSelector); }
});
}
function OpenAdvancedSearchDialog(gridSelector) {
$(gridSelector).jqGrid ('searchGrid', {
caption: 'Search',
multipleSearch:true,
overlay: false,
multipleGroup:true,
recreateFilter: true,
afterShowSearch: function() {
$('.fm-button-icon-left').click(function(){
OpenAdvancedSearchDialog(gridSelector);
});
}
});
}

Link in AJAX HTML response loses onclick after being clicked

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.

Continue running script once jquery ajax call is successful

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.