Category: javascript

I’m wondering if you could help with this one. After invoking stream request I would like to get a responses in console. My responses:

I’ve tried doing this

var jsonData = pm.responses.messages.all();
console.log(jsonData);

Unfortunately, I am getting “No logs yet”

Thanks for help very

I have code currently where I can output the value inside the selected checkboxes:

<button name="save_multicheckbox" class="btn-primary" onClick="getCheckbox()">Save Checkbox</button>


function getCheckbox() {
    var checks = document.getElementsByClassName('checks');
    var id_value = '';

    for ( i=0; i<4; i++) {
        if (checks[i].checked === true){
            id_value += checks[i].value + " ";
            title_value += checks_title[i].value + " ";

        }
    }

    alert(id_value);
}


            <?php foreach($result as $res){
                    ?><tr>
                        <td><h6><?php echo $res->id_num; ?></h6></td>
                        <td><h6 class="checks-title"><?php echo $res->title; ?></h6></td>
                        <td id="h-center" class="checks-type">
                            <?php if ($res->eh_type == 'post') {
                                     echo '<h6 id="color-p">POST</h6>'; 
                                  } else if ($res->eh_type == 'tribe_events') { 
                                     echo '<h6 id="color-e">EVENT</h6>'; }
                            ?>
                        </td>
                        <td id="h-center"><h6 class="checks-date"><?php echo $res->eh_date; ?></h6></td>
                        <td><h6 class="checks-url"><a href="https://ioc-westpac.org/event/training-on-coral-larval-reseeding/"><?php echo $res->slug; ?></a></h6></td>
                        <td id="h-center"><input type="checkbox" class="checks" name="ckb" value ="<?php echo $res->id_num; ?>" onclick="chkcontrol(<?php echo $res->chkbox_num; ?>)"></td>
                    </tr>
                    <?php
                } ?>

as you can see below, the getCheckbox() function works when I get the value from the checkbox (output with alert)

what I want to do now is to also output the rest of the row info using still using the getCheckbox() function, what can I add?

I work on web application Blazor server side . I get error when apply session timeout reach to 20 minute then application will redirect to login page .

error happen on this block of code

  services.AddSession(options =>
        {
            options.IdleTimeout = TimeSpan.FromMinutes(20);
        });
    services.AddScoped<ISession>(_ => _.GetRequiredService<IHttpContextAccessor>().HttpContext.Session);

error

Category: Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost
EventId: 111
SpanId: b5f359c71bdf98dd
TraceId: 55c402b51115a74fe957d0762f8e004f
ParentId: 0000000000000000
RequestId: 800002a3-0000-f500-b63f-84710c7967bb
RequestPath: /_blazor
TransportConnectionId: GD0qeN4kpoisoFqdq7Lm_Q

Unhandled exception in circuit 'fsJjR_i80e4-G8BcnIas7mkmnqTlTY5vpTXVNEzo_Rg'.

