Products

Solutions

Resources

Partners

Community

Blog

About

QA

Ideas Test

New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

Welcome to the DNN Community Forums, your preferred source of online community support for all things related to DNN.
In order to participate you must be a registered DNNizen

HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...jQuery Mobile with DNN?jQuery Mobile with DNN?
Previous
 
Next
New Post
8/30/2013 1:32 PM
 

Has anyone been able to get jQuery Mobile working with DNN?

I'm getting some ajax conflicts with the links.  I can get jQuery Mobile working but it breaks the admin links in DNN 7.  The closest I can get it is using this in the header:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function () {
    $.mobile.ajaxEnabled = false;
});
</script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

 

When I use this, the jQuery Mobile user interface works fine but I cannot enter the text/html editor when I click on "Edit Content"

More specifically, the link html changes from:

<a href=" void(0)"></a>     (should be this)

to:

<a href=" dnnModal.show('http://domain.com/Rev1/Rev15/tabid/106/ctl/Edit/mid/491/Default.aspx?popUp=true',/*showReturn*/false,550,950,true,'')"><img src="/images/edit.gif"><span>Edit Content</span></a>

 
New Post
9/3/2013 11:41 AM
 

I guess that's because you are loading jQuery twice.
DNN loads it for the admin interface and you load it again.
Use the jQuery skin object, that checks if jQuery was already loaded en only loads it if needed.

HTH

 
New Post
9/5/2013 10:53 AM
 

I was able to resolve the issue with the link which now works.  I resolved this by adding the noConflict script.  However, jQuery Mobile is still removing all the DNN classes from the form elements and adding it's own.  This is really messing up the host user interface to the point where it's unusable.  I would like to remove this ajax feature globally but cannot get it to work.  It would be really nice if there were a way to get jQuery Mobile to work with DNN.

I made sure that jQuery is only called once.  Here is my code in the header:

 

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/j..." />
<script src="http://ajax.googleapis.com/ajax/libs/...>
<script type="text/javascript">
  $.noConflict();
  // Code that uses other library's $ can follow here.
</script>
<script type="text/javascript">
$(document).bind("mobileinit", function () {
    $.mobile.ajaxEnabled = false;
});
</script>
<script src="http://code.jquery.com/mobile/1.3.2/j...>

 
New Post
9/5/2013 12:48 PM
 
Two thoughts:

- Have you looked at the DarkKnighMobile skin for ideas?
- Nothing directly to do with DNN, but my pal Kevin Rattan wrote about the issues of WebForms and jQuery mobile here http://dotnet.learningtree.com/2013/05/02/asp-net-web-forms-and-jquery-mobile-reconsidered/


Best wishes,
- Richard
Agile Development Consultant, Practitioner, and Trainer
www.dynamisys.co.uk
 
New Post
9/5/2013 12:48 PM
 
He has different code for turning off ajaxEnabled.

Best wishes,
- Richard
Agile Development Consultant, Practitioner, and Trainer
www.dynamisys.co.uk
 
Previous
 
Next
HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...jQuery Mobile with DNN?jQuery Mobile with DNN?


These Forums are dedicated to discussion of DNN Platform and Evoq Solutions.

For the benefit of the community and to protect the integrity of the ecosystem, please observe the following posting guidelines:

  1. No Advertising. This includes promotion of commercial and non-commercial products or services which are not directly related to DNN.
  2. No vendor trolling / poaching. If someone posts about a vendor issue, allow the vendor or other customers to respond. Any post that looks like trolling / poaching will be removed.
  3. Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
  4. No Flaming or Trolling.
  5. No Profanity, Racism, or Prejudice.
  6. Site Moderators have the final word on approving / removing a thread or post or comment.
  7. English language posting only, please.
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out