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
Related
I have tooltip for each table row to show edit options. I make it visible using this code:
function popupFunction(p) {
var popup = document.getElementById("sp" + p);
popup.classList.toggle("show");
}
It's working well. But now the problem is how to hide it if I click any other places?
Here is my html:
<div class='popup' id='eds'>
<i class='fa fa-ellipsis-v' id =" + values.items[i].id + " onclick='popupFunction(this.id)'></i>
<span class='popuptext' id =sp" + values.items[i].id + ">
<div onclick='edit(this.id)' id =ed" + values.items[i].id + ">Edit</div>
<br/>
<div onclick='deleteFunction(this.id)' id =de" + values.items[i].id + ">Delete</div>
</span>
</div>
if show class makes an element to be rendred as tooltip, then removing it, should hide it.
document.getElementById(some_id).classList.remove("show")
should do the trick, i believe.
here my code editor html is
<div class="codecontainer" id="htmlContainer" style="max-width:30%;">
<span class="containerTitle">HTML</span>
<textarea class="code" id="html">
</textarea>
</div>
And function call in run button click is
$("#run").click(function() {
$('#resultFrame').contents().find('html').html("<style>" + $('#css').val() + "</style>" + $("#html").val());
document.getElementById('resultFrame').contentWindow.eval($('#js').val());
});
how to use?
Your question is not explanatory , on some assumption for problem i have created a solution for you ..
So the following codes will run HTML input from text area and output in iframe ..
HTML
<div class="codecontainer" id="htmlContainer" style="max-width:30%;">
<span class="containerTitle">HTML</span>
<textarea class="code" id="html"></textarea>
<button type="button" id="run">Run</button>
</div>
<iframe id='resultFrame'></iframe>
JS
$("#run").click(function()
{
$('#resultFrame').contents().find('body')
.html("<style>" + $('#css').val() + "</style>" + $("#html").val());
document.getElementById('resultFrame').contentWindow.eval($('#js').val());
});
LIVE http://jsfiddle.net/mailmerohit5/8y0yctn3/
I am having an issue changing the ID of HTML attributes using JQuery.
This is what I have been using:
$(document).ready(function () {
$('.hiddenDiv').each(function (i) {
$(this).attr("id", "title" + (i + 1));
});
This the HTML:
<div id="Foo">
<div class="title"></div>
<hr></hr>
<div class="hiddenDiv" style="display:none;"></div>
<hr></hr>
<div class="title"></div>
<hr></hr>
<div class="hiddenDiv" style="display:none;"></div>
</div>
I am producing the HTML using another JQuery script that creates it, iterating through an object creating a title and hiddenDiv divs for each element that exists in the object.
jQuery Script that produces the HTML:
$('#Foo').append('<div class="hiddenDiv" style="display:none;">' + foo[0].Content + '<br>' + 'Address: ' + foo[0].Address + '</div><br><hr>');
Both scripts execute when the document is ready.
Looks like elements are not created on DOM ready. You need to add the ids to them just after appending the content. like this:
$('#Foo').append('<div class="hiddenDiv" style="display:none;">' + foo[0].Content + '<br>' + 'Address: ' + foo[0].Address + '</div><br><hr>');
$('.hiddenDiv').each(function (i) {
$(this).attr("id", "title" + (i + 1));
});
Demo
I have created a list, which when a item is clicked, a popup is shown.
The problem starts when using the code on a mobile device (where the screen is relatively small). When a list item is hit, very often, also a button in the popop is hit.
What is the best way to deactivate the buttons until the user realizes the popup even did show?
Try the code here.
The HTML code:
<div data-role="page" id="kon">
<div data-role="content">
<ul data-role="listview" id="kon_list" data-icon="false">
</ul>
<div data-role="popup" id="contactMsgBox" data-transition="pop">
<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
<h3 class="ui-title">Ansprechpartner kontaktieren</h3>
Anrufen <br />
E-Mail senden <br />
Abbrechen
</div>
</div>
</div>
</div>
The JS code:
kontakts = JSON.parse('[{"mail":"test#test.de",'+
'"name":"test test","ort":"Stuttgart","tel":"0123 1234-123"},{"mail":"test2#test.de",'+
'"name":"test2 test2","ort":"Lauf","tel":"0123 1234-123"}]');
var listHTML = "";
for(var i=0; i<kontakts.length; i++)
{
//set the menu item
listHTML = listHTML + "<li tel='"+kontakts[i].tel+
"' mail='"+kontakts[i].mail.toLowerCase()+"'><h3>" + kontakts[i].ort +
"</h3><p>" + kontakts[i].name + "<br />Telefon\t" + kontakts[i].tel +
"<br />E-Mail\t" + kontakts[i].mail.toLowerCase() + "</p></li>";
}
//set items and reload
$('#kon_list').html(listHTML);
$('#kon_list').listview('refresh');
//bind list items
$('#kon_list').children('li').bind('touchstart mousedown', function(e) {
//alert('Selected Tel=' + $(this).attr('tel') + 'Mail=' + $(this).attr('mail'));
$("#contactMsgBox").popup("open");
});
You could change
$('#kon_list').children('li').bind('touchstart mousedown', function(e) {
to
$('#kon_list').children('li').bind('vclick', function(e) {
That way the popup won't show until the user lifts his finger or releases the mouse button.
The problem is happening because mobile browsers wait approximately 300ms (apparently 500ms on samsung galaxy s2) from the time that you tap the button to fire the click event. This wait was causing both to be tapped, the item, and the popup button.
The solution is to stop the browser from waiting. This can be accomplished with the fastclick library
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;