Exception: 
System.NullReferenceException: Object reference not set to an instance of an object.
   at UC.AppRepository.UI.Startup.<>c.<ConfigureServices>b__4_1(IServiceProvider _) in D:test repositoryBackupBlazorUC.AppRepository.UIStartup.cs:line 67
   at Microsoft.Extensions.DependencyInjection.ServiceLookup.CallSiteRuntimeResolver.VisitCache(ServiceCallSite callSite, RuntimeResolverContext context, ServiceProviderEngineScope serviceProviderEngine, RuntimeResolverLock lockType)
   at Microsoft.Extensions.DependencyInjection.ServiceLookup.CallSiteRuntimeResolver.VisitScopeCache(ServiceCallSite callSite, RuntimeResolverContext context)
   at Microsoft.Extensions.DependencyInjection.ServiceLookup.CallSiteVisitor`2.VisitCallSite(ServiceCallSite callSite, TArgument argument)
   at Microsoft.Extensions.DependencyInjection.ServiceLookup.CallSiteRuntimeResolver.Resolve(ServiceCallSite callSite, ServiceProviderEngineScope scope)
   at Microsoft.Extensions.DependencyInjection.ServiceLookup.DynamicServiceProviderEngine.<>c__DisplayClass2_0.<RealizeService>b__0(ServiceProviderEngineScope scope)
   at Microsoft.Extensions.DependencyInjection.ServiceProvider.GetService(Type serviceType, ServiceProviderEngineScope serviceProviderEngineScope)
   at Microsoft.AspNetCore.Components.ComponentFactory.<>c__DisplayClass7_0.<CreateInitializer>g__Initialize|1(IServiceProvider serviceProvider, IComponent component)
   at Microsoft.AspNetCore.Components.ComponentFactory.PerformPropertyInjection(IServiceProvider serviceProvider, IComponent instance)
   at Microsoft.AspNetCore.Components.ComponentFactory.InstantiateComponent(IServiceProvider serviceProvider, Type componentType)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.InstantiateChildComponentOnFrame(RenderTreeFrame& frame, Int32 parentComponentId)
   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InitializeNewComponentFrame(DiffContext& diffContext, Int32 frameIndex)
   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InitializeNewSubtree(DiffContext& diffContext, Int32 frameIndex)
   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InsertNewFrame(DiffContext& diffContext, Int32 newFrameIndex)
   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForRange(DiffContext& diffContext, Int32 oldStartIndex, Int32 oldEndIndexExcl, Int32 newStartIndex, Int32 newEndIndexExcl)
   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.ComputeDiff(Renderer renderer, RenderBatchBuilder batchBuilder, Int32 componentId, ArrayRange`1 oldTree, ArrayRange`1 newTree)
   at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment, Exception& renderFragmentException)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()

details

I apply session timeout after 20 minutes

1 – create js on wwwroot/js file have function checkSessionTimeout

function checkSessionTimeout(currentUrl) {
    var sessionTimeout = 20 * 60 * 1000; // 2 minutes in milliseconds
    var lastActivity = new Date(Date.parse(sessionStorage.getItem("LastActivity"))); // get the last activity time from the client-side session
  
    if (new Date() - lastActivity > sessionTimeout) {
        /*console.log("reach 2 minutes")*/
        


sessionStorage.clear(); // clear the session storage

} 
else 
{
    setTimeout(function () { checkSessionTimeout(currentUrl); }, 1000); // check again in 1 second
    }
    
    }

checkSessionTimeout(window.location.href);

2 – on page.razor

@inject ISession Session;
protected override void OnInitialized()
{
DateTime now = DateTime.Now;
string nowString = now.ToString("yyyy-MM-ddTHH:mm:ss");
JS.InvokeVoidAsync("sessionStorage.setItem", "LastActivity", now);

}

3 – after component load call function checkSessionTimeout

protected override async Task OnAfterRenderAsync(bool firstRender)
{

var lastActivity = Session.GetInt32("LastActivity");

if ( TimeSpan.FromTicks(DateTime.Now.Ticks - lastActivity.Value) < TimeSpan.FromMinutes(20))
{
    navigationManager.NavigateTo("/Login/Login");
    return;
}
}

4- on _host file on last line on body
I add the following :

<script src="~/assets/js/checksessiontimeout.js"></script>

5-on startup class

public void ConfigureServices(IServiceCollection services)
        {
            
    services.AddHttpContextAccessor();
    services.AddHttpClient();
    services.AddRazorPages();
    services.AddServerSideBlazor();
    services.AddSession();
    services.AddSession(options =>
    {
        options.IdleTimeout = TimeSpan.FromMinutes(20);
    });
services.AddScoped<ISession>(_ => _.GetRequiredService<IHttpContextAccessor>().HttpContext.Session); line 67 that give me error 
}

So How to solve or prevent this error from happen ?

Can someone please explain me about structured string and also share some resources. Please help me by giving some examples of it too?

I have tried googling the term but could not find anything.

i want to create a fake API using json-sever of typicode with database i created myself, i have done CRUD tasks with web, but now i need an API to do those tasks and send changes to db file .json.
For example, if I add a string of text and characters on the web, the same string will be added in the database, and when I delete it, the database will also delete it.
here is my project github link: https://github.com/HoanggLB2k2/Fake_API_1

i’m newbie and i want to try to create my own fakeAPI but it seems to be quite difficult, and i need it right away so please help me

I have this [id] component in next.js, which is getting its content based on pathname, I had it in react.js but I have to write it in next.js , am generating metadata in layout.js and this is my client side page.js component(am using APP directory):

const isClient = typeof window !== 'undefined'
   const [locationChange , setLocationChange] = useState( window.location.pathname)
   
  //const id = 
  const [id, setId] = useState((window.location.pathname).substring(1))
  // const [id, setId] = useState(isClient && (window.location.pathname).substring(1))
   //console.log(id)

  const [api, setApi] = useState({})

  const [parent, setParent] = useState()
  const [istoriebi, setIstoriebi] = useState({})
  const [prescentri, setPrescentri] = useState({})
  const [exactParent, setExactParent] = useState([])
  const [itself, setItself] = useState([])
  const [width, setWidth] = useState(10)
  const language = 1;
  const ref = useRef(null)


   console.log(id)
  useEffect(() => {
    const link = 'https://mywebsite.com/api/site_menu1.php';
    fetch(link)
      .then((response) => response.json())
      .then((data) => {
        
        setPrescentri(data.menu)
        Object.entries(data.menu).map((item, index) => {
          //console.log(item[1])
           
          if (id && item[1].slug == id) {
            console.log(item[1])
            setApi(item[1].content_id)
            setParent(item[1].parent_id)

             console.log('aqamde2')
            const apiLink = `https://mywebssite.gov.ge/api/get_content.php?content_id=${item[1].content_id}`
            fetch(apiLink)
              .then((res) => res.json())
              .then((dat) => {
                setIstoriebi(dat)
                Object.entries(data.menu).map((qveitem, index) => {
                  if (qveitem[1].cat_id == item[1].parent_id) {
                      console.log('აქამდე3')
                    setExactParent(qveitem)
                    setItself(item)
                  }
                })
              })
          }

        })
      
      });

  }, [id , locationChange])

