Call jquery "parse/format" html function - javascript

I have a simple html page:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.2">
<link rel="stylesheet" href="js/jquery.mobile-1.2.0.css" />
<script src="js/jquery-1.8.2.js"></script>
<script src="js/jquery.mobile-1.2.0.js"></script>
</head>
<body>
<div id="c">
<div data-role="page">
<div data-role="header">
<h1> My Title </h1>
</div>
</div>
</div>
</body>
</html>
when the page loads this is how jquery "parses/formats" the body of that html:
<body>
<div id="c" class="ui-mobile-viewport ui-overlay-c">
<div data-role="page" data-url="/jqueryMobile/TC_Page/main.html" tabindex="0" class="ui-page ui-body-c ui-page-active"
style="min-height: 1464px;">
<div data-role="header" class="ui-header ui-bar-a" role="banner">
<h1 class="ui-title" role="heading" aria-level="1">
My Title
</h1>
</div>
</div>
<div class="ui-loader ui-corner-all ui-body-a ui-loader-default">
<span class="ui-icon ui-icon-loading"></span>
<h1>
loading</h1>
</div>
</div>
</body>
Note that tags have new attributes. Now my question is how can I know what function of jquery mobile library is doing that? I will like to call the method that is doing that!
The reason why I will like to call that method is because I replace the content of div id 'c' with ajax and the page does not render as I want it to. In other words doing:
$.ajax({
url: 'someUrl',
success: function (result) {
/*
result = "content of first example" =
<div data-role="page"><div data-role="header"><h1> My Title </h1></div></div>
*/
$('$c').html( result );
// I will like to call here something like: $('#c').RrenderHtml();
}
});
does not renders as I want it to. The reason why it not renders correctly is because the tags in the div id c does not have the attributes that jquery created on them when the page loads.
A solution to this problem will be return:
<div data-role="page" data-url="/jqueryMobile/TC_Page/main.html" tabindex="0" class="ui-page ui-body-c ui-page-active"
style="min-height: 1464px;">
<div data-role="header" class="ui-header ui-bar-a" role="banner">
<h1 class="ui-title" role="heading" aria-level="1">
My Title
</h1>
</div>
</div>
<div class="ui-loader ui-corner-all ui-body-a ui-loader-default">
<span class="ui-icon ui-icon-loading"></span>
<h1>
loading</h1>
</div>
Instead of:
<div data-role="header">
<h1>
My Title
</h1>
</div>
On the ajax call. The problem with that solution is that I will have to figure out how each response will be formated on a new page by jquery when the page loads. Also some responses I am creating them dynamically like tables. Maybe I could create an iFrame place the jquery libraries in there also the response from the ajax call in the body wait for the page to load and then finally take the end resoult Hope I explained my self correctly.

You don't need to know the methods. There is already a method provided to enhance injected pages and it's:
.trigger('create')
More on this here:
http://jquerymobile.com/demos/1.2.0/docs/pages/page-dynamic.html
http://jquerymobile.com/demos/1.2.0/docs/pages/page-scripting.html

Related

Displaying info from sidebar on the same page

