We Keep Coding

Event listener if div is reloaded

In some AJAX query, in response.done I refresh some div and it works fine, the problem is this refresh doesn't refresh also another function(this function fill the content html() of another div inside the refreshed one). I'm thinking for a trick to add an event to listen when that div is reloaded, I lunch my getAmount() function.
I tried to add that function after reloading part in AJAX but it doesn't work.
file1.phtml
ajaxRequest = jQuery.ajax({
...
ajaxRequest.done(function (response, textStatus, jqXHR) {
jQuery("#shopping-cart-table").load(location.href + " #shopping-cart-table"); //Here I reload my div.
});
file2.phtml
function getAmount() {
var some = jQuery(this).attr('data-subtotal');
jQuery('#shopping-cart-table .data').each(function(){
jQuery('.ship-cart-vendor-header').each(function(){
jQuery(this).find('.not-reached').html(some);
});
});
}

You've to call your getAmount function in the load callback, what mean after the complete reloading :
jQuery("#shopping-cart-table").load(location.href + " #shopping-cart-table", function(){
getAmount();
});

Open javascript popup after jquery response

I have this simple javascript function:
<script type="text/javascript">
$(document).ready(function () {
$(document).on('click', '.check', function(){
$.post('/index.php',
{
article: '1'
},
function(data, textStatus)
{
window.open('https://google.com');
});
});
});
</script>
<button class=".check">Check</buttton>
Although the click is user initiated but the popup is getting blocked by browsers. How to avoid this?

There's no way to unblock it through code.
Most browsers feel popups are very interrupting and that's the reason they block it.
You can only find out if the popup is being blocked and promptly notify the user to unblock it.
var wind = window.open('https://google.com');
if(!wind || wind.closed || typeof wind.closed=='undefined')
{
//POPUP BLOCKED
alert("please enable popups");
}

Your pop-up should be triggered directly by user interaction. But instead it's in an AJAX callback.
So, to prevent the block you should open the pop-up within the click handler. Then make the post..
EDIT: A tricky method would be to open the popup directly, then make the request and finally redirect the popup to the result URL:
$(document).on('click', '.check', function(){
var popup = window.open('/loading.html', 'popup');
$.post('/index.php', { article: '1' },
function (data, textStatus) {
popup.location.href = 'http://new-url';
});
});

You can try this trick:
function(data, textStatus)
{
var anchor = $( '<a/>', {href:'https://google.com',target:'_blank'} ).text( 'TEST' );
$('body').append( anchor );
$('body').find( 'a' ).last()[0].click();
anchor.remove();
};
JS FIDDLE DEMO

how and where to insert a callback function

In my web app, on one of the forms, I have a button(s) that users can click to look up names from the corporate directory. Once they have found the name, they click on the results and the name and other directory data is populated onto the form. At least, that is how I would like it to work.
My question is how to properly use a callback function so that my data from the look up is brought back to the form where I can parse it out to the correct fields.
From the form page I have the following click function:
$(".lookupNameBTN").button({
icons: {primary:"ui-icon-gear"}}) //button
.on("click",function(event){
var btn = $(this).attr("data");
mainApp.lookup(function(obj){
if(btn == "request"){
$("input[name=requestName]").val(obj.cil);
}; //request
if(btn == "client"){
$("input[name=clientName]").val(obj.cil);
}; //client
}); //lookup
}); //click
The mainApp.lookup() opens the dialog box and loads the server files.
mainApp.lookup = function(callback){
if($("#lookupDialog").length == 0){
$("body").append("<div id=\"lookupDialog\" class=\"dialogDivs\" />");
}; //div exists
$("#lookupDialog").load("/RAMP/cfm/common/lookup.cfm",function(r,s,x){
if(s == "success"){
mainApp.lookupDialog = $("#lookupDialog").dialog({
title: "Corporate Directory",
modal: true,
width:600,
height:450,
position: {my:"center center", at:"center center", of: "#app"},
close: function(){
$("#lookupDialog").dialog("destroy").remove();
} //close
}); //dialog
}else{ alert("Error in Loading");
} //success
}); //load
}; //mainApp.lookup
Finally, on the lookup popup, I have the following when the user clicks on the table row with the results:
$("#lookupResultsTbl tr").on("click",function(){
var rslt= $(this).attr("data");
// magic goes here to return value
}); //click
Once I have the value, I'm unclear how to get it back to the callback function?
I really appreciate the assistance.
Thanks,
Gary
UPDATE: I added the Coldfusion tag because using CF9 for my server side. Since this isn't specific to server side, I'll remove that tag.
My question is around continuation. One the form page, I am calling mainApp.lookup. I would like to provide a callback in that function that returns the data from the directory lookup.
The load function completes and returns the html for the dialog box. The user must interact with that dialog by searching for a name and getting the returned results.
I am looking for a way to return the data in the tr click event in the dialog box back to the mainApp.lookup function and then to the callback in the original statement in my form.

You should be able to safely invoke your callback function in the if(s == "success") code block;
mainApp.lookup = function(callback){
if($("#lookupDialog").length == 0){
$("body").append("<div id=\"lookupDialog\" class=\"dialogDivs\" />");
}; //div exists
$("#lookupDialog").load("/RAMP/cfm/common/lookup.cfm",function(r,s,x){
if(s == "success"){
callback() // here
mainApp.lookupDialog = $("#lookupDialog").dialog({
title: "Corporate Directory",
modal: true,
width:600,
height:450,
position: {my:"center center", at:"center center", of: "#app"},
close: function(){
$("#lookupDialog").dialog("destroy").remove();
} //close
}); //dialog
}else{ alert("Error in Loading");
} //success
}); //load
}; //mainApp.lookup
.. which is itself in the standard jQuery .load() callback function anyway .. so I hope I've understood your question properly!

How to change text of jquery created tooltip?

I have an application that displays web pages which contains source reference, when user hover above the source reference a tooltip with extra information appears.
I want to change tooltip text dynamically to responseText if communication with the server was successful (see method below) - but I don't know how .
(I already make sure the the respomseText contains the right data)
the tooltip is generated and it's data is sent by this jQuery code:
$(document).ready(function() {
$('table a').on('mouseenter._do_submit', _do_submit);
$('table a').tooltip({
tooltipClass: "coolToolTip",
content: function() {
var element = $( this );
return '<p class=toolTipP>' +element.text(); + '</p>';
}
});
$('table').bind('mouseleave._remove_icon', _remove_icon);
function _remove_icon(event) { $(event.target).find('img').remove(); }
function _do_submit(event) {
$event_origin = $(event.target);
$event_origin.find('img').remove();
ajax_sender( $event_origin );
}
function ajax_sender(event_origin_obj) {
$('<img src="./js/ajax_ani.gif" />').appendTo(event_origin_obj);
url= 'http://localhost:8080/zoharTranslator/ReadZohar';
var xhr = $.ajax({
type: 'GET',
url: url,
data: 'command=source&src=' + event_origin_obj.text(),
beforeSend: beforeSending,
success: on_success,
error: log_error_message
});
function on_success(data) {
event_origin_obj.find('img').remove();
$(document).removeAttr("title");
event_origin_obj.attr( "title", data);
console.log(xhr);
}
function log_error_message(xhr) {
...
}
function beforeSending(xhr) {
...
}
}
});

You can always change the content of your tooltip after its created by using it's setter like this...
$( ".selector" ).tooltip( "option", "content", "Awesome title!" );
-- 2ND UPDATE --
OK, I figured out how to get the jQuery UI added to jsFiddle. This is how I would solve your problem: http://jsfiddle.net/spZ69/3/
Obviously the ajax call won't work but just replace the url ajax/test.html with your url that returns text and it will replace the tooltip's text.

Close dialog box from within AJAX loaded content

I have a jquery ui dialog that loads its content via ajax:
$('#register').click(function(e) {
var tag = $('<div></div>');
$.ajax({
url: 'signup.html',
success: function(data) {
tag.html(data).dialog({modal: true}).dialog('open');
}
});
e.preventDefault();
return false;
});
I have a second script within the content that is supposed to close the dialog when the submit button is pressed
$(function() {
$('form #submit').click(function(e) {
$(this).parents('.ui-dialog').dialog('close');
e.preventDefault();
return false;
});
});
When i click the submit button, i get the error:
Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'
What is it that i am missing to allow me to close the dialog from the content that has been loaded via ajax?

You have to call dialog('close') on the element where dialog('open') was called before. You're calling the function on$('.ui-dialog')instead of$('.ui-dialog ...')`.
You should define id or class for the tag element in your code:
var tag = $('<div id="signup-id"></div>');
Then find the correct element in click handler like this:
$(this).parents('.ui-dialog').children('#signup-id').dialog('close');
Note: You can find #signup-id in click handler directly like $(this).children('#signup-id') if you're sure that signup.html never contains element with signup-id id.

Define you tag dialog in html
<div id="tag_dialog" style="display:none">
</div>
then on document ready:
$(document).ready(function(){
$('#tag_dialog').dialog({
modal:true,
autoOpen:false,
//you could give some other options such as width, height .....
});
$('#register').click(function(e) {
$.ajax({
url: 'signup.html',
success: function(data) {
$('#tag_dialog').html(data).dialog('open');
}
});
e.preventDefault();
return false;
});
$('form #submit').click(function(e) {
$('#tag_dialog').dialog('close');
e.preventDefault();
return false;
});
});