I'm currently having some issues with Phonegap and my HTML and Javascript codes.
HEAD SCRIPT CODES:
<script>
var requestsHTML = "<li id="+displayReqId+" class='table-view-cell'>" +
"<a class='navigate-right' href="+goToUrl+" data-transition='slide-in'>" +
"<strong class='requestTitle'> "+displayEduLevel+"</strong>" +
"<div class='displaySubject status'>"+displaySubject.join(", ")+"</div>" +
"</a>" +
"</li>";
$("#viewRequestList").html(requestsHTML);
</script>
HTML BODY CODES:
<div class="content">
<div class="ribbonTitle_request">
<img src="imgs/ribbon.png" height="80%" width="80%">
<div class="containerRibbon">
<div class="subTitle" align="center"> Pending Requests </div>
</div>
</div>
<div id="viewRequest" class="viewRequest card">
<ul id="viewRequestList" class="table-view">
</ul>
</div>
</div>
As you can see, when the document runs, I want the li tag to be inserted into the body. However, nothing appears when I run it on the iOS Simulator.
How it currently looks like: http://imgur.com/9fwqlci
But when I do add the li directly into the body, it works: http://imgur.com/Mb25T7u
Would appreciate it if someone could help me with this problem. Thank you.
EDIT: Fixed codes & edited Title.
In your <head> the #viewRequestList ul isn't created yet, so $("#viewRequestList") won't find it. Add your script at the end of your <body> or into the $(document).ready() function.
Related
I'm trying to get the value of last <h4> element of a div. I have tried with all the solution I found on web but nothing is working here.
<div id="mdiv">
<div id="example">
<h4> </h4>
</div>
<div>
and JQuery
var texter = '<h4>' + message + '</h4>' + '<br/>';
$('#example').append(texter);
//not working
alert($('#example').children().last().text());
//Not working
//$('#example h4:last').val();
//not working
//$('#example h4:last-child').val();
as you see above I tried 3 approch including commented code but nothing is working for me. What should I do to get the newly added <h4>?
The :last selector is sufficient:
$('#example h4:last').text()
Here's a working example:
let texter = '<h4>' + "test" + '</h4>' + '<br/>';
$('#example').append(texter);
alert($('#example h4:last').text());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mdiv">
<div id="example">
<h4> </h4>
</div>
<div>
You should do like so :
alert($('#example h4').last().text());
There you will catch the last h4. With your code you'r trying to get the last div#example.
we have a chatbot who prints replies using the jQuery
$('<div class="message message-new"><figure class="avatar"><img src="images/icon" /></figure>' + reply + '</div>').appendTo($('.mCSB_container')).addClass('new');
Sometimes the reply variable can contain links, and some of them are very long so we have been trying to hyperlink them, we tried to add an href to the source of the replies
But the jQuery just doesn't print it, not even the hyperlink text, it just completely ignored
if the input from the back-end is
Hi <a href="www.google.com" click here /a>
It just prints "Hi"
Can somebody please guide us on how we can enable hyperlinks by making changes in the source text to the reply variable or any other way
$('<a>', {
href: 'mylink.com',
html: 'mytext'
})
<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
reply = 'Hi! What can I help you with?<p>google</p> ';
$('<div class="message message-new"><figure class="avatar"><img src="avatars1.githubusercontent.com/u/6422482?v=3&s=400"; /></figure>' + reply + '</div>').appendTo($('.mCSB_container')).addClass('new');
});
});
</script>
</head>
<body>
<p>Top</p>
<div class="mCSB_container">
test
</div>
<button>Add New </button>
</body>
</html>
I am trying to simplify my HTML file, and I have very long scripts that consist of just HTML (templates) that I'd like to move to their own external files. This is easy for me to do when the <script> tags involve functions, but in my case it's just straight HTML. In the new external file, how do I properly type up those HTML tags? See below.
<script type="text/template7" id="myStuffTemplate">
{{#each results}}
<div class="list-block media-list">
<ul>
<li>
<a href="#" class="item-link item-content">
<div class="item-media"><img src={{this.pictures['1']}} width="80" height="80px"></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">{{this.name}}</div>
</div>
<div class="item-text">{{this.description}}</div>
</div>
</a>
</li>
</ul>
</div>
{{else}}
<div style="text-align:center">
<h1>Nothing yet!</h1>
<h2>Upload things you're willing to trade so you can start trading!</h2>
</div>
{{/each}}
</script>
That's the script within the HTML File. I'd like that moved into its own external file. How can one go about doing this? And do I reference it just like every other file when I link it? eg.:
<script type="text/template7" src="js/views/mystuff.js" id="myStuffTemplate"></script>
Thanks in advance.
This is not a script, it's a template made with either handlebars or moustache templates.
You can't "source" them with <script src="..."> like you can with Javascript, but they can be stored externally, then loaded and processed at runtime. This needs to be done asynchronously through an AJAX call. For example, assuming you were using jQuery, you could achieve it with the following:
// request the template
$.get('templates/products.hbs', function(rawTemplate) {
// once received, convert the raw template to a handlebars template
var template = Handlebars.compile(rawTemplate);
// compile the template with your context 'data' and set it on an element with an id
$('#someTargetId').html(template(data));
}, 'html'); // <-- tell jquery to load the file as html
Just be warned, even small templates will take some time to load, so there will be a delay between your page loading and the template loading then being displayed.
First of all, consider using a framework like Angular.js or React.js however this should work for you:
Let's suppose that you want to put that inside a div with id=items:
<div id="items"> Your code... </div>
In the html file add this, just before the <body> closing tag:
<script type="text/javascript" src="code.js"></script>
to include your code and this
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
to include jQuery.
Create a code.js file and put the following code inside:
$(document).ready( function() {
var myCode = "{{#each results}}" +
"<div class="list-block media-list">" +
"<ul>" +
"<li>" +
"<a href="#" class="item-link item-content">" +
"<div class="item-media"><img src={{this.pictures['1']}} width="80" height="80px"></div>" +
"<div class="item-inner">" +
"<div class="item-title-row">" +
"<div class="item-title">{{this.name}}</div>" +
"</div>" +
"<div class="item-text">{{this.description}}</div>" +
"</div>" +
"</a>" +
"</li>" +
"</ul>" +
"</div>" +
"{{else}} " +
"<div style="text-align:center">" +
"<h1>Nothing yet!</h1>" +
"<h2>Upload things you're willing to trade so you can start trading!</h2>" +
"</div>" +
"{{/each}}";
$( "#items" ).html( myCode );
} );
I'm trying to use a variable from a page loaded inside a DIV in another DIV.
The text in the "bar" DIV on the "index.html" page should be replaced by the item id selected from the "page.html" loaded as an <object></object> inside the "content" DIV.
Or the item id should at least be stored in a global variable - which hasn't been working either - because when I run a function from the "index.html" page to retrieve it, it displays as "undefined".
All the code is below:
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="index_style.css">
<title>Access element of other DIV</title>
</head>
<body>
<div id="bar">This text should be replaced by the Item ID selected below</div>
<div id="content">
<object type="text/html" data="page.html" width="100%" height="100%"></object>
</div>
</body>
</html>
index_style.css
body{
margin: 0px;font-family:arial;font-size:30px;text-align:center;color:#fff;
}
#bar{
position:relative;height:100px;line-height:100px;background-color:#555c60;color:#74de90;
}
#content{
position:absolute;top:100px;bottom:0px;right:0;left:0;overflow-y:hidden;
}
page.html
<link rel="stylesheet" href="page_style.css">
<script type="text/javascript" src="main.js"></script>
<center>
This is <b>page.html</b> which has been loaded <u>inside</u> the "content" DIV<br><br>
</center>
<div class="items" onclick="use_item_id(this);" id="item1">Item 1</div>
<div class="items" onclick="use_item_id(this);" id="item2">Item 2</div>
<div class="items" onclick="use_item_id(this);" id="item3">Item 3</div>
page_style.css
body{font-family:arial;font-size:30px;color:#fff;background-color:#1b1e4b;text-align:center;}
.items{cursor:pointer;}
.items:hover{color:#ff0000;}
main.js
function use_item_id(selected)
{
current_item = selected.getAttribute("id");
document.getElementById('bar').innerHTML = current_item;
alert(current_item);
}
The line document.getElementById('bar').innerHTML = current_item; in "main.js" seems to be the problem and I can't get it to work. The alert(current_item); works fine when the line above it isn't there so it's definitely getting the item id's correctly from "page.html". It's just not setting them as the innerHTML on the "index.html" page, or even storing them in a global variable to be retrieved from a function run on the "index.html" page (as mentioned above). Any code examples would be greatly appreciated.
I think it might be because the use_item_id() function is being executed from another page, so I might need some alternatives or other functions to get it to work.
It'd be great if anyone knows what the issue is. I appreciate all replies. Thanks in advance :)
You are not on the same document ... then in main.js
replace
document.getElementById('bar').innerHTML = current_item;
with
parent.document.getElementById('bar').innerHTML = current_item;
this solves your problem.
If you're trying to access variables from HTML documents it's highly recommended to use the data attribute. This is an example for a comment section:
In my item I set the data key for loading
<div class='resp-col col-12 comment-user-data'>
<div class='resp-col col-9'>
<div class="post-profile-image" style='background-image:url("<?=$user->profile_image?>")'></div>
<?=Html::a("<p class='post-user'>".$username."</p>", Url::to(['/account/'.$user->id.'/'.$user->username]))?>
</div>
<div class='resp-col col-3'><button class='reply-to' data-assoc-id='<?=$model->id?>' data-assoc-name='<?=$username?>'><i class="material-icons">reply</i></button></div> <-- set the data-assoc-id
</div>
<div class='resp-col col-12 comment-content-data'>
<?=$model->content?>
</div>
jQuery to load data key
$('.reply-to').on('click',function(){
$('#submit-comment').data('assoc-id', $(this).data('assoc-id'));
$('#comment-content').val('#'+$(this).data('assoc-name')+' ');
$('.base-modal').animate({
scrollTop: $("#comment-content").offset().top
}, 2000);
if($('#comment-content').css('display') == 'none'){
toggleCommentVisibility();
}
});
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/