I have a Ajax post that returns the path to a PDF file i can not seem to get it to open the pdf in an Iframe of on the parent page.
Parent Page:
<div id = "mainpage" ></div>
<iframe class ="box2" id="myFrame2" width="600px" height="700px" scrolling="yes" align="right">
</iframe>
</div>
<script>
function onAjaxComplete(msg)
{
$("#mainpage").html(msg);
// alert(msg);
}
when I click on the ajax request it returns the correct value and the function will display the results in the div but I can not get it to open the pdf file in the iframe.
This is the PHP script for the call from Ajax:
<?php
$sitej = $_POST['site'];
$filenamej = $_POST['filename'];
$pagej = $_POST['page'];
$path = "scann/" . $sitej . "/" . $filenamej;
//var_dump($_POST);
$load = "$path/#page=$pagej ";
//$open = '<a href="' . $path . '/#page=' . $pagej . '">';
//$load = '<a target="myFrame2" href="'. $open . '">';
echo $load;
?>
Any suggestions? Thank you in advance!
Change your jQuery to add the msg to the iframe src attribute:
function onAjaxComplete(msg){
$("#myFrame2").attr('src', msg); //No reason to select the div if you want to change the iframe src
// alert(msg);
}
This will return the iframe with the src from the php file.
Related
I need to have a working remote IMG display using PHP, let's say like this:
<img src='$src' />
And I need to fetch the remote URL based on $id, where
<?php
$id = "brown_fox";
$url = "http://exampl.com/$id";
get_remote_img($url) {
// some code to get image which SRC is dynamic:
<img id="pic" src="sjf5d85v258d.jpg" />
$src="sjf5d85v258d.jpg";
return $src
}
?>
I hope I explained it understandably.
If I understand you correctly then you can do something like this:
<?php
...
get_remote_img($url) { ...
$src = get_remote_img($url);
// Concatenating the result to the elements src attribute:
echo '<img src='.$src.' />';
?>
What you're looking for is something like this:
<?php
$id = "brown_fox";
$url = "http://exampl.com/" . $id;
...
function get_remote_img($url) {
// some code to get image which SRC is dynamic:
$src="sjf5d85v258d.jpg";
echo "<img id=\"pic\" src=" . "\"" . $src . "\"" . "/>";
return $src;
}
?>
Also, if you want to send and receive query parameters in the URI dynamically through a form, you can take a look at GET Request in PHP.
So normally I would <?php echo base_url();?>but im not sure how to do it in this code.
<?php
$path = 'home';
$img = '<img src="../img/servare.png" alt="">';
echo anchor($path, $img);
I have tried...
<?php
$path = 'home';
$img = '<img src="' <?php echo base_url();?>'../img/servare.png" alt="">';
echo anchor($path, $img);
But the img is not showing, any ideas ?
Your solution is one of the three following options:
If you're trying to create a text with a link to the image:
$this->load->helper('url'); // Load URL Helper for base_url()
$this->load->helper('html'); // Load HTML Helper for img()
$path= base_url('img/servare.png'); // generates text: siteroot/img/servare.png
$text = 'Visit Image';
echo anchor($path, $text);
OUTPUT HTML:
Visit Image
If you're trying to display the image in the current page,
$path= base_url('img/servare.png'); // generates text: siteroot/img/servare.png
echo img($path);
OUTPUT HTML:
<img src="http://localhost/nedwara.com/img/servare.png" alt="">
If you're trying to display the image in the current page and open the full image when clicked as a link,
$this->load->helper('url'); // Load URL Helper for base_url()
$this->load->helper('html'); // Load HTML Helper for img()
$path= base_url('img/servare.png'); // generates text: siteroot/img/servare.png
echo anchor($path, img($path));
OUTPUT HTML:
<a href="http://localhost/nedwara.com/img/servare.png">
<img src="http://localhost/nedwara.com/img/servare.png" alt="">
</a>
I think your code should be:
<?php
$this->load->helper('url');
$path = 'home';
$img = '<img src="<?php echo base_url('img/servare.png');?>" alt="">';
echo anchor($path, $img);
Because as seen in http://www.codeigniter.com/user_guide/helpers/url_helper.html
base_url:
Returns your site base URL, as specified in your config file.
Eg. If your site is http://example.com then:
base_url() returns "http://example.com"
and base_url('img/servare.png') will return "http://example.com/img/servare.png"
I am having a bit of a headache with a echo on my php code, the problem is that it isn't printing anything on screen, even though it was before, granted I added a function but when I used firebug to debug it it showed that it was getting the information out of a database correctly, just not printing it on-screen.
Where a list should be displayed there is nothing but empty space, staring into my soul.
I would appreciated if someone could point me out if I am missing something, as well why it is happening so I many not have to bother anyone anymore and if needed share my newly acquired knowledge.
PHP
function displayInfoLabs(){
if(isset($_POST['pId'])){
$id = $_POST['pId'];
$info = getSpecificLabs($id);
while($row = mysql_fetch_assoc($info)){
echo '<ul>' .
'<li>Laboratorio # ' . $row['codigolab'] . '</li>' .
'<li>Capacidad: ' . $row['capacidad'] . '</li>' .
'<li>Carrera: ' . $row['carrera'] . '</li>' .
'<li>Ubicación: ' . $row['ubicacion'] . '</li>' .
'</ul>';
}
}
}
function getSpecificLabs($pId){
$query = "SELECT bk.idlab , bk.codigolab , bk.capacidad, bk.carrera, bk.ubicacion FROM labs as bk WHERE bk.idlab = $pId";
$result = do_query($query);
return $result;
}
For reference I am also including the html and JS code of this function.
JS
$("#lnkInfo").click(function() {
var id = $('#txtId').val();
var request = $.ajax({
url: "includes/functionsLabs.php",
type: "post",
data: {
'call': 'displayInfoLabs',
'pId':id},
dataType: 'json',
success: function(response){
alert('exito')
}
});
});
HTML created via PHP, mind the lnkInfo which calls the JS that in turn calls the PHP
function displayList(){
$lista = getLabs();
while($row = mysql_fetch_assoc($lista)){
echo
'<div class="box" id="lab'.$row['idlab'].'">
<p id="labName">Lab #'.$row['codigolab'] . '</p>
<p class="info">Info</p>
<p class="info">Reservar</p>
<input type="hidden" name="txtId" id="txtId" value="'.$row['idlab'].'">
</div>';
}
}
Thanks a lot in advance.
EDIT:
Changing the success function made the list appear but it overrode the div's style including the buttons it had and all. This is the div's code.
div class="popUp1 hide" id="popUpCorrecto1">
<div class="estiloPopUp">
<span>Información de laboratorio</span>
<span value="Cerrar" id="btnCerrar">x</span>
</div>
<input type = "button" value = "Eliminar" id = "btnEliminar" onclick="eliminar()" />
<input type = "button" value = "Modificar" id = "btnModificar" onclick="window.location='modificarLab.html';" />
</div>
As you said in the comments, your data is being captured, but you aren't appending it to the document. you are simply doing:
alert('exito');
What you want to do is append the response to an element that is present in your page.
For examples sake, we can put a <div> with the id of mydata like so:
<div id="mydata"></div>
Now in your jQuery.ajax function, you could do something like the following:
$("#lnkInfo").click(function() {
var id = $('#txtId').val();
var request = $.ajax({
url: "includes/functionsLabs.php",
type: "post",
data: {
'call': 'displayInfoLabs',
'pId':id},
dataType: 'text/html',
success: function(response){
$('#mydata').html(response);
}
});
});
As you can see in the above, we modified your success function to include
$('#mydata').html(response);
provided all your data is printed and supplied correctly, it should display on the page.
EDIT:
it seems in your PHP query
$query = "SELECT bk.idlab , bk.codigolab , bk.capacidad, bk.carrera, bk.ubicacion FROM labs as bk WHERE bk.idlab = $pId";
You are selecting the columns prefixed with bk.* yet trying to print out the values without the prefix as seen below:
echo '<ul>' .
'<li>Laboratorio # ' . $row['codigolab'] . '</li>' .
'<li>Capacidad: ' . $row['capacidad'] . '</li>' .
'<li>Carrera: ' . $row['carrera'] . '</li>' .
'<li>Ubicación: ' . $row['ubicacion'] . '</li>' .
'</ul>';
Try changing the above to something like:
echo '<ul>' .
'<li>Laboratorio # ' . $row['bk.codigolab'] . '</li>' .
'<li>Capacidad: ' . $row['bk.capacidad'] . '</li>' .
'<li>Carrera: ' . $row['bk.carrera'] . '</li>' .
'<li>Ubicación: ' . $row['bk.ubicacion'] . '</li>' .
'</ul>';
If i understood it correctly.
Edit: ignore above php examples.
Change the success function from:
$('#mydata').html(response);
to
$('#mydata').append(response);
As .html() replaces all content within the specified element with the supplied content.
EDIT #2:
From the comments, you're ajax request is run every time that #LnkInfo is triggered which seems like it happens a lot as it loads the PopUp?
What you want to do is add in some logic, either in your jQuery function that checks if you've already appended the list to the popup and to stop it appending.
That could be done simply by adding a boolean variable somewhere in there.
Alternatively, you could just add a little div on that popup that you append it to.
Example:
This is your popup:
div class="popUp1 hide" id="popUpCorrecto1">
<div class="estiloPopUp">
<span>Información de laboratorio</span>
<span value="Cerrar" id="btnCerrar">x</span>
</div>
<!-- ADDED A NEW DIV HERE FOR LIST CONTENT -->
<div id="mylistcontent"></div>
<input type = "button" value = "Eliminar" id = "btnEliminar" onclick="eliminar()" />
<input type = "button" value = "Modificar" id = "btnModificar" onclick="window.location='modificarLab.html';" />
</div>
As you can see above, I've added the following:
<!-- ADDED A NEW DIV HERE FOR LIST CONTENT -->
<div id="mylistcontent"></div>
Now in your jQuery success function, you could append to that #mylistcontent div instead of the popup div :)
I just have a quick question how do I delete the item I just clicked? I don't have a great way of tracking it and I'm at my last resort way right now (which is what I'm posting) which deletes everything in the list.
PHP/HTML/jQuery:
<div class="image-list">
<?php
$count = 1;
if ($hotelId) {
foreach(glob($hotelDir) as $filename=>$hotelvalue){
echo '<li id="del'.$count.'" class="image-list"><a class="enlargeUser" href="'.$hotelvalue.'"><img class="imageListMain" src="'.$hotelvalue.'" width="50px" height="50px"/><p class="filename">' . basename($hotelvalue) . '</p></a> <a class="btn btn-mini btn-primary image-list" style="width: 18px;margin-top: -35px;position: relative\9;top: -25px\9;border-radius: 100%;-moz-border-radius: 100%;-o-border-radius: 100%;-webkit-border-radius: 100%;margin-left:330px;" id="del'.$count.'" value="Delete"><i class="icon-remove-circle icon-2" style="margin-left:-3px;"></i></a></li>' . "\n" . "<br>";
$count++;
}
}else{}
?>
</div>
</div>
<script>
$('div.image-list li a.image-list').live('click', function() {
bootbox.confirm("Are you sure you want to delete this image?", "Cancel", "Confirm", function(result) {
if (result) {
$('ul.image-list li a.image-list').closest('li').fadeOut();
$.post('assets/php/deletefile.php');
}
});
});
</script>
Here is the delete information (right now it is static PHP that only deletes the first file I don't have another way of doing this yet):
<?php
session_start();
$files = glob("upload/" . $_SESSION['curHotelId'] . "/" . '*.*');
if(is_file($files[0]))
#unlink($files[0]);
?>
UPDATE:
Thanks to Karl's answer I got a better idea of what I'm doing, but I still cannot get these to remove. I don't know why. They stay blank and act as if they don't even exist or the button does not work.
Here is my updated PHP/HTML/jQuery:
<div class="image-list">
<?php
$count = 1;
if ($hotelId) {
foreach(glob($hotelDir) as $filename=>$hotelvalue){
echo '<li data-filename="' . basename($hotelvalue) . '" id="del'.$count.'" class="image-list"><a class="enlargeUser" href="'.$hotelvalue.'"><img class="imageListMain" data-filename="' . basename($hotelvalue) . '" src="'.$hotelvalue.'" width="50px" height="50px"/><p class="filename">' . basename($hotelvalue) . '</p></a> <a data-filename="' . basename($hotelvalue) . '" class="btn btn-mini btn-primary image-list" style="width: 18px;margin-top: -35px;position: relative\9;top: -25px\9;border-radius: 100%;-moz-border-radius: 100%;-o-border-radius: 100%;-webkit-border-radius: 100%;margin-left:330px;" id="del'.$count.'" value="Delete"><i class="icon-remove-circle icon-2" style="margin-left:-3px;"></i></a></li>' . "\n" . "<br>";
$count++;
}
}else{}
?>
</div>
</div>
<script>
$('li.image-list a.image-list').click( function () {
var filename = $(this).attr('data-filename');
$(this).remove();
$.get('assets/php/deletefile.php?filename=' + filename).done( function() {
// it succeeded
}).fail( function (){
// it failed
});
});
});
</script>
And the PHP was updated too:
<?php
session_start();
$filename = $_get['filename'];
$files = glob("upload/" . $_SESSION['curHotelId'] . "/" . $filename);
if(is_file($files))
#unlink($files);
?>
HOPEFULLY FINAL UPDATE:
I'm so close, I just wanna throw everything I love out a window. So here is where I'm having an issue. It isn't deleting the images when the code executes so here is PHP:
ALL OF THIS CODE WORKS. C: Thank you everyone that helped!
<?php
session_start();
$file = $_POST['filename'];
$selHotelId = $_SESSION['curHotelId'];
$files = "upload/" . $selHotelId . "/" . $file;
unlink($files);
?>
jQuery:
$(document).ready(function(){
$("#imageClick").live("click", "li.image-list a.image-list", function () {
var _clicked = $(this);
var _filename = _clicked.attr('data-filename');
_clicked.parents("li.image-list").fadeOut(function(){
$(this).empty().remove();
});
$.post('assets/php/deletefile.php', {filename: _filename}).done( function(data) {
bootbox.alert('File has been deleted!');
}).fail( function (error){
bootbox.alert('There has been an error. Contact admin.');
});
});
});
There were still a few issues in your updated code. I've made some changes, and pasted in the code below. I've changed the method to $.post(), so your PHP file will need to access the parameter as $_POST['filename'].
A couple issues I noticed, you had more than one element with the same id attribute. I removed the redundant data-filename attributes from elements that didn't need them. I placed your jQuery inside a $(document).ready() in order to make sure that nothing was called until all DOM elements had been loaded. I also used the .on method for binding the event...just in case you ever dynamically add more li elements with the a.image-list element. This way you are binding the event to an element that will always be there, and catching it on the a.image-list. (I might be explaining that incorrectly...it's late).
Hope this helps.
<ul class="image-list">
<?php
$count = 1;
if ($hotelId) {
foreach(glob($hotelDir) as $filename=>$hotelvalue){
echo '<li id="del'.$count.'" class="image-list"><a class="enlargeUser" href="'.$hotelvalue.'"><img class="imageListMain" src="'.$hotelvalue.'" width="50px" height="50px"/><p class="filename">' . basename($hotelvalue) . '</p></a> <a class="btn btn-mini btn-primary image-list" style="width: 18px;margin-top: -35px;position: relative\9;top: -25px\9;border-radius: 100%;-moz-border-radius: 100%;-o-border-radius: 100%;-webkit-border-radius: 100%;margin-left:330px;" title="Delete" data-filename="' . basename($hotelvalue) . '" ><i class="icon-remove-circle icon-2" style="margin-left:-3px;"></i></a></li>' . "\n" . "<br>";
$count++;
}
}
?>
</ul>
<script>
$(document).ready(function(){
$("ul.image-list").on("click", "li.image-list a.image-list", function () {
var _clicked = $(this);
var _filename = _clicked.attr('data-filename');
_clicked.parents("li.image-list").fadeOut(function(){
$(this).empty().remove();
});
$.post('assets/php/deletefile.php', {filename: _filename}).done( function(data) {
// it succeeded
}).fail( function (error){
// it failed
});
});
})
</script>
UPDATE: I had a typo in my code...not sure you caught it.
var _filename = clicked.attr('data-filename');
SHOULD BE...
var _filename = _clicked.attr('data-filename');
My apologies.
To see if you are hitting your PHP file, you can do something simple like this...
<?php
$data["response"] = $_POST['filename'];
echo json_encode($data);
?>
And then modify your .done method to look like this...
$.post('assets/php/deletefile.php', {filename: _filename}).done( function(data) {
// it succeeded
console.log(data);
}).fail( function (error){
// it failed
});
You can delete or remove a DOM element with jQuery using a syntax similar to this and pull the value passed in your item:
$('div.image-list li a.image-list').click( function () {
var filename = $(this).attr('data-filename');
$(this).parents('li').remove();
});
You will have pass the data to the PHP file like you are doing but with the filename in the url:
$.get('assets/php/deletefile.php?filename=' + filename).done( function() {
// it succeeded
}).fail( function (){
// it failed
});
When you load the page you will have to load in the data-filename="filename.jpg" into the element you clicked.
In your deletefile.php, you can use $_GET['filename'] to get the filename.
How do I pass a variable in a php file that is loaded into a page (DOM) to a jQuery function??
Iv'e tried various method's while searching online but I haven't figured out how to use them correctly.
I need the var navHeaderTitle to be passes to the jQuery load() callback function so it sets the HTML tag, #navHeaderTitle, to the variable called in the php file.
Thnx for you help.
php:
<?php
$con = mysql_connect("localhost","user","pw");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("db", $con);
$result = mysql_query("SELECT * FROM some_list");
$navHeaderTitle = "MY NEW TITLE";//<--I NEED 2 INJECT THIS!!
while($row = mysql_fetch_array($result))
{
echo "<div id='navItem' title='$navHeaderTitle'>";
echo "<h1>" . $row['label'] . "</h1>";
echo "<h2>" . $row['title'] . "</h2>";
echo "<p>" . $row['description'] . "</p>";
echo "</div>";
}
mysql_close($con);
?>
JavaScript in the HTML Head:
<script type="text/javascript">
var navHeaderTitle = '';
$(document).ready(
function() {
$("#navContent").load('http://url/my_list.php', function() {
$('#navHeaderTitle').text($(html).find('div#navItem').attr('title'));//<--GET THE VAR FROM LOADED PHP FILE!!
});
});
</script>
<body>
<div id="navPanel">
<div id="navHeader">
<img src="images/ic_return.png" style="float: left;"/>
<img id="listSortBtn" src="images/ic_list_sort.png" style="float: right;"/>
<h4 id="navHeaderTitle"></h4>//THIS IS WHAT NEEDS THE VAR DATA!!
</div>
<div id="navScrollContainer" class="navContentPosition">
<div id="navContent">HTML CONTENT from PHP GETS DUMPED IN HERE</div>
</div>
</div>
</body>
Ive tried using this but not sure how to:
$.get('scripts/my_list.php', {}, function(data){
data = split(':');
})
I would have the php file return a json object that contains two parts, the html you want to echo and the title you want to use.
Then I would use jQuery's .ajax() function instead of .load() to get the return value from your php script in a javascript variable instead of dumping it directly as .load() does.
replace echo("$navHeaderTitle"); with
echo("<script> var navHeaderTitle = $navHeaderTitle </script>");
and remove var navHeaderTitle = ''; from the <head> script..
that will setup a JS variable like you're using, but you have to do that before the code in the <head> loads...
EDIT
ok don't echo("$navHeaderTitle"); you can put it into the HTML like:
echo "<div id='navItem' title='$navHeaderTitle'>";
then in the JS you can do:
<script type="text/javascript">
var navHeaderTitle = '';
$(document).ready(
function() {
$("#navContent").load('http://url/my_list.php', function(response) {
$('#navHeaderTitle').text($(response).attr('title'));
});
});
</script>
here's a jsfiddle demo: http://jsfiddle.net/JKirchartz/hdBzF/ (it's using fiddle's /echo/html/ so the load has some extra stuff to emulate the ajax)
It would be cleaner to pass the var in a custom attribute (data-var), then fetch it width JQuery
$(some_element).attr("data-var");
I hate to mess my JS code with php.