10 Replies - 7677 Views - Last Post: 07 March 2013 - 02:22 PM Rate Topic: -----

#1 patk570   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 43
  • Joined: 13-February 13

Echo PHP variables in JS to POPUP windows

Posted 07 March 2013 - 08:53 AM

Hey guys and gals, I am working on a code that i cannot figure out.

I have a PHP Code wrapped in HTML, so it does the search, It returns all search results relating to what i typed in and makes the search term bold like I wanted. Inside the HTML Head I have a simple popup script that allows a window to open, and re-size it as well. I am looking to pass certain variables from the main window to the popup window, and retrieve the variables from either the URL, or a cookie, and i cannot seem to get it to work properly. If i could get some help that would be great!

Thanks in advance.

Here is my code for the search.php page, and towards the end you will see where it does the popup.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Exercise Video Library</title>
    <link href="twoColHybLtHdr.css" rel="stylesheet" type="text/css" /><!--[if IE]>
    <style type="text/css">
    /* place css fixes for all versions of IE in this conditional comment */
    .twoColHybLtHdr #sidebar1 { padding-top: 30px; }
    .twoColHybLtHdr #mainContent { zoom: 1; padding-top: 15px; }
    /* the above proprietary zoom property gives IE the hasLayout it may need to avoid several bugs */
    </style>
    <![endif]-->
    <script type="text/javascript">
    function showactiveLink(){
    document.getElementById("arrow").innerHTML = "<img src='images/smallArrow.gif'>";
    }
    </script>
    <script type="text/javascript">
    function loadwindow(page){
    window.open(page,"popup","width=560,height=800,status=1")
    }
    </script>
    </head>
    <body onload="showactiveLink()" class="twoColHybLtHdr">
    <div id="container">
    <div id="header">
    <div><h1><font color="red">Exercise Video Library</font></h1></div>
    <div id="search-form" align="right"><form id="search-block-form" action="search.php" method="get"><input type="text" name="q" /><input id="divbutton" title="Search" name="search" alt="Search" type="submit" value="" /></form></div>
    <div align="right" id="contactinfo">Contact Us: (719) 576-2256</div>
    <div align="Center" id="navigation"><a href="index.html">Home</a> | <a href="library.html">Excercise Library</a> | Tutorials | Sample Workouts | <a href="design-your-workout.html">Design Your Workout</a> | Health & Fitness Assessment </div>
    <!-- end #header --></div>
    <div>&nbsp;</div>
    <div>&nbsp;</div>
    <div id="sidebar1">
    <h3>Quick Links</h3>
    <li>Master Food list</li><br />
    <li>Workout/Nutrition Logs</li><br />
    <li>Fitness Terms &amp; Definations</li><br />
    <li>Rehbilitation Tips</li>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li>Injury Recovery</li>
    <!-- end #sidebar1 --></div>
    <div id="mainContent">
    <div class="textwidget">
    <?php
    $hostname_logon = "omited" ;
    $database_logon = "omited" ;
    $username_logon = "omited" ;
    $password_logon = "omited" ;
    //open database connection
    $connections = mysql_connect($hostname_logon, $username_logon, $password_logon) or die ( "Unable to connect to the database" ). mysql_error();
    //select database
    mysql_select_db($database_logon) or die ( "Unable to select database!" );
    //specify how many results to display per page
    $limit = 5;
    //get the search variable from URL
    $var = mysql_real_escape_string(@$_REQUEST['q']);
    //get pagination
    $s = mysql_real_escape_string($_REQUEST['s']);
    //set keyword character limit
    if(strlen($var) < 3){
    $resultmsg = "<p>Search Error</p><p>Keywords with less then three characters are omitted...</p>" ;
    }
    //trim whitespace from the stored variable
    $trimmed = trim($var);
    $trimmed1 = trim($var);
    //separate key-phrases into keywords
    $trimmed_array = explode(" ",$trimmed);
    $trimmed_array1 = explode(" ",$trimmed1);
    // check for an empty string and display a message.
    if ($trimmed == "") {
    $resultmsg = "<p>Search Error</p><p>Please enter a search...</p>" ;
    }
    // check for a search parameter
    if (!isset($var)){
    $resultmsg = "<p>Search Error</p><p>We don't seem to have a search parameter! </p>" ;
    }
    // Build SQL Query for each keyword entered
    foreach ($trimmed_array as $trimm){
    //If MATCH query doesn't return any results due to how it works do a search using LIKE
    if($row_num_links_main < 1){
    $query = "SELECT title, id, keywords, catagories, emurl FROM libvid WHERE keywords LIKE '%$trimm%' OR catagories LIKE '%$trimm%' ORDER BY title DESC";
    $numresults=mysql_query ($query);
    $row_num_links_main1 =mysql_num_rows ($numresults);
    }
    // next determine if 's' has been passed to script, if not use 0.
    // 's' is a variable that gets set as we navigate the search result pages.
    if (empty($s)) {
    $s=0;
    }
    // now let's get results.
    $query .= " LIMIT $s,$limit" ;
    $numresults = mysql_query ($query) or die ( "Couldn't execute query" );
    $row= mysql_fetch_array ($numresults);
    //store record id of every item that contains the keyword in the array we need to do this to avoid display of duplicate search result.
    do{
    $adid_array[] = $row[ 'title' ];
    }while( $row= mysql_fetch_array($numresults));
    } //end foreach
    //Display a message if no results found
    if($row_num_links_main == 0 && $row_num_links_main1 == 0){
    $resultmsg = "<p>Search results for: ". $trimmed."</p><p>Sorry, your search returned zero results</p>" ;
    }
    //delete duplicate record id's from the array. To do this we will use array_unique function
    $tmparr = array_unique($adid_array);
    $i=0;
    foreach ($tmparr as $v) {
    $newarr[$i] = $v;
    $i++;
    }
    //total result
    $row_num_links_main = $row_num_links_main + $row_num_links_main1;
    // now you can display the results returned. But first we will display the search form on the top of the page
    echo '<form action="search.php" method="get">
    <div>
    <input name="q" type="text" value="'.$q.'">
    <input name="search" type="submit" value="Search">
    </div>
    </form>';
    // display an error or, what the person searched
    if( isset ($resultmsg)){
    echo $resultmsg;
    }else{
    echo "<p>Search results for: <strong>" . $var."</strong></p>";
    foreach($newarr as $value){
    // EDIT HERE and specify your table and field unique ID for the SQL query
    $query_value = "SELECT * FROM libvid WHERE title = '".$value."'";
    $num_value=mysql_query ($query_value);
    $row_linkcat= mysql_fetch_array ($num_value);
    $row_num_links= mysql_num_rows ($num_value);
    //create summary of the long text. For example if the field2 is your full text grab only first 130 characters of it for the result
    $introcontent = strip_tags($row_linkcat[ 'title']);
    $introcontent = substr($introcontent, 0, 130)."...";
    //now let's make the keywods bold. To do that we will use preg_replace function.
    //Replace field
    $title = preg_replace ( "'($var)'si" , "<strong>\\1</strong>" , $row_linkcat[ 'title' ] );
    $desc = preg_replace ( "'($var)'si" , "<strong>\\1</strong>" , $introcontent);
    $link = preg_replace ( "'($var)'si" , "<strong>\\1</strong>" , $row_linkcat[ 'emurl' ] );
    $cata = preg_replace ( "'($var)'si" , "<strong>\\1</strong>" , $row_linkcat[ 'catagories' ] );
    $instr = preg_replace ( "'($var)'si" , "<strong>\\1</strong>" , $row_linkcat[ 'instructions' ] );
    foreach($trimmed_array as $trimm){
    if($trimm != 'b' ){
    $title = preg_replace( "'($trimm)'si" , "<strong>\\1</strong>" , $title);
    $desc = preg_replace( "'($trimm)'si" , "<strong>\\1</strong>" , $desc);
    $link = preg_replace( "'($trimm)'si" , "<strong>\\1</strong>" , $link);
    $cata = preg_replace( "'($trimm)'si" , "<strong>\\1</strong>" , $cata);
    $instr = preg_replace( "'($trimm)'si" , "<strong>\\1</strong>" , $instr);
    }//end highlight
    }//end foreach $trimmed_array
    //format and display search results
    echo '<div class="search-result">';
    echo '<div class="search-title">Video Title: '.$title.'</div>';
    echo '<div class="search-link">';
    echo '<a href="#" onclick="javascript:loadwindow(\'popup.php?view&var1=$title&var2=$link&var3=$instr \')"><img src=http://i3.ytimg.com/vi/'.$link.'/0.jpg width="236" height="147" /></a>';
    echo '</div>';
    echo '<div class="search-cata">';
    echo '<p><font size="-2" >Catagories: '.$cata. '</font></p>';
    echo '</div>';
    echo '<br />';
    echo '<br />';
    echo '</div>';
    } //end foreach $newarr
    if($row_num_links_main > $limit){
    // next we need to do the links to other search result pages
    if ($s >=1) { // do not display previous link if 's' is '0'
    $prevs=($s-$limit);
    echo '<div class="search_previous"><a href="'.$PHP_SELF.'?s='.$prevs.'&q='.$var.'">Previous</a>
    </div>';
    }
    // check to see if last page
    $slimit =$s+$limit;
    if (!($slimit >= $row_num_links_main) && $row_num_links_main!=1) {
    // not last page so display next link
    $n=$s+$limit;
    echo '<div class="search_next"><a href="'.$PHP_SELF.'?s='.$n.'&q='.$var.'">Next</a>
    </div>';
    }
    }//end if $row_num_links_main > $limit
    }//end if search result
    ?>
    </div>
    <h2> </h2>
    <p></p>
    <!-- end #mainContent --></div>
    <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats -->
    <br class="clearfloat" />
    <div id="footer">
    <div id="footernav"><font color="#FFFFFF" size="-2">Contact Us | Help/FAQs | <a href="terms.html">Terms of Service</a> | <a href="privacy.html">Privacy Policy</a> | Partners/Affiliate Program</font><div id="copyrightinfo" align="right"><font color="#FFFFFF" size="-2">Copyright &copy; 2013: Exercise Video Library</font></div></div>
    <!-- end #footer --></div>
    <!-- end #container --></div>
    </body>
    </html>


