How to find a specific input in a grid array by jquery?

[mohamad]

Hi everybody,
I want to find a specific input in a grid array, how to solve it?

In my grid, I have some ids (which are inputs) like week_day, date_plan, product_name and …

My grid has an array which is called production_planning.
I use some code like this:

$("#production_planning").find(“input”).datepicker({
observe: true,
format: ‘YYYY/MM/DD’
});

But, the mentioned code affects on all of inputs in grid. I want to affect on just on of them.
I tried with the following code, but it did not work:

$("#production_planning").find(“input.date_plan”).datepicker({
observe: true,
format: ‘YYYY/MM/DD’
});

How to solve it?
Thanks in advance for your support.

[mohamad]

Does anyone know? Please take a look if you have some time
Thanks in advance

[ErnieAlex]

Mohamad, so that is Jquery. The “find” function will find an item in the previous section.
So, using .find(“input”) will find all inputs. All good there. But, it finds the selection based on where you started the jquery. In your case, it would be looking for first the #production_planning tag and then ALL of the input tags there are in that. That is not what you want.

You might want to just use a class instead. Much easier and that is what classes are made for.
Just create a special class for the special date format. Let’s say a class name of “myDate” or whatever you like. Then, put a class on your input of “myDate” and use this type of code to format it…

$( ".myDate" ).datepicker({observe: true, format: 'YYYMMDD' });

This way, it does not have to parse thru your #production_planning at all and not any input tags either!
It just changes all classes with that class name. I think that should work. I did not test it, you can…

Let me know… If it doesn’t work for you, show some sample code, maybe make up a small page to show us to test it for you…

[mohamad]

Thanks for your reply,
A new class in a div or a class for php library?

[ErnieAlex]

Just a class or even an id in the html. Meaning no programmed class is needed at all.
Most programmers do NOT use jquery for the formatting of dates. They do that in PHP on the server.
When the data is created, it is formatted to the version needed. But, in most plugins you need to set the format of the date since a lot of them are jquery libraries. Since it appears you used a plugin, you need to use Jquery.

In the line I gave you it was for a class, if I remember correctly. So, in the html, you would add the class.
< DIV class=“myDate”> or whatever. You can also use an id if needed. I think class is just fine.

[mohamad]

Thanks dear Ernie,
Well, unfortunately, I don’t access to the main code source. Actually, I’m working on a low code platform which is based on PHP. The only thing that I know is that the grid is placed in a div.
Also, I tried that with this code in my loop:
$("#production_planning").getControl(i, 4).find(“input”).datepicker({ observer: true, format: ‘YYYY/MM/DD’ });

It does not work,
Do you have alternative solution?
Thanks in advance

[ErnieAlex]

Mohamad, I am confused on your question. What do you mean by “low-code-platform”?
Are you saying that you are given data from some other server which you do not have access to?
Also, which datepicker are you using? I need more info on what you need fixed.

To explain… If you can not change the data from the source you are getting (you called it a “grid”),
and if it is data received in a “table”, you can just change the table to add a “class” to it. That is easy
to do in Jquery. Then, the class code I gave you should work well. Perhaps you can send me a
sample of what the data you receive is. You can send in it a private message so nobody else sees
it if it is personal. Or post a few lines of it here if the data is not private. I am not clear on what you need.

[mohamad]

Thanks dear Ernie,
I mean I am working on an opensource application (BPMS).
In DynaForms part, there is a specific place where you can write javascript/ jquery code.
I do not access the html code. I can add some javascript code.
So I do not know how to add a div there!
And speaking about grid, I can tell, grid is an array. I want to impose datapicker on the forth column of my grid
And I tried with above codes.
It does not work.
Also, when I use the codes of my first post(in this topic), it changes all of columns of grid.
I hope to clear it for you.
And again sorry for taking your time.
Best Regards

[ErnieAlex]

I realize it might be a language issue here. But, both of us are not clear.

I understand you are trying to use Javascript/Jquery to alter data on the displayed page.
You show us the code for this section.

But, you do NOT show us any of the actual HTML that you want to change. Is the webiste up online now? Can we see the live page you want changed? Do you know how to view a “rendered” page? The code on it? Here is how that is done.

Go to the page you want to alter. Once it is displayed in your browser, RIGHT-CLICK on it, not on a button, and select the option, VIEW-SOURCE-PAGE and it will open a new page with the code that is in the page. You can look down to the area you want to change. Then, show that area to us. A few lines before and after what you want to change. We need to see what we need to change before we can fix it.

Hope that make sense.

[mohamad]

