0

I'm trying to import this Widget designed for JQuery in my React projet :

<script type="text/javascript" src="https://widget.mondialrelay.com/parcelshop-picker/jquery.plugin.mondialrelay.parcelshoppicker.min.js">
</script>

This widget needs JQuery to work, so i also load JQuery using Google CDN:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

The documentation is written for JQuery, and shows this example to use the widget :

HTML

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
<head>
<title>Mondial Relay Parcelshop Picker with Map</title>
<!-- JQuery required (>1.6.4) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!-- Leaflet dependency is not required since it is loaded by the plugin -->
<script src="//unpkg.com/leaflet/dist/leaflet.js"></script>
<link rel="stylesheet" type="text/css" href="//unpkg.com/leaflet/dist/leaflet.css" />
<!-- JS plugin for the Parcelshop Picker Widget MR using JQuery -->
<script src="//widget.mondialrelay.com/parcelshop-picker/jquery.plugin.mondialrelay.parcelshoppicker.min.js"></script>
</head>
<body>
<!-- HTML Element in which the Parcelshop Picker Widget is loaded -->
<div id="Zone_Widget"></div>
<!-- HTML element to display the parcelshop selected, for demo only. Should use hidden instead. -->
<input type="text" id="Target_Widget" />
</body>
</html>

JAVASCRIPT :

```
    $(document).ready(function () {  
    $("#Zone_Widget").MR_ParcelShopPicker({  
    Target: "#Retour_Widget",  
    Brand: "BDTEST  ",
    Country: "FR",   
    EnableGmap: true  
    });  
    }); 
```

I really don't know how to do it. I've tried for 3 days but i'm still blocked.

Thank you a lot for your help and i'm very sorry for my bad english.

Thanks again.

(UPDATE)

My code is :

import React, { useEffect } from 'react';

const MondialRelay = () => {


  useEffect(() => {

    const jQuery = document.createElement('script');
    jQuery.src = "//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);
      }
  });

  !function(){
    // Parameterized the widget
    $(document).ready(function () {  
      $("#Zone_Widget").MR_ParcelShopPicker({  
        Target: "#ParcelShopCode",
        Brand: "BDTEST  ",
        Country: "FR" 
      });  
    });
  }();

  return(
    <div>
     
      <div id="Zone_Widget"></div>

  </div>

  )
};

export default MondialRelay;

And the error i encounter is "$ is not defined" but this is because i try to use JQuery syntax in React and $ is never defined in my code.

I dont know how to create this div with #Zone_Widget id.

Toto
  • 89,455
  • 62
  • 89
  • 125
Simbel
  • 1
  • 1
  • what errors do you see in the browsers *developer* tools console? – Jaromanda X Jun 20 '21 at 10:09
  • Hi Jaromanda, i update my post to give you more infos and share my code. The error i encounter ($ is not defined) is because i'm trying to use JQuery syntax in a React component. – Simbel Jun 20 '21 at 10:25

1 Answers1

0

There's a typo in your script tag, you missed https:

change the URL to https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js and it should work.

As a suggestion, since you're using nodejs/npm already, you can install jquery using npm as well.

npm install jquery
Prakhar Pal
  • 178
  • 7
  • Hello, thanks for your answer. I've made the modicifations and now i have an error in my console. [Deprecation]Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. I'm now trying to make an async call the webservice . I've tried to set async=true in my script tag but still not working. – Simbel Jun 21 '21 at 14:11
  • does this help https://stackoverflow.com/questions/48257085/deprecation-synchronous-xmlhttprequest? – Prakhar Pal Jun 22 '21 at 18:41