I'm working on a dynamically changing web app. I'm using javascript and jQuery to populate DIV's with <li>'s and <a>'s. For example, I start with one menu dynamically built with javascript. From that menu, depending on item selected, another javascript function gets called to dynamically populate the corresponding DIV. The problem coming when I keep dynamically building submenu's and JQTouch doesn't switch to the next page.
In the following code, the alert('what') displays on an iPhone but never switches to the ePresentationDetails DIV. I have tried forcing it with jQT.goTo(); but that usually causes more issues and doesn't fix the problem.
Basic html code:
<div id="home">
<div class="toolbar">
<a class="blueButton" href="javascript: void(0);" onClick="$('#logout').show();">Logout</a>
<h1>AllaccessMD</h1>
</div>
<div id="logout" style="display:none;">
<div id="confirmBox">
Are you sure?
<a class="logoutButton" href="javascript: void(0);" onClick="logOut();">Logout</a>
<a class="cancelButton" href="javascript: void(0);" onClick="$('#logout').hide();">Cancel</a>
</div>
</div>
<h1>Home</h1>
<ul class="edgetoedge" id="ulHome"></ul>
</div>
<div id="ePresentations">
<div class="toolbar">
<a class="button back" href="#">Back</a>
<h1>AllaccessMD</h1>
</div>
<div id="ePresentationsData"><div class="progress"><font style="padding-right:5px;">Loading...</font><img border="0" src="Images/ajax-loader.gif" /></div>
</div>
</div>
<div id="ePresentationDetails">
<div class="toolbar">
<a class="button back" href="#">Back</a>
<h1>AllaccessMD</h1>
</div>
<div id="ePresentationDetailsData"><div class="progress"><font style="padding-right:5px;">Loading...</font><img border="0" src="Images/ajax-loader.gif" /></div>
</div>
</div>
Javascript file:
function setupHome(){
if(localStorage.role == "Specialist"){
var homeUL = '<li class="arrow"><a id="aEP" rel="s,' + localStorage.userID + '" href="#ePresentations">My E-Presentation</a></li>'
+ '<li class="arrow"><a id="aN" rel="s,' + localStorage.userID + '" href="#date">My Newsletter</a></li>'
+ '<li class="arrow"><a id="aE" rel="s,' + localStorage.userID + '" href="#date">My Events</a></li>'
+ '<li class="arrow"><a id="aMP" rel="s,' + localStorage.userID + '" href="#date">Medical Partners</a></li>'
+ '<li class="arrow"><a id="aS" rel="s,' + localStorage.userID + '" href="#date">Search</a></li>'
+ '<li class="arrow"><a id="aP" rel="s,' + localStorage.userID + '" href="#date">Profile</a></li>';
$('#ulHome').html(homeUL);
} else {
var homeUL = '<li class="arrow"><a id="aMP" rel="m,' + localStorage.userID + '" href="#date">Medical Partners</a></li>'
+ '<li class="arrow"><a id="aS" rel="m,' + localStorage.userID + '" href="#date">Search</a></li>'
+ '<li class="arrow"><a id="aP" rel="m,' + localStorage.userID + '" href="#date">Profile</a></li>';
$('#ulHome').html(homeUL);
}
$('#ePresentations').bind('pageAnimationStart', function (e){setupEPresentations(getID($('#aEP').attr('rel')).id);});
}
function setupEPresentations(sID){
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
var epObject = JSON.parse(xmlhttp.responseText);
var html = '<h1>Dr. ' + epObject.DR.DATA[0][1] + ' E-Presentation\'s</h1>';
if(epObject.EP.DATA.length == 0){
html += '<div><p>There are currently no E-Presentation\'s for this doctor.</p></div>';
} else {
html += '<ul class="edgetoedge">';
for(var i in epObject.EP.DATA){
html += '<li class="arrow"><a id="' + epObject.EP.DATA[i][0] + '" href="#ePresentationDetails">' + epObject.EP.DATA[i][1] + '</a></li>';
}
html += '</ul>';
}
$('#ePresentationsData').html(html);
$('#ePresentationsData li a').click(function(e) {alert('what');setupEPresentationDetails(this.id);});
}
}
xmlhttp.open("GET","Lib/ePresentations.cfm?Type=getAllEPsID&sID=" + sID,true);
xmlhttp.send();
}
function setupEPresentationDetails(id){
/*xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
var epObject = JSON.parse(xmlhttp.responseText);
var html = '<h1>Dr. ' + epObject.DATA[0][0] + ' E-Presentation</h1>';
html += '<p>';
//html += '<br />' + epObject.DATA[0][2].format("mmmm dd, yyyy");
html += '<br /><strong>Rating:</strong> ' + Math.ceil(epObject.DATA[0][4]) + ' / 5 (' + epObject.DATA[0][5] + ' votes cast)';
html += '<br /><br /><a rel="external" href="http://www.youtube.com/v/' + epObject.DATA[0][3] + '">Click here to view E-Presentation</a>';
html += '</p>';
$('#ePresentationDetailsData').html(html);
}
}
xmlhttp.open("GET","Lib/ePresentations.cfm?Type=getEP&id=" + id,true);
xmlhttp.send();*/
$('#ePresentationDetailsData').html('I dont get called?');
}
What am I doing wrong? Maybe there is a better way to do this?
Thanks!!
What version of JQT are you using?
Are you wrapping your entire app in the <div id="jqt"></div> ?
Have you looked at it using Safari developer mode to see what the list HREFs actually are when they are rendered?
I would look at the rendered HREF for these:
<li class="arrow"><a id="aS" rel="m,' + localStorage.userID + '" href="#date">Search</a></li>
Make sure the html is what it should be. The rel= or your quotes not being escaped might be throwing it off. But I don't see anything obvious that you are doing wrong.
Do you have a link you can send me so I can debug it in action?
Related
Is it possible to set the innerHTML of an element with HTML that includes jinja2?
...
codeBlock = codeBlock +
'<div class="col-lg-4 col-md-6">' +
'<div class="card text-dark bg-light mb-3">' +
'<div class="card-header">' +
'<h6 style="text-align:center;">' + title + '</h6>' +
'</div>' +
'<div class="card-body">' +
'<img src="' + image + '" style="object-fit:contain; width: 100%"; onerror="this.src = \'../static/food.png\'" >' +
'' +
'{% for i in range(1,6) %}' +
'{% if i <=' + stars + '%} <span class="fa fa-star checked star" style="color:orange ;"></span>' +
'{% else %}' +
'<span class="fa fa-star checked star"></span>' +
'{% endif %}' +
'{% endfor %}'+
'</div>' +
'</div>' +
'</div>'
}
document.getElementById("grid").innerHTML = codeBlock
I have seen one post asking the same thing but with no answers.
I asked myself why I have to uses jinja2 and instead just used javascript
codeBlock = codeBlock +
'<div class="col-lg-4 col-md-6">' +
'<div class="card text-dark bg-light mb-3">' +
'<div class="card-header">' +
'<h6 style="text-align:center;">' + title + '</h6>' +
'</div>' +
'<div class="card-body">' +
'<img src="' + image + '" style="object-fit:contain; width: 100%"; onerror="this.src = \'../static/food.png\'" >' +
''
for (let i = 1; i < 6; i++) {
if (i <= stars) {
codeBlock = codeBlock +
'<span class="fa fa-star checked star" style="color:orange ;"></span>'
} else {
codeBlock = codeBlock +
'<span class="fa fa-star checked star"></span>'
}
}
'</div>' +
'</div>' +
'</div>'
}
function confirmDelete(ruta, id){
alert(ruta +","+ id);
document.getElementById('confirmDeleteModal').innerHTML = '<div class="modal-dialog max-w-2xl">'
+ '<div class="modal-content mx-auto">'
+ '<div class="modal-header">'
+ '<button type="button" class="close la la-times" data-dismiss="modal"></button>'
+ '</div>'
+ '<div class="modal-body">'
+ '<h2>¿Está seguro que desea eliminar el registro?</h2>'
+ '</div>'
+ '<div class="modal-footer">'
+ '<div class="flex flex-wrap gap-2">'
+ '<a href="{{route('+ ruta +', '+ id +'}}"'
+ 'class="btn btn_primary">'
+ 'Aceptar'
+ '</a>'
+ '<button type="button" data-dismiss="modal"'
+ 'class="btn btn_outlined btn_secondary uppercase">Cancelar</button>'
+ '</div>'
+ '</div>'
+ '</div>'
+'</div>';
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<a onclick="confirmDelete('method.tables.bank-entities.delete','1')" class="btn btn-icon btn_outlined btn_secondary">
eliminar
</a>
<div id="createModal" class="modal" data-animations="fadeInDown, fadeOutUp">
</div>
I have an anchor that executes a function to remove
<a onclick="confirmDelete('method.tables.bank-entities.delete','1')"
class="btn btn-icon btn_outlined btn_secondary">
<span class="la la-trash"></span>
</a>
This function adds the content to a modal
The function needs 2 parameters the route and the id to delete
function confirmDelete(ruta, id){
alert(ruta +","+ id);
}
The problem is that it doesn't add the content to the div of the modal and I don't know how to use the "{{route('+ route +', '+ id +'}}" in js
If I'm not mistaken, what you want is to use a Laravel function (route) but passing the values through javascript, however that is not possible. First the laravel code is executed on the server and the generated result (html and JS) is sent to the client, so you can't call laravel functions directly from javascript.
One way to solve this would be to create your route string using javascript from the received data, without using Laravel code.
+ '<a href="http:/example.com/'+ ruta +'/'+ id +'"'
+ 'class="btn btn_primary">'
+ 'Aceptar'
+ '</a>'
for(var key in result)
{
var html = '';
html += '<li class="item item_chat">' +
'<div class="product-img">' +
'<img src="' + base_url + '/assets/img/noimage.png" alt="Product
Image" class="img-size-50">' +
'</div>' +
'<div class="product-info">' +
'<a href="javascript:void(0)" onclick="viewGroupBody(this,' +
result[key].id + ',' + result[key].name + ');" class="product-
title">' + result[key].name +
'<span class="badge badge-danger float-right"> Group </span></a>' +
'<span class="product-description"> Message </span>' +
'</div>' +
'</li>';
$('#messageListDashGroups').append(html);
}
I am getting error on this line in onclick function
'<a href="javascript:void(0)" onclick="viewGroupBody(this,' +
result[key].id + ',' + result[key].name + ');" class="product-
title">' + result[key].name +
Before i use two arguments
onclick="viewCusBody(this,' + id + ')"
But now i add an extra argument so i am having issue
You can try with Template literals.
Template literals are string literals allowing embedded expressions. You can use multi-line strings and string interpolation features with them.
Demo:
var base_url = "test.com";
var result_id = "some_id";
var result_name = "jhon";
var html = `<li class="item item_chat">
<div class="product-img">
<img src="${base_url}/assets/img/noimage.png" alt="Product
Image" class="img-size-50">
</div>
<div class="product-info">
<a href="javascript:void(0)" onclick="viewGroupBody(this,'${result_id}','${result_name}');" class="product- title">${result_name}
<span class="badge badge-danger float-right"> Group </span></a>
<span class="product-description"> Message </span>
</div>
</li>`;
$('#messageListDashGroups').append(html);
function viewGroupBody(el, id, name){
console.log(id)
console.log(name);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="messageListDashGroups"></div>
For IE: Try the traditional way by changing
onclick="viewGroupBody(this,' + result[key].id + ',' + result[key].name + ');"
To
onclick=viewGroupBody(this,"'+result['key'].id+'","'+result['key'].name+'")
var base_url = "test.com";
var result = {key:{id: "some_id", name:"john"}};
var html = '';
html += '<li class="item item_chat">' +
'<div class="product-img">' +
'<img src="' + base_url + '/assets/img/noimage.png" alt="Product Image" class="img-size-50">' +
'</div>' +
'<div class="product-info">' +
'<a href="javascript:void(0)" onclick=viewGroupBody(this,"'+result['key'].id+'","'+result['key'].name+'"); class="product- title">'+
'<span class="badge badge-danger float-right"> Group </span></a>' +
'<span class="product-description"> Message </span>' +
'</div>' +
'</li>';
$('#messageListDashGroups').append(html);
function viewGroupBody(el, id, name){
console.log(id)
console.log(name);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="messageListDashGroups"></div>
I am using material design lite and inserting elements with for loop.
var insertClass ='';
var classlist = document.querySelector('.classList');
for (var i = 0; i < 5; i++) {
insertClass += '<div class="eachClass">' +
'<p>'+ i +'</p>' +
'<button id="demo-menu-lower-right" class="mdl-button mdl-js-button mdl-button--icon">'+
'<i class="material-icons">more_vert</i>'+
'</button>' +
'<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="demo-menu-lower-right">' +
'<li class="mdl-menu__item deleteClass">Delete</li>' +
'<li class="mdl-menu__item editClass">Edit</li>' +
'</ul>' +
'</div>';
}
classlist.innerHTML = insertClass;
componentHandler.upgradeAllRegistered('MaterialMenu', 'mdl-js-menu');
The componentHandler.upgradeAllRegistered() function is not working at all,
but when I use upgradeDom() it will work only on first element.
In the example you have provided, you are going to end up with multiple buttons with the same id and multiple ul menus with the same for. That would potentially explain why you appear to only get one menu as the id and for are used by material design lite to bind the buttons and menus together. Try rewriting your example with:
'<button id="demo-menu-lower-right_' + i + '" class="mdl-button mdl-js-button mdl-button--icon">'+
'<i class="material-icons">more_vert</i>'+
'</button>' +
'<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="demo-menu-lower-right_' + i + '">' +
'<li class="mdl-menu__item deleteClass">Delete</li>' +
'<li class="mdl-menu__item editClass">Edit</li>' +
'</ul>'
...which will give each button and menu a unique id or for.
I'm dynamically adding content to page div.
But i could not refresh to new content.The style is missing.(Only shows links)
I'm trying to add listview.
Here is my popup.html:
<div id="pageDiv" data-role="page" data-theme="a">
<div id="contentDiv">
</div>
</div>
Here is my popup.js:
$("#button").on("click",function(e){
var contentDiv = $("#contentDiv");
contentDiv.empty();
var wordDiv = '<ul id="wordListViewId" data-role="listview" data-split-icon="plus" data-split-theme="a" data-inset="true" style="height:15px;width:350px;margin-left: auto;margin-right: auto;">' +
'<li>' +
'<h3 style="text-align: center;">' + 'try me' + '</h3>' +
'<a id="minusId" href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>' +
'</li>' +
'</ul>';
contentDiv.append(wordDiv);
});
Working fiddle.
You can use .trigger( "create" ) :
contentDiv.append(wordDiv).trigger( "create" );
Hope this helps.