JQuery mobile disables links and forms - ajax

I've made page with sidebar, which can be hidden. I added JQ mobile becouse I need swipe event for handling it on mobile devices, but JQ mobile broke the page completely.
All forms are submitted by AJAX (I found event for forms and links in G Chrome- developers) and all links also tries to load content by AJAX.
Is there any way how to disable it for whole page (some global config, not just with data-ajax=”false” which doesn't work for me at all)?
Could anyone help me fixing that? Thank you :)

After few hours browsing documentation, I've found, what I needed. I just needed to move config code before JQ Mobile script loading.
Now it works;
<script src="files/script/lib/jquery.min.js"></script>
<script type="text/javascript">
$(document).on("mobileinit", function () {
$.extend($.mobile, {autoInitializePage: false});
});
</script>
<script src="files/script/lib/jquery-mobile.min.js"></script>

Related

AngularJS and AJAX injection - Manually start the App?

Currently my angular app is dynamically loaded into the current webpage. This means that as well as all scripts (angular.min.js / controllers etc) and is loaded with the Wicket AJAX request and injected in the current webpage.
The scripts are included in the head, the div injected in some form in the body.
At this point Angular should detect the div and start up the app, but nothing happens. when i try to use console.log(angular) i get angular just like with an normal app. When i try to load the same webpage (without the AJAX injection) the app starts up fine.
How can i manually start AngularJS, or notify to start?
http://docs.angularjs.org/guide/bootstrap
Manual Initialization
If you need to have more control over the initialization process, you can use a manual bootstrapping method instead. Examples of when
you'd need to do this include using script loaders or the need to
perform an operation before Angular compiles a page.
<!doctype html>
<html xmlns:ng="http://angularjs.org">
<body>
Hello {{'World'}}!
<script src="http://code.angularjs.org/angular.js"></script>
<script>
angular.element(document).ready(function() {
angular.bootstrap(document);
});
</script>
</body>
</html>
In short: Remove ngApp directive from your html and manually bootstrap
Developer guide has the most you need, I suggest everyone to read it.

button not working in MVC when JQuery SCRIPT tag is used in view

i am using script tag in my MVC view and my src for Script tag is "http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js".
the issue iam facing is html buttons are not working/postingback.
If i remove script tag,everything works fine.
whts the actuals problem with my code.?
there could be number of issues, the script tag you are refereing to includes the jquery library from the CDN. One possibility could be that there is some javascript code in the view that is disabling your buttons you can verify by doing the following
1) keep the script tag (jQuery) included in the view
2) in the script section of your view (if you have else create one like)
<script>
$(function(){
$(":button").removeAttr("disabled");
});
</script>
3) so your final code will look like
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
<script>
$(function(){
$(":button").removeAttr("disabled");
});
</script>
check now if it works... if it works then it means that you have some code that is disabling the buttons and upon removal of jquery library js error would have occured that why it seems to work...

Load a page into an iframe with C# ASP.NET, Razor, and MVC3

I want to load an external page (i.e. google or facebook auth) into a iframe when the user clicks a button. How would you do this using MVC3 and Razor?
This seems like an extremely trivial task, but I can’t seem to figure out what to ask Google so I get something back I can use.
You could use JQuery something like this:
<script type="text/javascript">
$(function () {
$('#myButton').click(function () {
$('#myFrame').attr('src', 'http://www.google.com/');
});
});
</script>
<iframe id="myFrame"></iframe>
<button id="myButton">
Refresh IFrame
</button>
However, you will find that some sites (such as google.com) will prevent you from doing this, as they can specify in their response header whether or not the page can be opened in an IFrame. This is to prevent 'clickjacking' and is built in to most modern browsers.

Ajax update in a Sharepoint 2010 Webpart

Is there any easy way to make a Ajax call in a Webpart?
I have a Webpart with a button, and I want that when the user pushes the button, it executes a server function without reloading the page. And then, if all is ok, execute a callback function. I thought that the best way is with a AJAX call.
But when I've looked for how to do it I only get some complicated tutorials that I don't really understand (and most are from old versions of Sharepoint). Any help? What is the best way to start? Thanks
Have you tried using jQuery with a content editor web part? I've done this before and it's rather easy. Here is a step by step for how I do it.
Download jQuery.
Upload jQuery to SiteAssets in Sharepoint.
Upload coded file (see below) with AJAX calls.
Point to coded file via Content Editor Web Part.
It should work!
Here is a default way something should work.
<html>
<head>
<script src="<point to jquery file>"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#main').load('<RELATIVE URL TO SERVER PAGE>');
});
</script>
</head>
<body>
<div id="main"></div>
</body>
</html>
If possible I would go for a Visual Web Part in Visual Studio. You basically create a .NET user control. It saves you a lot of manual control definitions etc.
If in SharePoint2007 you might want to take a look at the "Smartpart". It has ajax support and some great tutorials on how to use it.

Facebook dev - loading fbml & html code into a div in an iFrame via Ajax

I've got an iframe application that's working fine and rendering fbml in facebook. But the whole app is built using ajax calls to load large chunks of pages. Several of these have < fb: tags that aren't being rendered when they load. I tried the code below, which is then loaded into a div in my index page, but it doesn't show anything at all, no html, no fb rendering, nothing. Can someone please tell me what I'm missing?? Thanks so much!!
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<fb:serverfbml style="width: 600px;">
<script type="text/fbml">
<fb:fbml>
<!-- all of my html and my php and my fb tags go in here, for example: -->
<fb:name uid="my_real_user_id" useyou=\"false\"></fb:name>
</fb:fbml>
</script>
</fb:serverfbml>
I hope my question was clear. If not, just let me know I'll explain in more detail! :P
have look at this question
Loading Facebook fb:profile-pic via AJAX in Facebook Connect site

Resources