Develop Reference

editing html with embedded PHP using javascript

I hope someone has an answer for me,
I am currently trying to create a PHP product page for my shop website, I have an sql table that stores the name of an image prefix eg if the image file is 'test_1.png' then the table stores 'test'. using embedded php
src="images/shop/<?php echo $row['item_img'], '_1.png';?>"></img>
what I would like to do is using js, dynamically update the src on a mouse click.
something like eg.
var imgSwitch = function(i){
Document.getElementById('js-img').src = "images/shop/
<?php echo $row['item_img'], '_';?>i<?php echo '.png';?>";
}
Even to me this seems wrong which is why I've turned to the GURU's here
Is there anyway this would be possible? If not, any suggestions would be GREATLY appreciated

I am trying to figure out what you are asking, and I think this is your way to go:
var imgSwitch = function(i){
document.getElementById('js-img').src = "images/shop/<?php echo $row['item_img'], '_';?>" + i + ".png";
}
The change is in the i, you have to cut the string and add it as a variable.
But remember that the PHP code is executed at the server, and will not change once the page is sent to the client. When you execute that function, $row['item_img'] will always be the same.

A simple example which you can adapt. What I do in the code below is give the element an id and attach an onclick to it.
In the function we pass the id as a parameter (onclick(changeSrc(this.id))) and we manipulate the src using the getElementById as we have the id.
<img src="http://ladiesloot.com/wp-content/uploads/2015/05/smiley-face-1-4-15.png" id="test" onclick="changeSrc(this.id);" height="400" width="400" />
<script>
function changeSrc(id) {
document.getElementById(id).src = "http://i0.wp.com/www.compusurf.es/wordpress/wp-content/uploads/2014/04/smiley.jpeg?fit=1200%2C1200";
}
</script>
http://jsfiddle.net/tq1Lq5at/
Edit 1
You're using Document when it should be document, notice the lowercase d.

Show/Display file content using javascript

I have a table showing file location along with other informations. for e.g. :
When the user click on the first row i.e. on $_FILES then it should display the contents of FileA.txt.
Is it possible to do this using javascript or using Angular js?
I don't want to use
<input type='file' />
as we already know the file location and also it gives dialog box which ask to save the file, I don't want this. Instead I directly want to show file content. But as I said it shows dialog box which I don't want to show hence looking for alternative.
Thanks in advance,
Ramesh

You can do this using php:
<?php
$filepath = "yourpathhere";
$content = file_get_contents($filepath);
echo $content;
?>

You need to give file location as id of corresponding <tr>. file_class is class of table.
and create a div with class text in which file content will be displayed.
JQuery Code is:
$(document).ready(function() {
$(".file_class").click(function() {
var file_location = $(this).attr('id');
$.ajax({
url : encodeURIComponent(file_location),
dataType: "text",
success : function (data) {
$(".text").html(data);
}
});
});
});
HTML Code should be like this:
<table class="file_class"><tr id="D:\input.txt"></tr></table>

How to get a td-class stored into json file into an html table (using ajax)

First of all I need to admit that my knowledge of Javascript is very limited. I have been struggling in order to get my page content refreshed in the background without a page refresh using jQuery's AJAX. So far I've managed to get all the content variables that need to be updated succesfully through div's. Now I would also like to change the td class according the value that is within the div. I prefer to store this info into a variabel that I can bring to my html page and I was wondering how I could accomplish that.
Here is simplified example of my code :
php script that generates the wanted variables and stores (echoes) them into a json array (example.php)
$variable1 = 20;
if ($variable1 > 50) {
$variable1class="positive";
} else {
$variable1class="negative";
}
$array['variable1'] = $variable1;
$array['variable1class'] = $variable1class;
echo json_encode($array);
html table where the variable is retrieved from the json generated by the example.php:
<table>
<tr>
<td class='variable1class'>
<div id='variable1'></div>
</td>
</tr>
</table>
javascript:
<script type="text/javascript">
$(function() {
refresh();
});
function refresh() {
$.getJSON('example.php', function(data) {
$('div#variable1').html(data.variable1);
});
setTimeout("refresh()",10000);
}
the above code does perfectly refresh the php page in the background and changes the content in de div (variable1) in the html page.
How can I insert the td-class (also stored in the json)? Something like the following would have been great, but obviously didn't work :)
javascipt:
function refresh() {
$.getJSON('example.php', function(data) {
$('div#variable1').html(data.variable1);
$('td#variable1class').html(data.variable1class);
});
setTimeout("refresh()",10000);
}
Thanks alot in advance!

