Jquery Mobile Onclick event does not work before refresh - javascript

I Created some button with an onclick event that runs a function that alerts "hi". The onclick event only works if I refresh the page.
Here is the function:
function testme(){
alert("test");
}
And here is the onclick event:
Button
How can I make an onclick event work without having to refresh the page?

You could try not using a function if that is all you doing.
Button
You could also try adding an click event in jQuery
$(document).ready(function(){
$('#someid').click(function(event){
event.stopImmediatePropagation();
event.preventDefault();
alert('hi')
});
});
edit 1
From the question spookycoder suggested:
You could also use rel="external" on the a tag, this will allow it to perform normally on the jQuery Mobile pages.

this worked for me (especially on iPhone/iPad):
Button

I got a workaround for this issue by changing the way I load my pages.
I put target="_self" into the href element so it don't load using the # system - this way the javascript loads with the initial page load while navigating from one page to a nother.
I will put the below link on my index.html page that will navigate to my signup.html page.
Signup
NOTE: You will lose the 'fancy' jQuery Mobile page transition feature

I think you have to use :
$(document).on('pageinit',function(){
//Some Code
});
instead of :
$(document).ready(function (){
//Some Code
});

Related

Prevent page refreshing after clicking a selector, but be able to run scripts

I would like to ask. I have an element
<a href='...' data-href='...'>
The problem is to prevent page redirecting after clicking this element, but still be able to run JavaScript functions by onClick action.
I was trying to set
pointer-events: none;
in my CSS, but this is blocking my elements from onClick action.
Has anybody any idea how to slove that problem?
If i understand, you would like to prevent the link from following the url.
If this is the case you could give it an id
<a id="myLink" href="...">...</a>
and then control the event using javascript
<script>
document.getElementById("myLink").addEventListener("click",function(event){
event.preventDefault();
/* your code here */
});
</script>
More info: http://www.w3schools.com/jsref/event_preventdefault.asp
preventDefault() function as the name suggests does exactly what you're looking for. Here is a good explanation of what the function does -- preventDefault()
You can use it by either of the methods shown below :-
In JS file
elem.on('click', function(e){
e.preventDefault();
});
In HTML itself
<a href='...' data-href='...' onclick='$event.preventDefault()'>

jQuery use .on(load) with ajax loaded content

I have a webpage with AJAX loaded content. If I click on "export" the content reloads and generate an HTML a-Element using PHP:
<a style=\"display:none;\" id=\"menue-export-link\" href=\"download/".$this->select->downloadcsv."\"></a>
Now I want to start the download automatically, so I wrote the following JavaScript code to start the download on a-Element load:
$(document).ready(function () {
$(document).on('load', '#menue-export-link', function() {
console.log('click export');
$('#menue-export-link').click();
$('#menue-export-link').remove();
});
});
But nothing happens, does somebody have any idea?
First of all there is no load or onload event for html anchor elements.
So as #The F said you have to trigger the download in your ajax success callback. Remember to find and trigger it after you have appended the html in your DOM. For more on jQuery ajax http://api.jquery.com/jquery.ajax/
And now comes triggering the download part. Triggering the click event which causes the navigation is a bit trickier. The following question answers that very well jQuery: how to trigger anchor link's click event and
How can I simulate an anchor click via jquery?
Your js is triggered when your main page is loaded and #menue-export-link probably does not exist to that time. If using $.ajax to load that link, place your javascript inside the success callback to make sure that your link exists or is being loaded before triggering your code.
$(document).on("click", "#menue-export-link", function() {
console.log("click export");
});

Calling OnClick Twice - Once in Tag and Once in Externally Hosted Script

I have a link that is tied to an externally hosted JS script that I cannot change. The external script uses jquery to bind to the click function to perform an action.
<script...src="external cannot change"></script>
<a class="clicker" href="link">Click me</a>
I need to perform another action onClick as well. But when I do the below, the browser only runs the onclick even bound in the external script.
<a class="clicker" href="link" onclick="doThis();">Click me</a>
It does not run doThis(). It only performs the action specified in the externally hosted script.
Is there a method to run 2 onClick events - 1 stored in the external script and 1 coded locally?
Try adding a click event with jQuery. You can add as many of these as you want.
$(".clicker").click(function() {
//your code here
});
Try using a different event. onmouseup should work well. If you want to catch the event and prevent the other script from doing the onclick, use onmousedown and then add
event.preventDefault();
Try using jQuery event binding instead of attribute based events.
function MyOwnClick(e){
// do something.
}
$(".clicker").bind("click", MyOwnClick);
Remove the doThis() function for onclick.You can add another jquery function
$(document).ready(function(){
$(".clicker").click(function(){
//whatever you want to do
});
});

