Jquery replaceWith:replace one php file with another php file based on screen resolution

Question

I need to be able to replace a php file with another php file based on screen resolution. This is what I have so far:

<script type="text/javascript">
function adjustStyle(width) {
width = parseInt(width);
if (width = 1920) {
$('book.php').replaceWith('book2.php');
}
}
$(function() {
adjustStyle($(this).width());
$(window).resize(function() {
adjustStyle($(this).width());
});
});
</script>

which obviously isn't working-- any ideas? Thank you in advance for any help received.

UPDATE

Is this at all close (to replace the book.php line)?

 { $("a[href*='book.php']").replaceWith('href', 'book2.php'); }; 

Second Update to reflect input gathered here

function adjustStyle(width) {
width = parseInt(width);
if (width == 1920) {
$('#bookinfo').replaceWith(['book2.php']);
$.ajax({
 url: "book2.php",
 }).success(function ( data ) {
  $('#bookinfo').replaceWith(data);
});
$(function() {
adjustStyle($(this).width());
$(window).resize(function() {
adjustStyle($(this).width());
});
});
}
}

Answer 1

I have not seen the use of replaceWith in the context you put it in. Interpreting that you want to exchange the content, you may want to do so my using the load() function of jQuery.

    if(width == 1920){
            $("#myDiv").load("book1.php");
    } else {
            $("#myDiv").load("book2.php");
    }

Clicking on the button replaces the content of the div to book2.php.

Answer 2

The first problem is I don't think that you are using the correct selectors. If you have the following container:

<div id="bookContainer">Contents of book1.php</div>

The code to replace the contents of that container should be

$('#bookContainer').replaceWith([contents of book2.php]);

In order to get [contents of book2.php] you will need to pull it in by ajax using the following code I have also included the line above so that the data from book2.php will be placed into the container:

$.ajax({
 url: "http://yoururl.com/book2.php",
 }).success(function ( data ) {
  $('#bookContainer').replaceWith(data);
});.

I haven't tested this so there might be an issue but this is the concept you need to accomplish this.

Answer 3

First off... using a conditional with a single = (equal sign) will cause the condition to always be true while setting the value of variable your checking to the value your checking against.

Your condition should look like the following...

if (width == 1920) { // do something }

Second, please refer to the jQuery documentation for how to replace the entire tag with a jquery object using replaceWith()... http://api.jquery.com/replaceWith/

I would use a shorthand POST with http://api.jquery.com/jQuery.post/ since you don't have the object loaded yet...

In short, my code would look like the following using $.post instead of $.ajax assuming I had a tag with the id of "book" that originally has the contents of book.php and I wanted to replace it with the contents of book2.php...

HTML

<div id="book">*Contents of book.php*</div>

jQuery

function onResize(width) {
    if (parseInt(width) >= 1920) {
        $.post('book2.php',function(html){
           $('#book').html(html).width(width);
        });        
    }
    else {
        $.post('book.php',function(html){
            $('#book').html(html).width(width);
        });
    }
}

Hope this helps.