I am developing an app with (JQM+cordova+backbone.js). I have 2 html pages. In the first page I have 1 textbox to input userID. so in the javascript file of the page i do
sessionStorage.userID=$("#userID").val();
in the second page i want to pass the value that i have stored in a tag. how do i do it? i only know if i want to use textbox instead i can do it by using
<input value="<%= sessionStorage.userID %>">
any help is much appreciated. Thanks
With JQuery, it whould be something like this:
//write from session storage to span
window.sessionStorage.setItem("userID", $("#spanID").html());
//write from session storage to span
$("#spanID").html(window.sessionStorage.getItem("userID"));
In Underscore template:
<span id="spanID"><%= window.sessionStorage.getItem("userID") %></span>
Are you using a Backbone plugin to handle session storage?
Related
I am trying to write the step definition, using Capybara, for a Cucumber scenario that is meant to confirm that checkboxes on the home page appear before the options.
Mechanically, I am trying to find the index of a specific html checkbox using its HTML ID and compare it with the index of a specific text on the home page. However, I have spent hours on this issue and have not been able to implement the step definition.
Would I for example be able to somehow convert the page into text and just search for words?
For this web application I am using Ruby on Rails.
Let: checkbox id = environment_Cool
Let: text on the page = Cool
I would greatly appreciate your help.
Suppose you have a checkbox like this:
<form action="demo_form.asp">
<span>
<input type="checkbox" name="coolness" value="Cool" id="environment_Cool" checked> Cool</span>
<br>
<span>
<input type="checkbox" name="coolness" value="Cool"> Not So Cool</span><br>
<input type="submit" value="Submit">
</form>
Mechanically, I am trying to find the index of a specific html
checkbox using its HTML ID
page.find('[#id=environment_Cool ]')
and compare it with the index of a specific text on the home page.
Then it should return the text at the parent of the checklist, which is "Cool".
puts page.find('[#id=environment_Cool ]').find(:xpath,".//..").text
Have the following markup in my html page to toggle a search bar based on if a search icon is clicked:
<a id="searchIcon" href="/"></a>
<div id="searchWrapOuter" style="display:none;">
<div id="searchWrapInner">
<div id="formContainer">
<form id="searchForm" action="#">
<div>
<input type="search" name="search-mini" id="search-mini" value="" data-mini="true" />
</div>
</form>
</div>
</div>
</div>
Width the following javascipt/jquery:
$(function() {
$(document).on("click", "#searchIcon", function () {
var searchWrapper = $("#searchWrapOuter");
$(searchWrapper).slideToggle();
return false;
});
});
This code works as expected on a page load direct off a Url. When coming into the page off a link which is Ajax loaded, loads the contents of the page into the DOM, and the DOM ready handler only executes for the first page.
I have read about using the
$(document).on('pageinit'), not $(document).ready()/$(function()
I still haven't been able to get this to work when coming in off an ajax link however. What would be the correct way to implement these events to get the code to work coming in from an Ajax link?
Thanks,
Most likely it is because you are using IDs instead of classes. jQuery Mobile doesn't work well with IDs because it caches pages into the DOM so if you open a page, close it, then go back to the page, you might have your page twice inside the DOM (one visible, one hidden/cached). So when you do $("#searchWrapOuter") you don't know which element you are actually dealing with (in your case, probably the hidden one).
The solution is to change your IDs to classes. This is not very intuitive but I found that is the best way to work with jQuery Mobile.
Also note this comment in the doc which might also be relevant to you:
The id attribute of all your elements must be not only unique on a given page, but also unique across the pages in a site. This is because jQuery Mobile's single-page navigation model allows many different "pages" to be present in the DOM at the same time. This also applies when using a multi-page template, since all "pages" on the template are loaded at once.
http://jquerymobile.com/demos/1.2.0/docs/pages/page-anatomy.html
You can manually adjust delay time to 500ms and 1s.
$(searchWrapper).delay(1000).slideToggle();
My issue is that the page id was below the pages tags. So once I moved the page div above it, the javascript was included in the ajax page load. Previous to this
I'm trying to create Anchor tags using values in my DB for the name. That way it's easy for me to call them from another page.
<a name="<%= sailing_class.sort_order %>"</a>
But the value from sailing_class.sort_order never appears.
All help is greatly appreciated. I'm on Rails 3.2
You're missing a > (closing <a), so the html is not vaild, and an anchor should be with an id attribute instead of name . Try
<a id="<%= sailing_class.sort_order %>"></a>
i want add html tags in another html tags attribute like:
<p title="<strong class="cssClass">bold</strong>">
some text
</p>
how i can do this?
Only with encode:
<p title="#HttpUtility.HtmlEncode("<strong class=\"cssClass\">bold</strong>")">
some text
</p>
but you receive:
<strong class="cssClass">bold</strong>
At the Browser, title has a default default behavior and you cannot change this on native way. If you want to format the Title property to do a stylish tooltip, you could use a jQuery plugin to do that. Check this link. It shows lots of plugins to do this work.
i have xml file created in other asp.net project,these file include some controls and their attributes.i need to show those controls on my mvc project,
xml file format may be like below.
<div style='left:84px;top: 50px;' ><input id='Text1' type='text' value='Mr.Temp'/></div>
<div style='left:8px;top: 50px; position: fixed;' >Name</div>
<div style='left:84px;top: 650px;' ><input id='Text1' type='text' value='30'/></div>
<div style='left:8px;top: 65px; position: fixed;' >Age</div>
<div style='left:84px;top: 90px;' ><input id='Text1' type='text' value='Singapore'/></div>
<div style='left:8px;top: 90px;' >Address</div>
i need to show these controls depend on their type and location like this.
Name Mr.Temp
Age 30
Address Singapore
So,i read xml file and write ,my problem is i can create controls based on their type,but i don't know how to
assign their position correctly?Their old location can't use any more because mine is asp.net mvc project.
Give me right way,please.
regards
Indi
Have you considered using xslt? Then you can write rules around all that.
Or, if you don't want to use xslt, then consider using jQuery and write your own plugin to look through your xml and transform that to html.
edit
Well with a plug in you can check out how to write a jQuery plugin here.
Essentially what you'll be doing is giving the xml to the plugin and then the plugin will generate the html for you.
It's a bit too involved for here but you can "each()" on the div, store the first one, then the second and generate html for the pair then move to the next two.
$(xmlDoc).find("div").each(function(){
//this will get each div. now you need to create html for each and return the
//whole as a string to be rendered.
});