creating a popupwindow from html, not a file - php

I have a php page that displays rows from a mysql db as a table. One of the fields contains HTML markup, and I would like to amke this row clickable and the html would open in a new popup window. What is the best way to do it, and is there a way to do it without writing the html to a file?
edit: this php page is actually part of an ajax app, so that is not a problem. I do not want to use jquery, as I would have to rewrite the application.
edit:
I have tried this again using the example below, and have failed. I know my script tag is wrong, but I am just echoing out row2 at the moment, so I think my logic is wrong before it ever gets to the javascript.
$sql="SELECT * FROM Auctions WHERE ARTICLE_NO ='$pk'";
$sql2="SELECT ARTICLE_DESC FROM Auctions WHERE ARTICLE_NO ='$pk'";
$htmlset = mysql_query($sql2);
$row2 = mysql_fetch_array($htmlset);
echo $row2;
/*echo '<script> child1 = window.open ("about:blank")
child1.document.write("$row2['ARTICLE_DESC']");
child1.document.close()*/

child1 = window.open ("about:blank")
child1.document.write("Moo!");
child1.document.close()

If you don't require a browser window (this suggestion involves a css modal box), you might want to consider one of the "lightbox" variations.
Thickbox can be used to load inline content from the page into a modal window. The link provides demo/details in how to implement inline content as well as other variations.

I would suggest using a Javascript library like jQuery since it simplifies this type of code and is cross browser compatible.
$(document).ready( function() {
$('#clicker').click( function() {
myWindow=window.open('','','width=200,height=100')
myWindow.document.write($("#content"));
return false;
});
});
The html will be:
<table>
<tr>
<td><div id="clicker">Click Here</div></td>
<td><div id="content">This is the content</div></td>
</tr>
</table>

if its a lot of data, worth thinking about loading it up via ajax when viewed to save selecting it and sending it to the user on every page load - which would be fairly easy with something like jquery as suggested already.

Related

To perform ajax functioning with jquery

Simply, I have an <a> tag having values(ID) which will be posted to the same page in clicking,
I wanted to load data into the table based on the ID provided by the post method. On the other hand I am having a clock which is rested again and again when fired a post method.
I simply wanted to do the same via jQuery.
In short I wanted to Implement ajax using jQuery
Also I am using database MySQL, with PHP scripting
Any sort help will be appreciated.
<a class="D" href="?ID=<?php echo $rows[0]; ?>" onclick="">Question<?php echo $QNo; ?></a>
I wanted the same above and get ID for searching relevant data against the ID.
I might be wrong here, but you basically want to query a PHP page based on an ID and display relevant content in a div?
To make an AJAX call, setup a PHP page that will query your database and in turn return HTML data which you can then display in a DOM element.
A very simple example of this would be:
HTML
Load table 1
Load table 2
<div id="contentToPopulate"></div>
jQuery:
$('a.linkToLoadTable').click(function(){
var pageId = $(this).data('tableId')
$.ajax({
url: 'loadTable.php?id='+pageId
}).done(function(data) {
$('#contentToPopulate').html(data)
});
})

Passing PHP variables to jQuery pop-up DIV

I'm quite new to PHP and I'm dealing with a problem I have no idea how to solve. I'm generating a table of users (name, username, e-mail) from a MySQL database. There is an edit link in each row. This links displays a pop-up DIV (made using jQuery) that contains three form fields (name, username, e-mail) that can be used to edit (update) the particular row.
I would like to pre-load the current values from the database into these form fields to make it more convenient to edit them.
The problem is that the DIV is displayed without refreshing the web page, meaning that I'm unable to pass any parameters from the edit link and therefore I cannot tell the server which values to pre-load.
Is there any solution to this?
Thanks!
You can pass them using this way:
Note : when u generate the values(name,username,email) in Server (using PHP)..do it as follows :
<a class='editBtn' data-x="the username info" data-y="the email info" data-z="name">Edit</a>
then at Client side catch them using on click events:
jQuery('.editBtn').each(function(i,v){
jQuery(v).click(function(eve){
eve.preventDefault();
eve.stopPropagation();
var username= jQuery(v).attr('data-x');
var email= jQuery(v).attr('data-y');
var name= jQuery(v).attr('data-z');
/*
display ur Modal Box here
Happy Coding :) ,
*/
});
});
try this:
$(your var in JS) = <?PHP echo $(your rowname in the prepaired statement)['(your ID tablevariable)'];?>
that could work but i hadn't seen the code so, this is the only thing i could give tou to try
if you want to refresh the data in realtime about your html with your new values, you must use AJAX. JQuery give us a simple api about this: https://api.jquery.com/jQuery.ajax/
I like to use a hidden <iframe> at the bottom of all my pages. I can load a php script into that, which than can be used to update the parent frame by using javascript.
<iframe name="hidden" id="hidden" style="display:none"></iframe>
To call the script, just use a link or button to call it.
Click to load script!
Once you get the data from mysql, use javascript to change the variables.
<script language="javascript">
parent.document.getElementById('name').value = '<?PHP= $sqlResults['name']; ?>';
parent.document.getElementById('username').value = '<?PHP= $sqlResults['username']; ?>';
parent.document.getElementById('email').value = '<?PHP= $sqlResults['email']; ?>';
</script>

clear the div and reload a new audio content in that

I have a database which contains the link to audio files. I am trying to play them one after the other using the HTML audio tag. Presently I am using PHP. My code -
$sql = "SELECT * FROM table";
$r = mysql_query($sql);
while($row = mysql_fetch_array($r)) {
$id = $row["audID"];
$audsq = "SELECT * FROM table2 WHERE id ='$id'";
$resultaud = mysql_query($audsq);
//Here I want to write a code to clear div="test"
PlayAud(resultaud);
sleep(2); ///Not Sure
}
I am passing the link to aud file for the html to load and in
<?php
PlayAud($res) {
$raud = mysql_fetch_array($res); ?>
<div id="test">
<audio> ... </audio>
</div>
<?php }?>
Can some one tell me if I am doing it right ? also each clip is of 2 seconds hence I need to wait in the while loop for 2 seconds. If there is any other way can you suggest me?
Thank You
You cannot clear a div from php. The reason is that php is running on the server, and the div is echoed out to the client, where it is unreachable by php.
A solution here could be to use Client side scripting (with JavaScript). You'd program a function, which replaces the audio tag or its contents, and it would probably be a good idea to implement some preloading-mechanism as well.
Greetings,
Jost
You can NOT do what you want in PHP. You will have to use javascript. This question will help you:
Update content of div auto
Hmm.... to clear to div you have to let the browser handle it, and you can do that through javascript.
echo "<script>document.getElementById('test').innerHTML = '';</script>";
//Then do what you needed to do

Enable <textarea> to display HTML content,such as bold,italic,color,img tags

I'll try to be clear in the question,i need to display HTML content on a .Let me explain what i trying to do.
1-On my main file i have a which sends the text inserted to a mysql table.(OK)
2-After on the same page PHP execute a query and search for the rows containing an id inserted together with the message.(OK)
3-After the PHP found the rows with the same id i display these messages using the code bellow(the messages are displayed on a textarea):
while ($runrows = mysql_fetch_assoc($run_two)){
$horario = $runrows['added'];
$autor = $runrows['autor'];
$mensagem = $runrows['mensagem'];
$codigosender = $runrows['codigosender'];
$testevar = htmlspecialchars($mensagem);
echo"
<center>
<table width='500px;'>
<tr><td width='75%'>$autor</td><td width='25%'>$horario</td></tr>
</table>
<textarea name='displayMessages' style=' width:500px;' readonly>$testevar</textarea>
</center>
";
}
Now is my problem: If i insert on my sender the message '(bold tag)Mateus(bold tag)',when the PHP display on the textarea it doesn't display the 'Mateus' in bold!So how can i enable the textarea to do so?(Basically i want to enable my textarea to work as this one i writing now).
HTML textarea will not have any styling for the value it contents.
if you wish to give styling you will need to use third party controls. like CKEditor, or freetext Box, otherwise you will need to create your own textarea.
As other have explained, you cannot style the contents of a TextArea element.
However, you can take the other route and make a standard div editable if you set its contentEditable property to true. This makes the div element behave similarly to a text area. Of course, to actually let the user change styles, you would have to add some external controls (buttons, bind keypress events, etc.) See a nice example at Joe Armstrong's blog
But the easiest method is probably to just use CKEditor or similar package.

changing content of a div with javascript and php include

I wish to do something iframe-like with my div i've got going here.
Basically, i've gotten as far as making links change the content of the div like so:
Open file
This works pretty well, sadly though, if i make another link inside that to change the content back to the first file, the server gets stuck in an infinite loop and crashes.
I really am just trying to find some way to dynamically change content, and to fetch that content from a file using php. If my way of approaching this is completely ludicrious, i do appreciate suggestions.
I think the best and easiest way is to use jQuery:
<script type="text/javascript">
$('#addContent').click(function(){
$("#maincontent").load("file.php");
return false;
});
</script>
Open File
<div id="maincontent"></div>
This script will load content of file.php into selected div using ajax call.
This looks like a good place for jQuery's load() function. Just give the div an id, add a click event to the link and have the event load the contents of your php script into the div. Maybe append a class (e.g., 'updated') to the div when you load the new data. That way your click event can check is('.uploaded') on the div and switch it back when the link is clicked again.
Put divs inside #maincontent that hold the different content that you want. Give the divs IDs. When the link is clicked hide/show the appropriate content
This is a similar thread: Tabbing in PHP?
Firstly, I'd suggest not building the event handler like that. For one thing you'll have to be really careful you correctly escape the content. I would do it this way:
<div id="content1">
<?php include 'file1.php'; ?>
</div>
<div id="content2">
<?php include 'file2.php'; ?>
</div>
and then manipulate those with Javascript. You could either set the innerHTML or simply hide/show the relevant divs. So:
<script type="text/javascript">
var content = 1;
function swap_content() {
document.getElementById('maincontent').innerHTML = document.getElementById('content' + content).innerHTML
if (content == 1) {
content = 2;
} else {
content = 1;
}
}
</script>
Open File
Alternatively you could just hide/show them as appropriate rather than copying content.
Lastly, while not required this is much more trivial to do in a Javascript library like jQuery.
To me it sounds like you should use AJAX. On the clickevent (which you also shouldn't bind with inline code), you would instead load the content with an XHR request.
To make life easier for you I would recommend looking at a JavaScript Library, where my personal favorite would be jQuery (www.jquery.com). To achieve what you are trying to do you would just do:
$('#id_to_the_a_tag').click(function() {
$("#maincontent").load("file.php");
return: false;
});

Categories