Develop Reference

Google MDL Menu clears when focus selects control

The following is an example of a drop down menu implemented in Google MDL Javascript and HTML
<div class="mdl-textfield mdl-js-textfield getmdl-select" id="extractModeReferral">
<input type="text" value="" class="mdl-textfield__input" id="extractModetextReferral" readonly style="width:250px;">
<input type="hidden" value="" name="extractModeReferralhidden">
<label for="extractModeReferraldd" class="mdl-textfield__label">Extract Mode</label>
<ul for="extractModeReferraldd" class="mdl-menu mdl-menu--bottom-left mdl-js-menu" id="extractModeReferralUL">
<li class="mdl-menu__item" data-val="PrintOnArrival" data-selector=true>Print On Arrival</li>
<li class="mdl-menu__item" data-val="PrintOnAcceptance" data-selector=true>Print On Acceptance</li>
<li class="mdl-menu__item" data-val="DoNotPrint">Do Not Print</li>
</ul>
</div>
And here is the javascript which populates that drop down
$('#extractModetextReferral').val(data.ReferralExtractMode).parent().addClass("is-dirty"); // referral
.
.
.
getmdlSelect.init('#extractModeReferral');
.
.
.
componentHandler.upgradeDom();
When it is originally set it is populated as expected, the text field contains the expected text, the drop down has the expected options.
However as soon as you click on the control or any other control on the page the contents of the text field vanishes.
If you select an option from the menu, the text field components is populated. There are 5 of these pulldowns but I have only included the one for clarity
Sure I am doing something daft but anyone got an idea what?

Chrome-Extension: Find and click on element on active tab with javascript

So I'm trying to make a chrome extension for a forum and right now I'm stuck at the necessary confirm after pressing the delete-button.
I want to press the confirm-button but as far as I understand I have to find it first - for this I have the content-script. But now I dont know how to find the right element, I just dont know how to identify the button.
This is the Code on the Webpage:
<td class="confirmButtons">
<form action="modcp.php" method="post">
<input class="formAction" type="hidden" name="" value="">
<ul>
<li class="button"><strong>Ja</strong></li>
</ul>
<ul class="buttonGroup">
<li class="first"></li>
<li class="button"><strong>Nein</strong></li><a href="javascript:void(0);" class="formAction" rel="cancel" tabindex="2">
<li class="last"></li>
</a></ul><a href="javascript:void(0);" class="formAction" rel="cancel" tabindex="2">
</a></form></td>
The Code I have in the content_script so far:
function clickJa() {
var confirmButtoon = document.getElementsByClass("form-action");
confirmButton.click();
}
clickJa();
I know this doesnt work but I dont know what do do...
Thanks for every piece of help,
greetings =)

Changing some html elements, and changing url without reloading page

I have a site that has a long form. There are some other parts to the site that need to change without resetting that form. I was planning on using an iframe to load the other parts of the page.
A sidebar on the page works as navigation. I would like the links in the sidebar to change the urls that the iframes point to, and change the actual url bar. But not reset/reload any of the other iframes.
Thanks
P.S: I am a complete newbie at JavaScript so full examples would help.
here is some of my code:
<div class="sidebar">
<input type="text" placeholder="search for accounts" id="search" />
<ul id=sidebar-list>
<li class=list>
<a onclick="edit-iframe-1" id="username">This will change iframe 1 to point to a user</a>
<a onclick="edit-iframe-2" id="username">This will change iframe 2 to point to a user</a>
</li>
<li class=list>
<a onclick="edit-iframe-1" id="username">This will change iframe 1 to have a different user</a>
<a onclick="edit-iframe-2" id="username">This will change iframe 2 to have a different user</a>
</li>
</ul>
</div>
<div id=iframediv1>
<iframe id=iframe1 src="/path/file?user=username"></iframe>
</div>
<div id=iframediv2>
<iframe id=iframe2 src="/path/differentfile?user=username"></iframe>
</div>
The idea is that the list in the sidebar has all the different usernames, and whichever username you click on, it will load the corresponding page. The only part of the url that needs to change is the part after ?user=

