loading external html file using jquery and accessing it content - php

I need to access some TD values in a TABLE that is in another HTML file. I am not really sure what way helps me get a working solution for this. Currently I want to access it using jquery. All I imagine for solving this issue is to load the whole external HTML file into a DIV in my main file and seek through the TDs to find my favorite one and print its content to my main TABLE TD. I do not seem to be able to figure it out. please help me with this!
My main PHP file:
<?php
...
...
$loading_transmitter = $_POST['transmitter'];
?>
<script>
$("#result").load('<?php echo $loading_transmitter; ?>',function(){
var main_proc_temp = $(table:nth-child(2).tr:nth-child(1).td:nth-child(3)).text();#table loaded from the external file
alert(main_proc_temp);#it should alert: "OK" but alets: "Undefined"
});
</script>
Is the content of the loaded file available this way? Because after loading it on the page (which goes well), I checked the source code and found out that the result div is yet empty.

I think you don't have tr and td class so remove the . from the selectors then check.
Also you should find your table in your responselike,
like,
$("#result").load('<?php echo $loading_transmitter; ?>',function(data){
var main_proc_temp = $(data).find('table:nth-child(2) tr:nth-child(1) td:nth-child(3)').text();
alert(main_proc_temp);
});

If you're using PHP, can you not write these values to a database as they change and access them that way?

Related

Add Dynamic PHP Code in WordPress Via jQuery HTML Replace?

I'm stuck using a theme in WordPress for a client where the header is horrible in responsive view. I can work with desktop widths but anything below 768px needs to have an entirely different markup because of the clients demands -- any attempt to try to do this via CSS has led to even more UI disasters. My hope was to utilize jQuery's .html() functionality to swap out Bootstrap grid elements at < 768px. Here's a snippet example -- say I needed to move the logo from a far right position in desktop to the first element on the left in a header. I'm using the theme's declarations for the dynamic logo correctly:
if($(window).width() < 768) {
$('.top-bar').html('<div class="col-md-3"><?php vg_ebuilder_display_logo_sticky(); ?><div class="logo-inside"><?php vg_ebuilder_display_top_logo(); ?></div></div>');
}
But this returns commented out PHP:
<!--?php vg_ebuilder_display_logo_sticky(); ?-->
and
<!--?php vg_ebuilder_display_top_logo(); ?-->
So, maybe two questions here: is there a way to add dynamic PHP like this in WordPress via a jQuery .html() function on $(document).ready and, assuming it could, would it indeed be dynamic if loaded after the DOM?
No. PHP runs on the server, not the client. The javascript would need to make a call to an endpoint that would perform the php logic, return a response, and that response put on the page. Inserting php on the client will not be invoked.
I can't 'comment' a suggestion to you as my reputation isn't yet 50, so hopefully this is the right answer. I found this worked for me with a similar issue in Joomla (Q48891999).
In the div you want to change, add a unique class, e.g. "builder".
Then, if you need to, write a new css class or classes starting with
#media (max-width: 767px) {
.your_new_class {
}
}
- but not using the name 'builder' for the new class - in your custom css file for the div you want to change.
Then use jquery .addClass to apply the css class to your div in your index.php. Something like this:
<script>
$( ".builder" ).addClass( "the_class_you_want_to_apply another_class" );
</script>
The spaces between the parentheses and the double quotes are deliberate, as used in the examples on the jquery website.
In my case, I added this to the bottom of my index.php just before the closing body tag.
You may need to have more than one of these scripts to apply to different elements.

How to display php file output inside a html div?

Alright, so I'm trying to embed a php script that outputs a gallery of images onto my html div container. However, after an hour or so of searching I'm coming up clueless.
http://craftedbyfrank.com/test/instagram.php
That's the link to the php gallery script.
I want to display it onto the main page inside that div.
[REMOVED] - thanks!
I've tried the following, but I believe it's just wrong. I get no output.
<div id="container">
<?php include "instagram.php"; ?>
</div>
I'm trying to avoid actually pasting the php script into the html file.
php is not being parsed on your server. If you view the html source you see the actual php code you are using to include the file. Make sure that php is installed or you're not embedding the php from a cms that's encoding your tags.
You could possibly use AJAX to get the result from the PHP file and write to the containing div.
$.ajax({
type:'GET',
url:'http://craftedbyfrank.com/test/instagram.php',
data:'',
success: function(data){
$('#container').html(data);
}
});
You would possible need to adjust to get your fancy box plugin to work.
As #vletech suggested you can use AJAX to get the result from the php file.
However the main reason why it does not work is because you are trying to execute the php script inside an .html file: e.g. your page loads on - /test/index.html. In order to work the file has to be with a .php extension.

CakePHP script function in default.ctp

