CODEWITHSUNDEEP
javascriptjqueryajax
kest
kest

Reputation: 25

Use one ajax call for different page and div?

I use this code to make ajax call to change the content of div in main page without reloading the page :

function ajaxcall()
{
    $.ajax({
        type: "POST",
        url: "/create.php",
        success: function( returnedData ) {
            $( '#container' ).html( returnedData );
        }
    });
}

and I call it like that :

 <p><a  onclick="ajaxcall()" >Create</a></p>

The issue is very complicated because I have to call 4 pages in the same div :

create.hmtl ; update.html; delete.html ; read.html

Also I have 2 different forms in the same page that required the same thing, I mean I should do the same thing for the second form with another div "container-1",then I have 2 div for exmaple in create.html :

create.html :

 <div id="container">
     ....
 </div>

 <div id="container-1">
     ....
 </div>

So I call create.html everytime but different div for different form, the question is to use a minimum clean code to do all what I explained above?

Edit

To explain more my problem, I have 4 options (create/update/delete/read) with 4 pages, and in every page they are 2 div and 2 contents for 2 forms, I should change div content of every option(CRUD) for every form in webpage!

form -> ajax call content -> create.html -> div:container
form-1 -> ajax call content -> create.html -> div:container-1
form-1 -> ajax call content -> update.html -> div:container-1

Upvotes: 0

Views: 4661

Answers (4)

Threadid
Threadid

Reputation: 750

Following mohamedrias' answer, if you also needed to process each alternate path in the CRUD use case differently, you can use global event handlers.

Don't handle when making the request:

$.ajax({
    type: "POST",
    url: url,
    data : data,
    success: function( returnedData ) {
    }
});

Do handle seperatley for each alternate path in CRUD

$(document).ajaxSuccess(function(event, xhr, settings) {
        var query = settings.data;
        var url = settings.url;
    if (url.match(/create.php/) && query.match(/container1/)){
           $("#container1").find(".form-1").html( xhr.responseText );
    }
});

You should also notice that the selector in my example implies that "form-1" is a Class and not an ID. IDs must be unique but Classes can occur many times.
Following this rule, if you wanted to reuse the same form for each alternate path you can do so by addressing discrete elements in the form using unique class names for each element. The container Div must have a unique ID (as you have already done). But you must give that element context by chaining the selectors to first select the div using ID and then select the element using class.

Upvotes: 1

mohamedrias
mohamedrias

Reputation: 18566

You can add those as parameters to the function and make it like below

function ajaxcall(url, data, targetDivId)
{
    $.ajax({
        type: "POST",
        url: url,
        data : data,
        success: function( returnedData ) {
            $("#"+targetDivId).html( returnedData );
        }
    });
}

For your scenario:

I assume that even the AJAX url may change as currently it's pointing to create.php. In case it's same then you can avoid tht parameter.

 <p><a  onclick="ajaxcall('/create.php', {} , 'container-1')" >Create</a></p>

 <p><a  onclick="ajaxcall('/update.php', object2 , 'container-2')" >update</a></p>

 <p><a  onclick="ajaxcall('/delete.php', object3, 'container-3')" >Delete</a></p>

Upvotes: 4

Japanish
Japanish

Reputation: 149

var xhr = new XMLHttpRequest();

xhr.onload = function(){

    var document = xhr.response;
    var container = document.getElementById('container');
    var container-1 = document.getElementById('container-1');
    console.log(container, container-1);

    // or

    // var containers = document.querySelectorAll("#container, #container-1" );
    //console.log(containers);

}

xhr.open('POST','/create.php');
xhr.setRequestHeader(
    'Content-Type', 
    'application/x-www-form-urlencoded'
);

xhr.responseType = 'document';
xhr.send();

Upvotes: -2

ztadic91
ztadic91

Reputation: 2804

If I understood it correcyly you want to provide an argument to the ajax calling function to apply the return content from "/create.php" to a different div.

function ajaxcall(id, path)
{
    $.ajax({
        type: "POST",
        url: path,
        success: function( returnedData ) {
            $("#"+id).html( returnedData );
        }
    });
}

And in html you can set the id like

 <p><a  onclick="ajaxcall(this.id, "/create.php")" >Create</a></p>

Upvotes: 0

Related Questions