Text is not being rendered after new pages loaded - JQuery Mobile - javascript

I have a program that given an SQL statement (browser database using HTML5-SQL), it populates a set of field in my jquery mobile page. The SQL statement is changed based on an ID passed through the url. So when a button/link is clicked, the same page is called with a different parameter value: index.html?id=545.
Although the first page load seamless, when I click the link to the next page, the objects (page, buttons, link, div) show, but the text inside these objects doesn't show up.
I am using the $('div').live('pageshow',function(event, ui){ event in order to trigger the events of doing the following:
$("#title").text(Title);
$("#date").text(mdate);
When I print the value of Title and mdate in the console of Chrome debugger, it shows the right value. I don't know why the same text doesn't show in the buttons and labels.
Can anybody help me with this.
Thanks

When using jQM you need to refresh the controls. Here are the docs:
http://jquerymobile.com/demos/1.0/docs/forms/docs-forms.html
Refreshing form elements In jQuery Mobile, some enhanced form controls are simply styled (inputs), but others are custom
controls (selects, sliders) built from, and kept in sync with, the
native control. To programmatically update a form control with
JavaScript, first manipulate the native control, then use the refresh
method to tell the enhanced control to update itself to match the new
state. Here are some examples of how to update common form controls,
then call the refresh method:
Checkboxes:
$("input[type='checkbox']").prop("checked",true).checkboxradio("refresh");
Radios:
$("input[type='radio']").prop("checked",true).checkboxradio("refresh");
Selects:
var myselect = $("#selectfoo");
myselect[0].selectedIndex = 3;
myselect.selectmenu("refresh");
Sliders:
$("input[type='range']").val(60).slider("refresh");
Flip switches (they use slider):
var myswitch = $("#selectbar");
myswitch[0].selectedIndex = 1;
myswitch.slider("refresh");
if it's the page you need, try this:
http://jquerymobile.com/demos/1.0/docs/pages/page-scripting.html
Enhancing new markup The page plugin dispatches a pagecreate event, which most widgets use to auto-initialize themselves. As long
as a widget plugin script is referenced, it will automatically enhance
any instances of the widgets it finds on the page.
However, if you generate new markup client-side or load in content via
Ajax and inject it into a page, you can trigger the create event to
handle the auto-initialization for all the plugins contained within
the new markup. This can be triggered on any element (even the page
div itself), saving you the task of manually initializing each plugin
(listview button, select, etc.).
For example, if a block of HTML markup (say a login form) was loaded
in through Ajax, trigger the create event to automatically transform
all the widgets it contains (inputs and buttons in this case) into the
enhanced versions. The code for this scenario would be:
$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );

Related

How does HTML pagination work without a link or script?

Consider the following link:
https://www.officeworks.com.au/shop/officeworks/c/technology/monitors-digital-signage/27--monitors
The "View 100 per page" link does not change the url, nor does it have an onclick() attribute, yet it does reload the page and show up to 100 items. What variable has changed here, and how is it stored? Is it possible to get the HTML of the page with 100 items directly, without having to click the link or reload? Or get the page with 100 items programatically? (eg in Python)
One answer is the Ajax and Event system un Javascript.
You can have one HTML item like
<button id="but1">Show 100 items</button>
and add a "click" event on it from Javascript (example with JQuery)
$("#but1").click(function_but1_click);
This will launch the function_but1_click() function when the HTML button is clicked by the user.
After it, you can ask this function to perform an Ajax request to bring more data to the page (Example with JQuery)
function_but1_click()
{
$.get('myDataLoader.php',function(data){
items = JSON.parse(data)
draw_my_items(items)
});
}
And then implement the draw_my_items() function to display your new item on the screen.
The content is loaded dynamicly, an example of such feature is jQuery Ajax
http://api.jquery.com/jquery.ajax/
There is no need to add a link, or onclick. You can bind event handlers to html tags / classes / IDs ...
https://api.jquery.com/click/
I think the storage happend on the server side, session side. Because i was not able to find a related cookie.
Good luck!

Adding HTML element after the dataset is brought in

In Typeahead JS I'm trying to add an option that appears at the bottom of the dropdown after the user has started typing. Currently I'm using the 'onOpened' Custom Event to trigger adding some HTML after the 'tt-dropdown-menu' element is initialised.
.on('typeahead:opened', onOpened)
function onOpened($e) {
$('.tt-dropdown-menu').html( "Add Option" );
}
The problem is that the jQuery HTML is added when the dropdown is initialised, as expected, then when the user starts typing the new dataset element with the autocomplete results in is added below that jQuery HTML so the jQuery HTML can never appear at the bottom of the dropdown. You can't append the jQuery HTML to the dataset either as that element doesn't exist when the dropdown is initialised.
Is there an easier way around this? The other Custom Events don't seem to cover this scenario.
If you only have one dataset, you can do as I do: add a footer to the dataset, and add it as a DOM element, not plain HTML string. You can then change it at will (say on any event you wish) and your changes are reflected in the dropdown.
Example:
$('#myinput').typeahead({
// rest of your regular stuff, like 'name', 'remote', etc.
footer: $('#dropdown-footer'),
});
... where dropdown-footer is the ID of a div you have somewhere in your dom. You can then do things like:
$('#dropdown-footer').html('Hello')

MVC 3 Page navigation and passing parameters with javascript

i have my main page and also two partial views. One partial view is a menu and the other is a telerik grid.
What i want to achieve is selecting a row in the grid and when i click a button in the menu i want the page to navigate to that action passing the selected row (id).
i want to refresh the entire page and not only the div with the grid.
I tried using document.location = "/Pedido/DetalhePedido/" + id; but i don't receive the id n the controller.
I also tried using $.get('#Url.Action("detalhePedido", "Pedido")', data, function (result) { }); usually i use this to refresh a div and i can't seem to make this work with the entire page (and it probably shouldn't ).
Wich methods do you usually use in your web apps to reproduce this sort of behaviour?
Because clicking on the row happens on the browser, you can't depend on anything from the controller or model unless it's already somewhere in your original model. I implement this by adding a hidden Id column to the grid and model it uses for rendering, then add client events and handlers to the grid and view. Check out the samples provided for the Grid under Client-Side Events for some of the different client events you can take advantage of.
On your grid, first add the Id column (hidden if you like):
.Columns(columns =>
{
columns.Bound(o => o.Id).Hidden(true);
}
Then add ClientEvents and wire up onRowSelect like so:
.ClientEvents(events =>
{
events.OnRowSelect("onRowSelected");
}
Then add a function to handle this event like so:
function onRowSelected(e) {
var id = e.row.cells[0].innerHTML;
window.location = "Something/Details/" + id;
}
UPDATE
Sounds like you are doing everything right on the client. The problem is likely elsewhere, in your Action or Bindings. But to be certain, take a look at what /Pedido/DetalhePedido/" + id actually is with an alert before venturing down that path. You should be able to take that and enter it directly into the url of your browser and hit your action as long as your action is correctly defined, accepting an int called id.
If its still a problem, you need to look at you action. Is it marked for Post? If it is Window.Location wont work because it's not a post. Is the argument it accepts named Id and of type int? If not, should it be? Have you changed your Routes, and if so does your Url match any routes defined?

Same ID's in jQuery Tabs

I am using the jQuery Tabs library in a small application. The page has 5 tabs and the content for each page is loaded using Ajax. The problem is, once I load a tab, it remains in the browsers memory (and so do its HTML elements). So if I use lets say a DIV element with the same ID as a previously loaded tab, all JS function related to that ID try to interact with the old tab.
IN other words, lets say I have a page with 2 tabs, "Traffic Data1", "Traffic Data2". Now first, I click on the Traffic Data1 tab which makes the ajax call and loads the page just fine. This page, has 2 date input fields, id for the first field is "dateFrom" and the other field is "dateTo". Next to that is a "Go" button. Upon clicking the button, a JS function shows an alert box with the values in each of the input fields.
Now, I click on the "Traffic Data2" tab. The contents of the page are very different, but it has the identical input fields, 2 for dates (with same IDs) and Go Button. When I press the Go button on this page, I see the alert box with values form the previous tab.
So my question is, Is there a way to unload the previous tab? Or is the only alternative to use elements with unique divs (even though the pages are complete separate).
Thanks
You cannot have multiple element with the same ID. When you find an element by ID the first one found is always returned because it is expected that IDs will be unique.
Leave the name attributes for the input elements the same but change their IDs to be unique.
You can select an element by its name attribute like this: $('[name="foobar"]')
Update
In the docs for jQuery UI Tabs there is an option called cache that when set to false should remove the old tabs from the DOM after you navigate away from them:
Whether or not to cache remote tabs content, e.g. load only once or
with every click. Cached content is being lazy loaded, e.g once and
only once for the first click. Note that to prevent the actual Ajax
requests from being cached by the browser you need to provide an extra
cache: false flag to ajaxOptions.
Source: http://jqueryui.com/demos/tabs/
You are looking for jQuery Live.
Description: Attach an event handler for all elements which match the current selector, now and in the future.
If you use it jQuery will magically auto-update to match your new elements as they appear/disapear.
// code sample
$("a.offsite").live("click", function(){ alert("Goodbye!"); });
Since the tabs click event reloads your form and assuming you're using divs to contain the ajax-loaded content, add .click(function () { $(this).children('div').children.remove(); }) to your tabs() declaration.
That should remove the div content and any event handlers that are bound to it.
If you can pass a context to the jquery functions, you could make your calls relative to currently selected tab...
$("#someDuplicatedId", activeTab).doStuff();
Or if caching the content is not important, go with Jasper's answer.

Can I cache an empty form template as a second page in browser?

can I cache an empty form template as a second page in browser cache
so that when you click "create event" button on first page it immediately
opens empty form template without having a need to download the template
from the server as it's cached.
Just like CREATE EVENT button in Google calendar; which let's you to switch between calendar and new event form template.
Well, you can either use Javascript for building the new page from scratch when the respective action is invoked (probably quite tedious) or you can use an invisible section (e.g., a separate <div>) of the HTML page (style = display: none) and make it visible by changing its class to a visible style and making the original page invisible (change its style to display: none).
One way to accomplish this would be to load your second view into a hidden container. You can hide it with a simple CSS display property toggle, like this:
<div id="mySecondView" style="display: none;">
<!-- content of second view here -->
</div>
And on button click you can do this to unhide it:
With jQuery:
$('#mySecondView').show();
or
$('#mySecondView').fadeIn();
Without jQuery:
document.getElementById('mySecondView').style.display = '';
Of course you'll have to position the second view via CSS as you want it, otherwise it'll just pop up in some weird place that won't make sense.

Categories