I'm trying to adjust a page to be more responsive. I have created 2 divs - one for mobile resolution and one for screens resolution.

I have a form in each of them which should get data from db using ajax. Each div contains the same elements :form, inputs and submit button.

I need to detach one of the divs in each resolution for the ajax request to work because otherwise - the request could not handle 2 elements with the same name and classes....

I've tried to work it out in css using display:none - but still - the element appears.

What I wish to achieve is detaching the ( mobile ) and attaching another instead.

I need something like this :

var screen = $('#screen');
var mobile = $('#mobile');

    if ($(window).width() > 916) {

        $('#screen').detach();
        $('#mobile').append('.container');//this won't work

    }
    else {
        $('#mobile').detach();
        $('#screen').append('.container');//this won't work

    }

Here is my base layout. Fidddle

<script type="text/javascript" src=".1.1.min.js"></script>
<link rel="stylesheet" type="text/css" href=".3.7/css/bootstrap.min.css">
<script type="text/javascript" src=".3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href=".7.0/css/font-awesome.min.css">

<div class="container col-md-12">

  <div id="mobile" class="col-md-12">

    <form class="form_filter" action="" method="post">
      <div data-provide="datepicker" class="input-group date has-feedback">
        <div class="input-group-addon"><i class="fa fa-calendar"></i>
        </div>
        <input id="date_customFrom" type="text" placeholder="From date" name="date_customFrom" class="form-control filter_dates" /><span class="form-control-feedback"></span>
      </div>
      <div data-provide="datepicker" class="input-group date has-feedback">
        <div class="input-group-addon"><i class="fa fa-calendar"></i>
        </div>
        <input id="date_customTo" type="text" data-toggle="tooltip" placeholder="To date" name="date_customTo" class="form-control filter_dates" /><span class="form-control-feedback">        </span>
      </div>
      <button type="submit" class="submit btn btn-primary btn-block">Submit</button>
    </form>

  </div>

  <div id="screen" class="col-md-12">

    <form class="form_filter" action="" method="post">
      <div data-provide="datepicker" class="input-group date has-feedback">
        <div class="input-group-addon"><i class="fa fa-calendar"></i>
        </div>
        <input id="date_customFrom" type="text" placeholder="From date" name="date_customFrom" class="form-control filter_dates" /><span class="form-control-feedback"></span>
      </div>
      <div data-provide="datepicker" class="input-group date has-feedback">
        <div class="input-group-addon"><i class="fa fa-calendar"></i>
        </div>
        <input id="date_customTo" type="text" data-toggle="tooltip" placeholder="To date" name="date_customTo" class="form-control filter_dates" /><span class="form-control-feedback">        </span>
      </div>
      <button type="submit" class="submit btn btn-primary btn-block">Submit</button>
    </form>

  </div>
</div>

I'm trying to adjust a page to be more responsive. I have created 2 divs - one for mobile resolution and one for screens resolution.

I have a form in each of them which should get data from db using ajax. Each div contains the same elements :form, inputs and submit button.

I need to detach one of the divs in each resolution for the ajax request to work because otherwise - the request could not handle 2 elements with the same name and classes....

I've tried to work it out in css using display:none - but still - the element appears.

What I wish to achieve is detaching the ( mobile ) and attaching another instead.

I need something like this :

var screen = $('#screen');
var mobile = $('#mobile');

    if ($(window).width() > 916) {

        $('#screen').detach();
        $('#mobile').append('.container');//this won't work

    }
    else {
        $('#mobile').detach();
        $('#screen').append('.container');//this won't work

    }

Here is my base layout. Fidddle

<script type="text/javascript" src="https://code.jquery./jquery-3.1.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn./font-awesome/4.7.0/css/font-awesome.min.css">

