tweet button inside jquery template - twitter

I want to integrate tweet button inside a jquery template. Am trying the 'tweet button with javascript' (link). But my html template shows only link, it does not show the button. I tried the anchor tag outside the jquery-templ script. Then it is working fine. I am confused why this is not working inside jquery-tmpl.
code look like follows:
<script type="text/x-jquery-tmpl">
Tweet
</script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s) [0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="http://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
Any suggestions?

Because the closing </script> tag is not parsed correctly by the browser.
You could write </scr{{= ""}}ipt> instead...
The point is, that browsers don't understand nesting of <script> tags, so whenever it parses a </script>, it closes the outermost script tag. Therefore, the closing </script> tag is matched to the template script.
You can trick the browser into ignoring the script tag, by adding the {{= ""}}, which will be used by the template engine to generate an empty string. </scr{{= ""}}ipt> will result in </script>, after templating.

Related

TinyMCE inline mode showing raw HTML rather than formatted output

I'm attempting to use the inline mode of TinyMCE with an MVC 5 page. I created the HTML content using a TinyMCE editor in the standard mode as follows:
That data is saved back to the database and then retrieved and displayed on a different page. On that page I've set up an instance of TinyMCE to display that content in the inline view as follows:
<div id="myeditablediv">#Model.LongDescription</div>
<script src="~/scripts/tinymce/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
selector: '#myeditablediv',
entity_encoding: 'raw',
inline: true
});
</script>
I'd expected that to show the formatted HTML in a clickable TinyMCE control with no toolbars, but instead it's just showing the raw HTML:
Clicking on the control does switch it into edit mode and the toolbar appears etc:
so it looks like I'm not passing the data to be rendered to the control correctly when setting up the div with <div id="myeditablediv">#Model.LongDescription</div>?
I am guessing that your code is escaping the HTML when inserting it back into the page. I don't know ASP.NET but there is likely something you can do to #Model.LongDescription to have it place the raw HTML into the page.
A quick google search suggest this might be the answer:
#Html.Raw(#Model.LongDescription)

Is it possible to get the html produced by a script

I have a URL from a third party site which should be the source of a script tag, something like this:
<script src="<%= #url %>"></script>
The above code shows a webform.
I would like to get the html code resulted by that code and store into a variable, something like this :
html_code = get_html('<script src="<%= #url %>"></script>')
Is that possible using Ruby/Rails (maybe using nokogiri) ?
If you're using jQuery in the browser and that code shows up in a well defined location, for example a <div> with a specific id then you can just grab it using your browser's JavaScript console:
$('#the_id').html()
That will show the raw HTML of that element presuming it dumps its content in an element with the ID the_id. You can use whatever CSS selector works.
Where that HTML goes in your document is impossible to tell from your example. A <script> can add any elements it wants anywhere in your document. You'll have to look around to see where it goes.
Load the page into a browser and then do View/Source in the browser. This will let you view the generated web page and you can find what URL was put into the <script> tag.

Stop MVC4 emitting script tag

I have a layout template that is xml and has no <script> tag in it. However when the page is generated <script/> has been generated as the first child element of the root element. Is there any way to turn this off?
That's not default behaviour. Can you check the html of your view and make sure there is no empty script in there?

How to make getJSON to update correctly an element after page loaded in jQuery Mobile?

I'm trying to get a getJSON result to update an HTML element on page load, within a jquery mobile loaded website.
Now, I've read I should not rely on ready(), but bind to pageInit. So I tried, but it just won't work. I've tried many other events that could be logical to try within the API event documentation, without any success.
The closest I come to success is after the page is loaded, via ajax, if I refresh the page manually (with the browser's refresh button), getJSON does update the corresponding HTML element. And you guess, it's not what I want to achieve. Here is what the code looks like now, and where it is placed...
<div data-role="page">
<script>
$( '#pageContainer' ).live( 'pageinit',function(event){
//an alert() here does fire right before the page is shown in the browser
//here is the getJSON code.
});
</script>
Now, I need help to try to figure how to make it work. I only want an element X in the page to update with the text returned from a jSON when the page appears in the browser! Like a normal ready() function would have done !
(Maybe it is relevant to specify I'm running RC2 ?)
If you can't use JSONP here, have you tried setting a setTimeout()? You have to trigger a callback after the json object is loaded so timing is essential.

Using jquery mobile framework with MVC3

I have the problem with url link in my MVC application when I use jquery mobile libraries
here is my header reference
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
Example
http://www.mysitename.com
if I go http://www.mysitename.com/home/audit it works fine but if I click any link button within my application it starts appending # and then url look like http://www.mysitename.com/home/audit#home/audit
The only time it happens when I use jquery mobile framework
Jquery mobile wraps all links so that it will send and ajax request by default. If you don't want this behaviour add rel="external" attribute to your a tag like below.
Multi-page link
You can read the documentation for more detailed information
http://jquerymobile.com/demos/1.0rc1/docs/pages/page-navmodel.html
If you don't want # in ur url and want clean URL then you can use target attribute of anchor tag. You can use anchor tag using Below 2 technieqs in MVC
1) Direct in Anchor Tag
LinkText
if you use jQueryMobile then you can also give data-role="button" to give anchor tag look like button
2) Using HTML Helper
#Html.ActionLink("Log Off", "LogOff", "Account", null, new { target = "_self" })
In above both case we set target="_self" attribute of anchor tag nothing else. Let me know will it work for you or not.

Resources