Is something like this achievable with jQuery click event

JavaScript
1

Could anyone tell me if it’s possible to automate the following process. Basically, in my simple code in the JSFiddle here, I am using the jQuery click() event. So when a user clicks on the text Click Me First Time! and new text is shown below Click Me Second Time!. When a user clicks on Click Me Second Time!, a new text is shown below Click Me Third Time!.

I want to continue this process as long as user keep on clicking the latest text shown on the screen so far. By continue this process, I mean, when a user clicks on the latest text( here Click Me Third Time!, I want to display another text below and when user clicks that text again, I want to display another new text and so on and so forth)

Is there a way where I could automate this process instead of writing the click() event again and again because I am not sure how many times a user would keep on clicking the latest text.

2

Not with using textual numbers (first, second, third) or ordinals (1st, 2nd, 3rd). But why would you want to do something like that, anyway? Is there a use case, or just seeing if it can be done?

V/r,

^ _ ^

3

Yes, there is a use case. This logic would eventually be used in this manner.

  1. I will have a table displaying JSON data.

  2. User clicks on it, a new table is displayed. This new table will display another JSON data (a new Ajax call will be needed here).

Similarly, if a user clicks on second table (any row), new ajax call will return a JSON data and a third table will be displayed. Basically, user will be getting filtered records if they keep clicking table and seeing new table

4

Well, according to THIS thread on another site, yes, it can be done with ordinals. Should have known better than to speak up before proper research. :slight_smile:

V/r,

^ _ ^

5

I guess just give each link the same class name, set the .click() on that, keep track of the numerical value (ie, when the page first loads, set the value to 1, and ++ increment it on each click) and display the text based upon that value IF you’re using ordinals. I think the textual numbers would be a lot more difficult.

V/r,

^ _ ^

6

I see. Basically, I will be having a table in place of just text. So I used textual number thing just for my question purpose. :slight_smile: Thanks !

7

I like the ES6 Lambda version. One line of code. :slight_smile:

I took that and made a quick function:

function get_ordinal_of(i){
	n=>i+(i%10===1&&i%100!==11?'st':i%10===2&&i%100!==12?'nd':i%10===3&&i%100!==13?'rd':'th');
	return n;
	}

V/r,

^ _ ^

8

I agree that having text would be a problem with an unknown limit. Even with a massive array of the text values it might not cover all use cases.

But that seems to be a bit off-topic here and is because of the way the question was phrased. What the question is about is the process, not the text content that would display. What would be displayed is whatever the XHR returns.

If I’m understanding, the question is how to best add event listeners to XHR added elements.

I think instead of adding onclicks to each new element as they’re added, it could be possible to add a single onclick to the parent element and have some kind of callback that uses some type of “this event target” that would work for whatever child element was clicked. (sorry, no time to work up a POC example ATM)

9

Thanks everyone.

I was actually able to use this JsFiddle approach and achieve that thing. But now I am running into some other issues.

I’ve tried to use the above JSFiddle based approach in my JSFiddle code here .

Could anyone please tell me if instead of displaying the text , I could directly display the grid as soon as the original table/grid is clicked?

I mean, if instead of having the following line text: 'click me to display jQXGrid!' in the following line of code of my JSFiddle above :

var newEl = $("<div/>", {
    class: "clickable",
    id: "grid" + id,
    style: "margin:100px 10px 20px 200px ",
    text: 'click me to display jQXGrid!'
  }).append($("<div />", {
    id: "button"
  }));

If I could directly display the grid. The Grid is now getting displayed (using the code snippet below) only after I click on the text.

$(".clickable").jqxGrid({
                    height:270,source: dataAdapter, columns: [
                        { text: 'Link', datafield: 'link', width: 200 },
                        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
                        { text: 'Contact Title', datafield: 'Title', width: 100 },
                        { text: 'Address', datafield: 'Address', width: 100 },
                        { text: 'City', datafield: 'City', width: 100 },
                        { text: 'Country', datafield: 'Country' }
                    ]
                });
10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.