Using jquery mobile framework with MVC3 - jquery-mobile

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.

Related

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.

redirect to a page using bootstrap angular js button as opposed to url.action

How do I convert the following url.action link to a boot strapped button.
<a data-ng-href="#Url.Action("Create", "Profile")" target="_self">Create New </a>**strong text**
This button upon click needs to redirect the current page to Create Action and Profile Controller.
I am trying to bootstrap and angularize a legacy asp.net mvc 4 app.
Thanks
You can give an anchor tag a class of button which makes it look like a button but it can still contain a href. The alternative is in the controller to have a function to change the path using angulars $location service, eg:
$scope.setLocation = function(url) {
$location.path(url)
};
in the html:
<div class="button" ng-click="setLocation('path/to/location');

How to ensure that all the non-origin href links open in a new tab?

I have a html content stored in backend, which may have certain anchor tags with href links, when rendering them I build a custom NodeValidator and then bind the value using a angular.dart decorator. Some of the href links points to outside my domain, I want to make sure that target='_blank' is added as attribute to such anchor tags so that browsers open the link in a new tab. Can this be taken care of by some UriPolicy or custom NodeValidator?

jQuery mobile force full reload when link clicked

I have a "normal" link in my jqm page like this:
<a href="http://www.mysite.com/mobile/page.php?attribute=value">
And if I click it it won't properly refresh taking into account the attribute value and loading everything that's needed for it dynamically based on the attribute value. I understand that this is due to the fact that jqm tries to do an ajax call like mentioned here:
When you use pageChange an Ajax request will be made to that url and it will be
loaded only the content inside the div with data-role="page". So everything you
have out of this element will be ignored (JS and CSS).
So, I found out in the docs that I should use $.mobile.ajaxEnabled=false; or rel=external on links or target=_blank on the link.
Strange thing though for me is that only when I set the target=_blank property to my links will this truly happen. So, am wondering if someone had this kind of a problem and how did you solve it? The thing is, I would like to refrain myself form using target=_blank as it opens a new tab in my browser (as expected, but this is not nice from users' POV).
jqm version I use is 1.2
This question now at the top of google search results, so figured I'd answer:
Use the data-ajax attribute and set it to false to force reload upon clicking a link:
data-ajax="false"
use it like:
<a href="/" data-ajax="false">
<img id="mainLogo" src="logo.svg" width="215" />
</a>
And then your link will force reload the page!
Linking without Ajax
Links that point to other domains or that have rel="external",
data-ajax="false" or target attributes will not be loaded with Ajax.
Instead, these links will cause a full page refresh with no animated
transition. Both attributes (rel="external" and data-ajax="false")
have the same effect, but a different semantic meaning: rel="external"
should be used when linking to another site or domain, while
data-ajax="false" is useful for simply opting a page within your
domain from being loaded via Ajax. Because of security restrictions,
the framework always opts links to external domains out of the Ajax
behavior.
Parts taken from https://stackoverflow.com/a/22951472
Make function for the onclick event of the link.See the below code example.Hope this helps!
<script type="text/javascript">
function loadPage(url){
document.location.href = url;
}
<script/>
<a href="#" onClick="loadPage('http://www.mysite.com/mobile/page.php?attribute=value');">

tweet button inside jquery template

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.

Resources