When this code runs the alert box comes up with the link that includes &list=groceries and &email=tim#sitebuilt.net. When the mailto: fires and brings up the email window those parameters are missing and I can't figure out why. the length of the string doesn't seem to matter.
This code has all it needs to run. You can run it here: http://jsfiddle.net/mckennatim/rRerR/
<div data-role="header">
<h1>My Title</h1>
</div><!-- /header -->
<div data-role="content">
<h3>Add List</h3>
<form>
<div data-role="controlgroup" id="addwhat">
<input type="email" id="shemail" name="inp0" class="inp" />
</div>
<div data-role="controlgroup" data-type="horizontal" class="aisubmit">
<input type="submit" data-theme="b" id="mailit" value="mail it"/>
</div>
</form>
</div><!-- /content -->
</div><!-- /page -->
<script>
$('body').on('click', "#mailit", function (e) {
e.stopImmediatePropagation();
e.preventDefault();
repo = "Sebaza";
list = "groceries";
semail = $("#shemail").val();
//(semail);
urri ='mailto:'+ semail + '?subject=share this list with me' + '&cc=' + semail + '&body=Hi, I think it would be cool if we shared this ' + list +' list on our phones. That way when either of us modified it we would see the update. http://10.0.1.18/webeshoppin/stuff2get/www/food2buy.html?repo=' + repo + '&list=' + list + '&email=' + semail ;
window.location = urri;
alert('clicked ashare ' +urri);
});
</script>
</body>
</html>
The '?' and '&' characters are being stripped out by the parser of the mailto link.
Those characters need to be encoded. Try replacing with:
? = %3F
& = %26
so, that JS line would look like:
urri ='mailto:'+ semail + '?subject=share this list with me' + '&cc=' + semail + '&body=Hi, I think it would be cool if we shared this ' + list +' list on our phones. That way when either of us modified it we would see the update. http://10.0.1.18/webeshoppin/stuff2get/www/food2buy.html%3Frepo=' + repo + '%26list=' + list + '%26email=' + semail;
Related
I have a very simple webpage (actually implemented as an iFrame in a MS Business Central (BC) page) which is displaying some address fields for input. This is implemented into the BC page using...
HTMLContainer.insertAdjacentHTML('beforeend',
'<div class="addyaddin">' +
' <div class="control">' +
' <div class="caption">Address</div>' +
' <div class="value">' +
' <input type="text" class="addressline" id="address1" placeholder="Start typing an address.." auto-complete/>' +
' </div>' +
' </div>' +
' <div class="control">' +
' <div class="caption">City</div>' +
' <div class="value">' +
' <input type="text" id="city" auto-complete/>' +
' </div>' +
' </div>' +
' <div class="control">' +
' <div class="caption">Region</div>' +
' <div class="value">' +
' <input type="text" id="region" auto-complete/>' +
' </div>' +
' </div>' +
'</div>');
Which works fine, however the html is multiline so it all gets a bit messy. What I'd like to have is an html file which I could simply read into a variable and then have that display. This means my code is a lot tidier and I can mess around with the html without having to string a whole lot of lines of html together in the insertAdjacementHTML statement.
Something like...
ReadHtmlFile('\myfile.html',textVariable);
HTMLContainer.insertAdjacentHTML('beforeend',textVariable);
Unfortunately JavaScript is something I'm not really familiar with so it's been a bit hit and miss up to this point. Hoping someone can guide me in the right direction
Cheers
Craig
I'm not sure if that is what you asked for, but:
I just copied, cleaned extra spaces and changed the variables names of an answer by #Majid Laiss in this stackoverflow question, just to test it. The function works well. A new index.txt file with the following content is created and saved in my computer:
<h1>Hello World</h1>
<p>Just a paragraph</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
</ul>
When the request succeed (file has been recognized), the content (HTML Elements) will be stored in the variable text, and printed to the console. Check:
var text = new_file.responseText;
console.log(text);
This way you can manipulate the content easily.
You may have to update the path, depends on your folder structure:
read_file("index.txt"); /* The path to the file */
Credit:
#Majid Laiss - How to read a local text file?
The Code:
function read_file(file){
var new_file = new XMLHttpRequest();
new_file.open("GET", file, false);
new_file.onreadystatechange = function () {
if(new_file.readyState === 4){
if(new_file.status === 200 || new_file.status == 0){
var text = new_file.responseText;
console.log(text);
}
}
}
new_file.send(null);
}
read_file("index.txt"); /* The path to the file */
I have a rails app along with angular, and I need to populate a large block of HTML so that it can fill in default text for textarea tag. Currently what I did was add the text like this
"<div class='navbar navbar-default letter-header hidden-sm hidden-xs'>\n" +
" <div class='container'>\n" +
" <div class='letter-navbar-header navbar-header'>\n" +
" <a href='/'><img src='/assets/logo.png' class='letters-logo navbar-brand'></a>\n" +
" </div>\n" +
" <div class='navbar-header header-text'>\n" +
" <div class='navbar-text'>\n" +
" "text" + "\n" +
" </div>\n" +
" </div>\n" +
" <div class='letter-navbar-header navbar-header'>\n" +
" <a href='/'>\n" +
" <img src='' class='second-logo'>\n" +
" </a>\n" +
" </div>\n" +
" <div class='navbar-header navbar-right'>\n" +
" {{ user_login }}" + "\n" +
" </div>\n" +
" </div>\n" +
"</div>\n"
I would like to know if there is a cleaner way to do it. I have tried using js.erb file with the render function like this
<%= j render('navbar') %>
but placed it in the asset folder so the render function is not working https://stackoverflow.com/a/8370847/1087841. I would like to know if there is a better way to do it.
[EDIT]
The js.erb file is actually an angular factory which has default HTML for the navbar, which then can be used by the angular controller to render default data. The factory file is then also gets added to application.js as a require.
this is the textarea that needs default html
<textarea name="t[navigation]" id="input-navigation-bar" ng-model="t.navigation_bar" class="form-control" rows="10"></textarea>
I could have placed the value tag with the default html but it has ng-model so nothing gets displayed. So I created a factory for the default data. Now the factory lives in /assets and has a //= require 'default_html_factory' in application.js.
I finally found a way to do it. In the erb page I added
<script>
<%= render 'style_factory.js.erb' %>
</script>
and in the factory I added this
this.ngapp.factory('TenantStyle', function() {
return {
header: "<%= j render 'navbar' %>"
}
});
and in the _navbar.html.erb file I added this
<div class="navbar navbar-default letter-header hidden-sm hidden-xs">
<div class="container">
<div class="letter-navbar-header navbar-header">
</div>
<div class="navbar-header header-text">
<div class="navbar-text">
</div>
</div>
<div class='letter-navbar-header navbar-header'>
<a href='/'>
<img src='' class='second-logo'>
</a>
</div>
<div class="navbar-header navbar-right">
</div>
</div>
</div>
and now I can call the factory in angular and get the header value.
I have a collapsible set for days of the week, with user's activities inside it that represented as a listview inside the collapsible-set.
<div data-role="collapsible-set" id="calCol" data-collapsed-icon="arrow-d" data-collapsed="true" data-iconpos="right">
<div data-role="collapsible">
<h1 id="day1Header">Sunday<img src="#" /></h1>
<ul id="day1" data-role="listview">
</ul>
</div>
<div data-role="collapsible">
<h1>Monday</h1>
<ul id="day2" data-role="listview">
</ul>
</div>
...
All the content for the user's activities i take from my database so i insert all my content dynamically like this:
var userActivitiesObj = JSON.parse(data.d);
for (var i = 0; i < userActivitiesObj.length; i++) {
for (var j = 0; j < userActivitiesObj[i].time.length; j++) {
var listItem = "<li style='background-color: " + userActivitiesObj[i].hobColor + ";'>";
listItem += userActivitiesObj[i].actName + " - " + userActivitiesObj[i].actAddress + " - ";
listItem += userActivitiesObj[i].time[j].startTime + "-" + userActivitiesObj[i].time[j].endTime;
listItem += " (" + userActivitiesObj[i].time[j].audiance + ")</li>";
$("#day" + userActivitiesObj[i].time[j].day).append(listItem);
$("#day" + userActivitiesObj[i].time[j].day).listview("refresh");
}
}
One last thing that left for me to do is to add image of every activity to the header of that day.
When i have tried to do it in html, it worked flawlessly:
<h1 id="day1Header">Sunday<img src="#" /></h1>
but when trying to do it dynamically, it doesn't work correctly.
That what i have tried to do:
$("#day1Header").html($("#day1Header").html()+"<img src='#'");
and:
$("#day1Header").append("<img src='#'");
I know that i am missing here something like the .list("refresh") function, but i have no idea what is that.
jQuery Mobile adds an anchor tag with class ui-collapsible-heading-toggle within the header and places the collapsible title there. So you can remove previous images and append the new image like this:
$("#day1Header .ui-collapsible-heading-toggle img").remove();
$("#day1Header .ui-collapsible-heading-toggle").append('<img src="https://placeimg.com/44/22/tech" />');
DEMO
I have a common JQM popup across multiple pages. From each page, the contents of popup are refreshed using the data from page. On the first load of the page I can see the refreshed contents on popup. However, when I load new data onto popup div, I still get the older data on popup widget.
If I examine the innerHTML of the popup, it gives me new contents but cannot see them on the popup.
Here is my example code:
<body>
<div id="common-popup">
<div id="data-popup" data-role="popup">';
<p>Name: N/A<p>
<p>DOB: N/A <p>
</div> <!--Popup div ends -->
</div>
<div data-role="page" id="page1">
<input type='text' id='p1_name' value=''>Name: </input>
<input type='text' id='p1_dob' value=''>DOB: </input>
<button class="update-data" id="b1"/>
Watch Data
</div>
<div data-role="page" id="page2">
<input type='text' id='p2_name'>Name: </input>
<input type='text' id='p2_dob'>DOB: </input>
<button class="update-data" id="b2"/>
Watch Data
</div>
</body>
<script type="text/javascript">
$('.update-data').on('vclick', function(){
var id = $(this).id;
id = id.split('');
var htm = '<div id="data-popup" data-role="popup">';
htm += '<p>Name: ' + $('#p' + id[1] + '_name').val() +'<p>';
htm += '<p>Name: ' + $('#p' + id[1] + '_name').val() +'<p>';
$('#common-popup').html(htm).trigger('create');
});
</script>
In the above code if I examine the innerHTML using:
console.log("Common Inner Html: " + document.getElementById('common-popup').innerHTML);
I can see the updated contents, however when I open the pupup, I still see the older contents. Please let me know how to refresh the contents on popup
JS Fiddle: http://jsfiddle.net/bhavik89/49QwL/1/
In the Fiddle I can only see the initial contents, they are not refreshed upon the update
Instead of putting the popup in a DIV, just leave it under the body. Then when recreating it, leave the top level DIV there and just replace the contents:
<div id="data-popup" data-role="popup" data-theme="a" >
<div >
<p>Name: N/A</p>
<p>DOB: N/A </p>
</div>
</div>
Make sure your link has data-rel="popup":
Watch Data
Give your update button some text so we can see the button:
<button class="update-data" id="b1" >Update</button>
With this in place initialize the popup on document ready and then on the update button click, replace the popup HTML, call enhanceWithin() and finally call popup("refresh") to update the popup widget:
$(function(){
$("#data-popup").enhanceWithin().popup();
});
$(document).on("pagecreate", "#page1", function(){
$('.update-data').on('vclick', function(){
var id = $(this).prop("id");
id = id.split('');
var htm = '<div>';
htm += '<p>Name: ' + $('#p' + id[1] + '_name').val() +'<p>';
htm += '<p>DOB: ' + $('#p' + id[1] + '_dob').val() +'<p>';
htm += '</div>';
$("#data-popup").html(htm).enhanceWithin().popup("refresh");
});
});
Here is a working DEMO
I am using the jquery ui tabs to create dynamic tabs on the fly which will start off without any content. From what I can tell my code is building everything and putting it in the proper places, but jquery is not recognizing them as tabs. How would I get it to recognize the new tabs that were created after page load?
The html code:
<div class="main">
<div>
<button id="new">button</button>
</div>
<div id="tabs">
<ul>
<li>View1</li>
<li>View2</li>
<li id="createView">Create New</li>
</ul>
<div id="tabs-1">
<p>something on this page</p>
</div>
<div id="tabs-2">
<div>
<p>something else on this page</p>
</div>
</div>
</div>
</div>
the Javascript:
//Tabs functionality
$('#tabs').tabs();
//Create new view
var tabNum = 3;
$('#new').click(function() {
$('#tabs ul').append('<li>' + '' + 'newitem' + '' + '</li>');
$('#tabs').append('<div id="' + 'tabs-' + tabNum + '">' + '<div>new</div>' + '</div>');
var NewViewNum = 'tabs-' + tabNum;
$(NewViewNum).focus();
tabNum++;
});
The jQuery UI Tabs have a refresh method you can use per the documentation.
Try calling:
$("#tabs").tabs("refresh");