I have an anchor tag in HTML. I want to create a click event which calls function. The issue is whatever solution I have tried makes the page reload. I don't want the page to reload or refresh.
<div *ngIf="showOTPResendText">
<p style="text-align: center;">Please wait {{counter | formatTime}} seconds(s) before requesting a new One Time Password(OTP)</p>
</div>
<div class="otp-not-recieved">
<br />
<h4>
Not received your code?
<a [routerLink]="/"></a>
Resend OTP.
</h4>
</div>
The text looks something like this.
Text Screenshot.
I want it to be text and still hit a function in typescript which calls the resend otp function.
What I have tried and problem I am facing with the solution.
onclick="return false; It doesn't reload the page but then I can't call the function.
Thought of using routerlink but then I don't want to route anywhere and if I route to same page it still reloads the page.
so if you want to have a click event but not go anywhere you can also just not use an <a> tag but regular <p>/<span>/... tag as well.
The angular way is to use the click attribute, so something like
<span (click)="callToYourFunction()">Text</span>
If you really want to use an <a> tag I think you should be able to prevent the event default. For example
<a (click)="myFunction($event)">Link</a>
function myFunction(event) {
event.preventDefault();
}
Related
I know how to send a form without page refresh with jQuery. That is not what I'm about here. I just wanted to point that out. I have a button when onclick() will display a form and a hidden link. The problem I'm facing is when the form is being submitted the page refresh so the hidden link returns to initial state which is hidden.
Is there a way I can prevent a function to be restored on page refresh? That's what I'm interested to know. But if the best way to do this is by preventing the form to refresh I will do it. I just wanted to know if I could do it another way for knowledge sake. I'm trying to learn new ways instead of always doing same old jQuery stuff.
html
<button id="showOwn" type="button" onclick="showHiddenForm();" >
I'm a returning client</button>
<div id="hiddenForm" style="display:none;">
<form method="POST" action="form.php">
<input type="submit" name="validate_customer" value="Confirm Identity">
</form>
<a id="hiddenLink" href='other_page.php>Continue as Roger Rabbit</a>
</div>
script
function showHiddenForm(){
//show hidden form
document.getElementById("hiddenForm").style.display='block';
}
Use localStorage:
window.onload = () => {
if( localStorage.getItem("show") )
showHiddenForm();
};
function showHiddenForm(){
localStorage.setItem("show",true);
//show hidden form
document.getElementById("hiddenForm").style.display='block';
}
I just wanted to know if I could do it another way for knowledge sake.
Store a flag in local storage (or session storage) (spec | MDN) and on page load, use the presence/absense of that flag to determine whether to hook up the function (or generally, to do whatever it is you want to do differently, differently).
I have a main site, mainwebsite.org, and a sub-site that uses a different domain, mainwebsite.giftgiving.org that is styled to look the same as the main site so that users do not feel as though they've left the original site.
The main site has a search button, and I need that search button to work on the secondary site. However, I don't entirely understand how the submit function of the search button works, so I'm not sure how to get it working right on the secondary site. Simply copying the html didn't work, which I assume is because I'm either missing some javascript function or because the submit button is trying to post to a page that doesn't actually exist on the secondary site (I had a similar issue with a different website, where a submit button submitted to "../searchpage.aspx" but that page only existed on www.mainsite.org, so secondarysite.org/searchpage.aspx resulted in 'page not found'). As it is now though, I'm not getting any error, the search button simply doesn't do anything.
Here's the HTML from the main site:
<div id="ctl00_pnlSearch002" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'ctl00_btnSearch002')">
<div class="utilities floatRight">
<ul>
<li class="searchButton"><input type="image" name="ctl00$btnSearch002" id="ctl00_btnSearch002" src="/images/design002/btn_search.jpg" style="width: 30px; height: 22px; border: none;"></li>
<li class="search"><input name="ctl00$txtSearch" type="text" id="ctl00_txtSearch" value="Search" onblur="if (value == '') {value = 'Search'}" onfocus="if (value == 'Search') {value =''}"></li>
<li class="paddingL">A+A-</li>
<li class="textsize paddingL">Text Size</li>
</ul>
</div>
</div>
I don't understand how this line works:
onkeypress="javascript:return WebForm_FireDefaultButton(event, 'ct100_btnSearch002')
If I could figure out where the search button is making a call to, I could modify the secondary site by putting the search button inside a form with action="http://mainwebsite.org/?????"
That one line that you don't understand triggers a JavaScript function that in this case likely ends up performing a postback: WebForm_FireDefaultButton() performs a virtual "click" on the named element, in this case, "ct100_btnSearch002".
(There's a copy of the source code to that JS function here, although you can easily disassemble MS's helper JS yourself to see it: http://www.sentia.com.au/blog/fixing-the-enter-key-in-aspnet-with-jquery)
That button very likely performs a postback on the original page, triggering some "OnClick" event of the "btnSearch002" control. Since you've only shown the resulting HTML and not the original .aspx file it came from, or the .aspx.cs file that contains the server-side code that responds to that postback, it's going to be very hard to tell you much more.
But odds are pretty good that you can't simply copy that "search" button from site to site: Copying that markup is copying just the tip of the iceberg, and leaves out the rest of the berg that's holding up that tip.
I'm using Openscript on a form page that is using a clickable div "save" button. When the button is clicked manually a javascript event is executed to save the changes on the page. When I play back the script, the script clicks on the button and gets redirected to the next page but does not save the changes I made on the text boxes. I'm guessing it doesnt run the ng-click updateUser() function when doing a playback. How can I get openscript to click on the save button and run the javascript function?
Openscript code:
web.button(
"/web:window[#index='0' or #title=Payment Processor']/web:document[#index='0']/web:form[#name='form' or #index='0']/web:button[#index='1']")
.click();
This is what the div save button code looks like:
<div class="row">
<div class="col-xs-12">
<button class="btn btn-primary" ng-click="updateUser()">
<i class="fa fa-asterisk"></i>
Save
</button>
</div>
</div>
.click(); should work, but you can try mouseClick() too.
Using OATS 12.4.0.1 and testing against the AnjularJS Docs example #64, I playback this similar ng-click to increment the displayed count. My example below shows with mouseClick()
AnjularJS example #64:
<body ng-app="">
<button ng-click="count = count + 1" ng-init="count=0">
Increment
</button>
<span>
count: {{count}}
</span>
</body>
Openscript code:
web.window(2, "/web:window[#index='0']").navigate(
"https://docs.angularjs.org/examples/example-example64/index.html");
{
think(14.929);
}
web.button(4, "/web:window[#index='0']"
+ "/web:document[#index='0']/web:button[#index='0']")
.mouseClick(null, 1, false);
// .click(); // this should work too.
In OpenScript there is an option to call the JavaScript function directly.
String javaScript = "updateUser()";
DOMDocument doc = web.document("/web:window[#index='0' or #title=Payment Processor']/web:document[#index='0']/web:form[#name='form' or #index='0']");
doc.executeJavaScript(javaScript);
You can use the above code to call the JavaScript function.
So far I never faced this issue that form is not getting saved or any other click is not saved..
just try following steps..
Record one more time a new script with save option
add proper think time
think(8); or some time I even do think(8);think(8); as some places openscript does not record any think time.
Actually I always increase think time after every step as uniform time
think(8); after every single step even if some think time is there, add more and if no think time add some. The maximum is think(10);.
Basically, I want to use this HTML Form (Which loads in an iframe on a parent page) to submit using a parent page's button that when clicked will submit using the iFrame's built-in OnSubmit function. The problem here is that I could just use the javascript code with document.getElementById('Cable_Extraction_Worksheet').contentWindow.uploaddata(); which would fire off the required function in the JS, but I need to use the form's onsubmit and action attributes because the form needs to redirect correctly and send session variables, only on submit, to be loaded on the NEXT form that is being called via the form's action. HELP? Any better way to do this since I am stuck using iFrames? Tried using php include, but the HTML and CSS is terribly misconstrued in the parent window.
Code is simplified for sample purposes.
IFRAME HTML
<form name="prepform" method="post" onsubmit="uploaddata();" action="http://gp21.idmyasset.com/mobile/prep_b/index.php">
HTML CODE HERE
</form>
PARENT HTML
<div data-role="content">
<iframe src="prep_new/index.html"
frameborder="" name="prep_new" id="prep_new" class="contentiframe"></iframe>
</div>
<li>
<a onclick="document.getElementById('prep_new').contentWindow.document.forms['prepform'].submit();" data-transition="flip" data-theme="" data-icon="check">
Continue
</a>
</li>
I found another way to implement this...
I have an address book widget that shows if there are contents.
If there are no contents, an add button will show up. Upon pressing the add button, it will redirect to another page which will show the form.
The initial design of my website is as follows:
When the user click the add button, it will direct to a page using javascript function:
document.location.href="address?addOnly=true";
The form will display.
If successful, there are $.post that will change the div only that will enable user to do CRUD in the address book.
The problem with the variable inside the url which is address?addOnly=true is that when the user refresh it, it will always shows the add form.
That's why i've decided to hide the implementation using $.post
$.post('address', {"listEmty":true}, function (data) {
window.location = "address";
});
The problem with this is that it can't pass the variable at all.
My questions are:
How to handle the page refresh if using the get method, which passes the paramater in the URL,
Are there anyways in javascript/jquery to pass the variable using post method then refresh the page?
Thank you.
<FORM method="post" action="address" id="refresh" style="display: none;">
<DIV>
<INPUT type="hidden" name="addOnly" value="true">
</DIV>
</FORM>
<SCRIPT type="text/javascript">
document.getElementById('refresh').submit();
</SCRIPT>
What this does is create an invisible form, then immediately submits it. You can of course call the submit from within your other javascript code.