I have written a suitelet which has two parts - GET and POST.
In GET method I have a dropdown and a submit button.
In POST method, I have 5 text fields which display the data based on value fetched from dropdown in GET.
I want to call an iframe on submit button click. iframe will show POST method logic. In short, I don't want to navigate to new page on submit, but to make the whole thing work on a single page.
MY CODE
function init(request, response)
{
if(request.getMethod() == 'GET')
{
//... some code for dropdown and submit
//code for iframe
var context = nlapiGetContext();
var url = 'https://**url-of-post-method-results**.com';
var title = context.getSetting('SCRIPT', 'custscript_suitelet_title')
var content = '<iframe width=960px height=100% style="height:640px;" src=' + url + '></iframe>'
var newField = form.addField ('content', 'inlinehtml', title);
form.addField('extra', 'inlinehtml', '')
form.setTitle (title);
newField.setLayoutType('outsidebelow');
newField.setDefaultValue (content);
form.addSubmitButton('Submit');
response.writePage(form);
}
}
I referred to Marty Zigman's tutorial on embedding iframe. But I'. confused where to embed the iframe, in GET or POST?
To the best of my knowledge, NetSuite has no built in way via their API to avoid a page refresh in a case like this. Clicking the submit button, will by default, submit the form via a post method synchronously. You need to interrupt the click() event method via jQuery on NetSuite's default form submit button using client side code. You would then send the post yourself using jQuery, and on a response, show the information you would like, again via jQuery, by updating the iframe src url.
I apologize I do not have currently have access to an account to be able to give you the appropriate JavaScript. I would be cautious of breakage though since you will need to hack into the NetSuite UI a bit to make this work.
Related
I started learning MVC and i am stuck in this problem.
I have an Order Details page in which I have a button "Edit". When the user clicks on it, opens up a Bootstrap Modal, which i called from a Partial View.
Now Modal opens up and shows the data, loaded from database and saves the data to database.
Everything is working just fine.
I just want the user to go back to that Specific Detail Page from where He/She clicked "Edit" Button.
For example
Detail Page URL is
../orders/details/2
form saves at
..order_detail/edit/[id]
after form submit it should go back to
../orders/details/2
How can i achieve this?
Any help would be much appreciated
Instead of returning on your current View after executing post method you can redirect to the action you want, passing the id. For example:
public ActionResult Edit(int id) {
...
return RedirectToAction("YourDetailsActionHere", new { id = id});
}
And if your action is in different controller you have to pass the controller name as well
return RedirectToAction("YourDetailsActionHere", "YourOtherController", new { id = id});
I'm new to chrome extension development but I'm running into issues debugging and with the extension itself. I currently have a form with a submit button and after the user hits submit I change the html to show the data that was just submitted.
document.addEventListener('DOMContentLoaded', function() {
console.log("1");
document.getElementById("submitButton").addEventListener('click', myFunction);
console.log("2");
//getCurrentTabUrl(function(url) {
// renderStatus(url);
//});
});
function myFunction() {
document.getElementById("formOutput").innerHTML = document.getElementById("formInput").value;
alert("hi");
console.log("test");
);
}
In this, 1 and 2 are displayed to the extension debugging console and the alert runs as well when the button is clicked. The test shows up very briefly and then it disappears.The formoutput value changes very briefly as well and then changes back to the default value I have. Does anyone know why my code/the chrome extension would be doing this?
Thanks!
When button with type submit (This is the default if the attribute is not specified) is clicked, the form data will be sent to server and page will be redirected to new page. Then your content script will be injected again, that's why the it changes back to default value.
To avoid this, you could change button with other types, or calling e.preventDefault to prevent default behavior. Then you would want to use Ajax to send data to server, which ensure the whole page won't be redirected and only parts of UI can be updated.
I have a page where i need to auto fill a form.But that page contains jquery slider, jquery dropdown. The submit button contains validation of the form.
But i can't access the page's jquery object.
Also i tried to execute jquery and jquery ui through manifest file.but it wont change real jquery object of a page.
(Chrome exetention javascript is executing in seperate context)
Is it possible to trigger click at perticular position (eg: X : 20px, Y : 50px) of document in chrome extention.
Instead of triggering a click event, I believe it better suits your purpose to access the jQuery object directly.
As you correctly mentioned, content scripts are executed in a sandboxed environment.
Still, you can access the web-pages JS context through the shared DOM. All you need to do is add a script node including the necessary code, e.g.:
var script = document.createElement("script");
script.type = "text/javascript";
script.textContent =
"// Accessing the web-page's JS contex\n" +
"$(\"#myElem\").doSomething();";
document.body.appendChild(script);
script.parentNode.removeChild(script);
There is, also, this very detailed answer, describing the various JS injection methods (including bonus tips and tricks).
I have a CJuiDialog and below is the code
<?php $this->beginWidget('zii.widgets.jui.CJuiDialog', array(
'id'=>'mymodal',
'options'=>array(
'title'=>'Your 10 seconds take you into ....',
'width'=>700,
'height'=>400,
'autoOpen'=>true,
'resizable'=>false,
'modal'=>true,
'closeOnEscape' => false,
),
)); ?>
In this dialog I have form and in the form I have below submit button
<?php echo CHtml::submitButton('Submit', array('onclick'=>'js:function(){ alert("test"); $(#mymodal).dialog("close");}',
)); ?>
on clicking on this button, I want to close this dialog and submit the form . But the above code what I wrote in Button is not working . any syntax errors ?
Other way I tried is , I used buttons in the dialog box and able to close the dialog using
`js:function(){$(this).dialog("close")`
But I am not able to submit the form there . So took the first approach .
Could any one help me the correct solution ?
Thanks and Regards
Kiran
First of all you have to understand/remember that by default a html submit button navigates to or loads the action url of the form. So, provided your action url is correctly specified, the default button will simply submit the form and navigate to that url.
If this happens and the action url and the current page url are not the same, you'll not be seeing the dialog box again anyway(due to the navigation).
But incase your action url and current url are the same*, then obviously after default submission the same url will be loaded again, and since your dialog is 'autoOpen'=>true, it will open again.
So the best course of action i can see for you is using jquery's ajax to submit your form. This can be done in 3 ways:
Use ajaxSubmitButton() directly in the form:
echo CHtml::ajaxSubmitButton('SubmitThis',
$url, // form's action url, you can use createUrl
array( // ajaxOptions, use success to close the dialog
'success'=>'function(){$("#mymodal").dialog("close");}'
)
);
Use a button of the dialog to submit the form. The sample below uses $.post() shorthand to post an ajax request, and .serialize() to serialize the form data:
// other cjuidialog options
// ...
'buttons'=>array(
'Submit'=>'js:function(){
$.post(
$("#form-id").attr("action"), // the url to submit to
$("#form-id").serialize(), // the data is serialized
function(){$("#mymodal").dialog("close");} // in the success the dialog is closed
);
}',
// other buttons
)
You can also use the normal submit button but you'll have to use ajax again:
'onclick'=>'$.post(
$("#form-id").attr("action"), // the url to submit to
$("#form-id").serialize(), // the data is serialized
function(){$("#mymodal").dialog("close");}
);
return false; // to prevent the navigation to the action url
'
[*] if you are using CActiveForm and haven't specified the 'action' this happens by default
Firstly, don't put js: in your onclick value. The right prefix is javascript: and it is unneeded in on* whose values are always scripts, by default in Javascript.
Secondly, you defined an anonymous JS function that is never called.
Then learn to use a JS console to see the errors, and a JS debugger to run your code step by step. In Firefox, you can use the firebug extension. In Chrome or Opera, press Ctrl-Shift-I to open the developer block that contains the JS tools. Then it will be easy to fix your JS code that is currently:
function(){
alert("test");
$(#mymodal).dialog("close");
}
See the errors? There should be no function as noted above, and you forgot to quote a text.
I'm a Java programmer, but not a JavaScript programmer. I have just discovered YUI, and am trying to get started using it. What I'd like to try and do is have the query form at the top of the page, the user press Submit and the results show up in a YUI DataTable below the query form.
Normally, of course, on a HTML form the user presses Submit, the request gets sent to the server, and I use Struts to process it and then forward the request to a JSP and HTML gets sent back to the browser. That's what I do on a daily basis. With Ajax, I understand it's different in that I should return XML instead. Not a problem. Easy to do.
The questions I have deal with the YUI side of things. When the Submit button is pressed, what happens? Not normal form submission, right? Do I implement an onSubmit() JavaScript function which then triggers some YUI DataSource to go fetch the data? How do the request params get passed? Hopefully I don't have to construct the request manually. I'm guessing that I use a YAHOO.util.XHRDataSource and that's the DataSource for the DataTable.
I've managed to get the YUI DataTable to work using an HTML table element. Now I just need to switch it over to real data. Curiously, the YUI documentation seems a bit weak here, unless I'm missing something. Maybe this is just basic Ajax that the YUI docs don't cover?
First of all, when working with Ajax you don't need to return XML from the server, you could return plain text, XML, JSON strings, literally any form of textual data that you want. One example of populating a Datatable with JSON data is provided here:
http://developer.yahoo.com/yui/examples/datatable/dt_xhrjson.html
An example of how to send a post request using Ajax and YUI is provided here.
http://developer.yahoo.com/yui/examples/connection/post.html
That should get you started, now just link both of them together.
To connect to the server you can use the Yahoo.util.Connect.asyncRequest method which takes in the following parameters:
static object asyncRequest ( method , uri , callback , postData );
See an example here, this one uses "GET" so you can use either "GET" or "POST" just make sure you pass in your parameters
http://developer.yahoo.com/yui/examples/json/json_connect.html
Once your function returns on your "onSuccess" do the following to parse the response text to JSON
try {
jsonData = YAHOO.lang.JSON.parse(o.responseText);
}
catch (x) {
alert("JSON Parse failed!");
return;
}
The "jsonData" object now contains your data, so now you can follow this example:
http://developer.yahoo.com/yui/examples/datatable/dt_basic.html
It shows you how to initialize a datatable with a local object holding the datasource. basically it would be something like this
var myColumnDefs = [
{key:"Column1Data", label:"Column1 Header" sortable:true, resizeable:true},
{key:"Column2Data", label:"Column2 Header" sortable:true, resizeable:true}
];
var myDataSource = new YAHOO.util.DataSource(jsonData);
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
myDataSource.responseSchema = {
fields: ["Column1Data","Column2Data"]
};
var myDataTable = new YAHOO.widget.DataTable("basic",
myColumnDefs, myDataSource, {caption:"DataTable Caption"});
For this to work, you have to have a "div" container in the HTML code with an id of "basic" note this matches the first parameter on the DataTable
Hope this helps