Adding New Button using java script - JavaScript Discussion Boards

Re: How to Load Content Without Refreshing Menu Bar.

Nathan Minier20-Sep-16 0:59

20-Sep-16 0:59

Absolutely. Google AJAX to learn how to get started.

And despite what some people seem to think, you can do it with just JavaScript, jQuery is not required (if you're not already using it anyway).

"There are three kinds of lies: lies, damned lies and statistics."
- Benjamin Disraeli

Re: How to Load Content Without Refreshing Menu Bar.

W∴ Balboos, GHB21-Sep-16 6:07

W∴ Balboos, GHB

21-Sep-16 6:07

Here's one place to start:
[^]

For what it's worth to you, I only use normal javaScript - never any frameworks.

Another way to load content without refreshing menu bar: read up on iframe's - put your content in one and refresh the content from your menu. Other ways exist too, (such as via DOM) depending upon where your data source is and what it is your refreshing.

Ravings en masse^
"The difference between genius and stupidity is that genius has its limits." - Albert Einstein
"If you are searching for perfection in others, then you seek disappointment. If you are seek perfection in yourself, then you will find failure." - Balboos HaGadol Mar 2010

unexpected identifier: quick question

shoysmTP19-Sep-16 1:59

shoysmTP

19-Sep-16 1:59

JavaScript

var tempDiv = "<div class = "someClass"></div>";
divs.push(tempDiv);

is this code valid in javascript?
i'm getting error in chrome console that says unexpected identifier
the error is on first line.

Re: unexpected identifier: quick question

Richard Deeming19-Sep-16 2:20

Richard Deeming

19-Sep-16 2:20

If that's the precise code you've got, and it hasn't been mangled by the site, then it's not valid Javascript. Nested quotes need to be escaped:

JavaScript

var tempDiv = "<div class=\"someClass\"></div>";

// Or:
var tempDiv = '<div class="someClass"></div>';

You also need to remove the spaces around the = character for the string to be valid HTML.

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Re: unexpected identifier: quick question

shoysmTP19-Sep-16 3:56

shoysmTP

19-Sep-16 3:56

thanks a lot...
that was helpful

javascript message on web app

dcof16-Sep-16 15:07

dcof

16-Sep-16 15:07

In a vb.net 2010 web form application, I have the following code:

<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="default.aspx.vb" Inherits="attendanceletters_default" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MPHead" Runat="Server">
    <script src="../scripts/jquery-1.3.2.js" type="text/javascript"></script>
    <script src="../scripts/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>    
    <%If (False) Then%>
        <script src="../scripts/jquery-1.3.2.js" type="text/javascript"></script>
    <% End If%>    
    <script src="../scripts/site.js" type="text/javascript"></script>
    <script src="../scripts/json2.js" type="text/javascript"></script> 
        function GetStudentLetterTemplate(schoolyear, schoolnum, milestone, studentlink, language, semester) {

            alert('schoolyear: ' + schoolyear + 'schoolnum: ' + schoolnum + 'milestone: ' + milestone + 'studentlink: ' + studentlink + 'language: ' + language + 'semester: ' + semester);
             if (milestone == '999') {
                 alert('You have selected student(s) having more than one CAIP entry for the current school year');
               return;
            }
}

I want to display a javascript alert message in production when an error condition exists. The code listed above works in a development envirnonment, but the code would not deploy to a test app server.

Thus can you show me what I can do to fix the code listed above?

If not, would you show me what I can do in a production environment to have a warning message displayed to a user with the least amount of extra code?
I do not care how the warning message is displayed, I just want a warning message to be displayed.

Re: javascript message on web app

Nathan Minier19-Sep-16 1:39

Nathan Minier

19-Sep-16 1:39

So, fun story, your JavaScript should be largely unaffected by test/production environments with a couple of important caveats.

You might have a hard-coded route in your JS that does not exist in production. This could be a specific URI (ie "http://localhost:8080/site/asset") or a relative URL that is not appropriate in your release build ( ie "../../assets" to escape bin).
Your web browser whitelists sites for script execution, and your production server is not whitelisted.

It's far more likely that your aspx is not producing the correct response on the server side.

Also, this snippet is hysterical:

HTML

<script src="../scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script src="../scripts/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script><br />
<%If (False) Then%>
    <script src="../scripts/jquery-1.3.2.js" type="text/javascript"></script>
<% End If%>

"There are three kinds of lies: lies, damned lies and statistics."
- Benjamin Disraeli

Adding New Button using java script

Member 1274349616-Sep-16 1:29

Member 12743496

16-Sep-16 1:29

Hi All,

I am very new to java script , actually I have one HTML page and I am using it in SAP that page contains buttons like 'Save' Bold' 'Italic' Etc all word formatting options.

Like in this editor above we have B I U , Small and BIG and ETC..

when I open that code in note page I have observers that below code has written to create a button.

JavaScript

/* START CONFIG */
var nicSaveOptions = {
	buttons : {
		'save' : {name : __('Save this content'), type : 'nicEditorSaveButton'}
	}
};
/* END CONFIG */

var nicEditorSaveButton = nicEditorButton.extend({
	init : function() {
		if(!this.ne.options.onSave) {
			this.margin.setStyle({'display' : 'none'});
		}
	},
	mouseClick : function() {
		var onSave = this.ne.options.onSave;
		var selectedInstance = this.ne.selectedInstance;
		onSave(selectedInstance.getContent(), selectedInstance.elm.id, selectedInstance);
	}
});

nicEditors.registerPlugin(nicPlugin,nicSaveOptions);

with the above code Save button is displaying in the tool bar.
Now I want to add another button in the tool bar with different logo EX : To send email

Can you please help me how to add new button and it's event for that button.( the above button having even I copied the same code and paste I got that save option two times )

Re: Adding New Button using java script

Nathan Minier16-Sep-16 1:49

Nathan Minier

16-Sep-16 1:49

It looks like you're using a script control renderer called NicEdit[^], so normal JavaScript conventions will only help so much. There's an example that was first thing that came up on Google for me: javascript - Nicedit.js - cannot add custom button - Stack Overflow[^]

I should also note that as per the site, it is no longer under development.

If you're interested in learning JS this is probably not the bast project for you, as you'll be learning the conventions of a dead script module rather than actual JavaScript. I would suggest using one of the many JS tutorials that you can find by googling "javascript tutorial"

"There are three kinds of lies: lies, damned lies and statistics."
- Benjamin Disraeli

Chatbot js code

SolidSnake71-Sep-16 7:26

SolidSnake7

1-Sep-16 7:26

Hey everyone and sorry for my bad English. I give my best. Smile | :)

