I have an Ajax call that gets different description, and url address of a video:
function TraerInstructivos() {
$.ajax({
type: "GET",
url: '<%= Page.ResolveUrl("~/Instructivo/Instructivos.aspx") %>' + '/TraerInstructivos',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var res = JSON.parse(response.d);
$.each(res, function (i, item) {
DibujarVideo(item);
});
},
error: function (response) {
alert("Error");
}
});
};
Now DibujarVideo is the method that will grab the template I have in my ascx, make a copy and then append it. This is the HTML of the ascx:
<div id="Videos">
</div>
<template id="video-elem">
<div class="row">
<div class="col-lg-4">
<font id="video-desc" size="3"></font>
<br />
<br />
<p><a id="video-ref" class="btn btn-secondary" href="#" role="button">Mira el Video ยป</a></p>
</div>
</div>
<br />
<hr />
</template>
Right now, the method that copies the template html looks like this:
function DibujarVideo(video) {
var elemACrear = $("#video-elem").html();
$(elemACrear).find("#video-ref").attr("href", video.DireccionVideo);
console.log(elemACrear);
$("#Videos").append(elemACrear);
}
What I see in the console log, and the page is that the value of href is not changing, but If I save this in a variable I see the changes for example:
var elem = $(elemACrear).find("#video-ref").attr("href", video.DireccionVideo);
So I reckon is not the same changing/manipulating the DOM tree in a page vs in a variable.
How can I change that href inside my elemACrear variable?
Im learning jQuery, every help appreciated.
You've already diagnosed and solved the issue without following the logic through. You simply need to provide the jQuery object you create in the elem variable to the append() call, like this:
function DibujarVideo(video) {
var elemACrear = $("#video-elem").html();
var $elem = $(elemACrear);
$elem.find("#video-ref").attr("href", video.DireccionVideo);
$("#Videos").append($elem);
}
Related
I am trying to make a system for my web page that gets the content of a template found in the HTML and then replaces the appropriate variables with the corresponding values which is stored in an object. The problem is that nothing is being replaced. In this example, I am getting the contents of an RSS file that displays forum posts. I use ajax to get the contents, then iterate through each item. I assign the xml tag values to an object whose keys correspond to the variabls in the HTML template. For every post found, it should replace the HTML variable with the contents of the xml tag.
This is my Javascript:
$.ajax({
url: "rsstest.xml",
type: "GET",
dataType: 'xml',
crossDomain: true,
success: function(xml){
var news = $('#news-results');
news.empty();
if($(xml).find('item').length > 0){
$(xml).find('item').each(function(){
var temp_vars = {
news_title: $(this).find('title').text(),
news_body: $(this).find('description').text(),
news_date: $(this).find('pubDate').text(),
news_link: $(this).find('link').text()
}
var template = $('#news-template').contents().clone();
for(const variable in temp_vars){
template.text().replace("{"+variable+"}", temp_vars[variable])
}
news.append(template);
})
} else {
news.append($('<p></p>').text('There is no news to display at this time.'));
}
}
})
This is my HTML:
<h1>Announcements</h1>
<div id="news-results">
</div>
<div id="news-template" style="display: none;">
<div class="media">
<div class="media-body">
<h3>{news_title}</h3>
<p>{news_body}</p>
<div class="media-footer">
<div class="col-left">
<h4>Posted on {news_date}</h4>
</div>
<div class="col-right">
Read More
</div>
</div>
</div>
</div>
</div>
What am I doing wrong?
Code below will only replace the text without assigning it.
template.html().replace("{"+variable+"}", temp_vars[variable])
You have to assign after replacing the text to update the actual value.
template.html(template.html().replace("{"+variable+"}", temp_vars[variable]))
I have this function that goes through each breadcrumb in a navbar and I want to change the styling of the breadcrumb depending what page they are on.
Here is the basic HTML of the breadcrumb navbar
<div id="WCBar">
<div class="bc_nav current span" id="bc_main">
<a class="bc_1" id="lnkCrumb" href="javascript:__doPostBack('ctl00$breadcrumbnav1$ctl00$lnkCrumb','')">
<li>Account Info</li></a>
<span class="step-arrow"></span>
<input name="ctl00$breadcrumbnav1$ctl00$hdnPageName" id="hdnPageName" type="hidden" value="WCQuoteMain2.aspx">
</div>
<div class="bc_nav a" id="bc_main">
<a class="aspNetDisabled bc_2" id="lnkCrumb"> <li>Rate</li></a>
<span class="step-arrow"></span>
<input name="ctl00$breadcrumbnav1$ctl01$hdnPageName" id="hdnPageName" type="hidden" value="WCQuoteRatingV4.aspx">
</div>
<div class="bc_nav a" id="bc_main">
<a class="aspNetDisabled bc_3" id="lnkCrumb"><li>Questions</li></a>
<span class="step-arrow"></span>
<input name="ctl00$breadcrumbnav1$ctl02$hdnPageName" id="hdnPageName" type="hidden" value="questions.aspx"></div>
<div class="bc_nav last" id="bc_main">
<a class="aspNetDisabled bc_4" id="lnkCrumb"><li>Final</li></a>
<span class="step-arrow" style="background-image: none;"></span>
<input name="ctl00$breadcrumbnav1$ctl03$hdnPageName" id="hdnPageName" type="hidden" value="managesubmission.aspx"></div>
I then call this function in Javascript:
function WCBar(pagename, iframepagename, currentSet) {
$('.bc_nav', $('#WCBar')).each(function () {
iframepagename = $(this).find('input[id*="hdnPageName"]').attr('value');
var bcMain = $(this).find('div[id*="bc_main"]');
var lnkCrumb = $(this).find('a[id*="lnkCrumb"]');
if (pagename == iframepagename) {
//bcMain.addClass("current span");
bcMain.attr("class", "current span");
currentSet = 1;
// notify server
$.ajax({
type: "POST",
url: window.location.pathname + "/UpdateIFrameBreadcrumb",
data: "{'pagename':'" + iframepagename + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
// alert(msg.d);
},
error: function (msg) {
// alert(msg.d);
}
});
}
else {
if (lnkCrumb[0].href.length > 1) { //&& currentSet == 0
//bcMain.attr("class", "bc_nav enabled span");
bcMain.removeClass("bc_nav");
bcMain.addClass("bc_nav enabled span");
}
else {
//bcMain.attr("class", "bc_nav a");
bcMain.removeClass();
bcMain.addClass("bc_nav a");
}
}
});
}
When I mouse over bc_Main during a debugging session, context > className shows the proper class but trying to determine if bc_main has a class results in
?bcMain.hasClass('bc_nav');
false
in Visual Studio's Immediate window.
Furthermore, trying to determine what the values are in class gets me an undefined error.
var x = bcMain.attr('class');
undefined
No class is ever removed from bc_main, no matter if I try .removeClass() and leave it empty or try .removeClass('bc_nav');
I have checked to make sure nothing is defaulting elsewhere and can't find anything.
Thanks for your help.
It looks like a scope issue. You are using THIS to perform your find which shouldn't find itself. Your .bc_nav elis actually your #bc_main el, so you might as well just treat $(this) as bcMain. I don't know why you are iterating on both .bc_nav and #WCBar, seems like you should only use .bc_nav.
$('.bc_nav', $('#WCBar')).each(function () {
...
var bcMain = $(this).find('div[id*="bc_main"]');
saying $(this) in this instance is the same as saying $('.bc_nav') so you are essentially doing $('.bc_nav').find('div[id*="bc_main"]'); which won't work since #bc_main isnt' a child of .bc_nav.
If you are trying to empty the class attribute use:
$('#myElementID').removeAttr('class');
or this
$('#myElementID').attr('class', '');
To remove a specific class, you have to use the class name:
$('#myElementID').removeClass('myClassName');
Also, FWIW, in the else statement, this line
bcMain.removeClass("bc_nav");
is pointless, being that it's followed by this one
bcMain.addClass("bc_nav enabled span");
I have a string as a property in a JSON object. This string contains tags in order to set up some styles to it. The problem I'm facing is the fact that regardless of the well-written HTML tags it hasn't got the expected result. Shall I change my way of programming this part?
Javascript - Viewmodel:
function viewModel() {
var self = this;
self.text = ko.observableArray();
self.text = ko.computed(function() {
$.ajax({
type: "GET",
async: false,
contentType: "application/json; charset=utf-8",
global: false,
url: "../../webresources/myappresource/getitemdescription/001/102001/",
datatype: "json",
success: function(data) {
itemdata = data;
}
});
return itemdata;
}, this);
this.itemsList = ko.observableArray(itemdata);
};
ko.applyBindings(new viewModel());
HTML + Knockout:
<tbody data-bind="foreach: itemsList" name="myitems">
<tr>
<td>
<input id="selectItem" type="checkbox">
</td>
<td>
<h5 data-bind="text:itemDescription"></h5>
</td>
</tr>
</tbody>
JSON object structure:
[
{
"dscitem": " <b>Colour</b>: Green, <br/> <b>Weight</b>: 50.00,<br/> <b>Description</b>: suchitemdescription and so on,<br/> ",
"skuitem": 110
}
]
The result that would be expected is the same text enhanced with html tags. As opposed to that I'm getting the list I want which is cool, but the description shown is the whole string without any style, indeed, with the text in the same way as it is in the object, pure cosmic text to the app-user. Any ideas of what's happening in here?
The problem is (besides syntax errors in code snippets) that you're using text binding instead of html binding.
So just replace
<h5 data-bind="text:itemDescription"></h5>
with
<h5 data-bind="html:itemDescription"></h5>
I want to update model value in JavaScript as below but it is not working.
function updatePostID(val)
{
#Model.addcomment.PostID = val;
}
in Razor view as shown below
foreach(var post in Model.Post)
{
<br/>
<b>Posted by :</b> #post.Username <br/>
<span>#post.Content</span> <br/>
if(Model.loginuser == Model.username)
{
#Html.TextAreaFor(model => model.addcomment.Content)
<button type="submit" onclick="updatePostID('#post.PostID');">Add Comment </button>
}
}
Can anyone tell me how to assign model value in JavaScript?
This should work
function updatePostID(val)
{
document.getElementById('PostID').value = val;
//and probably call document.forms[0].submit();
}
Then have a hidden field or other control for the PostID
#Html.Hidden("PostID", Model.addcomment.PostID)
//OR
#Html.HiddenFor(model => model.addcomment.PostID)
The model (#Model) only exists while the page is being constructed. Once the page is rendered in the browser, all that exists is HTML, JavaScript and CSS.
What you will want to do is put the PostID in a hidden field. As the PostID value is fixed, there actually is no need for JavaScript. A simple #HtmlHiddenFor will suffice.
However, you will want to change your foreach loop to a for loop. The final solution will look something like this:
for (int i = 0 ; i < Model.Post; i++)
{
<br/>
<b>Posted by :</b> #Model.Post[i].Username <br/>
<span>#Model.Post[i].Content</span> <br/>
if(Model.loginuser == Model.username)
{
#Html.HiddenFor(model => model.Post[i].PostID)
#Html.TextAreaFor(model => model.addcomment.Content)
<button type="submit">Add Comment</button>
}
}
You could use jQuery and an Ajax call to post the specific update back to your server with Javascript.
It would look something like this:
function updatePostID(val, comment)
{
var args = {};
args.PostID = val;
args.Comment = comment;
$.ajax({
type: "POST",
url: controllerActionMethodUrlHere,
contentType: "application/json; charset=utf-8",
data: args,
dataType: "json",
success: function(msg)
{
// Something afterwards here
}
});
}
I am working on a little hyphenation engine for a website, and I got to get my head around this. I am matching all p.hyphenatable and send the content to a PHP-script to have it hyphenated like this:
jQuery(".hyphenatable").each(function() {
var hyphenatableObject = jQuery(this);
if (hyphenatableObject.children().size() == 0){ // Hyphenate only if there is no child elements to prevent HTML from being omitted
jQuery.ajax({
type: "POST",
url: phpHyphenatorUrl,
data : {
language:hyphenationLang,
text: hyphenatableObject.text()
},
dataType: "html",
success: function(data) {
hyphenatableObject.html(data);
}
});
}
});
To be able to have this script work on elements with children as well, I would like to wrap the non-encapsulated parts of the matched selectore into new elements, and send those to the web service. For example:
<p>My text <img src="img.jpg" /> with image</p>
becomes
<p><span class="whatever">My text</span> <img src="img.jpg" /> <span class="whatever">with image</span></p>
Any ideas on that?