I have a jquery mobile webpage. The page consists of a listView which is dynamically generated with jquery. In the end of this list i want to have a simple button , that when i hit it i simply alert something.
My HTML code looks like this :
<div data-role="page" id="Home">
<div data-role="content">
<ul data-role="listview" data-inset="true" class="albums">
</ul>
<form>
<button id="loadMoreAlbums">More Albums...</button>
</form>
</div>
</div>
The button as you see is hard coded under the dynamically generated listView. The jquery for the button is as simple as that :
$("#loadMoreAlbums").click(function(){
alert("yeah i am loaging more!");
});
I have 2 questions now:
1) When i load this page , the button is first loaded and i can see it for 2-3 seconds till the list is loaded and it goes in the end of the list. I dont really like that behavior , i would like that the button is "created" after the listView is already created, so that i dont see it like that in the page. However this is not a really problem , just for cosmetic reasons.
2) The real problem is that when i hit the button , instead of just alerting the simple text and nothing more , it "loads" the page again , and makes the listView vanish and only the button stay on screen. Why is it behaving like that though? Why is it trying to "load" the page again? I just want it to alert something , or do whatever my jquery tells it to do.
Change your HTML from
<button>...</button>
to
<button type="button">...</button>
By default, a <button> element has type="submit" and will submit the form when clicked.
http://www.w3.org/TR/html5/forms.html#the-button-element
$("#loadMoreAlbums").button().click(function(e){
e.preventDefault();
alert("yeah i am loaging more!");
});
The button is acting as a submit. By adding e.preventDefault(); you can supress the submit action.
Related
I'm trying this on my site
http://www.fasw.ws/demos/transitions1/slide1.html
everything is working good but not when i add data-ftrans="slide" to a form button.
example:
<form action"http://google.com"> <button data-ftrans="slide" type="submit" style="height:50px; font-size:20px;">Submit</button>
What does i need to change to get this working ?
I think you must change your button to a depend on the context.
And must have 2 attribute 'href' and 'data-ftrans'. It'll run function slideTo(href, effect, pushstate) in the context.
href: one html page
data-ftrans: transition type
Maybe, you want to submit then change to another page (but not submit page)
<form action="your server script" method="post">
<button click="ajax_submit"></button>
Hide
</form>
<script>
function ajax_submit(){
//do some ajax code
//when success
//a.click();
}
</script>
i am a bee on PHP and i want a solution to switch between two pages on when selecting a radio button with out submit the page or redirecting the page ?
Which one is the more appropriate way
javascript or
php ?
Please help me with a suitable example.Thank you.
Trythis:
you can simple call a link , if you don't have a container in that page to load the new page when radio button is pressed .
You have no option that link the radio with page link ,
But , if you want to load the content of that page inside you php page without redirecting ot post then ur ultimate friend is JQuery and Ajax.
You can handle this with Jquery / Javascript in better way:
Try this:
$("#example").change(function(){
window.location="http://www.example.com/";
});
$("#wiki").change(function(){
window.location="http://www.wikipedia.org/";
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" id="example"> Example Side <br/>
<input type="radio" id="wiki"> Wikipedia Side
For example:
$(document).ready(function(){
$('#submit').click(function(){
$('#rightAd').text("HELLO EVERYBODY");
});
});
This only changes the text in #rightAd for the moment the button is clicked. How do I make it remain, "HELLO EVERYBODY" after the click ends? Or am I thinking about this the wrong way?
changing via script will reflect until the page gets refreshed.
Try this:
HTML:
<div id="rightAd"> some text.....</div>
<button id="submit">Submit</button>
JQuery:
$('#submit').click(function(){
$('#rightAd').text("HELLO EVERYBODY");
});
If you are using <input type="submit"/> this will submit your page, so changes will be flashed as page gets refresh.
Use event.preventDefault() to prevent form from submission
I'm not really familiar with jquery, but am trying to get a simple animated gif to show when a form is submitted. When clicking 'submit' to upload an image I want to show gif so that users know that image is being uploaded. The submit button has an id="submit" and also an onClick="return confirm('message')"
I have the div code containing the gif:
<div id="loading" style="display:none">
<img src="images/hand_timer2.gif" alt="loading" />
</div>
which is hidden. And it does show if I remove the style. Fair enough. But when I try to show it with the following javascript it doesn't show:
<script type="text/javascript">
$(function(){
$('#submit').click(function(){
$('#loading').show();
});
});
I have
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"
type="text/javascript"></script>
in a separate PHP header file. As far as I can see it's the only reference to jquery library, but I do have other javascript codes that all work. I just can't get this one to work. Can anyone point out what I'm doing wrong and why I can't get the div to show gif when clicking submit?
I believe the problem could be that your inline onClick="return confirm('message')" prevent the click-event from reaching your click-event listener attached with jQuery - not sure though. Anyhow, instead of listening for a click-event on the submit-button, I would listen for the submit event on the form, that will fire when the form is actually submitted (a form can usually be posted by other means than clicking the submit button as well - through the Enter key for instance).
$('#idOfYourForm').on("submit", function () {
$('#loading').show();
});
Side note:
You don't close the style attribute properly on your loading div (notice that the > is blue):
<div id="loading" style="display:none>
introduction : I am developing Newsetter in struts1, tiles .For front-end i use js and ajax.
I have 8 tabs on the top of page. I want to show different data on click of each tab. As tab (Button) is clicked, a JS function is called which use AJAX call to call action class which set properties of form (respective to that action.) and then I forward to my left.jsp (left.jsp is one file in my layout, used in tiles ).
My left.jsp looks like:
<div id="left1">
<form name="Project" method="post" >
<bean:write name="Project" property="name" />
</form>
<form name="KnowAMSS" method="post" >
<bean:write name="KnowAMSS" property="namexyz" />
</form>
</div>
** Project and KnowAMSS are two tabs among 8 tabs.
Problem : When I click on another tab same process goes on and displays data to respective tab.. But it also displays the data of previously clicked tab. I don't want those .I want data for only that tab which I have pressed recently .
Please help me out in this .
Thanks .
There are different way to accomplish your task...
I recommend you to use an external library like jquery-ui
Here the example:
http://jqueryui.com/demos/tabs/default.html
The source code is very simple just:
Javascript:
$(function() {
$( "#tabs" ).tabs();
});
HTML:
<div id='tabs'>
// your HTML code
</div>