Creating a DB query as a link

Hi,

I have this page: http://kroweb.dk/gfdev/canvas/
What I want to do is to create a DB query from clicking a selection, and where the query is the text in the text field when hovering (myText). But I seem not to be able address "myText" correctly - because I actually don't get a query. it displays the headline but not anymore. What am I doing wrong?

I have this relevant HTML:
    <div class="w3-col w3-mobile" style="width:50%; margin-top: 0px; margin-bottom:0px; padding-bottom: 0px; padding-top:100px; border: solid 0px #cccccc;"> 


        <div id="AmtsKort">
            <?php include('amter3.php');?> 

        </div>      

        <div class="w3-row"> <!-- for content inside this column -->

        </div>
    </div>
    <!-- Column1, end-->

    <!-- Columns2, start--> 
    <div class="w3-col w3-mobile" style="width:45%;"> 

        <div id="sogne_list"> </div>

</div>

Open in new window



I have this JS in the amter3.php file:
<script>  

var allPaths=document.getElementsByTagName('path');
var rectText=document.getElementById('rectText');
var myText=document.getElementById('myText');
var hrefLoc='https://kroweb.dk/gfdev/canvas/'; <!-- Denne justeres -->



for(var i=0;i<allPaths.length;i++){
    allPaths[i].onclick=function (e){ 
    /* Here I need that clicking a selection fires a query in the DB*/       
$.ajax({
       url: 'ajaxSognHtml.php',
       data: {query:myText.value},
       method:'POST',
       dataType: 'html'
     }).done(function (res){             
            $('#sogne_list').html(res);
          });         

    };
    
}




for(var i=0;i<allPaths.length;i++){
    allPaths[i].onmouseenter=function (e){
    rectText.style.fill='#cc9900';
    myText.innerHTML=this.id;
    };
    
}
for(var i=0;i<allPaths.length;i++){
    allPaths[i].onmouseleave=function (e){
    rectText.style.fill='none';
    myText.innerHTML='';
    };
    
}

Open in new window


And I have this php db query code in the ajaxSognHtlm.php file:
           
<?php
if ((isset($_POST['myText']))) {
  $con=mysqli_connect("db credentials") or die("Error connecting to database: ".mysql_error());

  mysqli_select_db($con,"genealogiskforum_dk_db9");
  mysqli_set_charset($con,"utf8");
  ?> 
  <br>

  <?php
  $query = trim($_POST['myText']); 
  $raw_results = mysqli_query($con, "SELECT `Sogn`, `URL`, `Amt` FROM sogne
    WHERE (`Amt` = '$query')") or die(mysql_error());
  var_dump($query);
    ?>

    <div class="sognecont" style="font-family:arial; font-size: 14px; font-weight:normal;"><h3>Sogne:</h3> 
      <?php
      while($row = $result=mysqli_fetch_array($raw_results)) {
        $txt= sprintf ("<a href=\"".$row["URL"]."\"target=\"_blank\">" . $row["Sogn"]."</a>"); 
        $txt1= sprintf (", ");
        echo $txt;
        echo $txt1;
    ?>
</div>
    <?php

      }

      mysqli_close($con);
    }else{  print ("POST is not set");
  }

  ?>

Open in new window

Peter KromanSenior Proposal SpecialistAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
Firstly you need to fix the errors on your page - there are PHP errors and your generated HTML is invalid start there.

Then on line 15 of your jQuery script you are doing this

 data: {query:myText.value},

Open in new window

myText does not have a value element you should probably be using
myText.innerHtml

Open in new window


Finally, I am not certain what it is your code should be doing - can you explain a bit more.
0
Peter KromanSenior Proposal SpecialistAuthor Commented:
Hi Julian,

Thanks.
I have corrected the html errors. They were not significant :)
You say that I have php errors too. Could you elaborate a little on that? I don't see any php errors. I am making a var_dump of the query, but that is on purpose for my own troubleshooting.

