Binding content to a form

Hi,

I have this "names of places" page: http://kroweb.dk/gfdev//stednavne/

The page includes many files and a rather large amount of code, so I will try only to paste in what I believe is necessary at this point.

At the top of this page I have created a form with two searchfields - this form will be hidden when this is working :)

If you go to the page and type in and search for "Egebjerg" in the primary search field (below the radio buttons) you get a list of places where the search string is part of the displayed results. The column headlined "Sogn" holds links to a page (in fact two slightly different pages). If you click on a link one of these pages opens. These pages are built with a search field at the top, and what I need is this:

1. The link clicked on at the main page should return the name clicked on in the first search field at the top of the page
2. The second searchfield should return the content of the Amt column from the same row as the link clicked on
3. These two fields should form and fire a search on the opened page where the first field is the search criteria and the second field is a Where clause, which should result in a list in the opened page showing results from the Sogn clicked on within the right Amt.

This is working with another "front-page", and I am using the same basic files, but they need a little editing to make it all work.

Here is some basics:
The table id in this case is this:
 <div id="list_items"></div>

Open in new window


The top searchfields which will be hidden later are those:
<form id="searchlink" style="display:block" target="_blank" method="post">
    <input type="text" name="sognlink" id="sognlink">
    <input type="text" name="amtlink" id="amtlink">
</form>

Open in new window


I am trying to bind the sogn clicked to the first searchfield like this (not working)
<script>
$('#list_items').on('click', '.countSogn a', function(e) {
    e.preventDefault();
    $('#sognlink').val($(this).text());
    $('#searchlink').attr('action', $(this).attr('href')).trigger('submit');
});
</script>

Open in new window


I think that the best thing is to make the first (primary) search function work forst, and look into the where clause afterwards.

I don't know if this is enough to get the idea of what I am after here. I hope so, and if not please let me know which information I should add.
Peter KromanSenior Proposal SpecialistAsked:
Who is Participating?
 
Chris StanyonCommented:
OK. Just done some playing, and we need to make a slight change to the jQuery. Instead of using eq(), we're going to be using nth-child. This is 1-based, not 0-based like eq so we need to select child 2 for the second column.

$('#list_items').on('click', '#tdata tr > td:nth-child(2) a', function(e) {
    e.preventDefault();
    $('#sognlink').val( $(this).parents('tr').find('td:eq(1)').text() ); 
    $('#amtlink').val( $(this).parents('tr').find('td:eq(3)').text() );
    $('#searchlink').attr( $(this).attr('href') );
    $('#searchlink').trigger('submit');
});

Open in new window

That will now fire off you POST to the right page. However, you do still have an error in that page:

Undefined index: sogn in /var/www/kroweb.dk/public_html/gfdev/stednavne/kb_data_SQL.php on line 21

That whole page is set up to expect a POST variable called sogn, but now in this page, you've decided to call it sognlink. You need to be consistent :)
0
 
Leonidas DosasCommented:
Peter the link don't work ''error 403''
0
 
Chris StanyonCommented:
Hey Peter,

Firstly, make sure your 'hidden' form has an action attribute pointing to the page you want to submit to (sognefakta_ByLand.php). Make sure the name attributes match what your action page is expecting in the POST array

Then you'll need something like this:

$('#list_items').on('click', '#tdata tr > td:eq(1) a', function(e) {
    e.preventDefault();
    $('#sognlink').val( $('#input_1').val() );
    $('#amtlink').val( $(this).parents('tr').find('td:eq(2)').text() );
    $('#searchlink').trigger('submit');
});

Open in new window

0
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
Peter KromanSenior Proposal SpecialistAuthor Commented:
Sorry - it should be working now ??
0
 
Chris StanyonCommented:
Actually, you can set the form action dynamically:

$('#list_items').on('click', '#tdata tr > td:eq(1) a', function(e) {
    e.preventDefault();
    $('#sognlink').val( $('#input_1').val() );
    $('#amtlink').val( $(this).parents('tr').find('td:eq(3)').text() );
    $('#searchlink').attr( $(this).attr('href') );
    $('#searchlink').trigger('submit');
});

