I have a JS Function:
function zoom(now) {
document.getElementById("popup").style.display = "block";
document.getElementById("photos").style.backgroundImage = "url('" + now + "')";
}
And I have echoed in php, which has onclick function
echo
"<td style='background: url(" . $row['thumbnails'] . ")' onclick='zoom(" . $row['imagelink'] . ")'></td>";
So it says
Uncaught SyntaxError: Unexpected token ILLEGAL.
When I put just 1.jpg in php instead of imagelink it works. but not with $row['imagelink']. I absolutely need to change background image, so please if anyone can help or give me a different option in JS, PHP, HTML only. Thank you
You are missing quotes in the php, so it generates invalid HTML
echo '<td style="background: url(' . $row['thumbnails'] . ')" onclick="zoom(\'' . $row['imagelink'] . '\')"></td>';
I assume the $row['imagelink'] variable contains a filename string, eg 'file.jpeg'.
When echoed in PHP, the HTML onclick attribute would be
The quotes around file.jpeg are missing, so the PHP should be:
"<td style='background: url(" . $row['thumbnails'] . ")' onclick='zoom(\"" . $row['imagelink'] . "\")'></td>";
Related
Im retrieving a value from my db, displays on screen as a 0.
echo "<article>" . $gr_display['status'] . "</article>";
Then when im clicking on this DIV i want to send both status and id to my JS function, edit. The ID of this object is 79
echo "<div onclick='edit( " . $gr_display['status'] . "." . $gr_display['id'] . " )' </div>";
Then the start of my script
function edit(status, id) {
console.log(status, id ); some code later }
But im ending up with the result that id and status is combined into one sett of value, leaving the other one "undefined"
From console log: 0.79 undefined
Please make a clarity between PHP and JavaScript. You need to use the right separator and separate.
echo "<div onclick='edit( " . $gr_display['status'] . ", " . $gr_display['id'] . " )'> </div>";
//-----------------------------------------------------^
Replace . with ,. Also please use > for the opening <div>. You forgot to close your opening div.
you have at typo change the . into, between the 2 variables
echo "<div onclick='edit( " . $gr_display['status'] . "," . $gr_display['id'] . " )'> </div>";
//---------------------------------------------------------^
or better use data-attributes
echo "<div class='edit-element' data-status='" . $gr_display['status'] . "' data-id='" . $gr_display['id'] . "'></div>";
$('.edit-element').click(function(){
console.log($(this).attr('data-status'),$(this).attr('data-id'));
});
replace div with this:-
echo "<div onclick='edit( " . $gr_display['status'] . "," . $gr_display['id'] . " )' </div>";
The problem is causes by this line:
echo "<div onclick='edit( " . $gr_display['status'] . "." . $gr_display['id'] . " )' </div>";
Notice that between the two arguments you put a '.' instead of a ',' (a comma). That way, the second argument in your JS function does not have a value
Your code has two issues
You haven't close opening div tag
Use , to separate two parameters
echo "<div onclick='edit( " . $gr_display['status'] . ", " . $gr_display['id'] . ")'>ddd </div>";
<script type="text/javascript">
function edit(status, id) {
alert(status);
alert(id);
}
</script>
I'm making a program that shows several descriptions taken from a database (MySQL):
echo "<input type=\"submit\" id=\"Boton" . $i . "\" value=\"Mostrar Descripcion\""
. " onclick=cambiarBoton(" . $i . ", \"" . $row["descripcion"] . "\") />";
echo "<div class=\"entrada-descripcion\" id=\"Descripcion" . $i . "\"> </div>";
where $row["descripcion"] is the access to the description and $i is an identifier because i'm using loops. That code generates a button that i must press to show the description. The javascript function "cambiarBoton" is the one that do that changes:
function cambiarBoton(i, d){
if (document.getElementById("Boton"+i).value == "Mostrar Descripcion"){
document.getElementById("Boton"+i).value = "Ocultar Descripcion";
document.getElementById("Descripcion"+i).innerHTML = d;
}else if(document.getElementById("Boton"+i).value == "Ocultar Descripcion"){
document.getElementById("Boton"+i).value = "Mostrar Descripcion";
document.getElementById("Descripcion"+i).innerHTML = "";
}
}
Ok, but there is a problem in the program and this is that i can't pass the description to the function in javascript and this doesn't works. How can i do this?
(I must do this without using AJAX)
I answer to the question I think you're asking is:
<?php echo "<script>var data = ".$row["description"].";</script>"; ?>
The problem was in the call of the function "cambiarBoton" in the code PHP,
it should have been this:
echo "<input type=\"submit\" id=\"Boton" . $i . "\" value=\"Mostrar Descripcion\""
. " onclick=\"cambiarBoton(" . $i . ", '" . $row["descripcion"] . "')\" />";
And then it works.
public function confirmTransactionButton($confirmationFlag, $buttonName) {
$disabled = '';
$warningMessages = 'Watch Out';
$functionName = "return confirm(" . '\'' . "$warningMessages" . '\'' . ")";
if ($confirmationFlag == constant("Y.ENUM")) {
$disabled = 'disabled';
}
$button = "<input name='$buttonName' type='submit' class='BUTTON' id='$buttonName' onclick='$functionName' value='" . constant('KONFIRMASI.CON') . "' " . $disabled . " />";
return $button;
}
can anyone help me this issue, alert dialog won't appear.
i case i change string to number, its work
$warningMessages = 'Watch Out';
$functionName = "return confirm(" . '\'' . "$warningMessages" . '\'' . ")";
To
$warningMessages = '123';
$functionName = "return confirm(".$warningMessages.")";
The problem is hat you are using the same delimiter for the JS string and for the HTML attribute value, this terminating the attribute value prematurely. Look at the generated source and you will see:
It would look something like
<input ... onclick='confirm('foo')' />
Can you see the problem (the syntax highlighter helps)?
You can fix this by using different quotation marks:
$functionName = "return confirm(" . '"' . "$warningMessages" . '"' . ")";
// ^ ^
So your HTML will become
<input ... onclick='confirm("foo")' />
And of course the best solution would be to not use inline event handlers at all. Have a look at these articles to learn more about event handling.
I'm trying to alter the src of imgs loaded via. AJAX, wherein the <select> and <option> elements used to control the function are also loaded by AJAX.
I'm trying to do this in order to change the size of Flickr images on the page.
I've tried loading the element, and calling an existing function to update it, but of course the <select> option doesn't exist on document.ready() and thus returns null when I try to get it.
I've also tried loading a new <script type='text/javascript'></script> in the PHP file I'm using for my XML response, but although this shows on the page it obviously isn't picked up as a source.
How can I tell the Document to 're-ready' itself, or acknowledge new sources?
Here's my code as it stands:
Making the request
function makeRequest (url, userID, searchString, selectedLicense) {
event.preventDefault();
var formData = new FormData();
formData.append("userID", userID);
formData.append("searchString", searchString);
formData.append("selectedLicense", selectedLicense);
var xmlRequest = new XMLHttpRequest();
xmlRequest.open("POST", url, true);
xmlRequest.send(formData);
xmlRequest.onreadystatechange=function()
{
if (xmlRequest.readyState===4 && xmlRequest.status===200) {
document.getElementById("working...").innerHTML="<p style='background-color:#BCED91; width:200px; text-align:center;'>Done!</p>";
document.getElementById("results").innerHTML=xmlRequest.responseText;
} else {
document.getElementById("results").innerHTML="<p>Ready State: " + xmlRequest.readyState + "</p> <p>Status Code: " + xmlRequest.status + "</p>";
}
}
}
The PHP
//more code before
$resultString = $resultString . "<script type='text/javascript'>"
. "function sizeChanged(i, select) {
var sel = getSelectedOptionValue(select);
var imgURL = document.getElementById(i.toString());
alert(imgURL);
}"
. "</script>";
//main loop
foreach ($XML->photos->photo as $photo):
$resultString = $resultString . '<div class="photoBox"' . photoBox($photoCounter) . "> <p>" . $photoCounter . ". " . $photo['title'] . "" . "</p>"
. " <p>" . "<img id='" . $photoCounter . "' src=\"http://farm" . $photo['farm'] . $imgURL . "/" . $photo['server'] . "/" . $photo['id'] . "_" . $photo['secret'] . "_" . $size . "\" alt=\"" . $photo['title'] . "\">" . "</p>"
. "<select form='addInformationForm' id='selectSize" . $photoCounter . "' onChange='return sizeChanged(" . $photoCounter . ", selectSize" . $photoCounter . ");'>"
. "<option value='n'>Small (320)</option>"
. "<option value='z' selected='selected'>Medium (640)</option>"
. "<option value='h'>Large (1600)</option>"
. "</select>"
. "</div>";
$photoCounter++;
endforeach;
//more code here
echo $resultString;
The HTML Output (Example)
<div class="photoBox" style="background-color:#FFFFFF">
<p>1. Killip's Adirondack Travelog, page 20</p>
<p><img id="1" src="http://farm9.staticflickr.com//8184/8427833074_2f7e22e7ce_z.jpg" alt="Killip's Adirondack Travelog, page 20"></p>
<select form="addInformationForm" id="selectSize1" onChange="return sizeChanged(1, selectSize1);">
<option value="n">Small (320)</option>
<option value="z" selected="selected">Medium (640)</option>
<option value="h">Large (1600)</option></select>
</div>
Any advice much appreciated!
NOTE: This code is for an internal tool, not a client-facing website.
The <select> doesn't exists at onload, but it does when you create it:
var res = document.getElementById("results");
xmlRequest.onreadystatechange = function() {
if (xmlRequest.readyState===4 && xmlRequest.status===200) {
document.getElementById("working...").innerHTML="<p style='background-color:#BCED91; width:200px; text-align:center;'>Done!</p>";
res.innerHTML = xmlRequest.responseText;
var select = res.getElementsByTagName('select')[0];
/* Use select here */
} else {
res.innerHTML="<p>Ready State: " + xmlRequest.readyState + "</p> <p>Status Code: " + xmlRequest.status + "</p>";
}
};
Note that the <img> element should be available too, but you won't know its dimensions because it won't be downloaded. If you want to wait until it's loaded, you can add a load event listener.
I'm trying to make my Image Input pass a URL into a Javascript function using OnClick, however when I click on the input it does nothing. The code I am using is in PHP, and it echo's out a string with HTML tags in it.
echo "<input type=\"image\" onclick=\"imgp(\'" . $url . "\')\" src=\"" . $url . "\" style=\"max-width: 20%; max-height: 20%\" /><br />";
The function that is getting called is as follows:
function imgp(url){
if(url != null){
var text = document.getElementById("body").value + "[img]" + url + "[/img]";
document.getElementById("body").value = text;
imgpopup();
}
}
As I can't test with the code you posted, try to do the following:
echo '<input type="image" onclick="imgp(\" . $url . '\')" src="' . $url . '" style="max-width: 20%; max-height: 20%" /><br />';
If you use simple quote ('), inside the echo, you can use the double quote (") without using (), but instead, you need to use only with ('), and vice-versa.