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
684 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
1 answer

How to load external scripts dynamically in Angular?

Hello @kartik, You can use following technique to ...READ MORE

answered Sep 8, 2020 in Web Development by Niroj
• 82,880 points
4,911 views
0 votes
1 answer

How to change the default delimiter of Handlebars.js?

Instead of changing the delimiters you can ...READ MORE

answered Dec 3, 2020 in Web Development by Niroj
• 82,880 points
973 views
0 votes
2 answers

How to verify links that open in a new tab in phpUnit?

Hey @Marium, What do you mean by "the ...READ MORE

answered Dec 14, 2020 in Web Development by Gitika
• 65,910 points
1,071 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
795 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,078 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
869 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,717 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
398 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,026 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