$('td.variable1class').addClass(data.variable1class);

Select partial ID name in javascript

I have an asp.net webform where I include the following script (on a separate .js file):
function pageLoad() {
var mpe = $find("mpeEmpresa");
mpe.add_shown(onShown);
$addHandler(document, "keydown", onKeyDown);
}
function onShown() {
var background = $find("mpeEmpresa")._backgroundElement;
background.onclick = function() {
$find("mpeEmpresa").hide();
}
}
Unfortunately, it won't work because asp.net 3.5 changes the elements id's. The only way I could get it to work is to use ctl00_ContentPlaceHolder1_empresaFilha_mpeEmpresa as the ID.
Sure I could use <%= mpeEmpresa.ClientID %> from the asp.net side, it would work but I'll have to pass that as a var to my external .js file and it's not exactly what I'm trying to accomplish.
I have searched on a few ways to select the element by it's ID name partially, but couldn't get any of them to work... Is there a guaranteed way?

I can see the JQuery tag on your question, so you can easily use this:
$('div[id*="mpeEmpresa"]')
As i know the ContentPlaceHolders are rendered as div.
Update:
If you need to select empresaFilha too so you can't use the above selector.
because $('div[id*="mpeEmpresa"]') select both of ctl00_ContentPlaceHolder1_empresaFilha and ctl00_ContentPlaceHolder1_empresaFilha_mpeEmpresa.
so you need to use this:
Select only mpeEmpresa:
$('div[id*="mpeEmpresa"]').css("background-color","blue");
Select only empresaFilha:
$('div[id*="mpeEmpresa"]').parent('div[id*="empresaFilha"]').css("background-color","red");
Or something like this, maybe this code isn't so optimized because i don't see your ASP code or rendered HTML so have to provide a general solution.

You can simply use this
var mpe=$('div[id$="mpeEmpresa"]');
or
var mpe=$find('div[id$="mpeEmpresa"]');

JQuery/Javascript how to Parse HTML using a Get

I have the following working code. This displays a drop down and also fetches a html file to be displayed:
$.getJSON('json/shares.json', function(data) {
var items = [];
$.each(data.Shares, function(key, val) {
items.push('<option id="' + val.shareID+ '">' + val.shareID+ '</option>');
});
$('<select/>', {
'id': 'shares',
html: items.join('')
}).appendTo('#shares');
});
</script>
<script type="text/javascript">
$.get('lon_shares.html', function(data){
$(data).appendTo('#shares');
});
</script>
I need to amend this to a few extra things.
Firstly, I need the drop down to auto submit when a choice is made.
I then need it to get the html file relevant to the choice, for example if they choose the "FML" option it will get the html file "FML_shares.html" if they choose "GBP" then it should get "GBP_shares.html" and finally if the choice doesn't have any html file related to it then an error should be displayed such as "no such file" etc.
Just to make it a little more complex, I don't want the whole file. The file has a table in it and I want to get the data from the first row of the table, for the first five columns of data and display those alone.
Thanks for any assistance, I've been searching for a solution for a while without any success and my JQuery/Javascript knowledge is very basic! (I've done something similar with PHP in the past but that's not an option here)

Well for the first point you could just run
$('#shares').on('change', function(){
var val = $(this).val();
//submit another ajax request with this value, and get the relevant page, then you'd just need to parse it for the appropriate content from that page.
});
If you want to parse the returned page and get only part of this we'd need to know the markup structure.

Seems like you just need to bind to the .change event of the dropdown you are creating to do the submission, which you can retrieve with .get. You can use jQuery to parse the html. It does a nice job of that:
.appendTo('#shares')
.change(function () {
$.get($(this).val() + '_shares.html)
.done(function (html) {
var $table = $(html).find("table tr:first td").slice(0,5);
})
.fail(function () { /* no such file */ });
});
This code is untested, but hopefully you can follow the example. Also beware of GET caching.