Sending ng-model as an argument to a function along with another parameter, followed by resetting ng-model

This is an example of my HTML code:

<input type="text" name="message" ng-model="senderMessage">

<button type="submit" ng-click="sendSenderMessage(1,5,senderMessage)">
  Click Me
</button>

Here is my JavaScript controller function:

$scope.sendSenderMessage = function (bsid, srid, message) {
  $scope.senderMessage = message; 
  $http.post(url + 'c_chat/sendSenderMessageJson', {
    bsid: bsid,
    srid: srid,
    message: $scope.senderMessage
  })
  .success(function (data) {
    console.log(data);
    $scope.chatForm();
    $scope.startChat(srid);
  });
}

Additional function in the code:

$scope.chatForm = function () {
  $scope.senderMessage = "";
}

One issue I am facing is that I cannot reset $scope.senderMessage to blank.

Answer №1

It is crucial to include the .error(function(data)) in your post request. This ensures that if an error occurs, $scope.chatForm will not be called, and $scope.senderMessage will remain unchanged.

Alternatively, you can also:

 var tempMessage = angular.copy(message);
$scope.senderMessage = ""; 
 $http.post(url + 'c_chat/sendSenderMessageJson', {
    'bsid'    : bsid ,
    'srid'    : srid ,
    'message' : tempMessage 

  })

Answer №2

$scope.sendMessageToSender = function (bsid, srid, message) {
  $scope.senderMessage = message; 
  $http.post(url + 'c_chat/sendSenderMessageJson', {
    bsid: bsid,
    srid: srid,
    message: $scope.senderMessage
  })
  .success(function (data) {
    console.log(data);
    $scope.clearChatForm();
    $scope.initiateChat(srid);
  });
  where $scope.clearChatForm = function() {
  $scope.senderMessage = "";
  $timeout(angular.noop); //utilize
 //please inform me if you encounter the same issue.
 }

angular.noop is an empty function that serves as a placeholder when needing to pass a function as a parameter.

Additional information on angular.noop

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

The HTML element update event was not triggered due to the excessive load of a JavaScript function

I am currently running a JavaScript function that is quite CPU intensive. To provide visual feedback to users when it starts and stops, I am attempting to display a badge on the webpage. Below is the code snippet: function updateView() { console.log(1 ...

Avoid Bootstrap 5 collapse when clicking on links or buttons

In my table, there are parent rows with hidden child rows that can be toggled using the bootstrap collapse feature. Clicking on a parent row toggles the visibility of its child rows. Both parent and child rows can be dynamically added to the table. Parent ...

Can you explain the purpose of App.hiddenDivs in jQuery code snippet provided?

Exploring various JQuery performance tips on this insightful website Do you happen to know the significance of App.hiddenDivs ? ...

What is the best way to save and reload a canvas for future use?

My current setup involves using PDF.js to display PDF documents in a web browser. The PDF.js library utilizes canvas for rendering the PDF. I have implemented JavaScript scripts that allow users to draw lines on the canvas by double-clicking, with the opti ...

Tips for organizing an API response based on a specific field

I'm currently in the process of learning Reactjs and I've hit a roadblock with a specific question. I have successfully fetched data using axios from an API endpoint (such as countries with details like population, currencies, region, etc.) and n ...

Creating a custom dropdown behavior using Angular

I have a unique interface requirement where users must be able to click on an element to view its options, which are displayed as checkbox inputs. Essentially, I need a custom 'select' element that allows for multiple checkbox selections. ...

Error: Trying to access the 'push' method of an undefined object of useHistory

import React from "react"; import { Route, Switch, HashRouter, useHistory } from "react-router-dom"; import Home from "../pages/home/HomeComponent"; import Splash from "../pages/splash/Splash"; import Education from ...

Submitting information to an HTML page for processing with a JavaScript function

I am currently working on an HTML page that includes a method operating at set intervals. window.setInterval(updateMake, 2000); function updateMake() { console.log(a); console.log(b); } The variables a and b are global variables on the HTML page. ...

How to verify the parent nodes in a jstree

I have implemented a two state jstree. However, I am encountering an issue where it is not possible to select any other node in relation to a node. My goal is that when I click on a specific node, all of its parent nodes should also be checked. Any assist ...

Encountering the error message 'Invalid cast specified' while using SqlDataReader in MVC

I kindly request not to categorize this inquiry as a DUPLICATE QUESTION. Despite my efforts to follow all the suggested solutions, I am still encountering this error. Is there anyone who can provide insight on where this error originates from? Below is th ...

Can you explain the concept of 'each' when using the looping method in jQuery?

I'm grappling with accessing data within a table row. The data could be within a <td> tag, as text in an input field, or as a checkbox in an input field, or even as a button. To illustrate, here's a snippet of a small table: <table bor ...

What is the most effective way to use Javascript to update an image depending on the selected value in a dropdown

My JavaScript skills are limited, but I have successfully created a form with 4 drop-down selection boxes on the left side for users to choose from (State, Car, Year, Condition). After making their selections, users can click a 'calculate' butto ...

Fill up mongoose with data on 3 schemas

I have successfully populated 2 schema, but I am facing difficulty in populating the third schema. Here are the schemas: Member Schema var mongoose = require('mongoose'); var bcrypt = require('bcryptjs'); var Schema = mongoose.Schema ...

NPM is complaining about the absence of a start script

Apologies for any language barriers in my English. I'm currently facing an issue while trying to deploy an app on Heroku using the heroku local web command in the terminal. The error message ERR! missing script: start keeps popping up, even though the ...

php code to paginate mysql results

Imagine I have 50 rows in my database. How can I retrieve MySQL results in pages, displaying 5 results on each page and showcasing the pages as follows: [1], 2, 3, 4...10? For example, if it's on page 5, show 3, 4, [5], 6, 7...10 without refreshing al ...

Using latitude and longitude coordinates to calculate the xyz position on earth in a three-dimensional environment (three

Exploring the wonders of three.js I am currently working on rendering objects at specific geocoordinates on a large sphere. I am close to finding a solution, but I am struggling to determine the correct xyz position from latitude and longitude. I have cr ...

Utilizing Axios recursion to paginate through an API using a cursor-based approach

Is there a way to paginate an API with a cursor using axios? I am looking to repeatedly call this function until response.data.length < 1 and return the complete array containing all items in the collection once the process is complete. Additionally, I ...

How do I incorporate an external template in Mustache.js?

Welcome, I am a beginner in using Mustache.js. Below is the template and JS code that I have: var template = $('#pageTpl').html(); var html = Mustache.to_html(template, data); $('#sampleArea').html(html); Here is the template ...

How can you convert a JavaScript object with nested arrays into JSON format?

I have been working with a JavaScript object that contains nested objects with associative arrays. I attempted to use the stringify function from the json2.js library, but the output did not include the arrays inside the nested objects. In my scenario, I b ...

What steps can be taken to ensure that an ObjectID does not transition into a primitive form

Is there a way to avoid an ObjectID from being converted into a primitive data type when transferring in and out of Redis? Would converting it to a JSON string be a possible solution? Thanks! ...