So my problem is as follow:
So firstly, I made a ajax call to another page and replaces some of the elements in my current DOM with the new information, which utilize Mathjax to render their math formulas. However, after my ajax call, Mathjax doesn't seem to be loaded again thus not rendering the math formulas for my new math formulas. Does anyone have encountered this before? What is the solution?
Thanks a lot
This Mathjax documentation page should help you a lot.
For example, it has MathJax.Hub.Queue(["Typeset",MathJax.Hub]); method call to update every new node on the page.
In addition to Daniel O'Hara answer you also might try to call MathJax.Hub.Queue(["Reprocess",MathJax.Hub]). Or call MathJax.Hub.Typeset() directly but its not recommended to do so in production
Related
I'm hopping this awesome community can steer me on the right direction. I came from the flash/flex/js world, and I like how simple it is to define an item renderer in flex. Here is what I'm trying to accomplish:
I have an Angular component which consist of a form and a html table. I have the columns, headers, rows, etc. all populating correctly using ng-repeat. I want to be able to define column "renderers", so if someone passes me a column property like "renderAs: 'button'" or "renderAs: 'progress'" I should be able to render the entire column as a button, or progress bar, etc.
Here is what I've tried so far:
ng-bind-html="getColRenderer(column.renderAs, column.value)" which
returns HTML based on 'renderAs'. As you all probably know, this
will only work with basic HTML stuff, but I cannot append an
'ng-click', or an 'href' due to angular's security. So, I opted
for something else.
I semi-have a good solution embedding a "ng-switch" inside my
ng-repeat. I had an ng-if but with several types of potential
"renderers" I opted for the switch. This somehow seems like future
problems while trying to display too many columns or rows, just my
fears.
Decorators - I like decorators, but it seemed a bit too much for
something as a simple button that calls something on click or a
progress bar with 2 values. So, I halted going into this path, but
if this is the shinning path all walk, then by all means.
I hope someone out there has ran/done something like this and can steer me on the right course of action. If the ng-switch or ng-if is okay, then I'm good to go.
Once again, thank you in advanced.
I am starting to notice problems when I try and code my javascript and use functions that are in my viewmodel. Things like this:
case 37:
#if (Model.GoLeft)
{
Here I get a syntax error and the words "expected constant" for Model. Is there some solution to this? Do I need to upgrade something so it works?
I checked around on stackoverflow. Someone else suggested that I should separate my js but that doesn't help me as for example in this case where I want the keypress to do something if on a certain type of page where the Model allows it. If the js is in another file I can't code this way.
thanks
your approach is just wrong. Dont generate JS code in views by ifs. You defintely should keep your JS separetly (so that browser can efectively cache and reuse it). If you need to change behaviour of client-side code according to model values, do that by generation only some king of "flags" (JS have multiple ways to do that, i am not expert in JS - for example global variable works always, but there are more elegant and recommended ways) and in your client-side method test for their presence and fork your code by that.
This is probably jquery basics, but I can't find a solution after much googling.
How do you attach "non-events" to elements inserted in the DOM?
For events, like click, we can use live() or bind().
How would you, for instance, initialize tabs() or addClass() to a new element?
Specifically, I'm trying to get tabs() to work in the content of an ajax loaded dialog, but I think the correct solution should be applicable to any situation.
I did see a trick that involved $('body').mousemove() which did work, but that is still binding to an event and obviously a hack.
For instance, how would you get addClass() to fire on a newly inserted table row?
I mean to do this implicitly, meaning that I don't want to write out specific instructions for every event that adds nodes to the dom, I just want it to "run in the background".
Let me know if this needs clarification, I see many similar questions on SO but no answers that have helped.
EDIT: Simple example: A page calls $('a').addClass('highlight') which works on all anchors in the page. A new anchor is then added to the page dynamically by jQuery, but does not get the class added.
EDIT: I have tried all kinds of bind(), trigger() and change() methods but I'm afraid I'm barking up the wrong tree.
you need to look at livequery it will allow you to apply things to newly added elements
also if your adding the element you can do
$('body')append('<div>some content</div>').tabs();
or something like that
I know that I may contradicting your "non-event" rule here, but just by saying that you want something "triggered", you're already implying some kind of event.
In that case, may I suggest jQuery custom events? You may want to create a custom event, then trigger it manually somewhere in your code. It's not automatic (like when you add a row, BOOM, it fires™), but that's the closest thing I can think of with what you were describing.
Specifically, you may want to look at jQuery's .bind() and .trigger() methods.
Tagsoup is interfering with input and formatting it incorrectly. For instance when we have the following markup
Text outside anchor
It is formatted as follows
Text outside anchor
This is a simple example but we have other issues as well. So we made tagsoup cleanup/formatting optional by adding an extra attribute to textarea control.
Here is the diff(https://github.com/binnyg/orbeon-forms/commit/044c29e32ce36e5b391abfc782ee44f0354bddd3).
Textarea would now look like this
<textarea skip-cleanmarkup="true" mediatype="text/html" />
Two questions
Is this the right approach?
If I provide a patch can it make it to orbeon codebase?
Thanks
BinnyG
Erik, Alex, et al
I think there are two questions here:
The first Concern is a question of Tag Soup and the clean up that happens OOTB: Empty tags are converted to singleton tags which when consumed/sent to the client browser as markup gets "fixed" by browsers like firefox but because of the loss of precision they do the wrong thing.
Turning off this clean up helps in this case but for this issue alone is not really the right answer because we it takes away a security feature and a well-formed markup feature... so there may need to be some adjustment to the handling of at least certain empty tags (other than turning them in to invalid singleton tags.)
All this brings us to the second concern which is do we always want those features in play? Our use-case says no. We want the user to be able to spit out whatever markup they want, invalid or not. We're not putting the form in an app that needs to protect the user from cross script coding, we're building a tool that lets users edit web pages -- hence we have turned off the clean-up.
But turning off cleanup wholesale? Well it's important that we can do it if that's what our usecase calls for but the implementation we have is all or nothing. It would be nice to be able to define strategies for cleanup. Make that function plug-able. For example:
* In the XML Config of the system define a "map" of config names to class names which implement the a given strategy. In the XForm Def the author would specify the name from the map.
If TagSoup transforms:
Text outside anchor
Into:
Text outside anchor
Wouldn't that be bug in TagSoup? If that was the case, then I'd say that it is better to fix this issue rather than disable TagSoup. But, it isn't a bug in TagSoup; here is what seems to be happening. Say the browsers sends the following to the client:
<a shape="rect"></a>After<br clear="none">
This goes through TagSoup, the result goes through the XSLT clean-up code, and the following is sent to the browser:
<a shape="rect"/>After<br clear="none"/>
The issue is on the browser, which transforms this into:
<a shape="rect">After</a><br clear="none"/>
The problem is that we serialize this as XML with Dom4jUtils.domToString(cleanedDocument), while it would be more prudent to serialize it as HTML. Here we could use the Saxon serializer. It is also used from HTMLSerializer. Maybe you can try changing this code to use it instead of using Dom4jUtils.domToString(). You'll let us know what you find when a get a chance to do that.
Binesh and I agree, if there is a bug it would be a good idea to address the issue closer to the root. But I think the specific issue he is only part of the matter.
We're thinking it would be best to have some kind of name-to-strategy mapping so that RTEs can call in the server-side processing that is right for them or the default if it's not specified.
Is it possible to pass a search variable into the Google Custom Search Engine that I have embedded on my website? I can get the search engine to work, but I can't pass it a term via POST (it's coming from a search button on other pages of the website)
I tried to hack the code I found here: http://code.google.com/apis/ajax/playground/?exp=search#hello_world
And this is what I have so far... ($q is the term I am passing to it)
<script type="text/javascript">
google.load('search', '1', {language : 'en'});
function OnLoad()
{
var customSearchControl = new google.search.CustomSearchControl('***my key****');
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
customSearchControl.draw('cse');
searchControl.execute("$q");
}
google.setOnLoadCallback(OnLoad);
</script>
Thanks
Sorry, I know it's a crappy answer, but you've actually got it right apart from referencing the wrong variable name. Oh, also, as an aside, I would also hope you're doing some kind of sanitisation on $q, in case someone posted something like this to your form: term"); alert("aha!
customSearchControl.draw('cse');
searchControl.execute("$q");
should be:
customSearchControl.draw('cse');
customSearchControl.execute("$q");
Also, thank you for the question - I was looking for how to do this myself!
This is to help anyone using PHP trying to accomplish this same goal. The example above uses...
customSearchControl.execute("$q");
to read the parameter being passes in. On a PHP site you would use...
customSearchControl.execute("<?php echo $_POST['your_paramter_name_here'];?>");
You could use $_GET or $_REQUEST if your parameter is not in the post.
Of course you should should sanitize the input first. Something like this is pretty weak but it's a start...
customSearchControl.execute("<?php echo htmlentities( trim( $_POST['your_paramter_name_here'] ), ENT_QUOTES );?>");
In case someone is looking for a bit more straight forward / simple solution. All you have to do is to pass search keywords into GET parameter named q (from your custom form into page where your GCS is), GCS will automatically use that search phrase.
Source: https://developers.google.com/custom-search/json-api/v1/using_rest