0

I need to get the last clicked element's id value (clickId). Currently I get undefined. Maybe this is because the element is not ready yet when document is loaded? How can I retrieve the value from a function?

$(function(){
    var clickId;
    next();
    alert(clickId); //do something with clickId
});

function next(){
    $("form").on("click", "div", function(e){
        e.preventDefault();
        clickId = $(this).attr("id");       

    });
}
user3399326
  • 863
  • 4
  • 13
  • 24
  • Are you meaning you want to click an element, reload the page, and THEN get the id of the element you clicked? – Bardicer Jul 28 '15 at 15:05
  • 2
    It seems after you clicked on somthing, the page reload(or redirect to somewhere else), so previous value are lost, either get it from parsing the url, or store it in `sessionStorage` or `localStorage`. – fuyushimoya Jul 28 '15 at 15:05
  • @Nick: Yes, it's kind of similar once it takes me to somePage.aspx and return back , i still need to access that 'clickId'. – user3399326 Jul 28 '15 at 15:07
  • 1
    Seeing as how you are setting the location, if that id= is what you're looking for, you might take a look at http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript otherwise, you will need to store the value in session or localstorage like @fuyushimoya suggests. Javascript executes on the client side, and the reload takes place on the server side, so you would need to get the value across that gap. – Bardicer Jul 28 '15 at 15:08
  • @fuyushimoya:well what if i don't reload that is i remove (document.location.href), how would i retrieve the value of 'clickId'? – user3399326 Jul 28 '15 at 15:19
  • You have to move `clickId` out of that function, as variable are in function scope, your `click` event is assigning a value to probably `window.clickId`, not the `clickId` in `domready`. – fuyushimoya Jul 28 '15 at 15:22
  • @fuyushimoya Because var `clickId` is defined outside the `next()` function, the value can be updated inside the function and also be available outside. Changes to the variable are not seen because the OP never displays the value inside the `next()` function. Variable contents are only ever displayed once: upon document.ready, before anything has been clicked. – cssyphus Jul 28 '15 at 15:31
  • @gibberish It seems not, I've create a __[jsfiddle](http://jsfiddle.net/ru118tkh/6/)__ to test that, in that demo, I set `clickId` to `123`, and try to console.log the clickId before get value from clicked div, and get `Uncaught ReferenceError: clickId is not defined`, take a look? – fuyushimoya Jul 28 '15 at 15:55
  • @fuyushimoya That works because you are defining/populating the variable outside (above) the `next()` function. [See this revised demo](http://jsfiddle.net/ru118tkh/7/). Note that defining `newId` above document.ready affects when it is created/assigned, not its scope. – cssyphus Jul 28 '15 at 16:44
  • @gibberish I know your revised demo works, what I'm saying is that in your answer, `var clickId='';` in domready function can never be touched by `next`. As I showed in the jsfiddle I provide, so you have to pull it out of `domready`, just as your `newId` in revised demo. – fuyushimoya Jul 28 '15 at 16:52

2 Answers2

0

Because you are navigating to a different page (or reloading the same page) via document.location.href, you will lose all javascript variable data.

You need to store the information either in a cookie (check out the super simple js-cookie) or as session data.

References:

https://msdn.microsoft.com/en-us/library/ms972338.aspx

In your question, clickId immediately displays as undefined because it was. Assign anything to clickId, and the initial display will have a value.

In your function, clickId's value changes, but you are not displaying it. Once you navigate away from (and then return to) the page, the value is lost, as mentioned above. You must store the clickId in a cookie (or session) for later retrieval.

$(function(){
    var clickId=''; //variable is now defined
    next();
    alert(clickId); //do something with clickId
});

function next(){
    $("form").on("click", "div", function(e){
        e.preventDefault();
        clickId = $(this).attr("id");       
        //document.location.href='somePage.aspx?id=' + clickId;              
        alert(clickID);
    });
}
cssyphus
  • 37,875
  • 18
  • 96
  • 111
0

The click event propagate from html tag lower to the clicked element and then back to html. So if div with Id=12 is in a div without Id then your script will make redirect with Id=undefined. 

<div><div id="12"></div></div>

Use a class name selector for on click event instead of div selector

$(".div-with-id").on("click", function (){...});

<div><div id="12" class="div-with-id"></div></div>
tkeram
  • 214
  • 1
  • 5