I read a lot about how to add stuff dynamically in jquery mobile, but I couldn't figure out how to add links.
Currently my solution looks like this:
Add a new Page - with id (id="list-1")
Creating a Link for it (href="#list-1")
This solution works perfectly in static pages, but I want to do it dynamically. I have tried a lot with page() and stuff like that but nothing helped me.
My questions are:
How do I add dynamic links & pages?
Did I choose the right way to use ids & anchors (#list-1) as links or is there another solution for jquery mobile?
Let me know if you need more information
To add dynamic links, I have found the easiest way is to just have an event listener waiting for a click on those links. This event listener then saves any parameters you want to pass into the next page you are visiting. You pass the parameters from the list element to the event listener by just specifying parameters within each "li" element.
(create the HTML for a list dynamically & store it into list-1-html)
$("div#my-page div[data-role=content]").html(list-1-html);
$("div.list-1 ul").listview();
$("div.list-1 ul").listview('refresh');
Then your event listener would look something like:
$('#my-page').delegate('li', 'click', function() {
passedParameter = $(this).get(0).getAttribute('passed-parameter');
});
When jQuery Mobile loads your next page, you'll probably want to load this page dynamically and you'll have this passedParameter variable available to you. To load the page dynamically, just add a listener that waits for JQM to try to load the page:
$('[data-role=page]').live('pageshow',function(e, ui){
page_name = e.target.id;
if (page_name == 'my-page-2'){
(do something with passedParameter)
}
});
This is the workflow I use with jQuery Mobile and it has been working just fine. I'm guessing in future releases, though, that they'll build in some kind of support for passing dynamic parameters to pages.
Any new enhancement to the DOM should be done before the page initializes. But by default JQM automatically initializes the page once the page is load in browser.
Hence first you need to set autoInitializePage property to false and then call initializePage() method after the new page and links are add to the document. Hope this helps.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
$(document).bind("mobileinit", function(){
$.mobile.autoInitializePage = false;
});
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
$(document).ready(function() {
//add a link.
$("#page1 div[data-role='content']").append('Next Page');
//add a page.
$('body').append(' <div data-role="page" id="page2" data-title="next page"><header data-role="header" class="header"> <h5>Page 2</h5></header><div data-role="content"><h3>Good Morning...</h3>Back</div><footer data-role="footer" data-position="fixed"><h5>© All rights reserved</h5></footer></div>');
});
window.onload = function() {
$.mobile.initializePage();
};
</script>
</head>
<body>
<div data-role="page" id="page1">
<header data-role="header" class="header">
<h5>jQuery Mobile</h5>
</header>
<div data-role="content">
<form method="get" action="" data-transition="slideup">
<label for="email">Email:</label>
<input type="email" name="email" id="email" value=""/>
</form>
</div>
<footer data-role="footer" data-position="fixed"><h5>© All rights reserved</h5></footer>
</div>
</body>
</html>
Related
I'm trying to do something as simple as changing the text in my <p> tag from "hello" to "goodbye: but I can't get it to work.
Here is my html
<body>
<div id="passwordBox">
<!-- <div id="title">
<span>PASSWORD GENERATOR</span>
</div> -->
<p id="password">Hello</p>
</div>
</body>
here is my js
document.getElementById('password').innerHTML = "goodbye";
My js is linked correctly in my head. Other functions that I had in there were working correctly. So I'm wondering what the issue is. I'm sure it's something simple that I am just not seeing but I can't figure it out.
HTML execution happens top-down. HTML calls each script it finds while parsing the HTML document. Since you placed your script in "head" the script gets called immediately. When the script is called, your DOM is not yet ready and your script accesses your DOM element returning a null. So load the script after your DOM is loaded completely ie., after body or just before ""
So the ideal code should look like:
<html>
<body>
<div>
<p id="password">Hello</p>
</div>
</body>
<script>
document.getElementByID("password").innerHTML="goodbye";
</script>
</html>
Or you can still load your script from the head, but just add a button along with event listener (onClick) which calls the JavaScript function when the button is clicked.
<!DOCTYPE html>
<html>
<head>
<script>
function changeContent() {
document.getElementById("demo").innerHTML="goodbye";
}
</script>
</head>
<body>
<p id="password">Hello</p>
<button onclick="changeContent()">Try it</button>
</body>
</html>
On our website we use a HubSpot registration form with custom styling that loads in a fancybox popup.
This is how it should look
Our problem is that we need to add an 'on click trigger' (see HTML and JS below) to load the dropdown with the right styling We want to form to work properly without the trigger. Without the click trigger it looks like below:
Also the dropdown isn't working when this form appears.
Our code looks like:
<div class="popup-mask">
<div class="popup sm" id="popup-gartner-get-in-touch">
<h4 class="section-title blue">Get in touch</h4>
<div class="download-form">
<div class="hubpop">
<div class="download-form">
<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
$('a[href="#popup-gartner-get-in-touch"]').click(function() {
hbspt.forms.create({
portalId: "538005",
formId: "190bdb23-c363-4d93-8189-9c7d28782017",
target:'.hubpop',
});
});
</script>
</div>
</div>
</div>
</div><!-- end popup -->
</div><!-- end popup-mask -->
My guess is that you are using some kind of jQuery plugin to style the dropdown. The problem is, your code for that is trying to style something that doesn't exist in the DOM until that trigger is clicked. What you should do is put that jQuery plugin code into the forms onReady function.
hbspt.forms.create({
portalId: '',
formId: '',
onFormReady: function($form) {
// YOUR CODE TO MODIFY THE SELECT DROPDOWN SHOULD GO HERE
console.log($form.find('select'));
}
});
If you're just looking to style the form selects without using a jQuery plugin, you can use this tool to get the css needed to do that.
Browser-sync has a feature called "Interaction sync" that allows you to "scroll, click, refresh and form actions are mirrored between browsers while you test.", however it doesn't seem to work for the onchange event.
While React component `onChange` event not being triggered when synced with BrowserSync refers to it not working for React, it doesn't even work in a simple html with js.
A number of the forms we use have conditionally dependent fields, and this prevents you from completing a form of this type. Is there a way around this?
I have included a simplified version of this form below. To test this out:
take a copy of the below snippet and save it as an html file
navigate to the directory containing the html
open a command prompt, navigate to the html file, and run
browser-sync start --server
browser-sync will launch a browser containing the default url (http:localhost:port), append "/test.html" to the url
copy the url to another browser
You'll see that while the selection of the dropdown mirrors, the event and associated javascript don't fire.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<style>
.hide{
display:none !important;
}
</style>
</head>
<body>
<form>
<h1>Conditional Form</h1>
<label>dependee</label>
<select name="radioGroup" id="radioGroup" onchange="displayDependent();">
<option value="-1">--</option>
<option value="radio1">radio1</option>
<option value="radio2">radio2</option>
</select>
<div id="text1Group" class="hide">
<label>text1</label>
<input type="text" name="text1">
</div>
<div id="text2Group" class="hide">
<label>text2</label>
<input type="text" name="text2">
</div>
<div id="text3Group">
<label>text3</label>
<input type="text" name="text3">
</div>
</form>
</body>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script>
function displayDependent() {
var dropDownSelect = document.getElementById('radioGroup').value;
// hide both
if (dropDownSelect == "-1") {
$("#text1Group").addClass("hide");
$("#text2Group").addClass("hide");
}
// show 1 hide 2
if (dropDownSelect == "radio1") {
$("#text1Group").removeClass("hide");
$("#text2Group").addClass("hide");
}
// show 2 hide 1
if (dropDownSelect == "radio2") {
$("#text2Group").removeClass("hide");
$("#text1Group").addClass("hide");
}
}
</script>
</html>
Doesn't look like it is available at this time.
Stumbled upon this github issue, shortly after:
https://github.com/BrowserSync/browser-sync/issues/22
I have a layout page that has one dropdown box. I created 3 views that will make use of this
layout. The value selected in the dropdown will be used in all 3 views created.
I have actionlinks used for navigation in the layout. Here is what I will like to achieve
Avoid reloading the entire page(layout) when I navigate from view to view since I want to keep
the dropdown value selected.
How can I achieve this such that it is only the content of the views that will be changing
when I navigate from page to page by clicking on the action links. The value of dropdown selected
must always remain the same unless changed by user
#model Company.Domain.Classes.Companyviewmodel
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title</title>
<link href="~/Content/Site.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
</head>
<body>
<div class="page">
#{
ViewBag.Title = "Project Status Maintenance";
}
<div id="MainContent1">
<div id="ProjID">
<label for="SelectProjID">Project:</label>
#Html.DropDownList("ddlprojects", Model.GetProjectInformationActive.ProjectsInfoSelectList, Model.GetProjectInformationActive.SelectedProject)
</div>
<ul>
<li class="pp1">#Html.ActionLink("Section1", "Index", "Home")</li>
<li class="pp2">#Html.ActionLink("Section2", "GetSection1Data", "Home")</li>
<li class="pp3">#Html.ActionLink("Section3", "GetSection2Data", "Home")</li>
</ul>
<hr class="divide" />
#RenderBody()
</div>
<footer>
<div class="ftrcontent">
<p>Got it !!</p>
</div>
</footer>
</div>
</body>
</html>
You can use ajax to do partial page loads. To start, give a css class to your links so that we can use those as our jQuery selectors when wiring up the ajax behavior.
#Html.ActionLink("Section1", "Index", "Home",null, new {#class="ajaxLink"})
#Html.ActionLink("Section2", "GetSection1Data", "Home", new {#class="ajaxLink"})
#Html.ActionLink("Section3", "GetSectionwData", "Home", new {#class="ajaxLink"})
Now you should have a container div in your page to which we will load the partial view content. May be your current view (index ?) , you can add a container view like this
<div id="pageContent"></div>
Now, let's listen to the click event on our links, get the content of the target page's via ajax and load to the container div. Assuming you have jQuery loaded to your page, we can use jQuery load() method.
$(function(){
//Load the first link's content on document ready
var firstLinkHref=$("a.ajaxLink").eq(0).attr("href");
$("#pageContent").load(firstLinkHref);
$("a.ajaxLink").click(function(e){
e.preventDefault();
$("#pageContent").load($(this).attr("href"));
});
});
Since we are loading partial page content to our placeholder div, we do not need to return the full markup(including layout) from your action methods, We just need to the partial view content. You may use the PartialView() method instead of View() method to achieve this.
public ActionResult GetSection1Data()
{
if(Request.IsAjaxRequest())
{
return PartialView();
}
return View();
}
I'm trying to use Google's Closure library for the HTML editor. I created a goog.editor.SeamlessField but if I enter a word that is too long for the width, it puts a scrollbar in and covers the text. How do I fix this?
This appears to be happening only in Firefox. Here is some HTML that demos the problem:
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src='/closure-library/closure/goog/base.js'></script>
<script>
goog.require('goog.dom');
goog.require('goog.editor.SeamlessField');
</script>
<script>
function init() {
var d = goog.dom.getElement('div1');
var f = new goog.editor.SeamlessField(d);
f.makeEditable();
}
</script>
</head>
<body>
<div style='width:150px;'>
<div id='div1'>
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
</div>
</div>
<button onclick='init();'>Create editor</button>
</body>
</html>
DOM fragments generated by this SeamlessField component differ for Chromium and Firefox. The former gets an classic div element, the later issues an iFrame. The scheme has something to do with how Firefox handles content-editable elements. By styling the iFrame, you should be able to avoid the scrollbar.