Please pardon my "layman language", but I've been working at this for all day. I almost done customizing this but I just can't seem to wrap my head around this. I'm using Soundmanager (playlist). There's this part in the script that reads:
thisSound._data = {
oLink: o, // DOM reference within SM2 object event handlers
oLI: oLI,
oControls: self.select('controls',oLI),
oStatus: self.select('statusbar',oLI),
oLoading: self.select('loading',oLI),
oPosition: self.select('position',oLI), // HERE IT IS
.......
};
(This is what is setup after the page has finished loading):
controlTemplate = document.getElementById("my_sounds");
controlTemplate.innerHTML = [
// control markup inserted dynamically after each page player link
// if you want to change the UI layout, this is the place to do it.
' <div class="controls">',
' <div class="statusbar">',
' <div class="loading"></div>',
' <div class="position"></div>', // HERE'S WHAT "oPosition" IS CONNECTING TOO
' </div>',
' </div>'
].join('\n');
Now, I'm not using what Soundmanager has setup for me (<div class="position">...), but instead, I have a div somewhere on the page that'd I'd like to be the "new" oPosition (<div class="my_new_position_div">...).
So, in short, I want to have use my_new_position_div as my progress bar instead of the other div.
How do you redefine "oPosition" in this Soundmanger script?
full soundmanager script: page_player.js
I've erased my previous answer. I realized that wouldn't work a second after I posted it. The reason why is because the _data property is only set when it is first needed in a handleClick event (this is pretty bad coding). I was hoping I could find a way to keep the script in tact as much as possible, so you are not stuck with a patched version of somebody elses' handy work. But now it seems there is no other way non-intrusive way then to just replace the oPosition line with:
oPosition: document.getElementById('my_new_position_div');
You need to change <div class="my_new_position_div"> to <div id="my_new_position_div"> also.
I suggest you place some big comments around this patched code. This will help you or somebody else working on this code to upgrade to newer versions in the future.
Related
I am reworking an old app of mine and I am having issues with dom manipulation and basic selections within a vue instance.
Essentially I have information in a database that I load in via ajax.
Each record in the db has 2 sections. The header tab(title, time, date etc) and the body of the record(notes, ideas, etc)
When loaded, the header shows normally to the user but if they want to see what that note contains, they have to click on the header for the bottom to appear.
consider the following html:
<vuejs for loop>
<div v-bind:id='item._id' class="tabW" v-on:click="blueTabClick" >
<div class="blueTabMainColor">
<!-- header stuff here -->
</div>
<div class="notesOpenedW">
<!-- interior informaton here, HIDDEN BY CSS -->
</div>
</div>
<vuejs for loop ender>
This HTML is essentially inside a Vue for/loop directive, and generates however many "tabs(tabW)" as needed based on how much info I have in the DB
All I want the user to do is to be able to click whichever tab(tabW) they want information on, and for the notes show underneath(notesOpenedW).
I stripped my entire app and js and tried to keep it as simple a test as possible and even with the below, I still can't get anything.
here is my JS(JQ):
$(document).ready(function(evt){
$(".blueTabMainColor").click(function(){
$(this).next(".notesOpenedW").fadeToggle();
});
});
With this basic code, when I put it inside a Vue instance, via:
methods: {
blueTabClick: function (evt) {
evt.preventDefault();
$(".blueTabMainColor").click(function(){
//alert("you clicked me");
$(this).next(".notesOpenedW").fadeToggle();
});
}
}
It doesn't work, but if I take it out of the Vue instance, it works just fine.
how can I get this to work? or am I going about it the wrong way?
Vue will not cohabit happily with JQuery. You're $(this) will not work because you're not even in the document at that point, you're in pure js, virtual DOM, another universe. Then, if it did, the event listener you call may not exist. You will need to fundamentally transition this code to Vue if you want it to work, I fear.
You can achieve this by setting a ref on "notesOpenedW".
https://v2.vuejs.org/v2/api/#ref
I would strongly recommend to wrap this behaviour in a dedicated component
That would have the following content :
<div class="tabW" v-on:click="blueTabClick" >
<div class="blueTabMainColor">
<!-- header stuff here -->
</div>
<div class="notesOpenedW" ref="notesToggleDiv">
<!-- interior informaton here, HIDDEN BY CSS -->
</div>
</div>
And the method :
methods: {
blueTabClick: function () {
$(this.$refs.notesToggleDiv).fadeToggle();
}
}
Be aware that when using Vue, manipulating directly the dom is usually a bad idea.
As i showed you, it is possible to use jQuery with Vue if you absolutely need it (or cannot afford to rework more deeply your application).
Edit : Just found this article that i think would help you a lot :
https://www.smashingmagazine.com/2018/02/jquery-vue-javascript/?utm_campaign=Revue%20newsletter&utm_medium=Newsletter&utm_source=Vue.js%20Developers
I have recently taken up learning how to make a jQuery plugin. This is my first attempt at just creating something that is very simple. I am still relatively new to jQuery and have come into a bit of a bind when it comes to selecting dynamically created content. In this scenario I am attempting to select a div I created within the plugin.
I have made a jsFiddle here.
I have perused many posts about selecting dynamically created div's and most of them are solved either using on or a callback function. And I am not sure that those can be applied in this situation.
I think the issue occurs at this point in the code:
$element.append("<div class=\"gifLoader\"></div>");
$gifLoader = $element.find('.gifLoader');
$gifLoader.css("bacground-image", "url(\"" + plugin.settings.gifSrc + "\")");
plugin.settings.callback.call(this);
Is there some way I can use a callback function like you would with methods like fadeTo? Also, if anyone cares to comment. I would really appreciate some feedback on the layout of my plugins. I don't fully comprehend what it is I am doing when making a plugin, I am just hoping to learn how to use Javascript and jQuery without the coding looking so clunky. (Before I just had anonymous functions within anonymous functions)
You have one typo, and one error: bacground-image => background-image, and src() => url()
Change
$gifLoader.css("bacground-image", "src(\"" + plugin.settings.gifSrc + "\")");
To
$gifLoader.css("background-image", "url(\"" + plugin.settings.gifSrc + "\")");
When you are creating a dynamic element using javascript or jquery, that element does not reflect in your DOM straight away. If you take a look into the HTML that is generated using the developer tools you'd find before: and after: tags appended with your HTML.
The best way to realize the problem is to either specify the background-image when you are creating the div like:
$("#element").append("<div class='gifLoader' style='background-image: url('" + plugin.settings.gifSrc + "')'></div>");
Otherwise if you are looking to change the background-image on some kind of user interaction, you can go for this:
$("#element").append("<div class='gifLoader' id='someID' someEvent='transform(someID)'></div>");
And then have function transform() defined somewhat like:
function transform(elementID) {
$("#" + elementID).css("background-image", "some image URL");
}
I have some crazy app done almost 100% by manipulating the DOM and I find myself in the unfortunate position of changing something in it. As there are probably around 100 different scripts that do God knows what, I have no clue in which file should I look to make my changes. So, I want to ask, is there a way (using Firebug maybe or something similar) to know where a specific piece of html was generated? I'm a C developer, so I'm not very good at this, it drives me crazy.
Are all the elements added at the page load, or partially in the response to the user input? (clicking etc.)
for stuff added with the response to your actions, you can use Firebug's "Break On Next" button in the "Script" tab. To active BON you have to click it, or, in just-shipped Firebug 1.10.0a8, use keyboard shortcut ALT-CTRL-B (useful when you have event listeners bound to mouse movements). Then, when any piece of JS is going to be executed in reaction to your click etc., you will hit a breakpoint.
for stuff added at page load time, you may use the trick of extending the native functions (this might sound crazy - yeah it is, don't do it in production!) like appendChild, insertBefore, replaceChild. Just insert the appropriate code at the very top of your main HTML file, so all the code below will "see" the change.
Unfortunately, this does not work in Firefox due to a bug. But works in Opera and I guess in Chrome as well.
When you extend the native function, you can inject any code before really adding the node to the page. For instance, call console.log or create a breakpoint, to inspect the current page state. You can try playing with breakpoints to see the available variables properties inside those function to adjust what you push to console.log.
For this code:
<!doctype html>
<html>
<head>
<script type="text/javascript">
// this should work in Firefox but it does not -- https://bugzilla.mozilla.org/show_bug.cgi?id=618379
// works at least in Opera, probably Chrome too
Node.prototype._appendChild = Node.prototype.appendChild;
Node.prototype.appendChild = function(child) {
console.log("appending " + child + " to " + this);
return this._appendChild(child); // call the original function with the original parameters
}
// this works in Firefox
document._createElement = document.createElement;
document.createElement = function(tagName){
console.log("creating " + tagName);
return this._createElement(tagName);
}
</script>
</head>
<body>
<script type="text/javascript">
var p = document.createElement("p");
p.appendChild( document.createTextNode("abc"));
document.body.appendChild(p);
</script>
</body>
</html>
Opera outputs:
creating p appendChild.html:14
appending [object Text] to [object HTMLParagraphElement] appendChild.html:7
appending [object HTMLParagraphElement] to [object HTMLBodyElement] appendChild.html:7
To overcome the weakness of Firefox (that you can't override appendChild), you may use the trick: place the code below instead in the top of your HTML
<script>
Node.prototype._appendChild = function(child) {
console.log("appending " + child + " to " + this);
return this.appendChild(child)
};
</script>
and then, use Fiddler proxy by creating auto-responders (WMV tutorial, 9.9 MB) where you manually replace all calls to .appendChild with ._appendChild (you can use Notepad++ for "find replace in all opened files"). Creating auto-responders and hand-tampering requests can be mundane, but it's extremely powerful. To quickly create auto-responder rule, load the page when Fiddler is active, then drag'n'drop files as in the picture below. For each file, right click and choose "Generate File" from menu (this will put a file on the desktop) or create a file by yourself in different location. (it's good to open Fiddler-generated files and remove response headers from them; BTW "Generate file" puts real contents only if the response header was 200, so make sure to load the page with CTRL-F5 to skip the cache).
In Chrome you can inspect an element and right click on it. This menu gives you some options to break when something below the element is changed or when it's own attributes change. Maybe one of those breakpoints will find what you are looking for?
Assuming you've got access to the raw (hopefully un-minified/obfuscated) JS files, maybe just search them for text strings related to DOM manipulation and/or attributes of the node you're trying to find the creation of? I'd try things like "appendChild" "createElement" and the node's ID/class names.
You could also set break points all over the script files, and step through them as the page loads to help you narrow down where to look. Might help to start by just "pausing" the JS execution and stepping through from the very beginning.
If you can share the code (a link to the live site would do fine) I'd be happy to take a look.
If you are using the jQuery framework in your javascript to make the DOM changes then you may find the fireQuery plugin for FireBug in the firefox browser may get you the information you need.
Example:
It adds additional information to the standard HTML view by superimposing additional jquery element information to the display to provide a deeper insight into how your javascript is amending the page content.
I hope that helps you out.
I have a page that is driven by a mustache template (along with javascript and jquery), and I can't figure out how to insert a function into this template. Essentially what I want is to add a link or button to the page that executes a function, "onTaskSelected(taskId)", when the user clicks on it. I've been searching for a way to accomplish this for several days now, and extensive mustache documentation/support/examples are woefully hard to find. Does anyone know how this could be accomplished?
Edit - Here is some of the code that I've tried:
data["B" + task.taskId] = {
changeTask : function(taskId) {
var self = this;
self.onTaskSelected(taskId);
},
taskId : task.taskId
};
Data gets loaded into the mustache template, which has the following within it:
<button onClick="{{#B8.changeTask}}B8.taskId{{/B8.changeTask}}">Change to task 8</button>
I've debugged the code to the point where data gets sent to the template to be converted to html, and B8 has set both changeTask and taskId correctly. However, by the time the html is displayed, the button looks like this:
<button onclick>Change to task 8</button>
Why is the onclick getting zapped, and how can I fix it? It doesn't need to be a button, but I do need a clickable element on the page with that text.
Update: I have since updated my template as follows:
<button onClick="{{#B8}}{{#changeTask}}8{{/changeTask}}{{/B8}}">Change to task 8</button>
Apparently I needed to nest my data templating in order to access the variables inside the "B8" object. However, now the problem I have is that it's trying to execute the "changeTask" function when it creates the html from the template. How can I get it to wait to execute until I click the button?
Finally got it working, but I ended up going a completely different route. Wanted to post it here in case anyone else had the same problem. I formatted the mustache to give the button a name rather than try to insert the onClick method, then I cycled through every button in that section of the DOM using jquery and add an onClick method to the buttons that had the right names.
Edit: Technically I also changed my buttons to links, which I'll show in the code below, but it should also work for buttons as well.
template:
<a name="{{{B8}}}">Change to task 8</a>
jquery (partial example):
$('a[name="' + buttonData[B8].name + '"]').click(function() {
self.onTaskSelected(buttonData[B8].taskId);
});
Hope that is helpful for others.
While your own answer is correct in essence, there is an easier option to select with jQuery:
$(link+'[name|="'+buttonData[B8].name+'"]')
Hope this helps u in the future.
Btw - I am myself still searching for a solution to the original problem...
I've been using JSON to handle AJAX functionality in my rails applications ever since I heard about it, because using RJS/rendering HTML "felt" wrong because it violated MVC. The first AJAX-heavy project I worked on ended up with 20-30 controller actions tied directly to specific UI-behaviors and my view code spread over controller actions, partials and rjs files. Using JSON allows you to keep view specific code in the view, and only talk to view agnostic/RESTful controller actions via AJAX to get needed data.
The one headache I've found from using pure JSON is that you have to 'render' HTML via JS, which in the case of AJAX that has to update DOM-heavy elements, can be a real pain. I end up with long string building code like
// ...ajax
success: function(records){
$(records).each(function(record){
var html = ('<div id="blah">' + record.attr +
etc +
')
})
}
where etc is 10-15 lines of dynamically constructing HTML based on record data. Besides of the annoyance, a more serious draw back to this approach is the duplication of the HTML structure (in the template and in the JS).* Is there a better practice for this approach?
(My motivation for finally reaching out is I am now tasked with updating HTML so complex it required two nested loops of Ruby code to render in the first place. Duplicating that in Javascript seems insane.)
One thing I've considered is loading static partial files directly from the file system, but this seems a bit much.
I like the idea of templating. In my experience it can really clean up that messy string manipulation!
There are many solutions, for example, check out John Resig's (creator of jQuery):
http://ejohn.org/blog/javascript-micro-templating/
I would go with creating an HTML structure that contains placeholders for the elements you'll need to update via AJAX. How much structure it applies will depend on what you're updating; if you know the number of elements you'll have ahead of time, it would be something to the effect of
<div id="article1">
<div id="article1Headline"></div>
<div id="article1Copy"></div>
<div id="article1AuthorInfo"></div>
</div>
<div id="article2">
<div id="article2Headline"></div>
<div id="article2Copy"></div>
<div id="article2AuthorInfo"></div>
</div>
You then write code that references the id of each element directly, and inserts into the .innerHTML property (or whatever syntactically more sugary way jquery has of doing same thing). IMHO, it's not really so terrible to have to assign the contents of each element, the part that you don't want to have to sprinkle through your AJAX functions is the HTML structure itself; in your app the content is volatile anyway.
However, it looks like you might have a list of an unknown number of elements, in that case it may be that you'd need to just put in a placeholder:
<div id="articleList"></div>
In that case I don't really see a way to avoid building the HTML structure in the javascript calls, but a reasonable amount of decomposition of your javascript should help that:
function addArticle( headline, copy, authorInfo, i ){
createDiv( "article" + i + "Headline", headline );
createDiv( "article" + i + "Copy", copy);
createDiv( "article" + i + "AuthorInfo", authorInfo );
}
(not working code of course, but you get the idea,)
You could use the load function in jQuery;
This loads the content of a page into a div like this:
$('#content').load("content/" + this.href.split('#')[1] + ".html", '', checkResponse);
Just make a dynamic view and you are good to go...
Just happened to find exactly what I was looking for: Jaml