I am a beginner at this stuff, and right now I am working on a project. To keep it simple, my project right now has a sidebar that has four different options. (Schedule, progress, add course, drop course). I want users to be able to click on this options (after expanding the side bar) and display the information from which ever of the four they clicked on. I want this information to display on the same page, not link to another page. I have done this before by having invisible pages and using a showpage function. This time around though it is coded differently with classes, and I'm not sure how to go about this. Any help is appreciated!
Note: I don't have any data for these 4 pages right now - I just want to set it up so they function right now. To keep it short: I'm asking what code I need and where to display information (Ex: "Here is your schedule") on the same page when Schedule is clicked.
<!doctype html>
<html>
<head>
<title>STUDENT SCHEDULER APP</title>
<link rel="stylesheet" type="text/css" href="ssaStyles.css">
<script src="jquery-3.2.1.min.js"></script>
<script>
$(function() {
console.log("jQuery was loaded");
});
$(document).ready(function() {
function toggleSidebar() {
$(".button").toggleClass("active");
$("main").toggleClass("move-to-left");
$(".sidebar-item").toggleClass("active");
}
$(".button").on("click tap", function() {
toggleSidebar();
});
$(document).keyup(function(e) {
if (e.keyCode === 27) {
toggleSidebar();
}
});
});
</script>
</head>
<body>
<div id="header">
<h1>Welcome!</h1>
</div>
<div class="nav-right visible-xs">
<div class="button" id="btn">
<div class="bar top"></div>
<div class="bar middle"></div>
<div class="bar bottom"></div>
</div>
</div>
<!-- nav-right -->
<main>
<nav>
<div class="nav-right hidden-xs">
<div class="button" id="btn">
<div class="bar top"></div>
<div class="bar middle"></div>
<div class="bar bottom"></div>
</div>
</div>
<!-- nav-right -->
</nav>
</main>
<div class="sidebar">
<ul class="sidebar-list">
<li class="sidebar-item">Schedule
</li>
<li class="sidebar-item">Progress
</li>
<li class="sidebar-item">Add a course
</li>
<li class="sidebar-item"><a href="#" class="sidebar-anchor">Drop a
course</a></li>
</ul>
</div>
</body>
</html>
Its really simple all you have to do is create sections and these sections will be linked to your link, let me show you how.
<html>
<head>
<title>Example</title>
</head>
<body>
<!--create the links but add a # sign before you give them the section names-->
<div class="side-nav">
About
Contact
</div>
<!--Create an id with the same name as the link href source but leave out the # sign-->
<!--this is the about section-->
<div id="about">
<h1>Hello</h1>
</div>
<!--this is the contact section-->
<div id="contact">
<p> done</p>
</div>
</body>
</html>
the name you give your link should be the same as the div id name, and you will have to disable overflow in CSS if you want to....hope it made sense, if you need more help just ask.

JavaScript animate function doesn't work

This is what the code looks like.
<head>
<link type="text/css" rel="stylesheet" href="C:\Users\User\Desktop\css1.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="C:\Users\User\Desktop\js.js"></script>
</head>
<body>
<div id="header_wrap">
<div id="header">
<div id="logo">
LOGO
</div>
<div class="nav">
<a href="http://www.google.se">
Stuff
</a>
<a href="javascript:void(0)">
Other stuff
</a>
<a href="javascript:void(0)">
More stuff
</a>
</div>
<div class="mobile_nav"></div>
<div class="mobile_nav_menu">
<div class="mobile_menu">
<span>Stuff</span>
<span>Other stuff</span>
<span>More stuff</span>
</div>
<div class="mobile_close">
</div>
</div>
</div>
</div>
<div class="image_container">
<div class="inner_content" id="slide1">
<h2>
CONTENTS
</h2>
</div>
<a class="button" href="javascript:void(0)"></a>
</div>
</body>
the .js file contains this code
setTimeout(function(){
$("#slide1").css('opacity', '1');
},800);
setInterval(function(){
$(".button").toggleClass("opacity");
},1000);
//Navigation
$(".mobile_nav").click(function() {
$(".mobile_nav_menu").animate({right: 0});
})
$(".mobile_close").click(function() {
$(".mobile_nav_menu").animate({right: -270});
})
Can anyone help me out with what I'm doing wrong and how it can be fixed?
Thank you! /AJ
UPDATE: The .js loads (tried the alert function), but does not fill the function it should. Original pen can be found on http://codepen.io/yuriylianguzov/pen/qjwEe
One of the problems is that you are trying to reference a javascript file from a physical file path, and not a url (or relative path). You can't use your harddrive path in an html file to include javascript.
<script src="C:\Users\User\Desktop\js.js"></script>
If your javascript is in the same folder as your html, try something like this:
<script src="js.js"></script>
I'm not exactly sure what the expected behavior for the JavaScript is, because it appears to be doing what it is intended to do. If you look at the DOM in the codepen link that you provided the element with the id of 'slide1' has its opacity style set to 1 (see below) and the anchor tag with class of 'button' is getting the class 'opacity' toggled on and off every second (not depicted below, but you can see it happening in firebug).
<div class="image_container">
<div id="slide1" class="inner_content" style="opacity: 1;">
<h2>
We are who we choose to be.
</h2>
</div>
</div>
The other two click handler's are targeting empty elements (the element with class of 'mobile_nav', and the element with class of 'mobile_close') so they aren't going to do anything.
$(".mobile_nav").click(function() {
$(".mobile_nav_menu").animate({right: 0});
})
$(".mobile_close").click(function() {
$(".mobile_nav_menu").animate({right: -270});
})
<div class="mobile_nav"></div>
<div class="mobile_nav_menu">
<div class="mobile_menu">
<span>Projects</span>
<span>Profile</span>
<span>Contact</span>
</div>
<div class="mobile_close"></div>
</div>
I hope this helps!
1) Some of the elements your javascript is acting on don't have any content
2) Change the line $(".mobile_nav_menu").animate({right: 0}); to: $(".mobile_nav_menu").animate({"right": "0"}); and do the same with the other one, though it won't have any functionality, really.
3) your class mobile_nav_menu needs to have css that says position:relative for the attribute "right" to work.
4) I'd recommend moving your mobile_close div outside the mobile_nav_menu div so it doesn't move when you click it
If anyone has stuff to add, please do so.