Here is a simple solution that uses jQuery to pull the href from the clicked link and insert it into the target iframe's src attribute.
<div class="sidebar">
<input type="text" placeholder="search for accounts" id="search" />
<ul id="sidebar-list">
<li class="list">
Mike - Frame 1
Mike - Frame 2
</li>
<li class=list>
Joe - Frame 1
Joe - Frame 2
</li>
</ul>
</div>
<div id=iframediv1>
<iframe id=iframe1 src="/path/file?user=username"></iframe>
</div>
<div id=iframediv2>
<iframe id=iframe2 src="/path/differentfile?user=username"></iframe>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".sidebar a").click(function(event) {
event.preventDefault();
var targetID = $(this).attr("data-target");
$("#" + targetID).attr("src", $(this).attr("href"));
});
});
</script>

You might try playing around with history.pushState. Unfortunately browser support is going to be limited to newer versions.
This answer should give you an idea what you're up against: Modify the URL without reloading the page

I think you should use javascript for your purpose. I think this could be a solution.
<SCRIPT LANGUAGE="JavaScript">
function newLocation1(nwloc){
document.getElementById('iframe1').src = "/path/file?user="+nwloc;
}
function newLocation2(nwloc){
document.getElementById('iframe2').src = "/path/differentfile?user="+nwloc;
}
</script>
<div class="sidebar">
<input type="text" placeholder="search for accounts" id="search" />
<ul id=sidebar-list>
<li class=list>
<a onclick="javascript:newLocation1('username1')" >This will change iframe 1 to point to a user</a>
<a onclick="javascript:newLocation2('username1')" >This will change iframe 2 to point to a user</a>
</li>
<li class=list>
<a onclick="javascript:newLocation1('username2')" >This will change iframe 1 to have a different user</a>
<a onclick="javascript:newLocation2('username2')" >This will change iframe 2 to have a different user</a>
</li>
</ul>
</div>
<div id=iframediv1>
<iframe id="iframe1" src="/path/file?user=username1"></iframe>
</div>
<div id=iframediv2>
<iframe id="iframe2" src="/path/differentfile?user=username1"></iframe>
</div>

Open external HTML snippet as popup in jquery mobile

ok I am a bit rusty with jquery and new to jquery mobile so go easy on me ;). Ok I am creating a mobile website with jquery mobile and it has a lot of pages so rather than keep all the pages in one large multi-page template I have them in seperate page templates. I have a menu button that when clicked a popup appears with a listview menu in it, this works but I have to put the menu in every page template but I would rather just keep the menu in its own html file or even just somewhere in the dom that is outside the jquery mobile page structure so that I dont have to repeat the code in each page template.
How to I load the menu into the popup when its located in its own file? Failing that how do I load a div into that popup that is not inside a jquery mobile page?
My button:
Menu
my listview menu html:
<div data-role="popup" id="main-menu">
<ul data-role="listview" data-divider-theme="b" data-inset="true">
<li data-role="list-divider" role="heading">
Menu
</li>
<li data-theme="c">
<a href="#how-it-works" data-transition="slide">
How it Works
</a>
</li>
<li data-theme="c">
<a href="http://www.backuptoweb.co.uk/buy-now/levels.html" data-transition="slide">
Order Now
</a>
</li>
<li data-theme="c">
<a href="#faq" data-transition="slide">
FAQ
</a>
</li>
<li data-theme="c">
<a href="#help" data-transition="slide">
Help
</a>
</li>
<li data-theme="c">
<a href="http://www.backuptoweb.co.uk/support.html" data-transition="slide">
Support
</a>
</li>
<li data-theme="c">
<a href="http://www.backuptoweb.co.uk/" data-transition="slide">
Main Website
</a>
</li>
</ul>
</div>

In a general sense, here is how you can load html from an external file into a div, beyon that, I am not quite certain what you are trying to do exactly:
$('#myDiv').load('somepath/somefile.html');

I have the exact same problematic, I have written something that displays the popup but partially renders the CSS [edit] a few more tries and I was able to make it render CSS perfectly:
$('[data-role=page]').live('pageshow', function (event, ui) {
$('#'+event.target.id).find('[id=main-menu]').load('menu.html', function(){
$('#'+event.target.id).find('[id=main-menu]').trigger('create');
});
});
Btw your main html page should contain the div declaration:
<div data-role="popup" id="main-menu"></div>
Menu
And your menu.html should contain only what's inside the div:
<ul data-role="listview" data-divider-theme="b" data-inset="true">
<!-- .... listview content ... -->
</ul>

javascript only works once when needed twice on page

I'm using a piece of JS twice for two, different yet the same, events.
To make it more simple, let's say I've got:
<script type="text/javascript">
$(function(){
$(".iframe").load(function(){
$(this).contents().find("form").delegate(".clickThisCheckBox","click",function(){
alert(this)
})
})
})
</script>
<div class="tabs">
<ul class="tabs-nav">
<li>Products</li>
<li>Accessories</li>
</ul>
</div>
<div class="content">
<div id="products">
<iframe class="iframe">
<form action="?" method="post">
<input type="checkbox" name="checkBox1" class="clickThisCheckBox" />
</form>
</iframe>
</div>
<div id="accessories">
<iframe class="iframe">
<form action="?" method="post">
<input type="checkbox" name="checkBox2" class="clickThisCheckBox" />
</form>
</iframe>
</div>
</div>
This a more simplified version than what I've got, but exactly the same concept.
So when the page loads, you click the checkbox in the open tab, and you'll successfully get the alert box with the object. When you click the next tab and try to click the checkbox, nothing happens.
There is no AJAX or separate loading going on. Everything gets rendered on the initial page load. Both iframes are loaded at the same time and you access a different once by switching to a different tab.
Does the JS need to be in a function and ran each time a tab is clicked? Can't seem to wrap my finger around this one.
Update: Narrowed it down to it absolutely being that the JS only get's run once, so only the first iFrame in the first tab gets all the correct variables and events bound to the elements.
Update: Seemed to have figured it out. While continuing to use iFrames, I had to throw all of my JS into a function and run it on $(".iframe").load() and whenever a new tab is click, for example, $(".nav-cont li a").bind("click",function(){ //run the javascript })

If you want to bind load event to two identical iframes:
$("div.contents").delegate(".iframe", "load", function(){
alert('one of the iframes loaded');
});
One handler function handles "load "event for both iframes.
P.S. UPDATE
You can't use iframes the way you explain in comments. Simply use divs instead and set overflow:hidden; If the intent is to limit the display size of that specific area with data - set this in css file:
.form_container{width:500px;heigth:500px;overflow:hidden;}
Your html then will be:
<div class="tabs">
<ul class="tabs-nav">
<li>Products</li>
<li>Accessories</li>
</ul>
</div>
<div class="content">
<div id="products">
<div class="form_container">
<form action="?" method="post">
<input type="checkbox" name="checkBox1" class="clickThisCheckBox" />
</form>
</div>
</div>
<div id="accessories">
<div class="form_container">
<form action="?" method="post">
<input type="checkbox" name="checkBox2" class="clickThisCheckBox" />
</form>
</div>
</div>
And js will be:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('form').find(':checkbox').click(function(){
alert('something got clicked');
})
})
</script>

As far as I can see from the code you provided you are attaching load event handlers to elements that might have not yet been loaded at the time of attaching.
Did you try to wrap your code inside $(document).ready() to ensure that all the elements on the page are available for manipulation before you attach event handlers to them?