I'm trying to replace the text in an header tag in a specific page by checking to see if that URL contains a unique string, then changing the header tag to another word. This is my code:
jQuery(function($) {
var hasQueryString = document.URL.indexOf(‘shop/?orderby=date’);
if (hasQueryString > 1) $(‘h1’).html(‘New’);
});
So my site is www.site.com, and when the user is on www.site.com/shop/?orderby=date, I want the text in the h1 tag to be replaced with 'new'. I'm using WordPress and trying and enqueue the script (which I'm pretty sure I've done correctly) but it's not working. What am I missing?
I suspect that you're calling this code prior to the completion of the page loading and there is no h1 node to populate with text. Or does your matched string start at char 0 or 1? why are you looking for > 1 ?
Related
In the following PHP code DOMDocument::getElementById returns the node <a name="test">instead of the node <div id="test">:
<?php
$doc = new DOMDocument();
$doc->loadHTML('<a name="test"></a><div id="test"></div>'); // triggers duplicate ID warning
echo $doc->getElementById("test")->nodeName; // outputs "a"
?>
This happens only for <a>nodes. Is this intended?
JavaScript handles it as I expected:
<script>
window.addEventListener('DOMContentLoaded', function() {
document.body.innerHTML = '<a name="test"></a><div id="test"></div>';
console.log(document.getElementById('test'));
});
</script>
EDIT (question was marked as duplicate): This question is not about wether I should use name or id and also not about using both name and id, but why PHP finds nodes with name attribute when I search for an id.
As of HTML5, the name attribute isn't supported in a tags so it looks like it's changed to an id attribute.
This is most likely a hold-over from PHP emulating old IE behaviour. In IE 7 and earlier, document.getElementById() did indeed treat name attributes on <a> elements as if they were id attributes and so would match the <a> element rather than the <div> element. IE has long since moved on, but PHP it seems, on this point, has not.
As you can read here
For HTML documents (and the text/html MIME type), the following processing model must be followed to determine what the indicated part of the document is.
Parse the URL, and let fragid be the component of the URL.
If fragid is the empty string, then the indicated part of the document is the top of the document.
If there is an element in the DOM that has an ID exactly equal to fragid, then the first such element in tree order is the indicated part of the document; stop the algorithm here.
If there is an a element in the DOM that has a name attribute whose value is exactly equal to fragid, then the first such element in tree order is the indicated part of the document; stop the algorithm here.
Otherwise, there is no indicated part of the document.
When I pasted your code to PHP sandbox I noticed an interesting warning:
I ran into an issue recently. I have a system where users can post stuff. One of the fields is the title field. So to save user input safely I use htmlspecialchars on the user submitted title and send it to a function that then saves to the database (after using mysql_real_escape)
Now on the client's side I use json get to fetch this title
$.getJSON("PHPFILE", function(json) {
// let's say json.title is the title we need so...
var title = json.title;
}
Now the thing is this user given title value can contain anything, even html tags (for reference let's say it now contains
<script>alert('');</script>Some Text!
so since I use jquery I thought of clearing those using the .text() function
var cleanTitle = $(title).text();
alert(cleanTitle);
However this immediately throws an error. In chrome it says
Uncaught Error: Syntax error, unrecognized expression ...
So I verified if this title variable is a string. And it is indeed a string. (Btw for some reason if this variable contains only numbers there is no error)
Using the following however gives me the text but the tags aren't removed
var cleanTitle = $.parseHTML(title);
cleanTitle = $(cleanTitle).text();
alert(cleanTitle);
This outputs
<script>alert('')</script>Some Text!
How can I remove all html tags? Any suggestions? I am planning to use this title text to set Browser title. Thanks.
document.title = $('<div />').append( $('<div />').html( title ).text() ).text();
Appending the string twice should fix the htmlentities issues.
Since you are using MySQL as engine to store that kind of data, you are clearly using PHP scripting. Suggestion: use PHP's strip_tag() and you are cutting "workload" for jQuery/Javascript by letting PHP do the work.
The following script has been created to test if the value of a db field has changed and if so then reload the page and if not, alert the user that the change has not happened.
The alert is just to see what is being returned by the .post function.
The auto_refresh works fine as i need it to check every 5 seconds, when the if() condition is set to '==' the page alert shows and if it is set to '!=' the page continually reloads.
jQuery.post is getting the db field data but it doesn't seem to be able to compare the 2 values correctly.
any help would be greatly appreciated, thanks
var auto_refresh = setInterval(function(){
$.post("/index.php/listen", function(data) {
if($('#slide').html() != data)
{
window.location.reload()
}
else
{
alert('its the same'+ data);
}
});
}, 5000);
EDITED
Rather than trying to parse raw data, why not pass HTML from the $.post() like:
<p>4</p>
Then the jQuery inserts the the replaces the p tag with the new version from the $.post()
because the html is passed on there is no white space and the comparison can be made correctly.
I don't think it is very safe to compare the new value with an html. Some browsers might add spaces or unwanted chars. I'd try to save the old value in an input of type hidden and use the .val() or, event better, in a variable. It depends of your scenario.
If $('#slide').html() == data
then that means that the conditional failed, it was not equal, so it showed the alert.
The problem is that the data variable might come back with a few extra white spaces. If I were you, I'd try to parse a small section of the data variable, and a small section of the html in slider and compare those values.
Like if slider has something within a p tag or an input value, compare it to the data to see if it has that same value returned in that p tag or input value, then replace all the whitespaces with an empty string just to be safe.
Btw, try not to use alerts since you can't really know for sure if there is an extra whitespace. Try to use something like "debugger" if using IE with visual studios, or console.log when using chrome or firefox.
You are comparing two html strings: one is serialized from the DOM, and another is from a server response.
There's no guarantee that the two strings will ever be the same! Think about it: the same rendered html can have many string differences. E.g. click and click are both the same HTML, but different strings.
You can take two different approaches here:
You can create some kind of canonicalization routine that guarantees that two html fragments you consider "the same" will have the same string form. Run both html fragments through this routine, then compare.
You can manage versions more explicitly.
Include some kind of version indicator:
You can use the ETAG header (which means you can take advantage of http caching mechanisms).
You can include some kind of version number in the html itself (maybe in a data-version attribute), and compare those.
You can keep the html string from your server separately and compare against that.
What I want to do:
I have a div with an id. Whenever ">" occurs I want to replace it with ">>". I also want to prefix the div with "You are here: ".
Example:
<div id="bbp-breadcrumb">Home > About > Contact</div>
Context:
My div contains breadcrumb links for bbPress but I'm trying to match its format to a site-wode bread crumb plugin that I'm using for WordPress. The div is called as function in PHP and outputted as HTML.
My question:
Do I use PHP of Javascript to replace the symbols and how do I go about calling the contents of the div in the first place?
Find the code that's generating the <, and either set the appropriate option (breadcrumb_separator or so) or modify the php code to change the separator.
Modifying supposedly static text with JavaScript is not only a maintenance nightmare, extremely brittle, and might lead to a strange rendering (as users see your site being modified if their system is slow), but will also not work in browsers without (or with disabled) JavaScript support.
You could use CSS to add the you are here text:
#bbp-breadcrumb:before {
content: "You are here: ";
}
Browser support:
http://www.quirksmode.org/css/beforeafter_content.html
You could change the > to >> with javascript:
var htmlElement = document.getElementById('bbp-breadcrumb');
htmlElement.innerHTML = htmlElement.innerHTML.split('>').join('>>').split('>').join('>>')
I don't recommend altering content like this, this is really hacky. You'd better change the ouput rendering of the breadcrumb plugin if possible. Within Wordpress this should be doable.
you can use a regex to match the breadcrumb content.. make the changes on it.. and put it back in the context..
check if this helps you:
$the_existing_html = 'somethis before<div id="bbp-breadcrumb">Home > About > Contact</div>something after'; // let's say this is your curreny html.. just added some context
echo $the_existing_html, '<hr />'; // output.. so that you can see the difference at the end
$pattern ='|<div(.*)bbp-breadcrumb(.*)>(.*)<\/div>|sU'; // find some text that is in a div that has "bbp-breadcrumb" somewhere in its atributes list
$all = preg_match_all($pattern, $the_existing_html, $matches); // match that pattern
$current_bc = $matches[3][0]; // get the text inside that div
$new_bc = 'You are here: ' . str_replace('>', '>>', $current_bc);// replace entity for > with the same thing repeated twice
$the_final_html = str_replace($current_bc, $new_bc, $the_existing_html); // replace the initial breadcrumb with the new one
echo $the_final_html; // output to see where we got
I have some multi line text saved in MySql database (VARCHAR 255). When i load it, and process it using standard php function "nl2br", it echoes fine (multi line). But, when i load multi line text from database, make it "nl2br" and then send it to javascript (so it gets displayed in textarea), it won't be displayed! What's wrong?
echo "<SCRIPT>FillElements('".$subject."','".$text."');</SCRIPT>";
P.S.
FillElements function:
function FillElements(Sub,Txt)
{
document.getElementById('txtSubject').value=Sub;
document.getElementById('txtMessage').value=Txt;
}
textareas don't actually store the contents in an attribute like value in the same manner as input elements. They actually store the contents in in between the <textarea> and </textarea> tags. Meaning that the contents is actually treated as CDATA in the document.
<textarea>
This is my Content
</textarea>
Produces a text area with "This is my Content" as the contents.
The implication of this is that you cannot use the code you have to alter the contents of a textarea. You have to alter the innerHTML property of the textarea. I have set up a simple example here:
http://jsfiddle.net/wFZWQ/
As an aside, since you are populating the fields using PHP on the creation of the page, why not merely fill the data in the HTML markup, this seems like a long way round to do it.
Also, since you don't appear to be using it, have you seen [jQuery][1] it abstracts alot of things out, so instead of typing document.getElementById("the_id") to get an element you can use CSS selectors and merely write $("#the_id") to get the same element. You also get a load of useful functions that make writing javascript mucxh easier.
[1]: http://jquery.com jQuery
Newline tags (<br />) don't cause actual new lines in <textarea>.
You can pass the "real" newlines (\n) to your <textarea>, though.
I created a fiddle for that.
EDIT: For the updated FillElements code:
$subject = "String\nWith\nMultiple\nLines";
printf('<script type="text/javascript">FillElements(%s)</script>',
json_encode($subject)
);
My guess is that your HTML source code looks like this:
<script>FillElements("foo","foo
bar
baz");<script>
Correct?
In JavaScript, strings cannot span multiple lines...