I am working on an E-commerce site where on product listing page when the user clicks on Add Cart button
product will be added to cart and we are showing an popup box saying the product added... We are using Plugin for showing popup box and data for popup is coming from ajax and java controller. It is working fine well when the entire page loaded successfully. If the user clicks on Add Cart while the page load its showing plain ajax result instead of Popup because the Plugin using for Popup is not available during page load. We tried disabling the Add Cart button till page load but client is not happy with this approach.
Code:
<--!form for add to cart-->
<form submit="addcart()">
<input type="button">Add Cart</button>
</form>
//JS for show popup and save form data
saveform:function{
}
displayPopup:function{
}
productadd:function{
saveform();
displayPopup();
}
$(document).ready(function(){
productadd();
}
Is there any workaround to capture the click event during page load and trigger the click event automatically for particular button if user already clicked on. Please suggest me any other solution to show popup properly.
Thanks In Advance:)
Your option is not to use inline JS, which is not recommended nowadays anyway. In this case, you risk calling the addcart() function when the JS file has not been downloaded and parsed.
The solution is to use JS to bind the click event to the submit form upon DOM ready, so that the click event will only be meaningful once JS is loaded. For your HTML, remove the inline JS:
<form>
<input type="button">Add Cart</button>
</form>
Instead, listen to the submit event using JS:
$(document).ready(function(){
productadd();
$('form').submit(function() {
addcart();
});
});
Also, you might want to look at the reason why your site is loading so slowly (or at least the JS). Are you serving it as a gzipped file? Is there anyway to minimize it (only the production version)?
Related
I'm a little stuck on creating an automatic page to press a 'log in' button which runs a javascript, submitting the form automatically isn't good enough as it simply doesn't log the user in (it's a javascript login system - as a test), instead, it will just return an error: http://prntscr.com/m1f1f6 it needs to automatically on load 'press' the log in button: http://prntscr.com/m1f1ur in order to perform the action of sending to "./main.php" which has an 'isLoggedIn' function.
<button class="btn btn btn-block" id="btnLoginMain">Log in</button>
Thanks in advance!
First, this is not a good approach to make the customers/users to logging in. You can use cookie or sessions to auto login your user. Still, if you want to click the button auto on web page loading you can use the below script.
<script>
window.onload=function(){
$("#btnLoginMain").click();
}
</script>
use this in the header file of your html file. If you want to click the button after some time of page load use the setTimeout() function.
You do not need click there. Check the source code, what happen when you click that button and replicate it in your script.
Clicking it is not needed to log in. Copy and paste your code for when you do press the button, and just make it appear when the page starts up.
I'm using wix to create simple landing page and would like to connect it with google analytics events.
I would like to intercept the event of pushing form send button.
Page example with form
The button id -> submitButton
Normally if i have full access to page code i use:
<script type="text/javascript">
$(document).ready(function () {
$('#buttonName').click(function () {
//google function
ga('send', 'event', 'EventCategory', 'EventCategory', 'EventName');
});
});
</script>
But here I can use only iFrame an internal plugin (hat generate code inside iframe).
PAGE STRUCTURE:
- Text, image ecc ecc;
- iFrame with form (managed by plugin, where i can't add/edit code);
- iFrame where i can add code. for example: example page
So I need to invoke click event of the button with id submitButton from an iframe which invokes the click of the button placed in other iframe (where the id is unknown).
is there a way to do that?
Thank you for response.
If you do not have access to the iFrame code you will not be able to put that tracking id the way you want.
If you're trying to intercept a click event within the iframe that you don't have control of, I'm pretty sure that's not possible for security reasons: otherwise it would be possible for an advert or any third party code on your page to intercept events on completely unrelated elements.
If you're trying to pass a click event from a bit you do control to a button that you don't, unless you know the ID of the button in the other iFrame you want to click, I don't think you're going to have much luck.
I have a server that monitors for HTTP activity, then triggers a local action.
From a remote device I currently use this to trigger my server:
<button type="button" style="width:100px;background-color:#43BC67">Try Me</button>
The only problem is, it navigates to a new page which shows the reply from the server which is "Done". I don't want to see that page or the reply. I just want to silently hit that URL. Ideas?
Thanks for everyone's help. This works when I load or reload the page, but not when I click the button. I'm sure I'm missing something simple.
<button type="button"><iframe src="example.org" style="visibility:hidden;display:none"></iframe>Test</button>
Make an ajax call. You can get rid of the a tag and just write javascript code to make an ajax call to your url when the button is clicked.
AJAX Calls
More Info
You have several options. The ones that spring to mind, in my order of preference, are:
Link to a URL that returns a 204 No Content response
Use JavaScript and XMLHttpRequest to make the request
Target the link to a hidden iframe
Use JavaScript to create an element which loads external content, such as an img and add it to the DOM.
Incidentally, you cannot have a button inside a link. If you want to submit a form use a button. If you want to link somewhere, then use a link. Apply CSS if you want your link to look like a button or your button to look like something else.
If there's any possibility for you to use jquery then you can do this (when you click on the link it will prevent the browser from actually navigating to the url):
HTML:
<body>
<a id="mylink" href="http://www.google.com">Google</a>
</body>
Javascript:
$(document).ready(function(){
$("#mylink").click(function(e){
//prevent browser from navigating to the url
e.preventDefault();
//call url asynchronously (in other words call url in the background)
$.get( "http://myserver/ping", function(data){
//do something with the response
});
});
});
Hope it helps!
I know there are many questions about jQuery + Back button issues, but it seems that they're trying to maintain history features when clicking the browser back/forward buttons.
My question is that when clicking the back/forward button, how can I load ajax-affected html page?
For example,
In index.html, dynamically remove all "div" elements from the list using AJAX (jQuery.post()).
Press the browser back(or forward) button to go to newpage.html.
Press the browser forward(or back) button to go to index.html again.
PROBLEM: the html page contains the deleted "div" elements.
How should I load index.html with no "div" elements after step (3)?
I'm currently using jQuery and Django as backend.
Thanks!
Use the jQuery history plugin to encode the application state. See their Demos page for examples of how to do what you want.
There is a button in the web page as
<input class="button" type="submit" value="new">
I need a greasemonkey script which even before the page completely loads must automatically click on the button and move to next page.
Thanks.
I need a greasemonkey script which
even before the page completely loads
must automatically click on the button
and move to next page.
With Greasemonkey, you currently can only run a user script on DOM ready which is just before the page load is complete.
With user scripts used on Google Chrome they can run sooner, and eventually you will be able to run userscripts before DOM ready.
As for the code to select and click that button:
document.evaluate("//input[#value='new' and #type='submit' and contains(#class, 'button')]", document, null, 9, null).singleNodeValue.click();
should do the trick