and here is the popup window code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    </head>
    <body>
    <?php
    $_GET['var1'];
    $_GET['var2'];
    $_GET['var3'];
    echo '<div class="search-result">';
    echo '<div class="search-title">Video Title: '.$var1.'</div>';
    echo '<div class="search-link">';
    echo '<iframe width="560" height="315" src="http://www.youtube.com/embed/'.$var2.'&loop=1" frameborder="0" allowfullscreen></iframe>';
    echo '</div>';
    echo '<div class="search-cata">';
    echo '<p>Instructions: '.$var3.'</p>';
    echo '</div>';
    echo '<br />';
    echo '<br />';
    echo '</div>';
    ?>
    </body>
    </html>


Is This A Good Question/Topic? 0
  • +

Replies To: Echo PHP variables in JS to POPUP windows

#2 laytonsdad   User is offline

  • Let it rip!
  • member icon

Reputation: 466
  • View blog
  • Posts: 1,992
  • Joined: 30-April 10

Re: Echo PHP variables in JS to POPUP windows

Posted 07 March 2013 - 11:34 AM

Hello, Why have you decided to use a popup window instead of a light box

This is how I have done it.

  • Take information from the user via form.
  • Send the information via ajax post to php script.
  • Echo information back to ajax script and add to ligh tbox.
  • Show light box with search content inserted.


