I am creating a HTML page with multiple data-role pages.loading time we will check some condition and display that particular data-role page.currently id display first data-role, how can i display data role page conditionally.
Take a look at the docs section "autoInitializePage". Here you can disable the default initialization until $.mobile.initializePage is manually called.
Because the mobileinit event is triggered immediately, you'll need to
bind your event handler before jQuery Mobile is loaded. Link to your
JavaScript files in the following order:
jquery.js
custom-scripting.js
jquery-mobile.js
Please take a look at this fiddle. What it basibally does is adding a hash to your url thus redirecting to the subpage.
Source
Related
I have a form in which the attribute action is set to go to a page but whenever i press the submit button its taking the data to another page.
while writing your form use post method if you are using get method or use get if using post. one of them uses to carry data while navigating to target.. so just change your form method..
AI have an expanding box, which contains some information, what I want to do and not sure if it is possible is that when somebody clicks on the link (shown below)
View Job Description
it passes a variable to Ajax and then have that update a mysql table to say the job description has been viewed.
Now I know the link above is just a link which triggers some javascript to expand the box and so just after some advice on how I can achieve this?.
I have other code which passes variables to ajax but through a form, and so I am not sure if this is possible.
Try this one using Jquery:
after the clicking the link the ajax request will be sent to the specified url.
ulr i.e. where your script will excute.
store all result in variable and print at the end of page.
Usins variable "data" you can get that result.
$(".expandLink").click(function(){
$.post("url",function(data,status){
$(div).html(data);
}
});
I am loading 2 jQuery UI tabs with data from ASP.NET MVC 3 PartialView using $.ajax(). I am specifying the '/controller/action' as URL. This works fine and I am able to load the two tabs with content returned by the partial views.
I have a Save button in the _layout.cshtml.On clicking the Save button, I want to get data from all tabs and send it to the controller as a JSON object.I want to use only one Save button for saving all data in the tabs instead of having Save button at the bottom of each tab.
The problem is I am able to get data from only the first tab. I get 'No Source Available' error when I try to get data from the other tab. The $('#some_id').change() event is also not fired for the controls in the second tab.
Please suggest if there is a better way to implement this ?
I would also like to know why the HTML generated by PartialView is not seen when I view source HTML of the page ?
Thanks.
It turned out to be an issue of async requests that were being made to load the tabs. I used the load() of jQuery tabs to resolve this.
I have a web page consisting of a dropdown menu. What i want is the contents of other dropdown menus present in the page must change according to what has been selected in the first dropdown box. For example if a dropdown consists of Degree as its element. If i select Degree element then another dropdown must show only degree courses. This must happen automatically without clicking any button. How can i achieve this?
I would make this a comment, but I do not have commenting abilities. You are going to want to use $.post with jquery and ajax to accomplish this: http://api.jquery.com/jQuery.post/ . Ajax with JQuery is not difficult to do.
You will want to use the onchange event of the first drop down to use a jquery ajax $.post call to post to the server, passing the selection from the drop down as a parameter. The page that it post's to should us GET to get the selected attribute from the drop down, and then retrieve ( from the database or where ever) the options that go into the second drop down, based on the parameter. The code should be written out to the page. The jquery ajax call has a way to get the response and let you define a custom function to be run once the post returns. The return should be what you had written out to the page, and then you can just update the second drop down list with the returned data inside this function.
I hope this helps!
I'm wracking my brain on this one.
After an HTML document loads in a browser, I want to be able to monitor
the page in case any content on it changes for any reason.
Is there a Javascript function with which I can track 'what has
changed' on the webpage. This should be irrespective of the type of content on the HTML page.
I have two examples for you to ponder on:
Ex1:
Say in an HTML document there are two select boxes s1 and s2.
The items list in s2 depends on selections in s1 (page is not
refreshed — that is, s2 is loaded through Ajax or something).
So after the HTML page loads I need to get a notification whenever s2
is populated...
Ex2:
Say, in an HTML page, there's a link, Onclicking which a light pop-up
div is created with some text.
How can I capture the content of this dynamic pop-up?
In all this discussion, I'm not taking into account any particular
format of HTML...the HTML content can be anything...I just need
to keep tracking if any content changes after the page loads...
Ideally I need to achieve this using JavaScript (client-side
scripting).
How can I achieve this?
You can keep track of changes in a textbox using onkeyup. This will tell you every time someone makes a change in a given textbox.
This could potentially fire alot of events. However, using onblur won't necessarily tell you about changes in the textbox and onchange's browser coverage is spotty at best.
If you are using AJAX, you could setup the response function to handle a home grown "event listening" system. So after the response does what it needs to do, it could call any methods that were registered with it, passing in the response text when necessary.
So from your examples above, in Ex1, when the AJAX returns from S1, it would load S2, then call a method saying S2 had changed. In Ex2, when the new AJAX returns the DIV's contents, after loading it into the DIV, it call a different method (or possibly the same depending on what your trying to do) and alerts it that the DIV has new contents.
You could set your "watcher" script as a timer, running a diff function on the current document.body.innerHTML and a stored version captured on load. Depending on how fast the diff will run will give you an idea on what timer interval to use.
This may not capture changes in form elements, but for those, it's easier to loop through all form elements in every form on the page.
Here's someone's diff function I found on Google: http://snowtide.com/jsdifflib