Jquery works only on first page load (ajax paganation)

Only problem: jquery won't trigger the click event of my anchor link for rest of the ajax loaded pages except on first page.
There are already many answers found with this topic but none of them works for me.
Things Ive tried: (pls take a look..I might implement it in the wrong way)
1.) Wrapping with div data-role="page" first before the click event:
$('a[id^="preview"]').wrap('<div data-role="page" />');
//... click event code.. see below
2.) Using the body to capture event on specified link
$('body').on('click','a[id^="preview"]',function(e) {
//... click event code.. see below
3.) Tried putting the script on head or in body.
4.) Tried putting the the script externally or within body.
All of the things I've tried fails. Just working on the 1st page.
Here's my code for the click event and works perfectly on first load (1st page):
$('a[id^="preview"]').on('click',function(e) {
alert('preview clicked');
});
Note:
I'm using $('a[id^="preview"]') because the link are dynamically created with number suffix. e.g. preview1, preview2...etc.
Try to simplify your example and add this code to see if that works if it does expand fromt here.
Demo: http://jsfiddle.net/9hpaL/
$('button').click(function(){
$('body').append('<br><a href="#">Click me<a/>')
});
$('body').on('click', 'a', function(){
alert('It works!');
});

Can we invoke click function on div class using Javascript

I have implemented colorbox functionality on a div class using
<script type="text/javascript">
$(document).ready(function(){
$(".exampleclass").colorbox({iframe:true, open:true, width:"50%", height:"50%"});
})
</script>
Now I want to know is it possible from Javascript to trigger an event which will dynamically open colorbox without me clicking on the div element.
See Jquery's trigger function
Jquery Trigger
You can call it like this:
$.colorbox({iframe:true, open:true, width:"50%", height:"50%"});
Edit: You may need to run this first:
$.colorbox.init();
Check
http://api.jquery.com/trigger/
and
http://groups.google.com/group/comp.lang.javascript/browse_thread/thread/27e7c70e51ff8a99/98cea9cdf065a524
One of the jQuery Solution you can use
$('selector').trigger('click');
Which will exactly work like a normal click pro-grammatically.
Note for this you've to load jQuery in your page. which can be loaded from one of the CDN server.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
Absolutely, Rahul, opening colorbox through the jquery click() function is easy. But first you'll need to change your docReady code to look more like this:
$(document).ready(function(){
$("#example-id").click(function() {
$(this).colorbox({iframe:true, open:true, width:"50%", height:"50%"})
});
})
Notice here I have placed the code with the "open:true" option inside a click handler. You've probably already seen that having that option runnable right at docReady causes your colorbox to open when the page loads.
Now with the click handler ready, you can simply open the box with - well, a click, of course - but dynamically with this code:
$("#example-id").click();
Wherever you have this, your colorbox will open. So you could place it in an $.ajax() success or error handler or a $.load() completion handler. Also, I used a click handler, but if you don't need the click functionality, you could just as easily have placed the colorbox code in a standard function, then call the function whenever you need it.
By the way, I changed your exampleClass to example-id because having more than 1 element attached to the click handler will produce multiple calls to colorbox. This poses no problem if all classes open the same colorbox. If you are interested in seeing an example of the same class opening differing colorboxes, I can expand on this one (but right off I would start with simply embedding attributes into the tags and looking for them in the click handler).
One last note, colorbox is typically associated with an tag, which will have an href and a title. This is where colorbox will get the contents and caption from. You could simply add href and title tags to your . Html validators won't like the href in the div, though, so if that's important to you then you should just add it to the colorbox options:
$(this).colorbox({href: "http://stackoverflow.com", iframe:true, ... })
Additionally, the function called upon trigger will need to call ColorBox in the mode where it is not assigned to an element.
So the .trigger() method invokes a function that invoke colorbox as shown below.
$.colorbox()
This method allows you to call ColorBox without having to assign it to an element.
Example: $.colorbox({href:'login.php'});
See more at the colorbox docs.

Categories

Resources