Making a function affect a element in another page

Question

I made a function that is invoked for the lack of better words from a page, lets call it Page1, the function is called when a button is clicked, at the end of said function it calls another one that creates (or should seeing I haven't been able to test it) a html and appends it to a div with a #lista id.

The problem is that this div is another page (Page2), so I don't know if there is some syntax like in ajax where you specify where you want those values to go, so basically page 1 calls a function (on another file just in case) that function calls another and the result of that function goes on Page1 (another file, again just in case)

Here is my jQuery/JS code to further illustrate:

$("#btnAceptar").click(function() {
   var idlab = $('#txtNumLab').val(),
   capacidad = $('#txtCapacidad').val(),
   carrera = $('#txtCarrera').val(),
   ubicacion = $('#txtUbicacion').val();


  var request = $.ajax({
    url: "includes/functionsLabs.php",
    type: "post",
    data: {

     'call': 'addLab',
     'pIdLab':idlab,
     'pCapacidad':capacidad,
     'pCarrera':carrera,
     'pUbicacion':ubicacion},

    dataType: 'json',

      success: function(response){
        alert('exito')

    agregar();        

     }
  });
});

This function should affect a element with id #Lista on Page2.

function agregar(){

 var div = $( "#lista" ).append( "<div class='box'>
          <p>Lab #'numero'</p>                                  
          <p class='info'><a href='#' id='lnkInfo'>Info</p></a>
          <p class='info'><a href='reservarLab.html'>Reservar</p></a>
      </div>" );



div.id = querySelectorAll('#lista > div').length +1;
var numero = div.id;  
$('#numero').append(div); 


}

Thanks a lot in advance!

Another page as in another tab/window, or in a page that the user would end up navigating to? — Patrick Evans, Apr 11 '14 at 18:40
Possible duplicate: http://stackoverflow.com/questions/7709289/how-to-pass-javascript-object-from-one-page-to-other — Marc Kline, Apr 11 '14 at 18:41
@PatrickEvans, the other page is another file the function is called on Page1.php and the second function is meant to affect a element in a Page2.php. Both of those are in the same folder and are part of the same whole. — Code Grasshopper, Apr 11 '14 at 18:53
@marck, I'll go and check it but mine isn't an object but a function. Amarite? — Code Grasshopper, Apr 11 '14 at 18:54
A function is an object! But don't get too caught up in these distinctions... I think that article will present you with options to do what you're looking to regardless of how its presented. — Marc Kline, Apr 11 '14 at 19:11
@marck Alright I will check it out and see how it goes. Damn being a begginer sucks the curve is brutally steep... — Code Grasshopper, Apr 11 '14 at 19:23
I have tried everything but to no avail, hell I don't even know if my jQuery append code is right anymore. — Code Grasshopper, Apr 11 '14 at 21:25
There's no reason one of those methods shouldn't work for you. Key-value storage is especially flexible and should allow to you to mostly anything you're looking for, provided you can let go of old IE versions ( http://caniuse.com/namevalue-storage ). For example, you could have page 1 set a local value and have page 2 poll the same key/value (they share storage on the same domain) for changes periodically. A detected update could then trigger DOM manipulation utilizing the value in store. I suggest reading into session storage in HTML5 while thinking creatively about your problem. — Marc Kline, Apr 11 '14 at 21:41
@marck I will read more and further try with the option you say, seein I don't know anything of that it may be tricky but at least I got a lead. If nothing else this will build up my skills =P — Code Grasshopper, Apr 11 '14 at 21:55

score 1 · Accepted Answer · answered Jul 15 '14 at 09:44

Yes you can get content from another page using jQuery:

Ajax request gets the entire file, but you can filter the content once it's retrieved:

$.ajax({
   url:href,
   type:'GET',
   success: function(data){
       $('#content').html(  $(data).find('#IDofDivToFind') );
   }
});

Second Approach (Untested)

You can use JQuery .load() method:

$( "#content" ).load( "ajax/test.html div#content" );

Reference:

http://api.jquery.com/load/

Making a function affect a element in another page

1 Answers1