CODEWITHSUNDEEP
phpjqueryhtmlcss
Juliver Galleto
Juliver Galleto

Reputation: 9037

php with jquery html pop up

this is actually a part of huge project so i didnt include the css but im willing to post it here if actually necessary.

Ok i have this code

<html>
<head>
<script src="js/jquery.js"></script>
<script type="text/javascript">
var q = "0";
function rr()
{
var q = "1";
var ddxz = document.getElementById('inputbox').value;
if (ddxz === "")
{
alert ('Search box is empty, please fill before you hit the go button.');
}
else
{
$.post('search.php', { name : $('#inputbox').val()}, function(output) {
    $('#searchpage').html(output).show();
});
var t=setTimeout("alertMsg()",500);
}

}

function alertMsg()
{
$('#de').hide();
$('#searchpage').show();
}


  // searchbox functions ( clear & unclear )
function clickclear(thisfield, defaulttext) {
    if (thisfield.value == defaulttext) {
        thisfield.value = "";
    }
}

function clickrecall(thisfield, defaulttext) {
    if (q === "0"){

    if (thisfield.value == "") {
        thisfield.value = defaulttext;
    }}
    else
    {

    }
}

//When you click on a link with class of poplight and the href starts with a # 

$('a.poplight[href^=#]').click(function() {

var q = "0";

$.post('tt.php', { name : $(this).attr('id') }, function(output) {
    $('#pxpxx').html(output).show();
});


    var popID = $(this).attr('rel'); //Get Popup Name

    var popURL = $(this).attr('href'); //Get Popup href to define size



    //Pull Query & Variables from href URL

    var query= popURL.split('?');

    var dim= query[1].split('&');

    var popWidth = dim[0].split('=')[1]; //Gets the first query string value



    //Fade in the Popup and add close button

    $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a     href="#" class="close"><img src="images/close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>');



    //Define margin for center alignment (vertical + horizontal) - we add 80 to the height/width to accomodate for the padding + border width defined in the css

    var popMargTop = ($('#' + popID).height() + 80) / 2;

    var popMargLeft = ($('#' + popID).width() + 80) / 2;

    //Apply Margin to Popup

    $('#' + popID).css({ 

        'margin-top' : -popMargTop,

        'margin-left' : -popMargLeft

    });
    //Fade in Background

    $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.

    $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer 



    return false;

});





//Close Popups and Fade Layer

$('a.close, #fade').live('click', function() { //When clicking on the close or fade     layer...

    $('#fade , .popup_block').fadeOut(function() {

        $('#fade, a.close').remove();  

}); //fade them both out



    return false;

});

    }); 
</script>
</head>
<body>
<input name="searchinput" value="search item here..." type="text" id="inputbox"     onclick="clickclear(this, 'search item here...')" onblur="clickrecall(this,'search item here...')"/><button id="submit" onclick="rr()"></button>

<div id="searchpage"></div>
<div id="backgroundPopup"></div>
<div id="popup" class="popup_block">
<div id="pxpxx"></div>              
</div>
</body>
</html>

Ok here is the php file(search.php) where the jquery function"function rr()" will pass the data from the input field(#inputbox) once the user click the button(#submit) and then the php file(search.php) will process the data and check if theres a record on the mysql that was match on the data that the jquery has pass and so if there is then the search.php will pass data back to the jquery function and then that jquery function will output the data into the specified div(#searchpage).

<?
if(isset($_POST['name']))
{
$name = mysql_real_escape_string($_POST['name']);

$con=mysql_connect("localhost", "root", "");
if(!$con)
{
die ('could not connect' . mysql_error());
}
mysql_select_db("juliver", $con);

$result = mysql_query("SELECT * FROM items WHERE title='$name' OR description='$name'     OR type='$name'"); 
$vv = "";
while($row = mysql_fetch_array($result))
{
$vv .= "<div id='itemdiv2' class='gradient'>";
$vv .= "<div id='imgc'>".'<img src="Images/media/'.$row['name'].'" />'."<br/>";
$vv .= "<a href='#?w=700' id='".$row['id']."' rel='popup' class='poplight'>View     full</a>"."</div>";
$vv .= "<div id='pdiva'>"."<p id='ittitle'>".$row['title']."</p>";
$vv .= "<p id='itdes'>".$row['description']."</p>";
$vv .= "<a href='http://".$row['link']."'>".$row['link']."</a>";
$vv .= "</div>"."</div>";
}
echo $vv;
mysql_close($con);
}
else
{
echo "Yay! There's an error occured upon checking your request";
}
?>

and here is the php file(tt.php) where the jquery a.poplight click function will pass the data and then as like the function of the first php file(search.php) it will look for data's match on the mysql and then pass it back to the jquery and then the jquery will output the file to the specified div(#popup) and once it was outputted to the specified div(#popup), then the div(#popup) will show like a popup box (this is absolutely a popup box actually).

<? 
//session_start(); start up your PHP session!//
if(isset($_POST['name']))
{
   $name = mysql_real_escape_string($_POST['name']);

$con = mysql_connect("localhost","root","");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("juliver", $con);

$result = mysql_query("SELECT * FROM items WHERE id='$name'");

while($row = mysql_fetch_array($result))
{   
    $ss = "<table border='0' align='left' cellpadding='3' cellspacing='1'><tr><td>";    
$ss .= '<img class="ddx" src="Images/media/'.$row['name'].'" />'."</td>";
    $ss .= "<td>"."<table><tr><td style='color:#666; padding-right:15px;'>Name</td><td     style='color:#0068AE'>".$row['title']."</td></tr>";
    $ss .= "<tr><td style='color:#666; padding-right:15px;'>Description</td>    <td>".$row['description']."</td></tr>";
    $ss .= "<tr><td style='color:#666; padding-right:15px;'>Link</td><td><a href='".$row['link']."'>".$row['link']."</a></td></tr>";
    $ss .= "</td></tr></table>";

}
echo $ss;
mysql_close($con);
}
?>

here is the problem, the popup box(.popup_block) is not showing and so the data from the php file(tt.php) that the jquery has been outputted to that div(.popup_block) (will if ever it was successfully pass from the php file into the jquery and outputted by the jquery).

Some of my codes that rely on this is actually working and that pop up box is actually showing, just this part, its not showing and theres no data from the php file which was the jquery function should output it to that div(.popup_block)

hope someone could help, thanks in advance, anyway im open for any suggestions and recommendation.

JULIVER

Upvotes: 0

Views: 1736

Answers (2)

Juliver Galleto
Juliver Galleto

Reputation: 9037

if you're using ajax to exchange data into a php file. then check your ajax function if its actually receive the return data from your php file.

Upvotes: 0

R Picheta
R Picheta

Reputation: 660

First thought, the script is being called before the page is loaded. To solve this, use:

 $(document).ready(function()
 {
      $(window).load(function()
      {
           //type here your jQuery
      });
 });

This will cause the script to wait for the whole page to load, including all content and images

Upvotes: 1

Related Questions