Experiencing difficulty successfully outputting information from Javascript

I have a code snippet that currently adds user information to a div with the id #userid. However, I need the ability to print out the user ID wherever I want, rather than it automatically adding to a div.

My main objective is to retrieve the USER ID and use it in a WordPress query. The userid is currently used as a post tag, and I aim to pull all posts from that specific user by querying posts based on the tag.

<script src="http://connect.soundcloud.com/sdk.js"></script>
<script>
  SC.initialize({
    client_id: "a808af7fabb53ad7971c6c9675f392b3",
    redirect_uri: "http://madebyguerrilla.com/clients/2012/theappreciationengine/wordpress/wp-content/themes/TheAppreciationEngine_WP/callback.html"
  });

  $("#connect").on("click", function(){
    SC.connect(function(){
      SC.get("/me", function(me){
        $("#username").text(me.username);
        $("#userid").text(me.id);
      });
    });
  });

  $("#update").on("click", function(){
    SC.put("/me", {user: {description: $("#description").val()}}, function(response, error){
      if(error){
        alert("Some error occurred: " + error.message);
      }else{
        alert("Profile description updated!");
      }
    });
  });
</script>

Your assistance would be highly appreciated.

Answer №1

Are you new to JavaScript by any chance? Just kidding.

When making the SC.get() call, remember that you can access the ID as me.id:

var userId;

SC.get("/me", function(me){
    $("#username").text(me.username);
    $("#userid").text(me.id); // <-- This is the user id, feel free to store it in a variable
    userId = me.id; //           <-- You can save it like this too
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Setting a customized background color for a designated section of a component

I am trying to create a hover effect at the position of a cursor, similar to what is shown in this example: For reference, I have also created a code snippet: https://jsfiddle.net/onnmwyhd/ Below is the code I am using: HTML <div id="container&q ...

Creating customized JavaScript bundles with TypeScript - a beginner's guide

Our ASP.NET MVC application contains a significant amount of JavaScript code. To optimize the amount of unnecessary JS being loaded to the browser, we utilize the BundleConfig.cs file to create multiple bundles. On the View, we implement logic to determin ...

Guide to showing an uploaded image in a child component using Vue.js

Using the v-file-input component from Vuetify, I am able to upload images with the following code: <v-file-input label="Image" filled accept="image/png, image/jpeg, image/bmp" prepend-icon="mdi-camera" v-mod ...

Link the ng-model to an asynchronous function for fetching and updating data

After struggling with my previous attempt to solve a question, I have decided to present it here without any prior attempts. (You can view my previous topic here: ng-model to async xhr get/set field on my server ) Working with angular in a browser addon, ...

Showing HTML element when the model count is zero - ASP.NET MVC View

My view has a dynamic element that switches between two options depending on the Model.Count property. Check out the code below: @if (Model.Count() == 0) { <div class="well well-lg"><h3>Everyone is present! No absences today :)</h3>& ...

An issue arose when attempting to submit data from an AngularJS form

I am having an issue with my AngularJS form that is supposed to post data to a Scalatra servlet. Unfortunately, when the form is submitted, I am unable to retrieve any form parameters in my Scalatra servlet. Here is a snippet of my code: AngularJS $scop ...

What is the best way to reset the 3rd dynamic dropdown menu once a new selection is made in the 1st dropdown menu?

I have been working on creating a dynamic dropdown using Jquery ajax and json in js. Almost everything is working as expected, except for one issue that I am facing. The problem arises when I select an option in dropdown A, which then loads items into drop ...

Using jQuery to remove all inline styles except for a specific one

Just a quick inquiry: Our Content Management System (CMS) utilizes CKEditor for clients to modify their websites. The front-end styles include the use of a pre tag, which we have customized to our desired appearance. However, when their team members copy a ...

Attempting to access a shared php/javascript library using mod_rewrite

Let's dive into a fresh perspective on a question I previously raised: I've crafted a mod_rewrite snippet that checks for the existence of JavaScript, CSS, and PHP files on the subdomain they are called from (e.g., subdomain.example.com). If the ...

Converting a JavaScript animation into a video through server-side processing: A step-by-step guide

Attempting to tackle a challenging task but willing to give it a shot: Our team is currently working on developing a website that enables users to generate animations using javascript and html. However, our latest client request involves uploading the cre ...

Utilizing Async/Await with an Unassigned Object

I'm facing a puzzling issue with an async/await function that refuses to assign to an object. Despite displaying the expected results in the console, when it comes to actually assigning to the object, it fails to do so. Let me elaborate below: Here&a ...

Clicking on an element in React Material UI Autocomplete will bring it

I'm currently working with a material-ui autocomplete element <Autocomplete id="combo-box-demo" autoHighlight openOnFocus autoComplete options={this.state.products} getOptionLabel={option => option.productName} style={{ width: 300 ...

Retrieving Data from Repeated Component in Angular 6

Need Help with Reading Values from Repeating Control in Angular 6 I am struggling to retrieve the value of a form field in the TS file. Can someone please assist me with this? This section contains repeating blocks where you can click "add" and it will g ...

What is the proper way to implement the scrollToIndex feature in a FlatList component in React Native

I have a problem where I need to automatically scroll down by a specific value whenever a onPress event is triggered (in this case, the value is 499). However, the code I have tried does not seem to be working as expected. Here is the code snippet I am u ...

Access to create permissions for collection "faunaDB" denied due to authorization privileges in FQL query using User Defined

I have a custom user role for security that has a predicate function for creating entries in a collection named formEntryData. When I try to create an entry without the function, it works fine. However, when I use the provided function below, I receive a p ...

Adding a button input and deleting non-functional parent elements

Here is a simple append function using jQuery, and it's working perfectly. However, the issue arises when I try to append a button and remove the parent tr upon clicking. The problem lies in using remove parent, as it doesn't seem to work as exp ...

Is it possible to display a Processing message at the beginning of a datatables table already containing data?

Within my Laravel 5.7 application, I have implemented the "yajra/laravel-datatables-oracle": "~8.0" library and found a helpful thread on customizing the processing message at this link. I adjusted the processing message styling as follows: .dataTables_pr ...

How to customize a dropdown menu with the size property?

Can anyone help me with styling a select box that uses the size attribute? Most tutorials only cover single-item select boxes. Has anyone dealt with styling select boxes with the size attribute before? Here's an example of what I'm trying to acc ...

Develop a program that executes a function across spreadsheets that satisfy specific conditions

I am currently developing an onEdit(e) script that will highlight cells in a Google spreadsheet (specifically in a certain column) after a specified user has made edits. The challenge I face is ensuring this functionality applies to all spreadsheets with a ...

What is the best way to utilize URL parameters to dynamically update a component's state within a class component

I am currently working on a React component that is making calls to two different API URLs, and the fetch operations are functioning as expected. However, I would like to utilize the URL handle structure, which looks like localhost://site/coins/[handle], a ...