Build a webpage by Django, functions don't work - javascript

Here's my HTML code:
<span>
<button onclick="indexOBJ.clear();return false;" class="resetButton">清空</button>
</span>
Here's my JavaScript code:
var indexOBJ = {
clear: function () {
$('#devSvnURL').val('');
$('#devVersion').val('');
$('#testExampleUrl').val('');
$('#testReportDemoUrl').val('');
$('#resultLocation').val('');
$('#username').val('');
$('#userpwd').val('');
$('#commitTextArea').val('');
$('#note').val('');
}
};
function clearAA() {
alert()
}
It works fine. However when I change my HTML code to:
<span>
<button onclick="clearAA();return false;" class="resetButton">清空</button>
</span>
Then, the function named clearAA() will never be called. I don't know why. Please tell me the reason. Thanks a lot.
Environment: Django 2.0.2 jquery-3.3.1.js

As Daniel said in the question response, this is not a problem from django o jquery. Check in the developer tools if there is some warning or error when you click the button. If not, set a breakpoint in the function you want to call and check if enter in it.
I recommend you to use chrome developer tools.

Related

Cannot call a server-side function located inside a library from client-side code

I tried the simplest way of calling Google Apps Script server-side function from my html using the sample code given here https://developers.google.com/apps-script/guides/html/reference/run. It works like a charm.
However, when I try to do the same thing in my actual project which has all the server code in a library, it doesn't work. I keep getting the error
"Uncaught TypeError: google.script.run.doSomething is not a function"
Here is a sample project that I created to recreate the issue
The Gdoc
Here look for "Test Menu" and click on "open sidebar" to invoke the functionality. Access the bound script to see the code and the usage of Library.
Library code
Any help with this would be much appreciated.
Example:
html:
<script>
function doSomething() {
google.script.run
.withSuccessHandler(function(msg){
window.alert(msg);//Thank's I got it.
})
.doSomething();
}
</script>
<body>
<input type="button" value="Do Something" onClick="doSomething();" />
</body>
gs:
function doSomething() {
return 'Thanks I got it';
}
You are trying to call DocumentApp.getUi() from the library.
As you can see here
A script can only interact with the UI for the current instance of an
open document, and only if the script is bound to the document.
Your library is not bound to your document. This is why your code cannot work.
You can only move those parts of your code into a library that do no use getUi() or any Not-shared resources (e.g. triggers). The documentation specifies which resources are shared and which ones are not.

external javascript file function call from html not working (Google Chrome Extension)

I know this question has been asked a lot, but none of the solutions to the question have worked for me. This is for a Google Chrome Extension. I am calling a javascript function in an html file like this:
<div style="text-align:center">
<input type="button" onClick="buttonClicked()" value="Activate Extension">
</div>
<script type="text\javascript" src="eventPage.js"></script>
</body>
</html>
in eventPage.js:
function buttonClicked() {
var uname = document.getElementById("uname").value;
alert("Extension activated. Enjoy!");
}
I have tried moving the html tag in the head and the body and nothing changes. Any and all help is greatly appreciated.
Changing the type should work. If not check if the external reference path is correct and all the javascript is available.
Also check if you see any errors in developer console.
Try to add some breakpoints and see if that function is being called.
It's because of this line var uname = document.getElementById("uname").value; where you are giving a variable to the button value.It is only needed when there is input type "text" where there will be text in the text box.
Your code should be following and it works fine.
<div style="text-align:center">
<input type="button" onClick="buttonClicked()" value="Activate Extension">
</div>
<script src="eventPage.js"></script>
</body>
Just remove variable line from the javascript.
function buttonClicked() {
alert("Extension activated. Enjoy!");
}

Javascript navigation only works on debug

I have a button which calls a Javascript function when it is pressed, that function is just redirecting to another page, it looks like this:
<input type="submit" value="Submit" id="button1" name="button1" onclick="myFunction()" />
And the function looks like this:
function myFunction() {
window.location.href = "page2.html";
}
The function is executed but the redirection does not work, it remains on the same page, but if I set a breakpoint on the function and execute it line by line using the Browser dev tools it successfully redirects to the other page.
---------EDIT---------
It works only using the Firefox dev tools, if I set the breakpoint on Chrome it still does not works.
Try setting the href to just
location.href = "page2.html".
As IE and Firefox are concerned, "/path" is invalid.
"Sorry, cannot leave comment yet"
It's the nature of your input type. Change the type to "button" and you'll be good to go!