Open in new window

** Also changed the td:eq() to select the 4th column (eq(3) - previous example selected the 3rd column - eq(2)
0
 
Leonidas DosasCommented:
It is not working...
0
 
Peter KromanSenior Proposal SpecialistAuthor Commented:
Thanks Chris,

One of my problems is that I don't fully understand every statement in every line, which makes it difficult for me to edit correctly.
I am in fact starting a series of courses in January, and I hope that will help a little :)

So - I will ask you for yet another guidance. I will take the script you propose here, and try - inside the script - to explain what I think I understand, and what I know I don't understand - and then hope that you will fill it in for my better understanding.

$('#list_items').on('click', (when you click on the table) '#tdata tr > td:eq(1) a', (the daatables rows choosing column 1 (why this column when it is the second we are working with) but what means the a function(e) (perform a function, but what does the (e) mean) {
    e.preventDefault() (don't know what this means);
    $('#sognlink').val( $('#input_1').val() ) (getting the values of the "hidden" searchfield and the value of the primary searchfield (why this - we are searching for place here and not using the name of the place in the result pages);
    $('#amtlink').val (getting the value of the second "hidden" searchfield)( $(this).parents('tr').find('td:eq(3)').text() ) (the rest of this line I am not too sure about);
    $('#searchlink').attr( $(this).attr('href') ); (activating the "hidden" searchform but what means attr?)
    $('#searchlink').trigger('submit'); (submitting the "hidden" searchform)
});
0
 
Peter KromanSenior Proposal SpecialistAuthor Commented:
I dont understand that the link is not working. It is working nicely here.

Try this:
https://kroweb.dk/gfdev//stednavne/
0
 
Chris StanyonCommented:
The link is working for me. You do have a double slash in there which may break in some browsers!

Anyway, here's the explanation:

$('#list_items').on('click', '#tdata tr > td:eq(1) a', function(e)

This binds the click event to the list_items element, to be fired when we click on a link (a) within the 2nd cell (td:eq(1)) of each row (tr) in the table (tdata). The reason we bind to the list_items and not directly to the table is because you dynamically load the table through AJAX, so we need to delegate the event to something that will already exist when the page loads. The eq() function is zero-based, meaning column 1 is index 0, column2 is index 1, etc. The (e) part of the function is the event itself (the click event). The reason we pass this in is so that we can call e.preventDefault. This prevents the default action of the event. If we didn't have that, then the default action would be carried out, and in the case of a link, it would act like a normal link (with no jquery) and load the page specified by the href attribute.

$('#sognlink').val( $('#input_1').val() );

This sets the value of the form field (#sognlink) to the value that was typed in the search box (#input_1)

$('#amtlink').val( $(this).parents('tr').find('td:eq(3)').text() );

This sets the value of the form field (#amtlink) to the text in the 4th column in the link's parent row (the Amt column)

$('#searchlink').attr('action', $(this).attr('href') );

Just noticed an error in this line (corrected above). It sets the action of the form to the href of the link that was clicked.

$('#searchlink').trigger('submit');

This submits the form as if you'd clicked on a submit button.
0
 
Julian HansenCommented:
I don't understand this requirement
2. The second searchfield should return the content of the Amt column from the same row as the link clicked on
What are you referring to here - is this on the original (http://kroweb.dk/gfdev//stednavne/) page or the opened (http://kroweb.dk/gfdev//stednavne/sognefakta_ByLand.php) page?

Also, why do you not just add the fields you want as parameters to the link (Sogn column) so that they are available immediately to the receiving page? You can use the form which will post the values but this does not make sense as you are essentially doing a GET not a POST (strictly speaking).

You can dynamically append the parameters to the links or add them as part of the original render of the search results. Either way this seems like a more logical approach to the problem.
0
 
Peter KromanSenior Proposal SpecialistAuthor Commented:
Thanks Chris (i'll answer you Julian below :) )

Those explanations really makes a lot of sense to me. I will read them again and again - and maybe use them as good-night reading too :)

But I believe that we are making one mistake here.  We do not want to set the value of the #sognlink to be tha value of #input_1 because #input_1 is the searchfield where you search for places, and places and parishes are seldom the same thing. What we need is to set the value of #sognlink to be the value of the link we are clicking (the name of the parish).

So if I did understand your explanations correctly this line:
$('#sognlink').val( $('#input_1').val() );
should be edited to this:
$('#sognlink').val( $(this).parents('tr').find('td:eq(1)').text() );

Am I on track here :)
0
 
Peter KromanSenior Proposal SpecialistAuthor Commented:
Thanks for the constructive input Julian,

I am referring to the http://kroweb.dk/gfdev//stednavne/

The link comes from the db table and to keep that as simple as possible I just am linking to the two pages in question here which are  
sognefakta_ByLand.php and sognefakta_Hovedstaden.php, and then I try to make these pages do the job in stead of complicating the links too much form the start. It might not be the best way to do this, but I believe that we should follow the path that we have set now, and once we have got that working, there might good reasons to improve and optimize everything possible.
0
 
Chris StanyonCommented:
Ahh OK Peter,

Yes, you are correct that you could do it that way and it would work fine. Having said that, because you're only after the text from the link you clicked on, you can do it slightly easier:

$('#sognlink').val( $(this).text() );
0
 
Peter KromanSenior Proposal SpecialistAuthor Commented:
Right.

I have now edited the "hidden" form to this:
<form id="searchlink" style="display:block" target="_blank" method="post" action="sognefaktaByLand.php">
    <input type="text" name="sognlink" id="sognlink">
    <input type="text" name="amtlink" id="amtlink">
</form>

Open in new window


I have edited the script to this:
$('#list_items').on('click', '#tdata tr > td:eq(1) a', function(e) {
    e.preventDefault();
    $('#sognlink').val( $(this).text() );
    $('#amtlink').val( $(this).parents('tr').find('td:eq(3)').text() );
    $('#searchlink').attr( $(this).attr('href') );
    $('#searchlink').trigger('submit');

Open in new window

and placed this script at the bottom of the canvas page below all the other scripts

and I have edited the POST to this:
$parishes = cityVariations(trim($_POST['sognlink'])); 
array_walk($parishes, function (&$sogn) { $sogn = '%' . $sogn . '%'; });

Open in new window


But I am not getting any results, ans apparently the values does not go int the "hidden" form.
Where am i failing here :)
0
 
Chris StanyonCommented:
Probably down to your invalid HTML. Look at the HTML that's returned from the search:

<tr>
    <td>Egebjerg</td>
    <td><a href="sognefakta_ByLand.php"target="_blank">Ferslev</td>
    <td>Horns</td>
    <td>Frederiksborg</td>
    <td>&#xf041;</td>
</tr>

Open in new window

You're missing a closing tag for the <A> element and you need a space between the quote and target. Fix that and try again. Also, you say you've set the forms action to sognefaktaByLand.php but I thought it was called sognefakta_ByLand.php (with an underscore)
0
 
Peter KromanSenior Proposal SpecialistAuthor Commented:
When I do the CMD+U on the https://kroweb.dk/gfdev//stednavne/ page after a search, I dont get any red lines in the HTML.
On the other hand I cant get the HTML that you are showing above here. In fact I don't see any search results at all in the HTML. How do you do that?
0
 
Chris StanyonCommented:
Hey Peter,

When you do a normal Ctrl+U, it'll show you the source of your page as it was loaded. In your page, the search results are not available when the page is loaded so you won't see them in the source. You have a couple of options. You can either Select All on the page (Ctrl+A) and then right click and choose View Selection Source, or you can go to the Network tab in the developer tools, do a search and you should then see the POST request. Clicking on the POST request gives you an options to view the Response (the data sent back to your AJAX request). You can see in there that the HTML is invalid - it doesn't hilight it in red, so you have to know HTML.

It's the HTML that's being generated in your ajaxListHtml.php page that is wrong.
0
 
Peter KromanSenior Proposal SpecialistAuthor Commented:
Right.

My href's are still red. I don't know if I have put the </a> in the right place. The other things should be in place.
 <td><?php echo $row["Stednavn"] ?></td>
          <td><?php echo "<a href=\"".$row["URL"]."\" target=\"_blank\"</a>" . $row["Sogn"]?></td>

Open in new window

0
 
Chris StanyonCommented:
Nope - not even close :)

When you're concatenating strings like this, it gets really messy with all the quotes and double quotes that you need to escape, which is why you should be using sprintf(). It's just easier to read and get right:

echo sprintf("<a href='%s' target='_blank'>%s</a>", $row['URL'], $row['Sogn']);

Open in new window

0
 
Chris StanyonCommented:
Actually, scratch that. You only outputting data, so just use printf() instead of echo sprintf():

<td><?php printf("<a href='%s' target='_blank'>%s</a>", $row['URL'], $row['Sogn']); ?></td>

Open in new window

0
 
Peter KromanSenior Proposal SpecialistAuthor Commented:
OK. Now the hrefs are black :)

But it is still not working. I get no results, and the input is apparently not reaching the "hidden" form fields.

I suspect that there might be something wrong with the script.

When I try to perform a search on the sognefakta_ByLand page after it has opened with no results I get all 88.162 records from the ft_children table in the database, and this message at the top, which I suppose means that the script is not doing what we mean it to do - or ??

Notice: Undefined index: sognlink in /var/www/kroweb.dk/public_html/gfdev/stednavne/ft_data_SQL.php on line 32

Where line 32 is this one:
$parishes = cityVariations(trim($_POST['sognlink'])); 

Open in new window

0
 
Peter KromanSenior Proposal SpecialistAuthor Commented:
The script is here:
<script>
$('#list_items').on('click', '#tdata tr > td:eq(1) a', function(e) {
    e.preventDefault();
    $('#sognlink').val( $(this).parents('tr').find('td:eq(1)').text() ); 
    $('#amtlink').val( $(this).parents('tr').find('td:eq(3)').text() );
    $('#searchlink').attr( $(this).attr('href') );
    $('#searchlink').trigger('submit');
});
</script>

Open in new window

0
 
Julian HansenCommented:
It might not be the best way to do this, but I believe that we should follow the path that we have set now, and once we have got that working, there might good reasons to improve and optimize everything possible.
I disagree - using GET with URL parameters is the right way to do it and you have already shown from the length of this thread that the way you are trying to do it is overly complicated and not working.

However, we will continue with this way if that is what you need.

Before going any further you need to establish what each component is doing. In this case you need to know what is happening when your form submits - so you need to reflect that to the screen so you can see what is happening.

To do this create a reflection script - a script that dumps POST and GET variables - this is a standard debug technique.

An example of such a script is as follows
<?php
echo "<pre>" . print_r($_POST, true) . "</pre>";
echo "<pre>" . print_r($_GET, true) . "</pre>";

Open in new window


Make the action of your form this script and do your test. Let's see what comes out on the other side.
0
 
Peter KromanSenior Proposal SpecialistAuthor Commented:
Thanks Chris,

Everything is working nicely and perfect now - including the "decider.php" function we made on the canvas project :)

I will close this thread now, along with the other - and very very long -  "canvas.php" thread we have worked together on for a while.

In this process I have learned more than I could ever start to imagine. Just to mention a few things:
Understanding how and why to build and test SQL jOIN
Understanding the need for and advantages of structuring application code in separate files
Understanding and building classes
A better understanding of a number of js statements

And I could keep on. That is fantastic, and Chris - you have had an huge patience with me and a very nice educational approach in this process, and for that I can't thank you enough.

But don't worry - I will be back with the next question in a while, and I surely hope for your very friendly help again :) :) :)

Best regards
Peter
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.