CODEWITHSUNDEEP
jqueryajaxmobiledesktop
Paritosh Verma
Paritosh Verma

Reputation: 1

Why ajax is not working in mobile as in desktop?

When I receive data from server on ajax request:

(1) In desktop view <p id="productName"></p> and <p id="productPrice" ></p> values are changed (expected behaviour).

(2) In mobile view when call is complete I'm directed to the page(not expected) '/product/get' with json data output.

HTML code:

<p id="productName"></p>
<p id="productPrice" ></p>

Ajax call made:

$(".get-product").on('click', function (event) {
        event.preventDefault();
        let url = "/product/product1";
        $.ajax({
            url: url,
            method: "GET",
            success: function (data) {
                $("#productName").html(data.name);
                $("#productPrice").html("&#8377; " + data.price);
            }
        });
    });

Server side code (Nodejs):

router.get('/product/:uName', function (req, res, next) {
    productServices.get(req, req.params.uName, function (error, result) {
        if (!error) {
            res.status(200).json(result);
        } else {
            res.status(500).json({error: error});
        }
    });
});

Expected change in value of both p-tags in mobile view instead directed to a new page.

Upvotes: 0

Views: 2452

Answers (2)

Paritosh Verma
Paritosh Verma

Reputation: 1

My problem was solved by just wrapping 'click-event making ajax request' as below:

$(document).ready(function(){
     $(".get-product").on('click', function (event) {
      .....
     });
});

Upvotes: 0

Ahrimann Steiner
Ahrimann Steiner

Reputation: 1314

One of your variable seems to interfere with the route system of your project, let's try using in your ajac function : method:"POST" instead of method:"GET" and in your php file : router.post instead of router.get. See this link for more info on router.post : https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/routes

Upvotes: 1

Related Questions