html window open-close by javascript

I want to close a window open by this javascript written in my landing html page .
window.open(location,"_self");
in the location html page I have a button where I tried with
<div onclick="javascript:self.close();">Xyyyy</div>
<div onclick="javascript:window.close();">Xxxx</div>
None of them work.
Note: my condition in I have to open the new window in the same place.
any help is appriciated
I did a search on the subject and this page is what i found.
html (not mine)
<input type="button" name="Quit" id="Quit" value="Quit" onclick="return quitBox('quit');" />
JavaScript (not mine)
function quitBox(cmd)
{
if (cmd=='quit')
{
open(location, '_self').close();
}
return false;
}
There is even a test page.
I did a search for a bunny rabbit too (which isn't mine either).
Updated : Mar-12-2015
I did a search on the subject and this page is what i found.
I did a test with this code and confirmed it is not supported. The comments are good reading.
JavaScript (not mine)
function close_window() {
if (confirm("Close Window?")) {
window.close();
}
}
html (not mine)
close
close
I don't get completely what you are trying to do but here are some tips:
window.open("https://slackoverflow.com");
is used to open an entirely new window(can be used to open local files as well ofc)
window.close();
window.close() Closes the tab.
<a target="_blank" href="http://your_url_here.html">Page yada yada</a>
And this can be used to open a link or page in a new tab. If you play around with these for a little itll start to catch on.
I hope some of these ideas help and will help you put together what you are trying to accomplish :)

Click event fires in IE/Firefox, but Chrome is dropping the event assignment

I'm in the process of debugging my web application and have hit a wall. I'm experiencing a behavior in Google Chrome only and my javascript ineptitude is keeping me from the solution.
I have an ASP page with an <asp:Panel> control. Within the panel, I've setup a simple search textbox and am using an <asp:LinkButton> to launch the search. The user enters their search text and should be able to hit enter (for usability sake) and the search results will display. This works in IE, but not in FireFox. There is a documented fix which I've applied to my page and have successfully gotten FireFox to function. Golden.
Except, the fix doesn't work in Google Chrome! A bit fishy, I fire up Firebug to debug the code... oh wait... it's a Chrome only issue. OK, fine I can handle debugging javascript without Firebug (sob) - I fire up the Chrome debugger and step through the code. It turns out that the javascript fix, previously mentioned, is being dropped by Chrome.
The fix script runs on page load and modifies the click handler of the LinkButton:
var defaultButton = document.getElementById('<%= lnkSearch.ClientID %>');
if (defaultButton && typeof(defaultButton.click) == 'undefined') {
defaultButton.click = function() {
alert('function fired');
var result = true;
if (defaultButton.click) result = defaultButton.onclick();
if (typeof(result) == 'undefined' || result) {
eval(defaultButton.getAttribute('href'));
}
};
alert(typeof(defaultButton.click) != 'undefined');
}
And when running the page in the chrome debugger I step into function WebForm_FireDefaultButton() and get to the line:
if (defaultButton && typeof(defaultButton.click) != "undefined") { ... }
and for some reason defaultButton.click has become "undefined". I'm stumped... What am I missing?
Also, I'm not using jQuery and it isn't a viable solution.
The HTML produced:
<div id="abc_pnlSearchPanel" language="javascript" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'abc_lnkSearch')">
<div class="searchPanel">
<span class="searchText">
Type in stuff to search:
</span>
<span style="float: left;">
<input name="abc:txtSearch" type="text" id="abc_txtSearch" style="width:312px;" />
</span>
<a onclick="this.blur();" id="abc_lnkSearch" class="ButtonLayout" href="javascript:__doPostBack('abc$lnkSearch','')"><span>Search</span></a>
<div style="clear: both"></div>
</div>
</div>
I wasn't able to determine why this was happening in Chrome and none of the other browsers. But registering the script to execute on PageLoad solved the problem.
<body onLoad="DefaultButtonFix()">

Categories

Resources