Jquery if page source contains

JavaScript
1

Hi,

Is it possible to check if a page’s source code contains some text and then do somthing?

Thanks

2

Not the source code per se, but you can use JavaScript to query the DOM and find out if elements are present and react accordingly.

Could you give us an example of what you are trying to do?

3

Thanks for the reply.

I have a dynamic page that I wish to modify. It contains http://www.website.com/page.asp?ref=myref in the URL. The page also contains a form which then goes to http://www.website.com/page.asp (without the ref=myref)

I am using jquery to change elements on the page based on if the URL contains the ref=myref.

For example:


if(window.location.href.indexOf("myref") > -1) {
$("body:contains(myref)").css("background-color","yellow");
}

The page without the ref=myref still has the javascript above in the source, which is the only reference to ref=myref i can think of.

Hope that makes sense

4

Ok, so where are you getting stuck?

5

I am not sure of how to add the ref=my ref to all other pages based on if the previous page does have the ref=myref.

I am quite new to javascript

6

I’m still not following.Where do you want to add ref=myref?
To the url of the page?

Or, do you want to change the url to which your form submits based on the url of the current page?

7

Yes, that is correct. Basically if the previous page has that ref, i want the further pages to have ref=myref

Something like:


if(window.location.href.indexOf("myref") > -1) {
// make all the other pages use ?ref=myref at the end of the url
}
8

How are you navigating between the pages?

9

Mainly through form buttons and links.

I thought of this:


$(location).attr('href', '?ref=myref');

But it seems to create a loop and keeps loading the page :confused:

10

Ok, so if I understand you correctly, you are landing on a specific page on your site.
Then if this page has the query string ?ref=myref in the url, then you want all of the pages viewed after that page to be styled in a different way.

The best way to go about this would be to test for the initial querystring, then to use some form of client side storage to track its state.
Local storage would be a good way to go, but if you need to support older browsers, then you’ll probably have to use cookies.

Then, when every page loads, you check the storage/cookie value and style things accordingly.

Does that make sense?

11

Yes, that is correct. The pages will remain the same, but I will use jquery to replace specific elements. It’s a strange custom built system I’m using!

How would I go about setting a cookie to carry the ref=myref though the other pages?

Thanks!

12

Well, you would use a cookie to set a variable (e.g. ref) to a value such as true or false.

I wrote a tutorial on how to persist state using cookies a while back.
There’s a demo at the end of the article, but I’ll mention it here, to make it more obvious.

Hopefully this’ll help.

13

Thanks for the tutorial.

I have had a shot at this:


$.cookie('myref', $(window.location.href.indexOf("myref") > -1).attr('?ref=myref'));

Would that work if I placed it in an if statement?

14

Try and make things a little more readable:

var containsQueryString = window.location.href.indexOf("myref") > -1;
$.cookie('myref', containsQueryString, { expires: 30, path: '/' });

That will set a cookie called myref which will contain a value of “true” or “false” (note the quotes as cookies are string-valued).

On loading subsequent pages you then do:

if ($.cookie('myref') === "true"){
  //style away
}
15

Many thanks.
I now have this, but it doesn’t seem to work :confused:


$(document).ready(function () { 
var containsQueryString = window.location.href.indexOf("myref") > -1;
$.cookie('myref', containsQueryString, { expires: 30, path: '/' });
if ($.cookie('myref') === "true"){
  //style away
  $('body').css('background', '#ff0000');
}
});

Do I need to put ?ref=myref any where?

Also, do I need to put it in the following if statement:


if(window.location.href.indexOf("myref") > -1) {

}
16

You need to set the cookie on page one:

page1.php

var containsQueryString = window.location.href.indexOf("myref") > -1;
$.cookie('myref', containsQueryString);

You need to then query the cookie on every subsequent page:

page2.php

if ($.cookie('myref') === "true"){
  $('body').css('background', '#ff0000');
}

This will mean that if you visit page1.php?ref=myref, then you go to page2.php, the body will be styled #ff0000.
However, if you visit page1.php (no query string) then page2.php, then the body won’t have the extra styling.

BTW, I removed the third parameter for $.cookie, as it is better to do this on a per session basis I would imagine.

17

I see, thanks. I’m not having much luck :confused: The pages only use one html page and the content changes dynamically via txt files. Can you think of any other ways I can get around this?

Thanks for all your help

18

One thing to mention is that in certain browsers, cookies will not work locally.
It’s best to test this on a server.

If I was you, I would start off trying to set and read values to and from a cookie.
When you have that working then progress to trying to do things based on the value present.

Failing that, if you can make a small reproducible demo for me top play around with, I don’t mind having a look at what can be done.

19

Thanks.

I was testing on a live server. I will try to put a demo together.