How would I put this in my cakephp default.ctp file?
Im pretty novice at cakephp as ive just started using it.
<script>
$(function()
{
$('#slider-id').codaSlider();
});
</script>
Thanks, in advance.
Although your question is too vague to answer in its current state, you should have a look at the JsHelper,especially Js->buffer(). This allows you to append script in your views and output them all at once in your layout.
http://book.cakephp.org/2.0/en/core-libraries/helpers/js.html#working-with-buffered-scripts
open the app/View/Layout/default.ctp file in your favorite code editor
add the following between your <head> and </head>:
<script>
$(function()
{
$('#slider-id').codaSlider();
});
</script></li>
In CakePHP 2.x there are now things called blocks, and blocks are just chunks of output stored in memory until they are fetched for output.
There use to be a $scripts_for_layout variable that you could put your script into, but now we use the $this->fetch('scripts'); to get any JavaScript needed for the Html.
There are a few ways to inject JavaScript into the scripts block using the HtmlHelper.
To add it to the block, and this can be done in Views or Layouts. Just run this code before you fetch the block.
$this->Html->scriptBlock("$('#slider-id').codaSlider();",array('inline'=>false));
To output the scripts in your layout is easy.
$this->fetch('scripts');
The advantage of this approach is you can add JavaScript from multiple places in CakePHP, but they will be outputted in the layout at the location you desire.

Referencing an object in an included php page - and how to hide it

So since joining I've learned a lot - compared to where I was - but I still don't know the terminology and functions well enough I suppose... so here's my problem:
I'm making several js-based galleries. The idea being that there will be 3-4 pages containing some thumbnails that will populate a specific div with the corresponding art and copy (a div I'm calling using innerHTML) and so far that works. Here is the script:
function changeDiv(target,id) {
var target = document.getElementById('generic');
var id = document.getElementById(id);
target.innerHTML = id.innerHTML;
}
This works great... when I have the 'target' and all 'id's in the same page. I even went as far as using a php include on the page (I added it to the footer) and nested it inside an inline div that I set to visibility:hidden. A shot in the dark but this worked too. EXCEPT that my footer was now about another 100px taller with nothing but blank space. Apparently it HID the content, but made plenty of room for it.
But what I really want to do is include the source of the divs I'm calling (we'll call them artwork.php) into the gallery page ( ...and gallery1.php) the same way a css or js is linked in the header or the same way it is included with a php tag but without messing up any of my objects.
I hope that made sense, but in brief: How can I call an external php document that won't display but can be called upon by the js?
Any thoughts?
1) visibility:hidden; keeps the place on the page. Use display:none instead.
2) Jo have two possibilities.
a) Use Ajax (google it!) if your artwork.php will change dynamically.
b) Use artwork.php as JS file, ie like this:
<?php
/* artwork.php */
header('Content-type: application/javascript');
echo "var myImages = [{'name':'First image','src':'image1.jpg'},{'name':'Next image','src':'image2.png'}];\n";
?>
//... any other JS functions here ...
And gallery1.php:
<html>
<head>
<script type="text/javascript" src="artwork.php"> </script>
</head>
<body>
...
</body>
hmm i am not actually getting what u are trying to say but i think this might help
save your php page lets say "artwork.php"
then use the jquery Load to call the page and hide the div where you have loaded the page.
$("#any_div_u_want").load('artwork.php',function(){
$(this).hide();
});
now u can show the div which contains your php script wheneveer u ant with just
$("#any_div_u_want").show();
Hope this helps

AJAX, PHP Copied Files not Found on Return to Browser

I am using 'jQuery AJAX PHP' to do some '.jpg' file copying (approx 330kb per file). I copy files to a new directory location.
When I return to the HTML and use jQuery to add an IMG tag to a Table element, some of the files I have copied are shown as Not Found with 404 errors, but they are there.
I am wondering if it is a speed error. I tried to slow down the return from the PHP, by reading the directory where the files had been copied to, but that did not seem to help.
Am I right in thinking it is a speed problem and does anyone have an idea as to how I may overcome this problem, because only by displaying the copied file, can I be certain it has been copied.
Sometimes I have the same problem with not loading the images. If you are going to use jQuery I will recommend that you put your script (which loads the images) in
$(document).ready(function() {
// put all your jQuery goodness in here.
});
The fact is that your DOM object is not ready when you want to show or make operation with it.
Don't forget to call
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
in the head of your HTML.
Having tried various options suggested here and some others, I researched, I decided to try putting the display of the images in a different function from the AJAX/PHP. In other words instead of processing the images in the result function of the AJAX call, I just passed the results from the success function to another function.
This seems to have cured my not-found displays.
This may be a coincidence, with something else going on, because I am very poor in the knowledge of the flow of the DOM.

Categories