I want to create a offline chatbot and I want that he answer in multiple for special words. (answer must be random)

Here An Exemple:

Me: Hey
Bot: hey

Me:hey
Bot: hi

Here the js code: (what is wrong?)

Java

var $messages = $('.messages-content'),
    d, h, m,
    i = 0;

$(window).load(function() {
  $messages.mCustomScrollbar();
  setTimeout(function() {
    fakeMessage();
  }, 100);
});

function updateScrollbar() {
  $messages.mCustomScrollbar("update").mCustomScrollbar('scrollTo', 'bottom', {
    scrollInertia: 10,
    timeout: 0
  });
}

function setDate(){
  d = new Date()
  if (m != d.getMinutes()) {
    m = d.getMinutes();
    $('<div class="timestamp">' + d.getHours() + ':' + m + '</div>').appendTo($('.message:last'));
  }
}

function insertMessage() {
  msg = $('.message-input').val();
  if ($.trim(msg) == '') {
    return false;
  }
  $('<div class="message message-personal">' + msg + '</div>').appendTo($('.mCSB_container')).addClass('new');
  setDate();
  $('.message-input').val(null);
  updateScrollbar();
  setTimeout(function() {
    fakeMessage(msg);
  }, 1000 + (Math.random() * 20) * 100);
}

$('.message-submit').click(function() {
  insertMessage();
});

$(window).on('keydown', function(e) {
  if (e.which == 13) {
    insertMessage();
    return false;
  }
})

var Fake = {
"Hi": ['Hi', 6000]
"Hi": ['Hey', 6000]
"Hey": ['Hey', 6000]
"Hey": ['Hi', 6000]
}

