understanding javascript events and timing to fix dynamic email bug - javascript

This is a bit hard to explain. I have a search results page with hundred of hospital and physician listings. Each record is loaded into a javascript array when the page loads, so all records are accessible without a page reload. A user may also click a "Details" page which shows detailed information for each individual hospital or physician. This, too, is dynamic and doesn't require a page reload.
Here's where my issue comes in.
On each details page, the user has the ability to Share (email) the hospital/physician information. My issue is that if a user attempts to share multiple hospital/physician listings one after the other, the mailto link seems to open every single email instance that the user has previously opened.
Clicking Share on Hospital A opens an email window for Hospital A. Closing this Share window, then clicking Share for Hospital C opens 2 windows - Hospital A and Hospital C - as if an array is being stored of all successive Shares. Confusing, yes, I know :-)
Let me break down the code a bit. The Details page is handled by a function showDetails(id). The id parameter is the record whose details are being shown, and in this Details page lies the Share button. Here's an overview of the function (very condensed):
function showDetails(id) {
// make visual transitions to details page //
rec = new Array();
// get this record (rec)
for( var i = 0; i < results.length; i++){
if (results[i]['row_id'] == id){
rec = results[i];
break;
}
}
// set record variables
var longName = rec['longName'];
var city = rec['city'];
var state = rec['state'];
...
// output variables into lovely html //
// handle Share button. I think this is where my issue is
$(document).ready(function(){
$("a[rel='email']").each(function(){
// Modify the mailto: value
var mailtoVal = $(this).attr('href');
var body_message = '';
body_message += longName+"%0D%0A%0D%0A ";
body_message += address.replace("<br>","%0D%0A") +"%0D%0A ";
body_message += city+", "+state+" "+zipCode+"%0D%0A ";
body_message += phoneFormat(phone)+"%0D%0A %0D%0A ";
body_message += emailAddress+"%0D%0A ";
body_message += shortURL+"%0D%0A ";
mailtoVal = 'mailto:name#domain.com?subject=Provider Information&body='+body_message;
$(this).click(function(){
window.location.href = mailtoVal;
return false;
});
});
});
}
And down below, this code is my actual link:
<a class="button" href="#" rel="email">Share</a>
Like I said before, this works fine when I click the Share button for my first record when the page loads. If I open another, both my first and second Share open.
When I debug, I can see mailtoVal is never set to the appropriate value. It's almost as if it's storing each successive Share as an array somewhere and looping through each of them when clicking Share.
My gut feeling tells me there's something I'll need to do with setTimeout or some sort of asynchronous coding, but I'm a bit hazy on best ways to go about doing those.
Would it be best to create another function outside of showDetails() to handle the Share? I've put off doing this, because I would need to receive the ID as a parameter and retrieve the results for the ID... again.
Please Note - the bulk of this code was not written by me. I've been assigned to this project fairly late in its dev cycle, and now I'm simply trying to debug it.
I know this is a bit confusing, so please let me know if there is any additional info needed.

