How to user Jquery s Plugin Mondial relay in react js properly

0 votes

I am a MERN Developer trying to implement Jquery's Plugin "Mondial Relay" in my react app for a big size project on client's demand. But the problem is that the plugin is NOT working in react app and giving error

MR_ParcelShopPicker is not a function

while it works on developer tools' console

I've prepared a codesandbox for this

I have also includes mondial relay's script in Index.html

<body>
    <noscript>
        You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
    
    <script src="https://widget.mondialrelay.com/parcelshop-picker/jquery.plugin.mondialrelay.parcelshoppicker.min.js"></script>

</body>


the code is :

const MondialRelay = () => {
  useEffect(() => {
    const jQuery = document.createElement("script");
    jQuery.src =
      "https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js";
    jQuery.async = "true";

    document.body.appendChild(jQuery);

    return () => {
      document.body.removeChild(jQuery);
    };
  });

  useEffect(() => {
    const scriptMr = document.createElement("script");
    scriptMr.src =
      "https://widget.mondialrelay.com/parcelshop-picker/jquery.plugin.mondialrelay.parcelshoppicker.min.js";
    scriptMr.async = "true";

    document.body.appendChild(scriptMr);

    return () => {
      document.body.removeChild(scriptMr);
    };
  });

  const call = () => {
    try {
      /* Run this on developer tools console
      Mondial Relay Dialog will be shown
        $("#Zone_Widget").MR_ParcelShopPicker({
        Target: "#ParcelShopCode",
        Brand: "BDTEST  ",
        Country: "FR"
      });


      */
      $("#Zone_Widget").MR_ParcelShopPicker({
        Target: "#ParcelShopCode",
        Brand: "BDTEST  ",
        Country: "FR"
      });
    } catch (err) {
      console.log(`err`, err);
    }
  };

  (function () {
    // Parameterized the widget
    try {
      call();
    } catch (err) {
      console.log(`err`, err);
    }
  })();

  return (
    <div>
      <Button variant="contained" onClick={call}>
        Call
      </Button>
      <div id="Zone_Widget"></div>
      <div id="ParcelShopCode"></div>
    </div>
  );
};

Aug 8, 2022 in Web Development by gaurav
• 23,260 points
1,022 views

2 answers to this question.

0 votes

Import them (along with jQuery) into the file where your component would be.

import $ from 'jquery';
import './css/jCirclize.css';
import './js/jCirclize.js';

We create a new component called <Percentage/> and arrange the code for using a jQuery plugin similar to what is documented in React's official site here. The plugin is destroyed inside the componentWillUnmount() method, which happens whenever the user moves away from the component. There is a callback ref referencing the <div> element.

Also read: How To Use jQuery with React.js Properly

answered Aug 8, 2022 by rajatha
• 7,680 points
0 votes
Hi, have you found a solution?

I'm facing the same issue.

Thanks,

Kévin
answered Nov 30, 2022 by Kévin

Related Questions In Web Development

0 votes
0 answers

How to upload a file to api server in node js?

How to upload a file to api ...READ MORE

Oct 14 in Web Development by anonymous
• 1,720 points
44 views
0 votes
0 answers

How To Implement Caching in Node.js Using Redis?

How To Implement Caching in Node.js Using ...READ MORE

Oct 21 in Web Development by Nidhi
• 1,720 points
56 views
0 votes
0 answers

How to upload a file to api server in node js?

How to upload a file to api ...READ MORE

Oct 21 in Web Development by Nidhi
• 1,720 points
59 views
0 votes
1 answer

From php returning JSON to JavaScript

Hii @kartik, You can use Simple JSON for PHP. ...READ MORE

answered Jun 5, 2020 in Java-Script by Niroj
• 82,880 points
1,007 views
0 votes
1 answer

How to use JQuery with ReactJS

Yes, we can use jQuery in ReactJs. ...READ MORE

answered Jun 22, 2022 in Web Development by rajatha
• 7,680 points

edited Dec 15, 2023 by Soumya 14,704 views
0 votes
1 answer

Unsure how to turn this jQuery code to React

You can initialize a state for navTrigger whic tell ...READ MORE

answered Aug 5, 2022 in Web Development by rajatha
• 7,680 points
1,083 views
0 votes
1 answer

How can I remove a port from url for node app using nginx

If you run your node server on ...READ MORE

answered Apr 10, 2018 in DevOps on Cloud by ajs3033
• 7,300 points
3,995 views
0 votes
1 answer

How to place images using jQuery masonry plugin to start

You were just missing a css class that adjusts ...READ MORE

answered Jun 22, 2022 in Web Development by rajatha
• 7,680 points
538 views
0 votes
1 answer

how to use substr() function in jquery?

To get substring of a string in ...READ MORE

answered Jun 27, 2022 in Web Development by rajatha
• 7,680 points
1,243 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP