Consider the code given at the end, which makes use of jQuery Mobile to enhance buttons.
The first button (original button) appears when page loads:
The second button (inserted button) is inserted by clicking the yellow box:
The problem here is, the inserted button cannot catch up the CSS styles. This scenario is very common (and not specific to jQuery Mobile) when we work with AJAX, but I have never able to find a solution or workaround for this problem.
What can I do to enhance the inserted button with CSS styles?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script type="text/javascript">
function insert(){
$("#result").html('<input type="button" value="Inserted button"/>');
}
</script>
</head>
<body>
<form>
<p class="ui-body-e ui-corner-all" style="padding:5px" onclick="insert()">Click here to insert the button</p>
<input type="button" value="Original button" />
<div id="result">
Button not inserted yet
</div>
</form>
</body>
</html>
After you insert the button's html:
$("#result").html('<input type="button" value="Inserted button"/>');
You can call .trigger('create') on its container to invoke the jQuery-mobile renderer on its contents, so your line would look like this:
$("#result").html('<input type="button" value="Inserted button"/>').trigger('create');
jQuery mobile adds extra elements/classes to your objects. This happens onpage load.
When you insert extra buttons or other objects (list,...) the style needs to be applied again.
in this case you use after you inserted the button $(_selector_for_new_button_).button();
jQuery mobile applies the nice button style for you.
Related
I'm creating an extremely basic script to assist me in one of my google spreadsheets.
I've successfully got a sidebar showing, with a few buttons (which function). However, whenever I click on one of those buttons, it also opens up a new tab, with a URL something like: "https://n-lx3mdv5ls3mdgglsq226llilxd2m4owxy72y3fy-1lu-script.googleusercontent.com/userCodeAppPanel?"
Even if the button is left without any functionality, this still occurs.
Here's an example of the html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<!-- The CSS package above applies Google styling to buttons and other elements. -->
<style>
</style>
</head>
<body>
<div class="sidebar">
<form>
<div class="block" id="buttons">
<button id="unindent">Unindent</button>
<button id="indent">Indent</button>
<button id="asdgdgasg">Test</button>
</div>
</form>
</div>
</body>
</html>
How can I stop this new tab from opening every time?
Issue:
<button> type, if not specified defaults to type=submit. So, The form automatically submits the data to the server. This is not preferable in a iframe.
Solution:
Explicitly specify button type as button. <button type='button'>
Use event.preventDefault() to prevent automatic form submission.
References:
Button#Default
Sample Form
When I saw your issue, I thought that this is due to <form>. So I proposed the following modifications.
Modify <form> to <form onsubmit="event.preventDefault()">.
Modify <base target="_top"> to <base target="_self">.
Remove <base target="_top">.
Note:
I think that #TheMaster's answer is more useful information.
References:
Event.preventDefault()
The Document Base URL element
I try to show the datepicker popup (input type="date") immediately after the HTML content has loaded. But in my example below, I get only the alert-message. Clicking the ok-button afterwards shows the alert-message and the datepicker. Is this a timing problem? How can I solve this?
Could only test this with Chrome on Android so far. Finally I want to use this with the Android-App Tasker. There you can show scenes (Dialogs) with HTML content. I would prefer a solution without libraries like jquery.
<!DOCTYPE html>
<html>
<body onload="clickPicker()">
<p>Select date:</p>
<input type="date" id="picker">
<button id="ok" onclick="clickPicker()">OK</button>
<script>
function clickPicker()
{
alert("clickPicker");
document.getElementById("picker").click();
}
</script>
</body>
</html>
i am planing to make my text box editable...
so i removed the id from the disabled code...
even i tested in fiddle its not working...
providing my cod below....
i am providing part of my code in fiddle i am not able to see the text box...
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>
You have to use input instead of form:input, browser can render standard html tags and you have to provide standard html.
Live Demo
Change
<input id="behvrName" type="text" cssClass="icwText" path="" />
To
<input id="behvrName" type="text" cssClass="icwText" path="" />
cssClass and are also not standard attributes and you need to change them if you want them to be interpreted and act accordingly by browser. cssClass would be class.
spring:message and form:input are not plain HTML tags; rather, they are pseudo-tags processed by your server-side framework. If you want to use JSFiddle, you must use plain HTML.
Furthermore, your input's id is behvrName, but you're not selecting that. If you want to disable that input, use an appropriate selector $('#behvrName') in the JavaScript portion.
So what i want to do is when i click on a button, it will pass this click event to another element in webpage, or you can say it will create a new click event in another element. Below is my code, it does not work, please let me know what is wrong with it, it looks make sense...
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" onClick=alert("error") /></p>
<button type="button" value="submit" onClick="document.getElementById("datepicker").click()">submit </button>
</body>
</html>
Since you are using jQuery you can use this onClick handler which calls click:
$("#datepicker").click()
This is the same as $("#datepicker").trigger("click").
For a jQuery-free version check out this answer on SO.
The smallest change to fix this would be to change
onClick="document.getElementById("datepicker").click()">
to
onClick="$('#datepicker').click()">
click() is a jQuery method. Also, you had a collision between the double-quotes used for the HTML element attribute and those use for the JavaScript function argument.
To simulate an event, you could to use trigger JQuery functionnality.
$('#foo').on('click', function() {
alert($(this).text());
});
$('#foo').trigger('click');
The reason your code isn't working the way you would expect is because this line:
<button type="button" value="submit" onClick="document.getElementById("datepicker").click()">submit </button>
should be changed to:
<button type="button" value="submit" onClick="document.getElementById('datepicker').focus()">submit </button>
There are two things to notice here:
1: The "s around datepicker have been changed to 's so that they do not interfere with the quotes surrounding the onclick event.
2: The click() has been changed to focus() to activate the datepicker calendar. When the button is pressed.
Now, this fixes your issue...but I do agree with the other posts that using jQuery to access the DOM element and trigger the event is the better way to go. Since you're already doing this for the jQuery datapicker plugin via <script src="http://code.jquery.com/jquery-1.8.3.js"></script>, this should not be a problem.
Inline events are not recommended.
Or you can use what JQuery alreay made for you:
http://jqueryui.com/datepicker/#icon-trigger
It's what you are trying to achieve isn't it?
try this
document.getElementById("datapicker").addEventListener("submit", function())
Use this
jQuery("input.second").trigger("click");
I am using phonegap like this in my application, also note the app is being styled by jquery mobile,
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="phonegap-1.3.0.js"></script>
I have this html,
<div id="sync" data-role="page">
<div data-role="header" data-position="inline">
<a data-rel="back" data-icon="back">Back</a>
<h1>Sync</h1>
</div>
<div data-role="content">
<button onclick="sync()">Sync</a></button>
</div>
</div>
I have compiled this for Android and have it working on my Android phone.
But the button there called 'sync' is not always responsive. I click the button and the sync() method doesn't get called every time. I find myself clicking the button a number of times. I can see the button moving when I click it, it is responding by drawing itself being pushed in, but the sync method is not being called.
The sync method starts like this,
function sync()
{
alert("syncing");
$.mobile.loadingMessage = "syncing";
$.mobile.showPageLoadingMsg();
I put the alert in for debugging purposes.
UPDATE:
It has been pointed out that my HTML has an extra tag in it. I have removed it as below but the problem still exists,
<div data-role="content">
<button onclick="sync()">Sync</button>
</div>
I had a similar problem in my application. I tried two different things but I'm not sure wich fixed it.
I added charset="utf-8" in my script tag.
I moved the button click function in to its own script tag. I think there's an error in the other JavaScript block that is preventing the button click function from working when it's in that script block. So you can try isolating the button click JavaScript and see if that helps.
Joke answer: did you push the button hard enough?
Possibly the problem answer:
<button onclick="sync()">Sync</a></button>
^^^^---dangling tag
Is that </a> possibly the cause of the button breaking?