This question already has answers here:
trimming a string within a div
(2 answers)
How can I get the data attribute from a php variable?
(2 answers)
Closed 2 years ago.
I am attempting to call a comments section through a modal, for this purpose I need to pass a unique id along with #display_comment . It works when I hard code is such as #display_comment1, #display_comment2. I need to know how to pass the value as a variable.
I am using dom-target to pass it as variable in myData1, but it wont work. The console shows #display_comment & 1 on the next line.
<div id="dom-target" style="display: none;">
<?php
echo htmlspecialchars($test['id']);
?>
</div>
var div = document.getElementById("dom-target");
var myData1 = div.textContent;
load_comment();
function load_comment()
{
$.ajax({
url:"fetch_comment.php",
method:"POST",
success:function(data)
{
$('#display_comment'+myData1).html(data);
}
})
}
The DIV includes lots of whitespace around the ID. You need to remove that with trim().
var myData1 = div.textContent.trim();
What #barmar wrote is correct. Although I would suggest a much better approach for this. Whenever you wanna "fetch" some html data to javascript (here the data is set by PHP), you can use the data attribute in html like this:
<div id="dom-target" style="display: none;" data-id="<?php echo htmlspecialchars($test['id']);?>">
<?php
echo htmlspecialchars($test['id']);
?>
</div>
See that I've set the data attribute to the div above with the id.
Now when you wanna get this id in jQuery, you can do it with $("#dom-target").data("id"); like
var myData1 = $("#dom-target").data("id");
This gives you a much better and cleaner way to fetch data from html to javascript.
Related
I am trying to organize a bunch of id tags, I would like to be able to set up a single JavaScript variable which holds all manner of interesting information. One place I would like to use it, is to set the value of an id field in an HTML tag
<script>
var messageID = { idText: "message1", other: "qwerty"};
</script>
<div id="message0">Text Zero</div>
<div id="JavaScript.messageID.idText">Text One</div> <!-- abject failure -->
So basically I want the messageID.idText value to be the id value: id="message1". Obviously the example fails in the second div line. Is there a way to do this?
Edit:
Ok, I want to be able to use the value of messageID.idText elsewhere in the system, such as
var elementTag = document.getElementById(messageID.idText);
I use the id in many places, and the more there are, the better a chance of mis-typing something. This is not a small project :-)
So I am going with:
<?php
$msgOneId = "message1";
?>
<script>
var messageID = { idText: "<?=$msgOneId?>", other: "qwerty"};
</script>
<div id="message0">Text Zero</div>
<div id="<?=$msgOneId?>">Text One</div>
and then
var elementTag = document.getElementById(messageID.idText);
works
This question already has answers here:
What is the difference between client-side and server-side programming?
(3 answers)
Closed 3 years ago.
I am working on a system that displays a product image connected to an entry in a form, to make it update automatically I'm using Javascript but it prints the literal tags instead of the variable set in javascript.
I've tried using this method to turn my Javascript variable into a php variable, but I haven't found a way to do this properly. I also let it output towards regular HTML text and that worked properly, so I'm just stuck on how to read it in the file name.
HTML/PHP:
<div style="position: relative; left: 0; top: 0;">
<img src="elements/<?php echo 'fronten/' . $serie . '-' . $front . '-Front-' . $formaat; ?>.png" id="ladefront"/>
<img src="elements/<?php echo 'kasten/' . $serie . '-' . '<script>document.writeln("kleur");</script>' . '-' . $formaat ?>.png" id="onderkast"/>
<img src="elements/<?php echo 'bladen/' . $product . '-' . $formaat ?>.png" id="wastafelblad"/>
</div>
JS:
var kleur = document.getElementById("color").value;
document.getElementById("demo").innerHTML = kleur;
}
The error it outputs is the following: GET .../kasten/NEXXT-%3Cscript%3Edocument.writeln( 403 (Forbidden) - so it puts the entire content in the file name instead of what the script is supposed to echo. My expected output is supposed to be .../kasten/NEXXT-(kleur)-60.png.
PHP is utterly irrelevant here.
You can't put an element (and that includes a <script> element) inside an attribute value.
You'd need to either generate the entire <img> element with JavaScript, or dynamically change the src attribute with JavaScript after completing the element.
This question already has answers here:
Get value of a custom attribute
(3 answers)
Closed 6 years ago.
I have this <a> href attribute
<a id="cancel" value="<?php echo $subID;?>" href="#">Cancel</a>
and I need to get its value ($subID) and assign it to a JavaScript variable. How can I do that?
Instead of using value, you should use data-value="<?php echo $subID;?>"
then you can get the value like this
var myVal = $('#cancel').data("value");
You could add the value as a custom data-attribute
HTML:
<a id="cancel" data-value="<?php echo $subID;?>" href="#">Cancel</a>
And then retrieve the value like this
JS:
$('#cancel').data('value');
You don't need jQuery. Plain JavaScript is easy enough:
Traditional:
var value = document.getElementById('cancel').getAttribute('value');
console.log(value);
<a id="cancel" value="Hello world!" href="#">Cancel</a>
Using a CSS selector:
var value = document.querySelector('#cancel').getAttribute('value');
Using jQuery
var value = $('#cancel').attr('value');
Although this works (at least in Chrome), a link doesn't have a value attribute so this HTML is invalid. If you use HTML5 (which you probably will), you can make it valid by naming the attribute 'data-value'. Attributes with the 'data-' prefix are allowed for this purpose.
There are other solutions too, but since they are out of scope here, please check Can I add custom attributes to HTML tags.
You have two ways (and more) to solve this
With jQuery:
var x= $('#cancel').val();
with JavaScript:
var x= document.getElementById("cancel").value;
This question already has answers here:
How do you parse and process HTML/XML in PHP?
(31 answers)
Closed 8 years ago.
I have a div that I want to put one image inside, how could I do something like that:
Javascript:
<script>
document.getElementById("people").innerHTML =
document.getElementById("people").innerHTML + "<img src='farmer.gif'>";
</script>
Html:
<html>
<body>
<div id = "people"></div>
</body>
</html>
in PHP? Im so fustrated I can do it in JS but I need to do it in PHP but I don't know how...
Hope you can help me! :D
Fast VERY DIRTY WAY:
do ob_start(); at the first line of the script
do echo "<div>%imag1flag%</div>";
do $content = ob_get_clean(); at the end of the script
change contnet with $content = str_replace('%imag1flag%','<img ...>',$content);
But wonder why you didnt paste the image in the first place eg:
echo "<div><img ...></div>";
Keep in Mind Javascript is Statefull PHP is NOT Statefull.
When u got that, maybe you will laugth about your Question ;)
Bye!
I seem to be having problems converting some php Regex code into Javascript Regex code. The php version works flawlessly, and it was one of our fellow users, jim tollan, that wrote the php code that inspired me to write it in javascript because I need it done on the client-side. The code pulls out content between html tags based on the specified tag attribute (id, class, etc..) and the value of that attribute.
Here is the original code by jim tollan:
<?php
function get_tag( $attr, $value, $xml ) {
$attr = preg_quote($attr);
$value = preg_quote($value);
$tag_regex = '/<div[^>]*'.$attr.'="'.$value.'">(.*?)<\\/div>/si';
preg_match($tag_regex,
$xml,
$matches);
return $matches[1];
}
$yourentirehtml = file_get_contents("test.html");
$extract = get_tag('id', 'content', $yourentirehtml);
echo $extract;
?>
And here is the javascript code I've written and embedded in html file:
<script type="text/javascript">
function get_tag(attr, value, xml) {
var attr = preg_quote(attr);
var value = preg_quote(value);
var tag_regex = new RegExp('/<input[^>]*'+attr+'="'+value+'">(.*?)<\\/label>/si');
// preg_match
xml.match(tag_regex);
}
var yourentirehtml = file_get_contents("test.html");
var extract = get_tag('id', 'custom-63', yourentirehtml);
alert(extract);
</script>
I used the functions defined at phpjs.org to define both preg_quote and file_get_contents
Here is the test.html file that I'm using:
<html>
<head>
</head>
<body>
<div id="content">
<!--content-->
<p>some content</p>
<!--content-->
</div>
<label>
<input type="radio" name="testingMethod" id="custom-63">
" Radio Button Text "
</label>
</body>
</html>
When I run the php file, it works, but when I run the javascript code, the alert box shows
undefined
I want to know if my implementation of the expression in var tag_regex is correct, and if it is, is there anything in my code that is preventing me from the yielding the results I want?
I solved this problem by scrapping the idea of using regex, and I decided to go with using the DOM. It can be done rather simply by doing this:
<script type="text/javascript">
var x=document.getElementsByTagName("label")[];
// put the index of the element within the square brackets if you have more than one with the same name
// 0 is the first index
// you can also use getElementsById or getElementsByTagName
var result = x.innerText;
// you can also do x.cell[].innerText if you have more than one item within the element you found above
// 0 is the first index, and any index number should be put within the square brackets
</script>