I'm new to Dojo and have a problem with my onChange() event, it runs when the page loads and not when the value in the Select box is changed. Here's my code, its all in the body section section of the page. Thanks for your help.
<div id="supportCentersListBox" data-dojo-type="dijit.form.Select"></div>
<script type="text/javascript">
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dijit.form.Select");
function populateSupportCenters() {
var supportCenters = new dijit.form.Select({
maxHeight:"300",
id: "supportCenters",
onChange: changeTest(),
store: new dojo.data.ItemFileReadStore( { url: "some url address here" })
}, 'supportCentersListBox');
}
function changeTest() {
alert("Changed");
}
populateSupportCenters();
</script>
Fix your code so that the onChange is not a function call but instead a function pointer/reference
You have this 'problem':
<div id="supportCentersListBox" data-dojo-type="dijit.form.Select"> DOM renders (data-dojo-type is for parseOnLoad (dojo.parser) only, dont need it since youre creating it yourself
you instantiate a store
you instantiate a Select and render in supportCentersListBox - with store set, that fetches the url
fetch completes and Select is filled in
the item which has attribute selected:true or the first in index is set as value
onChange fires
Related
I have two components, one is parent component and another one is child component which is a modal popup.
Parent component
<parent-component>
<!-- this is a modal popup -->
<child-component v-bind:message="childMessage"></child-component>
Open model
</parent-component>
<script>
export default {
data: function() {
return {
childMessage:{}
}
},
methods:{
openModal: function(id){
axios.get('api/message/'+id)
.then(response => {
this.childMessage = response.data;
})
.catch(error => {
console.log(error);
})
this.showModal = true
}
}
}
</script>
Child component
<!-- this is a popup modal -->
<child-component>
<h1>{{ message.title }}</h1>
</child-component>
<script>
export default {
props:{
message: {},
}
</script>
In parent component, I trigger the modal and request ajax at the same time.
And I can pass the ajax data to child component correctly.
But if I open the console, there is an error
Cannot read property 'title' of undefined
(Although I can see the data is working fine and it's already in html page)
It seems the appending data {{ childMessage.title }} run first (before the ajax request).
1 - How can I append the data correctly, probably after the ajax request.
2 - Do I need to check the condition for undefined value?
I don't see where you use showModal but I suppose it's a sort of switch to display or not the child-component. If it's the case the error can come from the fact that you set showModal to true just after the call to the API. But this call is asynchronous you should probably move this.showModal = true in the success callback under this.childMessage = response.data;.
If you do that the message prop will be initialize at the moment the child component is rendered.
Also pay attention to your prop type, as #ittus mention message seems to be a String according to the default value in the child-component but you use it like an object in the template.
In this case, you have to check the condition for undefined value because child component is being rendered before the message API call ends. You can do it in this way,
<child-component>
<h1 v-if = "message">{{ message.title }}</h1>
</child-component>
I have an embedded Marketo form I am using on my site.
When I click submit I want the form to reset to its original state.
What do I need to add to my code for this, and better yet where can I find this in the Marketo documentation?
Here's my current code
<script src="//app-sjg.marketo.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm"></form>
<script>
MktoForms2.loadForm("//app-sjg.marketo.com", "819-OWT-537", 1404);
</script>
<script>
MktoForms2.whenReady(function (form){
form.onSuccess(function(values, followUpUrl){
$('#confirmform').modal('show');
return false;
});
});
</script>
The Marketo Form object does not have the reset functionality, but luckily enough, javascript has such a native .reset() method on the HTML form elements. This .reset() method will restore a form element’s default values.
Having said that, the only thing to do within the .onSuccess() callback is to grab the HTML form. Calling the .getFormElem() method of the Marketo Form object, will give us the jQuery wrapped form element, so with form.getFormElem()[0] finally we get the form node, on which we can call .reset().
Here is the sample code:
<script src="//app-lon06.marketo.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm"></form>
<script>
// The fourth argument of the `.loadForm()` can be used as an onReady callback.
MktoForms2.loadForm("//app-sjg.marketo.com", "819-OWT-537", 1404, function(form) {
form.onSuccess(function(values, followUpUrl){
// $('#confirmform').modal('show');
console.log(form);
// .getFormElem() returns the jQuery wrapped form element
var formElement = form.getFormElem()[0];
// .reset() is a native javascript method.
formElement.reset();
// If boolean `false` is returned then the visitor
// will NOT be forwarded to the follow up page!
return false;
});
});
</script>
Note: the good thing is, that all the important hidden fields (e.g.: formid and munchkinId) will remain intact.
I am using the Onsen framework with jQuery and jQuery mobile, it appears that there is no way to catch the event that fires once the new page is loaded.
My current code, which executes in the index.html file (the master page)
<script src="scripts/jQuery.js"></script>
<script src="scripts/jquery.mobile.custom.min.js"></script>
<script src="scripts/app.js"></script>
<script>
ons.bootstrap();
ons.ready(function() {
$(document.body).on('pageinit', '#recentPage', function() {
initRecentPage();
});
});
in app.js is the following code
function initRecentPage() {
$("#yourReports").on("tap", ".showReport", recentShowReport);
var content = document.getElementById("yourReports");
ons.compile(content);
}
and the HTML:
<ons-page id="recentPage">
<ons-toolbar id="myToolbar">
<div id="toolBarTitle" class="center">Recent Checks</div>
<div class="right">
<ons-toolbar-button ng-click="mySlidingMenu.toggleMenu()">
<ons-icon icon="bars"></ons-icon>
</ons-toolbar-button>
</div>
</ons-toolbar>
<ons-scroller>
<h3 class="headingTitle"> Checks</h3>
<div id="Free" class="tabArea">
<ons-list id="yourReports">
</ons-list>
<ons-button id="clearFreeRecentButton">
<span id="clearRecentText" class="bold">Clear Recent Checks</span>
</ons-button>
</div>
</ons-scroller>
</ons-page>
in this instance the variable 'content' is always null. I've debuged significantly, and the element I am trying to get is not present when this event fires. It is loaded later.
So, the question is, how do I ensure that all of the content is present before using a selector. It feels like this is an onsen specific issue.
In the end I could only find one reliable way of making this work.
Essentially I had to wait, using setTimeout 300 milliseconds for the DOM elements to be ready. It feels like a hack, but honestly there is no other reliable way of making this behave. The app is in the app store and works well, so even though it seems like a hack, it works:
$(document).on('pageinit', '#homePage', function() {
initHomePage();
});
function initHomePage() {
setTimeout(function() {
setUpHomePage();
}, 300);
}
Move your $(document.body).on('pageinit', '#recentPage', function() { outside of ons.ready block.
JS
ons.bootstrap();
ons.ready(function() {
console.log("ready");
});
$(document.body).on('pageinit', '#recentPage', function() {
initRecentPage();
});
function initRecentPage() {
//$("#yourReports").on("tap", ".showReport", recentShowReport);
var content = document.getElementById("yourReports");
alert(content)
ons.compile(content);
}
I commented out a line because I do not have access to that "recentShowReport"
You can see how it works here: 'http://codepen.io/vnguyen972/pen/xCqDe'
The alert will show that 'content' is not NULL.
Hope this helps.
I have a GUI with various fields in which user can enter data.
I have a button.
I want to pass values entered by user on the GUI, and on the button click, I want to pass those values to another page where i can use them.
Note: No form/No onSubmit/No form action, it is just a page redirect to another page using a button.
Based on some markup:
<div id="x">Some data</div>
<div id="y">Some more data</div>
jQuery script to retrieve the data you want:
$("my button/link/whatever").click(function(e) {
e.preventDefault();
var data = {
x: $("#x").text(),
y: $("#y").text()
};
var req = $.ajax({
url: "the page to send data to",
type: "post",
data: data
});
req.done(function(response) {
// Do something here once the request is complete
});
});
Or use a second form.
I have a popup (which I used by necessity) that is opened on a link click. I have the user going through a series of pages picking attributes to then be sent to a shopping cart.
My problem: After the user reaches the end of the selection process i want to kill the open popup and send the request back to the original browser (parent) so the user can checkout.
Any idea how I would do this?
Javascript: in the child (popup) window.
window.opener.location = 'page.html";
window.close();
Is that what your looking for?
The parent window can be accessed using "opener" in JavaScript.
Example:
window.opener.title='hello parent window';
or
window.opener.location.href='http://redirect.address';
Script in my child form:
<script language="JavaScript" type="text/javascript">
function SetData() {
// form validation
// var frmvalidator = new Validator("myForm");
// frmvalidator.addValidation("name","req","Please enter Account Name");
// get the new dialog values
var str1 = document.getElementById("name").value;
var winArgs = str1;
// pass the values back as arguments
window.returnValue = winArgs;
window.close();
document.myForm.submit();
}
</script>
Script in my parent form:
<% #account_head= current_company.account_heads.find_by_name("Sundry Debtors")%>
<script type="text/javascript">
function OpenDialog() {
var winSettings = 'center:yes;resizable:no;help:yes;status:no;dialogWidth:450px;dialogHeight:200px';
// return the dialog control values after passing them as a parameter
winArgs = window.showModalDialog('<%= "/accounts/new?account_head_id=#{#account_head.id} #man" %>', winSettings);
if(winArgs == null) {
window.alert("no data returned!");
} else {
// set the values from what's returned
document.getElementById("to_account_auto_complete").value = winArgs;
}
}
</script>
This is work but not as i want, any one if found good solution please suggest.