function fakeMessage(msg) {
  if (msg == '') {
    return false;
  }
  
  var resp = Fake[msg][0];
  console.log(msg, resp);

Re: Chatbot js code

Dominic Burford6-Sep-16 2:51

Dominic Burford

6-Sep-16 2:51

You haven't specified what the problem is. Are you getting an error? Are you getting unexpected results? Can you provide more details to give us a clue as to why you have posted your question.

"There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies, and the other way is to make it so complicated that there are no obvious deficiencies. The first method is far more difficult." - C.A.R. Hoare

Home | LinkedIn | Google+ | Twitter

Re: Chatbot js code

ZurdoDev6-Sep-16 6:06

ZurdoDev

6-Sep-16 6:06

SolidSnake7 wrote:
(what is wrong?)

Only you can tell us. We cannot run your code so you need to do very basic debugging and find out what IS happening. Then you can explain to us so we can help you.

There are only 10 types of people in the world, those who understand binary and those who don't.

HTML and javascript dashboard

Member 1271309731-Aug-16 3:21

Member 12713097

31-Aug-16 3:21

I have created HTML tables as below by hard coded the values:
Name weekhandledticket monthlyhandledticket dailyhandledticket credits
xyz 1 2 1 1

My requirement is I want to achieve this dashboard directly on browser without hard coding the values.it should directly taken from external file like javascript .is it possible to attain this requirement using JavaScript itself? Please give me some idea to drive this requirement?

TO BE MORE PRECISE "TO create a dashboard using HTML table and display the data on runtime with help of javascript ?"

Re: HTML and javascript dashboard

Nathan Minier31-Aug-16 8:12

Nathan Minier

31-Aug-16 8:12

Erm, yes, that's entirely possible and even normal.

It sounds like you need to learn some JS and I would suggest by starting with jQuery. Have a look at jQuery Learning Center[^] to get started.

"There are three kinds of lies: lies, damned lies and statistics."
- Benjamin Disraeli

Re: HTML and javascript dashboard

W∴ Balboos, GHB14-Sep-16 4:48

W∴ Balboos, GHB

14-Sep-16 4:48

You can learn how to use javaScript (and the DOM access it gives you) here: JavaScript Tutorial[^]

But the best way to generate pages is server-side, for which PHP is a great language: PHP 5 Tutorial[^]

You can make changes to an existing page with either javaScript (via DOM) or php (via AJAX), depending upon where the 'new' data is stored.

Ravings en masse^
"The difference between genius and stupidity is that genius has its limits." - Albert Einstein
"If you are searching for perfection in others, then you seek disappointment. If you are seek perfection in yourself, then you will find failure." - Balboos HaGadol Mar 2010

Re: HTML and javascript dashboard

Harpreet05Kaur26-Sep-16 1:50

Harpreet05Kaur

26-Sep-16 1:50

Its really easy, You need to study more jquery, Tables , Ajax .

1. put an ajax call and get your data in jquery.
2. Bind your data to the html table format.

Here you done

Re: HTML and javascript dashboard

Harpreet05Kaur26-Sep-16 1:24

Harpreet05Kaur

26-Sep-16 1:24

1. Try to learn Jquery , HTML Tables and Ajax
2. Put and ajax call and bind the response in html tables to show

How can I swap only body element between HTML pages?

lino_7630-Aug-16 8:08

lino_76

30-Aug-16 8:08

I have two separate HTML files (index.html and home.html) and a javascript (bodyswapscript.js) file. I'm trying to figure out how to swap in (only the body) of home.html into the body of the index.html by using java script. Basically swapping 'body' elements between HTML files.

I have posted my html code and java script below. The html is quick and dirty, so I'm only interested in swapping out the body information of index.html with home.html. I also would like to keep the unordered/list items as my header and be able to use the browser back button to go back to previous pages.

1.) index.html

HTML

<head>
        <meta name="generator" content=
              "HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
        <meta charset="utf-8">

        <title> My Profile</title>
        <link rel="stylesheet" href="style.css" type="text/css">    
</head>

<header>
    <hgroup>
        <center><h1>Index</h1>
        <h4>index page</h4></center>
    </hgroup>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script src="bodyswapscript.js"></script>


<nav>
    <div id="wrapper">
        <div id="header">
            <ul>
                <li><a id="homeContainer" href="home.html">Home</a></li>
                <!-- <li><a id="testContainer" href='test.html'>test</a></li>
                <li><a id="pageContainer" href="page.html">page</a></li> -->
            </ul>
        </div>
    </div>

</nav>

</header>
<body>
    <article>

  <div id='swapcontent'>
  index page
  </div> 

</article>
    </body>
<footer>
    <p>© copy right, all rights reserved.</p>
</footer>

2.) home.html

HTML

<header>
    <hgroup>
        <center><h1>home.html</h1>
        <h4>text</h4></center>
    </hgroup>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

</header>
<body>
    <article>

        <div id='swapcontent'>
            This is my home page
        </div> 

    </article>
</body>

3.) bodyswapscript.js

JavaScript

$(document).ready(function() {
  $('li>a[id$="Container"]').click(function(event) {
    event.preventDefault();
    var href = $(this).attr('href');
     alert("Loading " + href);
    $('body').load(href + " #body", function() {
      $("#body *:first").unwrap()
    });
    return false;
  });
});

4.) css

CSS

* {
    font-family: Lucida Sans, Arial, Helvetica, sans-serif;
}

body {
    width: 720px;
    margin: 0px auto;
}

header h1 {
    font-size: 36px; 
    margin: 0px;
}

header h2 {
    font-size: 18px; 
    margin: 0px; 
    color: #888;
    font-style: italic;
}

nav ul {
    list-style: none; 
    padding: 0px; 
    display: block;
    clear: right; 
    background-color: #2B60DE;
    padding-left: 4px; 
    height: 24px;
}