phonegap + jqmobile: how to change page correctly

i'm developing android app using cordova + Ripple emulator + jq mobile. I want to change page after successful login. html of main (and the only) page:
<div data-role="page" id="login">
<div data-role="header">
<h1>
Вход
</h1>
</div>
<div class="ui-content">
<div id="loginFlashMsg">
</div>
<form id="loginFrm">
<div>
<label for="loginInptTxt">Ваш логин:</label>
<input type="text" id="loginInptTxt" />
</div>
<div>
<label for="pswInptTxt">Пароль:</label>
<input type="password" id="pswInptTxt" />
</div>
<button id="loginBtn">
Войти
</button>
</form>
</div>
</div>
<div data-role="page" id="lots">
<div data-role="header">
<h1>
Лоты
</h1>
</div>
<div class="ui-content">
<ul data-role="listview" id="lotsList">
</ul>
</div>
</div>
after json-authorization i want to change page:
App.prototype.ProcessResponse = function (response, textStatus, jqXHR) {
if (response['status'] != 'ok') {
this.notifyAboutError(response['status']);
} else {
switch (response['action']) {
case 'login':
this.user = new User($('#loginInptTxt').val(), response['sid']);
$.mobile.changePage("#lots");
break;
case 'getLots':
this.appendLots(response['lots']);
}
}
};
but it doesn't work. I know, changePage() is deprecated. I try to use
$(":mobile-pagecontainer").pagecontainer("change", "$lots");
but everything is still the same - nothing. Extract to another html page has no effect. How I can switch pages in my android app?
p.s. the best that I can achieve is that I see the header of lots-page and text "loading" after it but after second it disappear.
$.mobile.changePage("#id");
works. No problem the site that is shown changes to another page id.
If you want a fancy transition use e.g.
$.mobile.changePage("#id", {transition:"slide"});
Works like a charm :) Of course you can also navigate to new pages just use it without the '#'.

How to load external html content into a div inside a page using jquery mobile