Thanks for your reply,
The source code does not show my intended code. It shows this, I tried it with Firefox and Chrome.
Your browser doesn’t support JavaScript or it may be disabled. Please use a different browser or enable JavaScript. Dynaforms won’t entirely work because JavaScript is required.

But I can describe it vividly,
I have a grid(an array variable). It has some columns. When I use my first code, it affects on all of columns. I want to change just on of the columns

Here is my javascript code:
`for (var i = 1; i <= totalRows; i++) {
$("#production_planning").getControl(i,4).find(“input”).datepicker({
observer:true,
format:‘YYYY/MM/DD’
});

   }

`
for example when I use $("#production_planning").getControl(i,4).css("", “”)
It works. I mean my loop is ok.
Also, when I use
$("#production_planning").find(“input”).datepicker({
observe: true,
format: ‘YYYY/MM/DD’
});

All of columns of my grid returns my targeted calendar. But, I want to have it just for the forth column of my grid.

How to use private message for sending some codes?
Thanks in advance

[ErnieAlex]

Ha Ha! You again showed us Jquery code and no HTML. I will attempt to explain again.

You are trying to change CSS in your last message. You want to change a date format instead.
You are pointing in your code to an ID. ( #production_planning ) This means that in your displayed
HTML, you have an ELEMENT such as < div> or < input> or some other section that has an ID assigned
to it like this: < div id=“production_planning”> That is where you can change the one column you want
to change to use < div id=“production_planning” class=“some-new-class-name” > and then you can use
the code I posted before. OR, you can change your code to use a CLASS instead of an ID.
If the entire display is in your array which you called a grid, then you can just use indexing to select the
correct column number four.
I am assuming when you say:
I want to change just on of the columns that you mean
I want to change just one of the columns**strong text
If so, try this:

for (var i = 1; i <= totalRows; i++) {
    if( i= 4) {
        $("#production_planning").getControl(i,4).find(“input”).datepicker({
observer:true, format:‘YYYY/MM/DD’ });
    }
}

That should just change the fourth item in your array. Not sure if that is what you need.

[mohamad]

Thank you dear Erine,
Unfortunately. I cannot reach html code (I’m working on something like CMS. It is BPMS). The software has some specific places where I can add php and javascript code.
And I want to change just one of the columns. But, letter (i) is related to the Rows(not columns). So, when I use getControl(i,4), it means (i) shows the rows and 4 is column. And for me the column 4 is vital.

And I asked a question which is more important for me in comparison with this question. Because, if I can solve that, probably this will be solved automatically.
Would you please take a look at that when you find some free time.

How to add my local function in other OOP application?

Hi everybody, I have my own library and function which can convert Gregorian calendar to my own calendar. In general it works without problem. For example, when I use some code like this, it returns the correct result for me. `require_once jdf.php; function convert($date) { if(($date) == '0000-00-00 00:00:00'){ echo ''; }else{ echo mds_date('Y-m-d H:i:s', strtotime($date), 1); } } $query = ''; $results = mysqli_query($db, $query); while($row = mysqli_fetch_array($results)) { echo convert($ro…

Thanks for your patience
Very best regards

[mohamad]

Hi again,
I tired with this code and it works, but the loop does not work, I mean this is correct just the first row of the grid.
For the other rows, it does not work.(letter i represents the rows, and my targeted column is 4)
`

  var totalRows1 = $("#grid").getNumberRows();
 for (var i = 1; i <= totalRows1; i++) {
 $("#grid").getControl(i,4).datepicker({
  observer:true,
        format:'YYYY/MM/DD'
      });


}`

Thanks in advance
Very best regards

[ErnieAlex]

Are you sure that the number of rows is accurate? Perhaps you should add an alert to see if you are getting the correct value for totalRows1. It may not be getting the correct number. Otherwise, the code appears to be correct. First check what you are getting from $("#grid").getNumberRows();…

[mohamad]

Thanks for getting back to me
In the loop, when I put 1 instead of letter ‘i’, it works yet, but when I put 2 instead of letter ‘i’, it does not work.
I don’t know why?

[ErnieAlex]

$("#grid").getControl(1,4).datepicker({ observer:true, format:‘YYYY/MM/DD’ }); $("#grid").getControl(2,4).datepicker({ observer:true, format:‘YYYY/MM/DD’ });

Does that work? I am wondering if the #grid is correct? I mean, I do not know what the funciton
getControl(x,y) does. If your grid (array) has pointers that the getControl accesses, then it should work.
If the grid is a pointer to a table, it would not work.

[mohamad]

Thanks Dear Ernie,
the problem has been solved.
The problem is rooted in getNumberRows, and now It has been solved.
Again, thanks for your support

[ErnieAlex]

You are welcome! Glad you solved it.