I have tried with
data: {query:myText.innerHtml},

Open in new window

No difference.

What I want to di is to create a query against the db where the search parameter is the text in the myText box - like this:
$query = trim($_POST['myText']); 
  $raw_results = mysqli_query($con, "SELECT `Sogn`, `URL`, `Amt` FROM sogne
    WHERE (`Amt` = '$query')") or die(mysql_error());

Open in new window


My problem is that it apparently does not accept myText as a POST string - so that is why I believe that the problem lies around here in the js code:
for(var i=0;i<allPaths.length;i++){
    allPaths[i].onclick=function (e){ 
    /* Here I need that clicking a selection fires a query in the DB*/       
$.ajax({
       url: 'ajaxSognHtml.php',
       data: {query:myText.innerHtml},
       method:'POST',
       dataType: 'html'
     }).done(function (res){             
            $('#sogne_list').html(res);
          });         

    };
    
}

Open in new window

0
Julian HansenCommented:
I have corrected the html errors. They were not significant :)
Always start from a clean build - it eliminates any issues that may be associated with bad markup

You still have this error
<input type="image" style= "margin-top: 5px; margin-buttom: 5px; margin-right: 5 px; width: 70px; background-color: #666666;" <img src= "">

Open in new window


What I want to di is to create a query against the db where the search parameter is the text in the myText box - like this:
Lets not get too far ahead - before you can query the database you need to be able to get the value from the page that you want to use - this part is not working

Let's look at your AJAX code - you have
query:myText.innerHtml

Open in new window

JavaScript is case sensitive - it should be
query:myText.innerHTML

Open in new window

Or, given you are already using jQuery
query: $('#myText').html()

Open in new window


Let's start with that. If it is done correctly and you go to your console (F12) and look at your network tab you should see the following
ss134.jpg
1
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Peter KromanSenior Proposal SpecialistAuthor Commented:
I have changed to:
query:myText.innerHTML,

Open in new window


I get this in the console:
Sk-rmbillede-2017-11-15-16.32.42.png
0
Julian HansenCommented:
Ok, do this
1. Load the page
2. Press F12
3. Click on the Konsol tab
4. Make sure the Net tab is checked (top left of console window)
5. Click the icon of the dustbin to clear the console messages
6. Click one of the paths
7. You should see a POST request appear in the console
8. Click the POST request to open it
9. Click on the REQUEST tab to see what was Posted.
0
Julian HansenCommented:
Alternatively scroll down to the bottom of the network tab and look for the POST there - click on it to open it then look at the REQUEST tab.
0
Peter KromanSenior Proposal SpecialistAuthor Commented:
F12 is not useable on a Mac :)

What do I do in stead of using F12 (Firefox or Chrome)
0
Julian HansenCommented:
F12 is just the console you get there by right click and Inspect Element or Developer tools in the settings menu or by whatever means you did before to get the screenshot you posted.
0
Peter KromanSenior Proposal SpecialistAuthor Commented:
Well - I get this result and response:
Sk-rmbillede-2017-11-15-17.13.56.pngThat is the same as the var_dump is showing when dumping the query. So there is no query at this point. My question is - why?
0
Peter KromanSenior Proposal SpecialistAuthor Commented:
I wonder why it puts a red line across the domain sign ??
0
Julian HansenCommented:
Ok, we are still getting ahead of ourselves. What I want to see - before the RESPONSE is the REQUEST

Refer back to my earlier screenshot.

You are still on the network tab - which is fine but then you have to be on the Parameters tab.

I would prefer it though if you followed my instructions above and for the console (Konsol for you) tab, so that we can keep things consistent.

Please can you go back and repeat the exercise and show me what is in the REQUEST tab of the POST.
0
Peter KromanSenior Proposal SpecialistAuthor Commented:
I have difficulties following your instructions because I don't get the possibilities you refer to. Sorry.