Let me know if I can help in the process.
Was This Post Helpful? 0
  • +
  • -

#3 patk570   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 43
  • Joined: 13-February 13

Re: Echo PHP variables in JS to POPUP windows

Posted 07 March 2013 - 11:44 AM

View Postlaytonsdad, on 07 March 2013 - 11:34 AM, said:

Hello, Why have you decided to use a popup window instead of a light box

This is how I have done it.

  • Take information from the user via form.
  • Send the information via ajax post to php script.
  • Echo information back to ajax script and add to ligh tbox.
  • Show light box with search content inserted.


Let me know if I can help in the process.


I suggested doing it lightbox, that would have made life simpler but the guy wants it to be a popup window so it can show the instructions that are in the DB as well.
Was This Post Helpful? 0
  • +
  • -

#4 laytonsdad   User is offline

  • Let it rip!
  • member icon

Reputation: 466
  • View blog
  • Posts: 1,992
  • Joined: 30-April 10

Re: Echo PHP variables in JS to POPUP windows

Posted 07 March 2013 - 11:49 AM

Ok, then what is the specific problem you are having?

Edit:

You can add that from the php script to the light box using ajax.

This post has been edited by laytonsdad: 07 March 2013 - 11:51 AM

Was This Post Helpful? 0
  • +
  • -

#5 patk570   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 43
  • Joined: 13-February 13

Re: Echo PHP variables in JS to POPUP windows

Posted 07 March 2013 - 11:57 AM

