I am working on a .NET MVC application. I have added a button using jQuery using the following code:
var button_to_add = '<div id = "csv_button"><nav>CSV</nav></div>'
$("#titleDiv").append(button_to_add);
The problem is multiple views are using the "titleDiv" and each view is rendered through javascript. As a result, the button is appearing on all the views. The view slides in when another link is clicked. I could remove the button using:
$("#csv_button").remove();
But I am not sure how and when to call it so that the button disappears when the view slides off.
Edit: I am looking for a javascript call that will detect when the view starts sliding so that the button can be removed at that moment.
As you are saying titleDiv is use for multiple view then use it as a class rather than an id.
And you should have unique id's for each element if at all you are using id's.
so your expression will become:
var button_to_add = '<div id = "csv_button"><nav>CSV</nav></div>'
$(".titleDiv").append(button_to_add);
IDs in HTML cannot be reused. The browsers will accept it, but you jQuery will only look at the first one.
Use a distinct ID to allow for clean, single append.
Related
I have designed a SAP UI5 Application
I have a div which contains highcharts.
<html:div id="Tab2Chart" class="sapUiSmallMarginBegin sapUiSmallMarginTop"
style="width:45%;float:left;height:auto"></html:div>
Now, A button is present in View. On clicking it, above div should hide i.e. highchart should not be visible. How to achieve this. i am able to get div in controller by using-
var _ID2= this.getView().byId("Tab2Chart").getId();
After this, suggest me solution.
Adding the answer to this here:
You can always refer any items through their ids as:
this.getView().byId("idOfIntentedElement")
Refer the view : this.getView()
Refer element in the views by their ids : this.getView().byId("id")
this.getView().byId("Tab2Chart").setVisible(false);
You can use the standard setVisible method or jQuery hide method commented below.
var _ID2= this.getView().byId("Tab2Chart").getId();
this.getView().byId("Tab2Chart").setVisible(false);
// $('#'+_ID2).hide();
I'm a total newbie to Onsen UI and I managed to make my first little app (static that is) with a few pages, popovers, lists, etc.
But when I try to add dynamic stuff in there, it does not want to cooperate.
When I click my side menu, it calls menu.setMainPage and in the callback I want to modify the content of the list (lets say iterate a JSON request and add a ons-list-item for each of them). However, they do not look styled with Onsen UI icing.
I guess it's because the menu.setMainPage has already parsed the ons-page and showed it in the browser.
Is there a way to do a load page, update the dom, and then pass it to be displayed?
I have a simila problem with an popover that contains a list. I want to add items in that list, but my jQuery append never work. Same reason I suppose.
Thanks!
Sounds like you're not running ons.compile() on the dynamic elements. The custom elements must be compiled after they've been added to the DOM to get the correct style and behavior.
I made a short example to illustrate it:
ons.bootstrap();
var addItem = function() {
var $myList = $("#my-list"),
$item = $("<ons-list-item>").text(Math.random());
$myList.append($item[0]);
ons.compile($item[0]);
};
If you attach the addItem function to a click handler you can add items dynamically to an <ons-list>.
This is a running example on codepen:
http://codepen.io/argelius/pen/gbxNEg
I'm currently building an event table that will feature a "share" button. Once the user clicks on the share button I want to find text value from that particular table and store them in a variable so that I can use them in my next step. Basicly when I click the share button I want to find the parent element that wraps the particular table and then find text values from each particular cell and store that in a variable. In my JSFiddle I have setup to display the results in the resultbox. http://jsfiddle.net/Ak84L/5/
$("#shareButt").click(function(){
var date = $(this).parent('.even_table').find('date').text();
$(".resultbox").text("date"+date);
});
First change shareButt and date to values of class attribute instead of id, because IDs have to be unique.
And use this code:
$(".shareButt").click(function () {
var date = $(this).closest('.event_table').find('.date').text();
$(".resultbox").text("date" + date);
});
DEMO
First DON'T use same id. Use class instead. Go this way:
js
$(".shareButt").click(function(){
var date = $(this).parents(".event_table").find(".date").text();
$(".resultbox").text("date"+date);
});
fiddle
it would be much simpler to append a custom data tag to the element than to muck around with artsy fartsy jquery calls.
If its good enough for major web frameworks like angular.js, jade, bootstrap, etc. why do many people continue to attempt to reinvent the wheel to create the most complicated solution.
JS FIDDLE EXAMPLE
HTML
<div class="shareButt" date-data="12.5.2014">SHARE</div></td>
jQuery
$(".shareButt").click(function(){
$('.resultbox').text('date' + $(this).attr('date-data'));
});
im working on a Asp.net MVc application to create a scheduler application for workers.
The schedule is auto-generate using a JavaScript library called: Dhtmlx Scheduler.
upon populating the data, it creates some Html and places the content.
I would like to retrieve the content and was wondering if it's possible by obtaining the info from its class.
Pic for reference:
I am trying to retrieve the "Abel Toribio" so i can do a reverse search in my database for his name and eventually display a tooltip over that td with further information about the person.
So far I have tried:
var engName = document.getElementsByClassName("dhx_matrix_scell");
alert(engName[0].getData());
alert(engName[0].getContent());
alert(engName[0].getText());
alert(engName[0].getValue());
They all seem to give me undefined.
Thanks!
engName[0].innerHTML - for contents inside the tag 'html'.
engName[0].outerHTML - for contents inside the tag wrapped in the tag.
engName[0].textContent - for contents inside the tag 'text'.
As you tagged jquery as well,for tooltip purpose, you can write mouseover event using jquery this way :
$(".dhx_matrix_scell").on("mouseover",function(){
alert($(this).text());
// do something here
});
if you want to get all, you can get them like this:
$.each(".dhx_matrix_scell",function(){
alert($(this).text());
});
I'm trying to make a jQuery toggle menu for a mobile website for one of my clients. I'll have to tell you i'm not experienced in javascript and i justed started looking at it.
The current website is a Wordpress website so the menu structure is generated by WP.
Because this is generated by WP i need to use javascript to manipulate the data for adding the + - and > signs for toggleing and if no childeren to go directly to the page.
I use this javascript for adding the spans with the desired icon. I've managed so far.
http://jsfiddle.net/9Dvrr/9/
But there are still 2 problems i can't seem to figure out.
Remove the href from the "a" when the "li" has a "ul" child.
This should remove the links of the items so they will only toggle (not link) to navigate straight throug to the deepest level.
Currently the javascript is adding mutiple spans with the icons. I can't seem to figure out why
I'm stuggeling with this for a while now and was wondering if someone could help me with this.
In the jsfiddle you provided, you loop on the elements to add spans with a "+" or "-" sign inside, depending on the case. The thing is, the HTML you're starting with already has those spans in it, wich is why you're seeing some duplicates.
As you said you can't add those spans in the HTML because of your WP strucutre, I guess they come from a bad copy/paste you did while creating the jsfiddle. I removed them in the HTML and added a return false to prevent linking to another page when there is a ul inside the a tag.
http://jsfiddle.net/wzzGG/
Your first problem can be solved with the following:
$.each($('#menu-mobiel li'), function(i, value) {
var $this = $(this);
if ($this.has('ul').length > 0) {
$this.children('a').attr('href','javascript:');
}
Your second problem is a bit harder for me to understand. Do you only want one + for items with submenus, and one > for items with a link?