<div class="container col-md-12">

  <div id="mobile" class="col-md-12">

    <form class="form_filter" action="" method="post">
      <div data-provide="datepicker" class="input-group date has-feedback">
        <div class="input-group-addon"><i class="fa fa-calendar"></i>
        </div>
        <input id="date_customFrom" type="text" placeholder="From date" name="date_customFrom" class="form-control filter_dates" /><span class="form-control-feedback"></span>
      </div>
      <div data-provide="datepicker" class="input-group date has-feedback">
        <div class="input-group-addon"><i class="fa fa-calendar"></i>
        </div>
        <input id="date_customTo" type="text" data-toggle="tooltip" placeholder="To date" name="date_customTo" class="form-control filter_dates" /><span class="form-control-feedback">        </span>
      </div>
      <button type="submit" class="submit btn btn-primary btn-block">Submit</button>
    </form>

  </div>

  <div id="screen" class="col-md-12">

    <form class="form_filter" action="" method="post">
      <div data-provide="datepicker" class="input-group date has-feedback">
        <div class="input-group-addon"><i class="fa fa-calendar"></i>
        </div>
        <input id="date_customFrom" type="text" placeholder="From date" name="date_customFrom" class="form-control filter_dates" /><span class="form-control-feedback"></span>
      </div>
      <div data-provide="datepicker" class="input-group date has-feedback">
        <div class="input-group-addon"><i class="fa fa-calendar"></i>
        </div>
        <input id="date_customTo" type="text" data-toggle="tooltip" placeholder="To date" name="date_customTo" class="form-control filter_dates" /><span class="form-control-feedback">        </span>
      </div>
      <button type="submit" class="submit btn btn-primary btn-block">Submit</button>
    </form>

  </div>
</div>

• javascript
• jquery
• html
• css

• It would seem more applicable to use a responsive stylesheet than it would be to hack the DOM around on resizing the window. Also, the two versions of your form seem identical? If you do want to follow on with the pattern you have, I'd suggest just using show() and hide() instead of adding or removing entire elements. – Rory McCrossan Commented Nov 30, 2016 at 14:29
• I'm assuming this code is inside a resize event handler? – Carl Edwards Commented Nov 30, 2016 at 14:29
• if both contain the same data and elements why you need two ?? why not just change the styles with CSS mediaqueries? – DaniP Commented Nov 30, 2016 at 14:30
• Carl Edwards - I did tried it for start but it's not working - the problem is with attaching the elements.... – RoyBar Commented Nov 30, 2016 at 14:31
• To make this work you need to use appendTo('.container'), not append() and also run the code within a $(window).resize() event handler: jsfiddle/RoryMcCrossan/v05okx2q/4. I'm not going to add this as an answer though, because frankly it's an atrocious solution to the problem. You should really use CSS as @CarlEdwards answer shows you – Rory McCrossan Commented Nov 30, 2016 at 14:35

4 Answers 4

Going by your attempted code, you need to use the cached versions you store to the variables

var screen = $('#screen');
var mobile = $('#mobile');

if ($(window).width() > 916) {

    $('#screen').detach();
    mobile.appendTo('.container'); //this should now work
}
else {
    $('#mobile').detach();
    screen.appendTo('.container'); //this should now work
}

But you should really approach this through CSS and media queries.
(Your code as it currently stands has issues in that it contains duplicate IDs in the HTML, and is pointless since both forms are identical)

You could go pure CSS via media queries:

#mobile {
  display: none;
}

@media (max-width: 916px) {
  #screen {
    display: none;
  }

  #mobile {
    display: block;
  }
}

The best solution would be, being the <form> elements identical, to keep only one of them and change the css for the mobile version with

@media (max-width: 916) {
   form input {
      /* your input css for mobile version */
   }
}

so that you can manage all the dimensions of devices you want.

But, if you must use 2 different <form> elements, as pointed out by @Carl Edwards, you shoul be able to hide one of them with no problem in submission of data.

If you are having trouble getting the data because you get all data contained in the page you can try with something like

$('form').submit(function(){ var data = $(this).serialize(); }

or, if you have a function in which you get the $('form') directly, use $('form:visible')

If you absolutely need to detach your elements, go with

var screen = $('#screen').detach();
var mobile = $('#mobile').detach();

if ($(window).width() > 916) {

    $('#screen').detach();
    $('.container').append(mobile);

}
else {
    $('#mobile').detach();
    $('.container').append(screen);

}

FIDDLE

var screen = $('#screen');
var mobile = $('#mobile');

if ($(window).width() > 916) {

  $('#screen').detach(); //only remove #screen element from the html
  //$('#mobile').append('.container'); //this won't work

} else {
  $('#mobile').detach(); //only remove #mobile element from the html
  //$('#screen').append('.container'); //this won't work

}

I have mented the view with the relevant display here. You do not need to call .append() as the html is initially loaded with both the sections (screen as well as the mobile section). Only after the javascript has calculated the screen width will the relevant section be detached. So out of the 2 sections in the html which e from the server, you only need to .detach() the relevant section. Hope it helps