I cannot get the variables to transfer over to the popup window. I know i am using JS inside the PHP code, and i have adapted the code slightly so it does show up in the URL now, I can show you that. But I need to extract somehow from the URL the stripped url and variables and put them in the respective spots on the popup window. Let me update the code here for you for the popup window:

The first is a snippet of the php code in search.php
$cata = preg_replace( "'($trimm)'si" ,  "<strong>\\1</strong>" , $cata);
				$instr = preg_replace( "'($trimm)'si" ,  "<strong>\\1</strong>" , $instr);
				$id = preg_replace( "'($trimm)'si" ,  "<strong>\\1</strong>" , $id);
				
				$page = '&amp;var1=title='.$title.'&amp;var2=link='.$link.'&amp;var3=instr='.$instr.'';
				$page= mysql_real_escape_string($page);
             }//end highlight
        }//end foreach $trimmed_array
 								
        //format and display search results
            echo '<div class="search-result">';
                echo '<div class="search-title">Video Title: '.$title.'</div>';
                echo '<div class="search-link">';
                echo '<a href="#" onclick="javascript:loadwindow(\'popup.php?='.$id.'&amp;'.$page.'\')"><img src=http://i3.ytimg.com/vi/'.$link.'/0.jpg width="236" height="147" /></a>';
				
                echo '</div>';


The next is the popup window code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<?php
    function url_encode($string){
        return urlencode(utf8_encode($string));
    }
   
?>
    <?php
	
	if (isset($_REQUEST['$string'])){
	$id = $_GET['id'];
    $var1 = $_GET['var1'];
    $var2 = $_GET['var2'];
    $var3 = $_GET['var3'];
	}
    echo '<div class="search-result">';
    echo '<div class="search-title">Video Title: '.$var1.'</div>';
    echo '<div class="search-link">';
    echo '<iframe width="560" height="315" src="http://www.youtube.com/embed/'.$var2.'&amp;loop=1" frameborder="0" allowfullscreen></iframe>';
    echo '</div>';
    echo '<div class="search-cata">';
    echo '<p>Instructions: '.$var3.'</p>';
    echo '</div>';
    echo '<br />';
    echo '<br />';
    echo '</div>';
    ?>
</body>
</html>



Here is the url i am getting:

http://patrickspcrep...e%20foot%20back,%20with%20hand%20and%20arms%20set%20in%20running%20position%20%28i.e.%20if%20left%20leg%20is%20forward,%20right%20arm%20needs%20to%20be%20forward%29.%20%3Cbr%3E2.Squat%20down%20on%20the%20front%20leg%20by%20flexing%20the%20knee%20and%20dropping%20the%20hip%20straight%20down%20as%20you%20inhale.%20%3Cbr%3E3.From%20the%20bottom,%20exhale%20forcefully%20as%20you%20explode%20and%20%3Cstrong%3E%3Cstrong%3Ejump%3C/strong%3E%3C/strong%3E%20upward%20by%20extending%20the%20front%20hip%20and%20knee%20and%20flexing%20the%20opposite%20hip%20and%20knee%20forward,%20then%20landing%20with%20all%20the%20legs%20and%20arms%20in%20the%20opposite%20position%20as%20you%20quickly%20prepare%20for%20the%20next%20%3Cstrong%3E%3Cstrong%3Ejump%3C/strong%3E%3C/strong%3E.%20%3Cbr%3E4.Repeat%20on%20the%20opposite%20side.%20%3Cbr%3E%3Cbr%3EHelpful%20hints:%20Focus%20on%20maintaining%20a%20smooth,%20fluid%20motion%20throughout%20movement,%20while%20maintaining%20a%20straight%20posture.%20%3Cbr%3E%3Cbr%3EDumbbells%20can%20be%20held%20for%20additional%20resistance.%3Cbr%3E%3Cbr%3EGood%20balance%20and%20core%20stability%20required.

And lastly:

here is the src code for the html popup page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
    <div class="search-result"><div class="search-title">Video Title: </div><div class="search-link"><iframe width="560" height="315" src="http://www.youtube.com/embed/&amp;loop=1" frameborder="0" allowfullscreen></iframe></div><div class="search-cata"><p>Instructions: </p></div><br /><br /></div></body>
</html>


Was This Post Helpful? 0
  • +
  • -

#6 laytonsdad   User is offline

  • Let it rip!
  • member icon

Reputation: 466
  • View blog
  • Posts: 1,992
  • Joined: 30-April 10