problem is that states are getting updated too late(1 update later), by that I mean that if I am currently at page 1 , and I go to page 2, content of page 2 is still of page 1, and after that if I go to page 3 , content of it is page 2;
I tried a lot of things but I can not find solution yet, any ideas?

I have a react app and I want to prevent the user refresh the page and ask him if he is sure he wants to refresh the page.

This is my useEffect hook:

  useEffect(() => {

const unloadCallback = (event) => {
  event.preventDefault();
  event.returnValue = "";
  return "";
};

window.addEventListener("beforeunload", unloadCallback);
return () => window.removeEventListener("beforeunload", unloadCallback);
}, []);

The main problem is that I can’t edit the default message of the modal that appears on refreshing the page and this event is triggered on closing the tab too.

How can I change the message and stop asking for confirmation on closing the tab or is there a way to add a custom modal from scratch instead using the browser modal?

in chart.js once the user clicks on a portion of the doughnut. Giving a fixed point, which has an angle of 180 degrees, the pie should align itself pointing the clicked section towards that fixed point.
in this case i found one working behaviour pie chart which is created by Highcharts,
my question is can we convert this same behaviour in chart.js with doughnut??

Highcharts link: example

> // expecting this rotation functionality with doughnut chart in chart.js
startAngle: -startAngle + 180 - ((clickPoint.percentage/100.0 * 360.0)/2)

I am getting this error while running the code.
User memory limit exceeded Error
I Don’t know how to solve this…Pls if someone can help
Here’s the code link:

https://code.earthengine.google.com/a678ef5d05fd827a0cd31f930e0f82ff

The code is not running

I have setup the Node.js v19.3.0 with MySQL 5.7.41 using docker 20.10.14, build a224086

I have written the connection code in the script.js file but when I hit npm start then after 8-10 seconds it causes connection close error as below