1. Load the page
2. Press F12
3. Click on the Konsol tab
4. Make sure the Net tab is checked (top left of console window)
5. Click the icon of the dustbin to clear the console messages
6. Click one of the paths
7. You should see a POST request appear in the console
8. Click the POST request to open it
9. Click on the REQUEST tab to see what was Posted.

2 and 3. I open the console, yes
4. There is no Net tab to be checked, but a Network to choose in the top menu to the right. I assume now that this is the one you mean.
5. Yes I can clear the window
6. I assume you mean click one of the the selections in the map?
7. I see a POST
8. I click on it
9. I see this:
Sk-rmbillede-2017-11-15-18.03.36.png
0
Julian HansenCommented:
Ok but you found the parameters window and it is empty which means your code is still not finding the myText value.
Two things.
1. Just to confirm can we look at the POST in the Konsole view
ss135.jpg1. Load the page and open the Console (by whatever means you do normally)
2. Click on Konsol tab
3. Make sure the Network option is selected
4. Clear the current entries by clicking the icon of the rubbish bin
5. Click on a path
6. Click the POST entry in the log
7. Click the POST tab
8. Check that the parameter was correctly set
 ss136.jpg

Then - can you post your latest JavaScript code.
0
Leonidas DosasCommented:
Ajax call:
for(var i=0;i<allPaths.length;i++){
    allPaths[i].addEventListener('click',function (e){
    var area=this.id;   
    /* Here I need that clicking a selection fires a query in the DB*/       
$.ajax({
       url: 'ajaxSognHtml.php',
       data:{myQuery:area},
       method: 'POST',
       dataType: 'html'
     }).done(function (res){             
            $('#sogne_list').html(res);
          });        
    });    
};

Open in new window

ajaxSognHtml.php:
<?php
if ((isset($_POST['myQuery']))) {
  $con=mysqli_connect("mysql31.unoeuro.com", "genealogisk_dk1", "AevleBaevle194287Bum", "genealogiskforum_dk_db9") or die("Error connecting to database: ".mysql_error());

  mysqli_select_db($con,"genealogiskforum_dk_db9");
  mysqli_set_charset($con,"utf8");
  ?> 
  <br>

  <?php
  $query = trim($_POST['myQuery']); 
  $raw_results = mysqli_query($con, "SELECT `Sogn`, `URL`, `Amt` FROM sogne
    WHERE (`Amt` = '$query')") or die(mysql_error());
  var_dump($query);
    ?>

    <div class="sognecont" style="font-family:arial; font-size: 14px; font-weight:normal;"><h3>Sogne:</h3> 
      <?php
      while($row = $result=mysqli_fetch_array($raw_results)) {
        $txt= sprintf ("<a href=\"".$row["URL"]."\"target=\"_blank\">" . $row["Sogn"]."</a>"); 
        $txt1= sprintf (", ");
        echo $txt;
        echo $txt1;
    ?>
</div>
    <?php

      }

      mysqli_close($con);
   }else{  print ("POST is not set");
   }

  ?>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Chris StanyonWebDevCommented:
I think you're overthinking this a bit. If all you intend to do is load some HTML from the server based on an ID of a clicked element (which it appears you are), then all you need is this:

$('path').click(function(){
    $('#sogne_list').load('ajaxSognHtml.php', { query : this.id });
});

Open in new window

Job Done!
0
Peter KromanSenior Proposal SpecialistAuthor Commented:
Thanks to everyone for your contributions :)

@Leonoidas, your solution works beautifully, ant this is the solution I will continue working on.

Next step is to create a combined db query from a link and present the result form several databases/tables at the same page.
I will make a new question on that when I am ready.
0
Peter KromanSenior Proposal SpecialistAuthor Commented:
Nice solution Leonidas. It works totally as expected. Thanks :)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
SQL

From novice to tech pro — start learning today.

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.