How To use PHP variable in jQuery (in Wordpress plugin) - javascript

This is wordpress plugin code The following code works, but no text comes into the modal window. Error is this enter image description here
<?php
$phpvariabletext = get_post_meta( $post_id, '_billing_satis_sozlesme', true );
// $phpvariabletext large text along with html codes
?>
<a class="classa" id="view" onclick="openmodal()"> Show Contract </a>
<script type="text/javascript">
var content = '<?php echo $phpvariabletext; ?>';
var newmodal = new tingle.modal();
function openmodal() {
newmodal.open();
newmodal.setContent(content);
}
</script>

You can use PHP variable in JQuery/Javascript easily check below steps
1) Stored PHP variable value in HTML input tag as type hidden
<input type="hidden" value="<?php echo $phpvariabletext;?>" id="phpvariable">
2) After assign variable value in HTML input tag. You can get value in JQuery/Javascript.
<script type="text/javascript">
var content = $('#phpvariable').val();
var newmodal = new tingle.modal();
function openmodal() {
newmodal.open();
newmodal.setContent(content);
}
</script>

Creating extra DOM elements solely to transport a value is needless extra markup.
I always pass php data to javascript as json_encode() output (without manually quoting) because it will automatically double-quote your string and escape any of the double-quotes in the actual data.
<a class="classa" id="view" onclick="openmodal()"> Show Contract </a>
<script type="text/javascript">
let newmodal = new tingle.modal();
function openmodal() {
newmodal.open();
newmodal.setContent(<?= json_encode(get_post_meta($post_id, '_billing_satis_sozlesme', true)); ?>);
}
</script>
The above technique outputs the php value using php "short tags".
P.s. you could also consider removing the inline js function call and use an event listener in your js to keep all of the behaviors/events in one place.

Related

PHP code in <script> tag make function javascript in bellow code not defined

I make a form that has a table with dynamic row. each column in row will has select option input that get from php. when i click a button to add new row.
I use json_encode to transform array of key-value php to javascript json. Bellow that I have tried. Anyone can explain me? thanx
<!-- triger add row -->
<button onclick="addRow()">Add Row</button>
</body>
<!-- javascript -->
1.
<script>
let options = <?php echo json_encode($options)?>
</script>
<script>
function addRow(){
//this will produce Reference error : options is not defined
options.forEach(createOptionElement(option))
}
</script>
2.
<script>
let options = <?php echo json_encode($options)?>
// function addRow will be Reference error : addRow is not defined
function addRow(){
options.forEach(createSelectElement(option))
}
</script>
</html>

jQuery is not overwriting text coming from php include

I have a php file coming from a global assets folder, in the footer I have this:
<?php
include('../global/includes/footer_template.php');
?>
and in that template I have something like this:
<a href="<?php echo $legalUrl;?>"target="_blank">
<?php echo ($isLangSpanish?'Nota Legal':'Legal Notices');?>
</a>
so in the view you will see 'Legal Notices', for one of the pages the client is asking me to uncapitalize the 'N' in Notices. So I did this with jQuery
<?php
include('../global/includes/footer_template.php');
?>
<script type="text/javascript">
$(document).ready(function(){
$('.footer p a').text().replace('Notices', 'notices');
});
</script>
And it works in the browser console:
But I can't see that change in the view.
What can I do?
NOTE:
I can't change the footer template in the assets because it's been used for other projects.
You have to assign the value back.
$(document).ready(function(){
$('.footer p a').text($('.footer p a').text().replace('Notices', 'notices'));
});
a little cleaner:
$(document).ready(function(){
var link = $('.footer p a'),
updatedText = link.text().replace('Notices', 'notices');
link.text(updatedText);
});
Posting an alternative solution using a callback to text(),
$('.footer p a').text(function(){
return $(this).text().replace('Notices', 'notices')
});
.text( function )
A function returning the text content to set. Receives the index position of the element in the set and the old text value as arguments.

Pass variables from Javascript to PHP - Popup/Modal Window