Error: Connection lost: The server closed the connection. at Protocol.end (/home/kishan/node-api-demo/node_modules/mysql/lib/protocol/Protocol.js:112:13) at Socket.<anonymous> (/home/kishan/node-api-demo/node_modules/mysql/lib/Connection.js:94:28) at Socket.<anonymous> (/home/kishan/node-api-demo/node_modules/mysql/lib/Connection.js:526:10) at Socket.emit (node:events:525:35) at endReadableNT (node:internal/streams/readable:1359:12) at process.processTicksAndRejections (node:internal/process/task_queues:82:21) -------------------- at Protocol._enqueue (/home/kishan/node-api-demo/node_modules/mysql/lib/protocol/Protocol.js:144:48) at Protocol.handshake (/home/kishan/node-api-demo/node_modules/mysql/lib/protocol/Protocol.js:51:23) at Connection.connect (/home/kishan/node-api-demo/node_modules/mysql/lib/Connection.js:116:18) at Object.<anonymous> (/home/kishan/node-api-demo/config/server.js:79:5) at Module._compile (node:internal/modules/cjs/loader:1218:14) at Module._extensions..js (node:internal/modules/cjs/loader:1272:10) at Module.load (node:internal/modules/cjs/loader:1081:32) at Module._load (node:internal/modules/cjs/loader:922:12) at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:82:12) at node:internal/main/run_main_module:23:47 { fatal: true, code: 'PROTOCOL_CONNECTION_LOST' }

I have created the docker-compose.yml and script.js files below.

docker-compose.yml

version: '3'
 
services:
  db:
    image: mysql:5.7
    container_name: db
    environment:
      MYSQL_ROOT_PASSWORD: my_secret_password
      MYSQL_DATABASE: app_db
      MYSQL_USER: db_user
      MYSQL_PASSWORD: db_user_pass
    ports:
      - "6033:3306"
    volumes:
      - dbdata:/var/lib/mysql
  phpmyadmin:
    image: phpmyadmin/phpmyadmin
    container_name: pma
    links:
      - db
    environment:
      PMA_HOST: db
      PMA_PORT: 3306
      PMA_ARBITRARY: 1
    restart: always
    ports:
      - 2025:80
volumes:
  dbdata:

script.js

var mysql = require("mysql");

var con = mysql.createConnection({
  connectionLimit: 100,
  //host: "localhost",
  user: "db_user",
  password: "db_user_pass",
  database: "app_db",
  port: 2025,
  // connectionLimit: 15,
  // queueLimit: 30,
  // queryTimeout: 600000, 
  // connectTimeout: 1000000,
  // acquireTimeout: 1000000
});

con.connect(function (err) {
  if (err) throw err;
  console.log("Connected!");
});

I have tried all the comment removing on the createConnection function but it didn’t work

Kindly please help me to fix this out in the standard way.

Thank you!

I am working on a react project and when I try to separate my components into different files, I get this error:

caught ReferenceError: require is not defined
    at <anonymous>:3:15
    at Ove (transformScriptTags.ts:99:10)
    at n (transformScriptTags.ts:173:9)
    at s (transformScriptTags.ts:204:11)
    at Lve.t.forEach.e.src.o.onreadystatechange (transformScriptTags.ts:121:9)

My index.js is:

import Header from "./Header"
function MyFunction() {
    return (
        <div>
            <Header />
        </div>
    )
}
const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(<MyFunction />)

and my Header.js is:

export default function Header() {
    return (
        <header>
            <nav className="nav">
                <img className="nav-img" src="Bait&Debate.jpg" alt="My App"/>
                <ul className="nav-items">
                    <li>Pricing</li>
                    <li>About</li>
                    <li>Contact</li>
                </ul>
            </nav>
        </header>
    )
}

and my index.html is:

<html>
    <head>
        <link rel="stylesheet" href="index.css">
        <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
        <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    </head>
    <body>
        <div id="root"></div>
        <script src="index.js" type="text/babel"></script>
    </body>
</html>

I suspect that it has something to do with require() that is being called under the hood, but I am not calling that anywhere in my project here. Does anyone know why I am getting that error? If I put header into the index.js file the error goes away, but importing it from Header.js causes this problem.

I got binary data of the png image from some third party api
This is the data text that I get after console log :
`�PNG

IHDRf�:%PLTE���U��~IDATx�옱�� D[��I�BfBʌP�R_��ݗ~}�,��8���D��3x뭷��”IV��2�����o|`�,��yi.��r�>�%��UN�<#@�o�4$۬�!7 �”>PM�d
�6��-ڻ��˫M���4�[�<M�d���_�~w��I�B}Y�!�����&����y`3��.3�˰%�m:.�_’�i�9V�f���)�ի�l $m���5@nS>y6�)��֝�|;���b*@�yt3�5�y6�4’�$R��S�����|�xR�6OC�$���ԀՐ����a3��ۼ�ҒfL���x�;�^}�S�y�;��ե���0��5���{“=��6��T1���T?_a`lr����`E�<I���Ȫ1B��%����ݒ����Sc��
�ǃ週��E.t%�C�s�YI�2�� �}y�7��}ootM�7H�f�c�w S�rLiI`q��୷޺֟����o���IEND�B`�`