A part of mark up for the current page.
<div class="que-plc">
<div class = "questionHolder">
<div class = "questionBorder">
<h3>A question?</h3>
<div>
<div ><a id="goto-que1" class="to-next-que">NEXT</a></div>
</div>
</div>
</div>
</div>
The mark up that has to be loaded into the current page:
HTML -- que1.html:
<div class = "questionHolder">
<div class = "questionBorder">
<h3>Question Here?</h3>
<div data-type="horizontal">
<div><a id="goto-que2" data-role="button" class="to-next-que">NEXT</a></div>
</div>
</div>
</div>
HTML -- que2.html:
<div class = "questionHolder">
<div class = "questionBorder">
<h3>Question Here?</h3>
<div data-type="horizontal">
<div><a id="goto-que3" data-role="button" class="to-next-que">NEXT</a></div>
</div>
</div>
</div>
The javascript to load que1.html and que2.html:
$("a.to-next-que").click(function(){
alert(this.id)
var cur_id = this.id.toString();
$(".questionHolder").remove();
var last = cur_id.length
cur_id = cur_id[last - 1];
$.get('level/level1/que'+cur_id+'.html',function(question) {
$('.que-plc').html(question).trigger('create');
});
});
The problem is after que1.html is loaded into the dom i,e inside the .que-plc container, then the successive clicks wont load que2.html, que3.html ... to the dom. What is happening?
I am using jquery-mobile 1.0.1, so using $.mobile.loadPage, $.mobile.changePage results in a error.
And also navigating from page1.html to page2.html via a link whose data-ajax="false" wont load the javascript that is in page2.html
That is:
<body>
<div data-role="page">
</div>
<script src="play.js"></script>
The play.jswont be available inpage2.html`. How can this be corrected?
You can use like this
$('#div_content').load("page.html");
Load page when click button
$('#button').click(function(){
$('#div_content').load('html.page');
});

How do I attach a click event to all div's assigned to a certain class name?

I don't know anything about jquery so yeah. I just want so that when you click the "image-url" divs they set the "src: component to the img tag and have the image appear upon clicking. Really appreciate the help.
the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CIS 230 Fall 2012</title>
<link rel="stylesheet" type="text/css" href="midterm.css" />
<script type="text/javascript" src="labs/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('div.image-url').click(function() {
$("#image").attr("src", $(this).attr("val"));
$("#image").attr("hidden", "false");
});
})();
function imageload(ls) {
document.getElementById("image").src = "../images/" + ls;
}
</script>
</head>
<body>
<div id="header"><div style="float:left; width:40%;"></div><div style="float:right;"></div><h1 class="title">CIS 230</h1>
</div>
<div id="content">
<div id="links">
<div id="link-holder">
<h3>Labs:</h3>
<div class="url">xhtml 1</div>
<div class="url" onmouseover="hover(this)" onmouseout="leave(this)">css lab 1</div>
<div class="url" onmouseover="hover(this)" onmouseout="leave(this)">css lab 2</div>
<div class="url">css lab 3</div>
<div class="url">css lab 4</div>
<div class="url">author page</div>
<div class="url">dog fish</div>
<div class="url">rounded corners</div>
<div class="url">div columns</div>
<h3>Images:</h3>
<div id="image-link-holder">
<div class="image-url" val="me.jpg">Beautiful Me</div> //so they click this
<div class="image-url" val="monster.jpg">Godzilla</div>
<div class="image-url" val="bandw.jpg">Black and White</div>
<div class="image-url" val="duocolor.jpg">DuoColor</div>
<div class="image-url" val="washed.jpg">"Washed" Look</div>
<div class="image-url" val="fade.jpg">Faded</div>
</div>
</div>
<div id="image-holder" style="min-width:400px; background-color:#000000;" hidden="true">
<img id="image" src="" alt="No Image Specified" /> //and my mug shot will appear hopefully
</div>
<div id="links-spacer1" style="min-width:400px; min-height:300px"></div>
</div>
<div id="about">
<h1>Web Design and Development:</h1>
<h2>We cover a lot of things:</h2>
<p>We first review basic HTML and cover CSS styles</p>
<p>Labs made:
<ul>
<li>css lab 1</li>
<li>css lab 2</li>
<li>css lab 3</li>
<li>css lab 4</li>
</ul>
</p>
<p>Once we have the basics down we can cover some more advanced styling. Especially using the &amp<div></div>& tags
</p>
<p>Labs made:
<ul>
<li>sunny.html</li>
<li>dogfish</li>
<li>columns</li>
</ul>
</p>
<p>Then We move onto the graphical component of web design, where we mess around with photoshop</p>
<p>Labs made:
<ul>
<li>monster.jpg</li>
<li>duocolor.jpg</li>
<li>other stuff...</li>
</ul>
</p>
</div>
</div>
<div id="footer">
<p id="disclaimer">This webpage is the work of a student. It is not associated with the SUNY Onondaga Community College. The author of this web page is Jason Dancks, and generated with Dreamweaver. If you think this asshole might have stolen your intellectual property, email him or contact his professor or call him at: (315) 498- 2326</p>
</div>
</body>
</html>
$('.image-url').on('click', function() {...});
You should read up on jQuery selectors.
Edit
Your example already has a valid selector in it. Is it not working? Perhaps it cannot find your jQuery library?
You want to take the value of attribute "val" for the image you click, and replace the 'src' attribute of the img tag with class "image" with the value: here's how you do that.
$('.image-url').on('click', function(){
var img_url = $(this).attr('val');
$('#image').attr('src', '/images/' + img_url).parent().attribute('hidden', false);
});
Happy coding! :)

Categories