<html>
<head>
<script type="text/javascript">
function showdivv(el, idclicked) {
var iddd = idclicked;
var display = document.getElementById(el).style.display;
if(display == "none")
document.getElementById(el).style.display = 'block';
else
document.getElementById(el).style.display = 'none';
}
</script>
<?php $showw = "<script>document.write(iddd)</script>"; ?>
</head>
<body>
<div id="myDiv" style="display: none;">ID Selected: <?php echo $showw; ?></div>
<?php $variable = 4; ?>
<button type="button" onclick="showdivv('myDiv', '<?php echo $variable; ?>')">Show / Hide</button>
</body>
I'm trying to make a way when a person presses the button pass the variable, in this case ID, to JavaScript and then show the hidden div in PHP. It does not work, can someone help me? THX
If you're okay with the page reloading, you can simply do
window.location.href('php_script_that_needs_your_input.php?id=input_id_from_js');
If not, I absolutely recommend using JQuery as it makes Ajax queries a breeze.
Inside the <head> tags:
<script src='http://code.jquery.com/jquery-2.2.0.min.js'></script>
Upload the script to your own server for production purposes, obviously.
in the <body>, where you want the results from the PHP script to appear (skip this if you don't want output from PHP):
<div id="phpResult"><!--content to be set by ajax--></div>
and put this JS directly below this <div>:
function ajax_on_button_press(resultDiv, id) {
var phpUrl = "php_script.php?id="+id+"&other_variable=cheese&more_info=rats";
$(resultDiv).load(phpUrl);
}
I have used example values here, but you can easily use variables from JavaScript like this:
var other_variable=$('#otherVariableInput').val(); //gets input from a textbox with the html id otherVariableInput
var phpUrl = "php_script.php?id="+id+"&other_variable="+other_variable+"&more_info=rats";
To start the process, you need a button that runs this script. Change your button markup to
<button type="button" onclick="ajax_on_button_press('#phpResult', '<?php echo $variable; ?>')">Show / Hide</button>
If I have understood you correctly, that should solve your problem.

How to use php functions with prototypejs?

How can I use php functions in the update-function of prototypejs?
I made a little code to show my problem:
<div id="rand_num">Click the button to get a new random number!</div>
<button name="number" type="button" onclick="updateRandom();">
<p><b>Generate new number!</b></p>
</button>
<script type="text/javascript">
function updateRandom(){
$('rand_num').update('WHAT DO I HAVE TO PUT HERE??');
}
</script>
<?php
function getRandNum(){
return rand(0,20);
}
?>
Everything in this script everything works, but I would like to call the function "getRandNum()" and paste the generated number at every button action to the div *rand_num*.
Thanks for your help!
There's a couple of ways to do this.
First, you could pass the value in directly when PHP draws the page
function updateRandom(){
$('rand_num').update('<?php echo getRandNum() ?>');
}
Second could be done via AJAX
function updateRandom(){
new Ajax.Request('/another/php/file.php', {
onSuccess: function(transport) {
$('rand_num').update(transport.responseText);
}
});
}
Just make your PHP file call that function and echo it out.

Solution for changing' img id' with 'document.getElementById' when selecting from auto generated list

Solution for changing image id when selecting from auto generated list
This code:
<?php foreach(glob('pano/*.png') as $filename):?>
<li><?php $path_parts = pathinfo ($filename); echo $path_parts['filename'], "\n";?> </li>
<?php endforeach; unset( $filename);?>
Generates a screen with a button for each of the files. The function chgpano:
function chgpano()
{
ima = document.getElementById("tonto");
init();
}
Changes the img Id assigned to variable "ima". The contents of "tonto" need to reflect the image selected.
The following cannot work, but does show the intent:
function chgpano()
{
img id="tonto" src= ('pano/'+ variable with text from button selected)
ima = document.getElementById("tonto");
init();
}
I saw a similar question but it was rejected as being unclear
Try this:
// PHP can look like
$liA = '';
foreach(glob('pano/*.png') as $f){
$path_parts = pathinfo($f);
$liA .= "<li><a href='javascript:chgpano($f)'>{$path_parts['filename']}></a></li>";
}
echo $liA;
// JavaScript can look like + some goodies
var doc = document; // get in the habit of declaring variables
function E(e){
return doc.getElementById(e);
}
var tonto = E('tonto');
function chgpano(f){
tonto.src = f;
}
I would use external JavaScript, putting the <script> tag at the bottom of the body. Alternatively, you would put the <script> tag in the <head> and run onload.
as mentioned in the comment the purpose of id in html is for one single element..
so i would use class or the new data-TAG.
to reuse the php script also for other scripts/sites i would scan the folder and convert everything to json.(simple array containing all the paths of the png's)
here is a example using javascript 1.7 (modern html5 browsers)
to handle multiple elements with one handler.
scanForPNGs.php
echo json_decode(glob('pano/*.png'));
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
img{width:100px;}
img.IMA{opacity:0.3;}
</style>
<script>
var box;
function ajax(a,b,c){c=new XMLHttpRequest;c.open('GET',a);c.onload=b;c.send()};
function display(){
box.innerHTML='<img src="'+JSON.parse(this.response).join('"><img src="')+'">';
}
function whatever(e){
e.target.classList.toggle('IMA');// activate & deactivate
//or
//e.target.dataset['IMA']=e.target.dataset['IMA']=='ON'?'OFF':'ON';
}
window.onload=function(){
box=document.getElementsByTagName('div')[0];
box.addEventListener('click',whatever,false);
ajax('scanForPNGs.php',display);
}
</script>
</head>
<body>
<div></div>
</body>
</html>
inside the whatever function you can add whatever proprieties or functions to the element that you click.
in my case i just change the opacity.
the trigger is the image itself.
i did not test this code...to be sure test it with chrome.
example
http://jsfiddle.net/8jeDS/1/
Thanks Guys & Gals. This fixed it:
<?php
foreach(glob('pano/*.png') as $filename):$path_parts = pathinfo ($filename); $id_front = $path_parts['filename'];?>
<li> <a onclick = "javascript:chgpano('<?php echo $id_front ?>')"><?php echo $id_front, "\n";?></a><img id= <?php echo $id_front ?> src= <?php echo$filename ?> style="display:none"></li>
<?php endforeach; unset( $filename);?>
As you can see I put the same variable being used to assign the image id into the function parameter.
Now the variable ima contains the img id
function chgpano(blah)
{
ima = document.getElementById(blah);
init();
}
I had to move the variable difinition out side the div otherwise the function parameter was getting filled before the variable was defined.

Categories

Resources