You have to disable previous click handlers before you bind another one:
$("a[rel='email']")
.off('click')
.each(...)
Without the .off() the event handlers keep getting added to your Share link, causing what you were experiencing.
Additionally, you can remove the $(document).ready(function() { ... } inside the showDetails() function. It's not necessary there; just make sure showDetails() is not called before the page is fully loaded.

Related

jquery ajax call getting old data when re-used

I have an ajax call that builds a small graph in a popup window. The html for the link is re-used in many different links for different devices on the page. What happens, is that when you click a graph for the first device, you get that device. You click a button for the second device, you get that device, however, if you keep clicking away, after the third click or so, you suddenly start getting only the first device, over and over. I think my variables are being cached in some odd way, and I don't understand:
the HTML:
<a class="bluebtn graphbutton ingraph" href="http://wasat/cgi-bin/rrdjson.cgi?res=3600&start=-24h&end=now-1h&uid=28.7B2562040000" data-uid="28.7B2562040000" data-name="Laundry Room Freezer"></a>
<a class="bluebtn graphbutton ingraph" href="http://wasat/cgi-bin/rrdjson.cgi?res=3600&start=-24h&end=now-1h&uid=28.F7A962040000" data-uid="28.F7A962040000" data-name="Garage Temp"></a>
The code in question:
$(document).ready(function() {
$('.graphbutton').click(function(e) {
var formURL = $(this).attr("href");
var uid = $(this).data("uid");
var name = $(this).data("name");
e.preventDefault();
$.ajax({
url: formURL,
dataType: "json",
cache: false,
context: this,
success: function(data){
console.log("calling mkgraph with uid "+uid+" name " +name);
make_graph(data.data, uid, name);
},
error: function(ts) {
console.log(ts.responseText); }
});
}); /* clickfunc */
}); /*docready */
What happens:
Click freezer:
"calling mkgraph with uid 28.7B2562040000 name Laundry Room Freezer"
Click Garage:
"calling mkgraph with uid 28.F7A962040000 name Garage Temp"
Click Garage again:
"calling mkgraph with uid 28.7B2562040000 name Laundry Room Freezer"
Some of these links are being manufactured by the make_graph() function. I'm a bit worried that this is the issue, and somehow the ajax thing needs to be re-initialized after doing this?
By request, the relevant code in make_graph() that I think is causing my issue here. Basically, I'm editing the buttons in the css popup on the fly, and I think this is creating a wierd situation where the ajax binding is bound to the old href, and not being updated, even though the link is correct in the produced html. This is consistent with the effect where the binding only gets mangled on the third attempt.
$(".ingraph").each(function() {
this.href = $(this).attr("href").replace(/uid=.*/g, 'uid=' + uid);
this.setAttribute('data-uid' ,uid);
if (devname.length > 0) {
this.setAttribute('data-name', devname);
}
});
EDIT: adding a long answer:
I have multiple buttons on the main page. Each one specifies a "uid" that gets fed to rrdjson.cgi, which takes the uid and finds the data for that device, and returns it as json. When make_graph() recieves this json data, it populates a css popup, with the graph, and edits 5 buttons so they reference that UID. Those 5 buttons change the timescale of the graph by re-requesting the data from rrdjson.cgi.
What I am worried is happening, is that I click on the frige, it changes the uid's of the buttons inside the popup to reference the frige. Then I close that, click on the garage, it also changes the uid's and correctly shows the garage data. Then I click on one of the buttons inside the popup for the garage, and poof, I get the refrigerator again. I suspect that ajax "remembers" the old values for $(this).attr("href") etc and passes those values to the code, rather than re-reading the contents of the HTML. (perhaps instead of HTML, I meant DOM there, I'm a little vauge on the difference, but I suspect I meant DOM)
Maybe the answer is to somehow un-register the ajax binding to those buttons and re-register it every time make_graph() changes them? How would I do the un-register? .off() ? .unbind() ?
After much gnashing of teeth, and google, I have answered my own question.
https://forum.jquery.com/topic/jquery-data-caching-of-data-attributes
Turns out, jquery caches "data" types, but not attr types. So when I do:
uid = $(this).data("uid");
vs
uid = $(this).attr("data-uid");
I get wildly different results. I guess the moral of the story is that .data is super evil.. :)
If you add a random value to your url like
var formURL = $(this).attr("href")+"?rv="+Math.random();
you'll force the ajax call to reload the URL. You can use the cache property (set it to false) JQuery will load the data again, but any proxy may send a cached version.
(Please check that there are no other attributes set in the url, otherwise set "&rv="+Math.random(); (& instead of ?) use
var formURL = $(this).attr("href");
formURL + (formURL.indexOf("?") > 0 ? "&rv=" : "?rv=" )+ Math.random();
Your problem should not have something to do with make_graph() as uid and name depend on $('.graphbutton')
(if not make_graph(), or some other function, changes the attributes of your buttons)

Keeping JS changes on DOM after refresh

So, I have this weird thing going on in my test site, where I have every "link" (be it menu,button, or anything) to show/hide divs instead of loading pages. Pretty basic right? Except whenever I refresh the page, it all reverts back to the Homepage, which is expected. Based on my search for answers, I think I have to use the local/session storage option. Session sounds better.
So here's the deal. I looked up the w3schools page on sessionStorage and I get how it works, but I don't undestand how I could apply this to my page. Basically every link on my page runs a function that hides the previous div and shows a new one with the content. So I was thinking if every time a function triggered, it would store a value on a var that would appoint the function as the last used. Then somehow use sessionStorage and make it work, but I can't built it. Any help?
Here's a short example of my current code.
EDITED
var state = null;
function show1() {
state = "home";
"use strict";
document.getElementById('snow').style.display = "block";
document.getElementById('btn').style.display = "none";
}
function ramble() {
state = "ramble";
"use strict";
document.getElementById('ramble').style.display = "block";
document.getElementById('snow').style.display = "none";
document.getElementById('tex').style.display = "none";
}
That's basically it.Onclick show/hide.
You can use the following syntax:
Save data:
sessionStorage.setItem('key', 'value');
Retrieve data:
var data = sessionStorage.getItem('key');
More info and examples: https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage
The same goes with localStorage, but with the persistance differences you already found
I hope my solution will help you: If you want to keep your JS changes, you need to save them to database using AJAX and also change page architecture and logic to use data from database. After that, even if you reload page you will keep all your changes.

How can I move a person from a DropDownList (the ddl is on table 1 ) to another table (table 2) using AngularJS?

This is my first post so please be kind with me. :D
What i want is to select a person from a DropDownList (which is on table 1) and when i press a button, I want to move the selected person to another table (on table 2).
I will post some screens from my PC because i cant add code (i receive some error where say is too much code or something like that...)
Here is the link with Photos. I dont have 10 reputation so i cant post different URL with description...:D
http://postimg.org/gallery/13lmzz4kq/
I write description in every photo :D
Ty in advance !
In your plunker you have a method moveAudit. This method receives an item:
$scope.moveAudit = function (item) //Function for moving the unassigned audits
{
//var assignedAudit = $scope.assignedAudit; //--> you dont need this here
//var audit = $scope.unassignedAudit; //--> unused variable
//var auditId = $scope.unassignedAudit.IdUnassignedAudit; //--> unused variable
//TODO: here you need to add the selected 'expert' to item
// inspect/debug how your form POST passes this information to the controller
// ideally put it in a scoped var or pass it in the method: $scope.moveAudit = function (item, selectedExpert)
item.AssignedExpert = $scope.selectedExpert
//add to AssignedAudit
$scope.assignedAudit.push(item);
console.log("Row added: ", $scope.assignedAudit);
//TODO: probably you want to remove the item from $scope.assignmentExperts
};
I cannot debug the plunker since it is incomplete, but this should do the trick.
Upon further inspection of your code it looks like $scope.ddSelection is the selected expert.

How to track user steps

We have a intermittent bug that it's been hard to track, the bug consists in randomly (so we think) when redeeming a code, the entire code value disappears upon making the order...
Doing our self the same process manually, it does not, never ever, happen!
So I thought recording the user actions, every action:
click links
submit inputs
page views
ended up making up this set of rules, and appending to the end of the master page:
$(function() {
// log this page view
log2Loggly('Page View', '');
// for each click
$("a").click(function() {
var ref = $(this).attr("onclick").length > 0 ? $(this).attr("onclick") : $(this).attr("href");
log2Loggly('Link clicked', ref);
});
// forms
$("form").submit(function() {
var dt = $(this).serialize();
log2Loggly('Form submited', dt);
});
});
and using Loggly I can send each action, as they get the hold of the date and IP, it's easier to match a user IP upon our system.
I keep seeing this services like CrazyEgg that record all user actions, but we can't match the user, it's anonymous data!
What I really liked was to search for IP and get the entire user tree as kind'a of an organigram of what the user did... maybe I'm able to pull this off with the data I have, but I would like to ask 2 things prior to adventure on this idea
Is there any kind of service for this outthere that you might come across before?
what more should I track to make it "almost perfect"?

onClick replace /segment/ of img src path with one of number of values

No idea what I'm doing or why it isn't working. Clearly not using the right method and probably won't use the right language to explain the problem..
Photogallery... Trying to have a single html page... it has links to images... buttons on the page 'aim to' modify the path to the images by finding the name currently in the path and replacing it with the name of the gallery corresponding to the button the user clicked on...
example:
GALLERY2go : function(e) {
if(GalleryID!="landscapes")
{
var find = ''+ findGalleryID()+'';
var repl = "landscapes";
var page = document.body.innerHTML;
while (page.indexOf(find) >= 0) {
var i = page.indexOf(find);
var j = find.length;
page = page.substr(0,i) + repl + page.substr(i+j);
document.body.innerHTML = page;
var GalleryID = "landscapes";
}
}
},
There's a function higher up the page to get var find to take the value of var GalleryID:
var GalleryID = "portfolio";
function findGalleryID() {
return GalleryID
}
Clearly the first varGalleryID is global (t'was there to set a default value should I have been able to find a way of referring to it onLoad) and the one inside the function is cleared at the end of the function (I've read that much). But I don't know what any of this means.
The code, given its frailties or otherwise ridiculousness, actually does change all of the image links (and absolutely everything else called "portfolio") in the html page - hence "portfolio" becomes "landscapes"... the path to the images changes and they all update... As a JavaScript beginner I was pretty chuffed to see it worked. But you can't click on another gallery button because it's stuck in a loop of some sort. In fact, after you click the button you can't click on anything else and all of the rest of the JavaScript functionality is buggered. Perhaps I've introduced some kind of loop it never exits. If you click on portfolio when you're in portfolio you crash the browser! Anyway I'm well aware that 'my cobbled together solution' is not how it would be done by someone with any experience in writing code. They'd probably use something else with a different name that takes another lifetime to learn. I don't think I can use getElement by and refer to the class/id name and parse the filename [using lots of words I don't at all understand] because of the implications on the other parts of the script. I've tried using a div wrapper and code to launch a child html doc and that come in without disposing of the existing content or talking to the stylesheet. I'm bloody lost and don't even know where to start looking next.
The point is... And here's a plea... If any of you do reply, I fear you will reply without the making the assumption that you're talking to someone who really hasn't got a clue what AJAX and JQuery and PHP are... I have searched forums; I don't understand them. Please bear that in mind.
I'll take a stab at updating your function a bit. I recognize that a critique of the code as it stands probably won't help you solve your problem.
var currentGallery = 'landscape';
function ChangeGallery(name) {
var imgs = document.getElementsByTagName("img") // get all the img tags on the page
for (var i = 0; i < imgs.length; i++) { // loop through them
if (imgs[i].src.indexOf(currentGallery) >= 0) { // if this img tag's src contains the current gallery
imgs[i].src = imgs[i].src.replace(currentGallery, name);
}
}
currentGallery = name;
}
As to why I've done what I've done - you're correct in that the scope of the variables - whether the whole page, or only the given function, knows about it, is mixed in your given code. However, another potential problem is that if you replace everything in the html that says 'landscape' with 'portfolio', it could potentially change non-images. This code only finds images, and then replaces the src only if it contains the given keyword.

Categories