I m new to Jquery I have created example jquery mobile in this if back and login button is used once then next(>>) and prevoius(<<) button display the same page not that which is refferd using href tag. Before using Back button and login button it work fine afterusing those button it works abnormally.
edit and to view demo http://jsfiddle.net/khushbujoshi/JERG4/5/
DOM Element IDs are unique don't use them twice.
You don't need to do the page change on your own with jQuery. Let jQuery-mobile handle it.
Related
i m using jquery mobile ver. 1.3.0 i want to create a button from jquery from my js file and want to show that button on my page but its not working.
Here is my jquery code to dynamicaly generate button:
View
its only shows the text not the button.
i think its because of the fact that the button is generated dynamicaly so its is unable to found the css in js file.thats why its not showing on page.coz on my page all buttons are working properly.
After adding the button to the DOM,call trigger create method on the page to force JQM to reapply its styles.
$("#pageID").trigger("create");
I currently focus on an iOS web app using Apache Cordova and JQuery Mobile.I want to implement a tableview-like style page (it is called listview in JQuery Mobile). I implement a initial list view in html and I'd like to: when I click the different rows, the html will send message to the iOS, and then I create a request with native code. After that, I return the successful result to js and js will update the list view which looks like you click a row in a tableview and a new page is pushed in.
The problem here is:
how to add the click event?
in the click event, how can I know which row is clicked?
how the tableview-like pushing animation is implemented when I use JQuery Mobile to update the list view?
I'm fresh to the web app and it costs several hours to implement dynamicly creating a list with the request result. And I totally do not know how to go further.
thanks for your help.
I. and II. Here's an example for your first and second question:
This is a code example:
$('ul.listview-example[data-role="listview"] li').bind('click',function(event, ui){
alert($(this).attr('id'))
});
First code line will bind a click event on every listview li element. $(this) is a selected li element.
If you are using never version of jQuery us .on( instead of .bind(, in older version you can also use .live( .
EDIT :
III. I think this should cover your third question: http://jsfiddle.net/Gajotres/YShLE/
I am writing a jQuery Mobile single page application.
In one of my divs (data-role="page") I have a few images (img elements) which I load in "pagebeforeshow":
$('#a1').attr("src", "images/smile.png");
When I first navigate to this page (using changepage), the image is displayed correctly, but if i click back and press the link to this page again, the image is not displayed.
If I use window.location (instead of changepage), everything work fine, but then I cannot control the transition (slide, flip etc').
Any ideas why is this happening?
Thanks!
Try using pagebeforechange instead of pagebeforeshow
I am writing a PhoneGap app using JQuery Mobile.
I change pages based on buttons and links that are clicked within the app. All of my views are encapsulated in a single index.html page. Different pages are broken up by div data role like so:
<div data-role="page" id="view1"></div>
<div data-role="page" id="view2"></div>
When a button is clicked the app moves the next view with:
$.mobile.changePage("#search2_1");
The problem is when a user is typing in a text box. The keyboard pops up with either the "Go" or "Search" buttons available. If the user clicks this, they bypass the javascript function that moves them to the next page and are inadvertently sent back to the root of the app.
Is there anyway to disable or remove these buttons or even have these buttons trigger the change page function?
*note: since this is a PhoneGap app I am limited in what I can do in Objective-C and I am focusing on doing this within the web page.
Since your elements are inside a form element the user submits the form by pressing the search or go button, which will reload the page.
you need to cancel the form submit.
This would look something like this in jquery:
$("yourform").submit(function(){
return false;
});
To answer the second part of the question, this is what I did:
$('#form').submit(function(e) {
e.preventDefault();
$('#button').trigger('click');
return false;
});
This prevents the default submit, and instead triggers the action you want.
I am having the link button and when i clicked on the link button the popup will be open (with in the page itself like a modalpopup. now i have to get the popup feel using jquery and inside the div text should come from database.
How is it possible for getting the message from the backend.
means open a div in a modal popup feel using jquery
or opens the html page in a popup in the same window using jquery
Thanks and Regards
Vara Prasad.M
Take a look at the Facebox jQuery plugin. It does pretty much exactly what you're asking for. For example you can have a link like this to some remote page like so
text
then just call the facebox plugin when your content is loaded like so
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox()
});
and your content will render in a modal window. You can also take a look at Fancybox or ThickBox which provide very similar functionality.
There are two steps to your problem:
Open a modal popup using jQuery
Fetch server side content and display it in the modal dialog
Use jQuery Dialog (http://docs.jquery.com/UI/Dialog) for popping open a modal dialog, and then use jQuery load (http://api.jquery.com/load/) for loading the content from the server.
The server page you call will make the database query and output the contents to the response buffer.