nav ul li {
    display: inline; 
    padding: 0px 20px 5px 10px;
    height: 24px; 
    border-right: 1px solid #ccc;
}

nav ul li a {
    color: #EFD3D3; 
    text-decoration: none;
    font-size: 13px; 
    font-weight: bold;
}

nav ul li a:hover {
    color: #fff;
}

article > header time {
    font-size: 14px; 
    display: block; 
    width: 26px;
    padding: 2px; 
    text-align: center; 
    background-color: #993333;
    color: #fff; 
    font-weight: bold; 
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px; 
    border-radius: 6px; 
    float: left;
    margin-bottom: 10px;
}

article > header time span {
    font-size: 10px; 
    font-weight: normal;
    text-transform: uppercase;
}

article > header h1 {
    font-size: 20px; 
    float: left;
    margin-left: 14px; 
    text-shadow: 2px 2px 5px #333;
}

article > header h1 a {
    color: #993333;
}

article > section header h1 {
    font-size: 16px;
}

article p {
    clear: both;
}

footer p {
    text-align: center; 
    font-size: 12px;
    color: #888; 
    margin-top: 24px;
}

modified 30-Aug-16 14:55pm.

Re: How can I swap only body element between HTML pages?

Richard Deeming30-Aug-16 8:34

Richard Deeming

30-Aug-16 8:34

Have a look at the documentation[^], particularly the section titled Loading Page Fragments[^]:

Loading Page Fragments[^]:

If one or more space characters are included in the string, the portion of the string following the first space is assumed to be a jQuery selector that determines the content to be loaded.

JavaScript

$(document).ready(function(){
    $( 'li>a[id$="Container"]' ).click(function(event) 
    {
        event.preventDefault();
        var href = $(this).attr('href');
        alert("Loading " + href);
        $('#swapcontent').load(href + ' #swapcontent');
        return false;
    });
});

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Re: How can I swap only body element between HTML pages?

Nathan Minier31-Aug-16 1:55

Nathan Minier

31-Aug-16 1:55

I would generally advise against reloading the entire body content with an HTML fragment. It's generally considered bad practice as you'll generally have common elements between pages, regardless of the view.

It would be closer to industry standard if you defined a view DIV within the body element.

"There are three kinds of lies: lies, damned lies and statistics."
- Benjamin Disraeli

Collect text and images from image pdf using JS or AngularJS

Member 1270857628-Aug-16 22:47

Member 12708576

28-Aug-16 22:47

Sir, please send coings in javascript or angularjs for colllecting images and text from pdf image of catalogue picture....

Re: Collect text and images from image pdf using JS or AngularJS

Richard MacCutchan28-Aug-16 23:00

Richard MacCutchan

28-Aug-16 23:00

Sorry, but this site does nor provide code to order; see How to get an answer to your question[^].

Re: Collect text and images from image pdf using JS or AngularJS

Member 1270857629-Aug-16 0:18

Member 12708576

29-Aug-16 0:18

or please forward any link ... i will check

Javascript reverse help

313help23-Aug-16 3:29

313help

23-Aug-16 3:29

So, I've been working on this code for the past day and it's drving me nuts. The problem is I'm trying to reverse the input of a string so when a user enters FIRSTNAME LASTNAME, the document it is exported to will display LASTNAME, FIRSTNAME.

I feel like I'm very close with the code I have but I need some understanding as well.

Here is my code:

%{var date = '${Case Name}'.split(' '); var date = date[0]; var dateParts = date.split(' '); dateParts[1] + ',' + dateParts[0]}

This code that I currently have returns undefined,FIRSTNAME.

Anyone have any ideas or guidance on how to pull the LASTNAME and add a space after the comma?

Any help is greatly appreciated!

Re: Javascript reverse help

Richard Deeming23-Aug-16 4:35

Richard Deeming

23-Aug-16 4:35

Try walking through your code in your head:

Take the name, 'FIRST LAST', and split it on every space ⇒ ['FIRST', 'LAST']
Take the first element from the result, and store it ⇒ 'FIRST';
Split the stored element on every space (NB: There aren't any!) ⇒ ['FIRST']
Combine the second element of the one-element array with the first element ⇒ 'undefined,FIRST'

Now it should be obvious that you need to remove steps 2 and 3:

JavaScript

%{var parts = '${Case Name}'.split(' '); parts[1] + ', ' + parts[0]}

However, you'll still get undefined if the entered name doesn't contain a space. If that could be the case, then you'll need the ternary operator:

JavaScript

%{var parts = '${Case Name}'.split(' '); parts.length == 2 ? parts[1] + ', ' + parts[0] : parts[0]}

Adding a space after the comma is as simple as ... adding a space after the comma!

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.