How can i pass String to onclick message? - javascript

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.

Related

how to checked input checkbox datatable laravel?

i want to make a statement if is_participant is one then check the box, but i tried but it doesn't work
$user = User::with('regency.province');
return DataTables::of($user)
->editColumn('is_participant', function ($user) {
return '<input ' . $user->is_participant == 1 ? "checked" : "" . ' type="checkbox" id="' . $user->id . '">';
})
is there something missing in my code
Try to apply the below code. I have tried to change quote formatting just the way PHP accepts.
->editColumn("is_participant", function ($user) {
$checked = ($user-> is_participant == 1) ? 'checked' : '';
return ' <input type="checkbox" id="' . $user->id . '" ' . $checked . '> ';
});

How to properly concatenate values coming from Javascript and PHP?

I have been struggling with this for the last two hours and I can't get it to work. Take a look to the following piece of code:
$js = '$.extend($.fn.fmatter , {
userActions : function(cellvalue, options, rowData, addOrEdit) {
var data = cellvalue.split("|");
var id = options.rowId;
var actions = "";';
foreach ($editorActions as $linkType => $value) {
switch ($linkType) {
case 'view':
$js .= "if(data[1] == 1) {
actions += \"<a class='actionimage' href='" . $value . " + options.rowId' title='" . $this->translate->_e('View') . "' onClick='load_start();'><img src='/images/icons/16x16/document_view.png' width='16' height='16' alt='' /></a>\";
}";
}
break;
}
As you can see id is a value coming from Javascript and $value is coming from PHP. The idea is to get an hyperlink as for example:
$value = "/route/to/function/";
id = 19009; // I've omitted the $ sign since this var is coming from JS
var href = "' . $value . '" + id;'
Then I need to use the href var as part of the <a> element shown right after the definition.
With my code above I am getting this error:
Uncaught SyntaxError: Invalid or unexpected token
Can I get some help to get this right?
UPDATE:
This is how the code looks like after I render the page:
$(function () {
$.extend($.fn.fmatter, {
userActions: function (cellvalue, options, rowdata) {
var data = cellvalue.split('|');
var id = options.rowId;
var actions = '';
console.log(id);
if (data[1] == 1) {
actions += "<a class='actionimage' href='/sf/distributor/show/ + options.rowId' title='View' onClick='load_start();'><img src='/images/icons/16x16/document_view.png' width='16' height='16' alt='' /></a>";
}
return actions;
}
});
});
Notice how the function $.extend close properly. console.log(id) did print the value of options.rowId however this value doesn't have any effect on the hyperlink as you may notice this is the value /sf/distributor/show/ + options.rowId.
What is coming in $value is a plain string in the case above /sf/distributor/show/.
You're missing double quotes and to end and reopen the string around options.rowId and a + in:
actions += \"<a class='actionimage' href='" . $value . " + options.rowId'
It should be:
actions += \"<a class='actionimage' href='" . $value . "\" + options.rowId + \"'
Here you are missing "" and that way you are adding options.rowId as a string text.
href='/sf/distributor/show/" + options.rowId + "'

Change Popup background Image with JS and PHP

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>";

Change src of element loaded with AJAX

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.

HTML/PHP Passing arguments into javascript function with onclick="" doesn't work

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.

Categories