Re: Echo PHP variables in JS to POPUP windows

Posted 07 March 2013 - 12:10 PM

You do realize that php is serverside and javascript it clientside?

The first thing I noticed was that you have tags in your url...bad
The second is the get variables are not assigned correctly

patrickspcrepair.com/exercise/popup.php?=2&&var1=title=Runner%20

Get variables in php work like this:

whatever.com/page?varName=varValue&varName2=varValue2

Fix this and then see if you need more help.
Was This Post Helpful? 0
  • +
  • -

#7 patk570   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 43
  • Joined: 13-February 13

Re: Echo PHP variables in JS to POPUP windows

Posted 07 March 2013 - 01:08 PM

View Postlaytonsdad, on 07 March 2013 - 12:10 PM, said:

You do realize that php is serverside and javascript it clientside?

The first thing I noticed was that you have tags in your url...bad
The second is the get variables are not assigned correctly

patrickspcrepair.com/exercise/popup.php?=2&&var1=title=Runner%20

Get variables in php work like this:

whatever.com/page?varName=varValue&varName2=varValue2

Fix this and then see if you need more help.

I tried what you suggested, but its still not working, I am thinking that my popup script might need some work done to it. If i was to do that section of code in AJAX, where/what/how would i begin to do that? I know JS is client side only not serverside, i am just tying to get the variables to pass through. Any ideas what to do there?
Was This Post Helpful? 0
  • +
  • -

#8 laytonsdad   User is offline

  • Let it rip!
  • member icon

Reputation: 466
  • View blog
  • Posts: 1,992
  • Joined: 30-April 10

Re: Echo PHP variables in JS to POPUP windows

Posted 07 March 2013 - 01:20 PM

View Postpatk570, on 07 March 2013 - 01:08 PM, said:

I tried what you suggested, but its still not working, I am thinking that my popup script might need some work done to it. If i was to do that section of code in AJAX, where/what/how would i begin to do that? I know JS is client side only not serverside, i am just tying to get the variables to pass through. Any ideas what to do there?


Ajax is used to post/get to a server side script and get a return without having to reload the page.

Start here

once you understand what ajax is and does take a look at the jquery shortcut for ajax post

Then we can go about making it work via ajax and jquery.
Was This Post Helpful? 0
  • +
  • -

#9 laytonsdad   User is offline

  • Let it rip!
  • member icon

Reputation: 466
  • View blog
  • Posts: 1,992
  • Joined: 30-April 10

Re: Echo PHP variables in JS to POPUP windows

Posted 07 March 2013 - 02:02 PM

I have taken the time to create a very simple example that may help you.

index.php
<!DOCTYPE html>
<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
        <!-- Jquery library should be first -->
        <script type="text/javascript">
        $(document).ready(function(){
            $("#search_btn").click(function(){
                var search_query = $("#query").val();
                
                $.post("test.php", { query : search_query})
                .done(function(data) {
                  $("#response p").append(data);
                });
            });
        });
        </script>
        
    </head>
    <body>
        <div id="form">
            <input type="text" id="query"/>
            <button id="search_btn">Search</button>
        </div>
        <div id="response"><p></p></div>
    </body>
</html>


test.php
<?php
echo "This is from the test.php page.";
echo "<br>";
echo $_POST['query'];
?>



Give it a try and see what happens.
Was This Post Helpful? 0
  • +
  • -

#10 patk570   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 43
  • Joined: 13-February 13

Re: Echo PHP variables in JS to POPUP windows

Posted 07 March 2013 - 02:12 PM

Ok so can you name where the search button in the code, can that be any ID? if so, then that is great. But I also need to pass the variables that i am wanting to go, in this case it would be $link, $title, and $instr I have never worked with AJAX, i did read what you sent over, looks just like JS, but a few more variables instilled in it.

I might have to do more research on this. Thanks for your help
Was This Post Helpful? 0
  • +
  • -

#11 laytonsdad   User is offline

  • Let it rip!
  • member icon

Reputation: 466
  • View blog
  • Posts: 1,992
  • Joined: 30-April 10

Re: Echo PHP variables in JS to POPUP windows

Posted 07 March 2013 - 02:22 PM

you can pass any variables you want. Take a look at the links I gave you and keep trying. if you get stuck come back and post your spacific questions.

Jquery is a library of functions and such built in Javascript. It is for short cutting your Javascript writing.

Look into it and come back with questions.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1