In the browser , when open the network tab the image will be display like this :
image display

How can I display the data above as image like below picture ? I’ve try every possible way by convert data to base64 or change accept type from the request header but none of them works .

Any help will be much appreciated . Thank you for reading

This is the code to convert data to base64 that I’ve tried :
` const blob = new Blob([esimQrCode], { type: “image/png” });
const base64Data = Buffer.from(esimQrCode).toString(“base64”);

return <img src={data:image/png;base64,${base64Data}} />
`

Clone this project and i’m using webrtc with nodejs socket. I’m facing noise problem, my voice coming back to me.
Complete code on github – https://github.com/coding-with-chaim/toggle-cam-final

If anyone facing same issue. then please provide a solution for this.

In my React Native application, I am trying to wrap my app in AppProvider as i need to used Realm in my project. Whenever i try to do that, it throws error saying TypeError: Cannot read property 'prototype' of undefined. Here’s what i’m doing to wrap my app:

   <NavigationContainer
      ref={navigationRef}
      onReady={() => {
        isReadyRef.current = true;
      }}
      theme={isDarkMode ? DarkTheme : LightTheme}
    >
      <AppProvider id={"id"}>
        <UserProvider fallback={InstallManual}>
          <RealmProvider appId={appId}>
            <Stack.Navigator screenOptions={{ headerShown: false }}>
              <>
                <Stack.Screen name={SCREENS.INSTALLMANUAL}>
                  {(props) => <InstallManual {...props} />}
                </Stack.Screen>
                <Stack.Screen name={SCREENS.FORGET_PASSWORD}>
                  {(props) => <ForgetPasswordScreen {...props} />}
                </Stack.Screen>
              </>
            </Stack.Navigator>
          </RealmProvider>
        </UserProvider>
      </AppProvider>

 </NavigationContainer>

What am i doing wrong here ?

Need to create a list of different links on a page with the same variable appended to the end of each url.

e.g.:

https://example.tfaforms.net/formA?urlParam=ABCDEFG

https://example.tfaforms.net/formB?urlParam=ABCDEFG

https://example.tfaforms.net/formC?urlParam=ABCDEFG

https://example.tfaforms.net/formD?urlParam=ABCDEFG

FormAssembly provide an example on this page where they demonstrate how to create a repeatable section on a page with dynamic clickable links using Javascript to replace the url appended parameter in html code:

https://www.formassembly.com/blog/dynamic-clickable-links/

**They use this html code: **

<a href="https://instanceName.tfaforms.net/secondFormID?urlParam=#" class="clickableLink">Text to display for your link</a>

Alongside this javascript:

<script
   src="https://code.jquery.com/jquery-3.2.0.min.js"
   integrity="sha256-JAW99MJVpJBGcbzEuXk4Az05s/XyDdBomFqNlM3ic+I="
   crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
   //declares function to replace href in hyperlink text with value of a field in repeat section 
  function dynamicLinks(linkClass, fieldId) {
      //creates selector statement with fieldId
      var selection = 'input[id^="' + fieldId + '"]';
      //intializes array to store new links
      var linkArr = [];
      //adds links to array from field in repeat section
      $(selection).each(function() {
        linkArr.push($(this).val());
      });
       //replaces the class of hyperlinks with values from the link array
       $(linkClass).attr("href", function(i, origLink) {
      return origLink.replace(/#/, linkArr[i]);    
       });
     };
  // This is the field ID to update with your value from Salesforce field ID
  dynamicLinks(".clickableLink","tfa_2");  
});
</script>

However, my use case is multiple links off of a contents-like list, all with the same urlParam=# at the end of the urls. Also I do not need the repeatable section functionality just need the Javascript to find all # in html and replace with the same tfa_2.

Using the FormAssembly example code I thought I could build out the html on each line of links and it would replace each # with the tfa_2 – however, it only performs the replace function on the first link.