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.
Related
I have a custom module that contains a button. The button click performs a process that sometimes takes 5-10 seconds to complete. Is there a way in Kentico to display a custom busy message like the "Loading" message that Kentico displays during lengthy processes? I would like to show the same "Loading" msg that Kentico shows with my own custom message.
If your module is built using the out of the box page templates and webparts, this is included by default. If it is not and you're using custom aspx template pages, you'll need to ensure that the page in inherited properly and add that in. You might want to reference another out of the box module which is using code already like the Users in the Membership module.
Yes, but it depends on how things are set up.
If the button executes an Ajax Panel (it does a postback through an ajax call), then you can capture the ajax call and put your loading message there.
<script type="text/javascript>
var AjaxHandler = Sys.WebForms.PageRequestManager.getInstance();
AjaxHandler.add_beginRequest(beginRequestHandler);
AjaxHandler.add_endRequest(endRequestHandler);
function beginRequestHandler(sender, args) {
// Waiting
}
function endRequestHandler(sender, args) {
// close waiting
}
</script>
If you have it postbacking on the page, you can try to put a hook when the button is clicked to show the waiting, when the page refreshes then the waiting will of course be gone.
$("#mybutton").click(function() {
// Waiting
});
I'm using drupal 6 form, and ahah for ajax form submit. On form submit I perform some validation and allows user to choose options that display on jqModal popup.
JS script that I'm using for jqm popup is:
$(document).ready(function() {
$("#dialog").jqm();
});
and uses tag to open the jqm popup
Choose option
<div class="jqmWindow" id="dialog">
<h2 id="modalHeading">Select one</h2>
x
<form> form values</form>
</div>
Instead of opening popup window, it changes the url by adding # at the end.
Same code is working fine on the other page of my website.
jqModal.js file is included to the page on pageload.
The default trigger is any element with a class of "jqModal", so your anchor element (Choose option) is correct and ought to show the modal when clicked.
Is anything showing up in the javascript console of the page?
Perhaps there's another javascript function that's preventing the click event from bubbling? The .click() events are assigned in a FILO (first-in, last-out) manner, so if another click event return false, the jqModal assigned event may never get called.
You can also be explicit and try;
$(document).ready(function() {
$("#dialog").jqm({trigger: false});
$("a.jqModal").click(function(){
$("#dialog").jqmShow();
});
});
I'm trying to work on a chrome extension and am trying to clean up some of my code by relying on the sendMessage. However the callback function activates before the page has finished loading so in the case of a new tab, nobody receives and in the case of an existing tab the page that is being moved from is getting the message (but that isn't what I want). I've looked for other people asking about that problem with new tabs and there wasn't a clear answer, the best suggestion I've seen is to create a global variable and create a listener for tab loads and compare it against this global variable.
So the question is, is there a way to wait in the callback function until the page has loaded, or do I create an array of JS objects that contain the tab I'm waiting on and the information I want to send to that tab.
For reference here is the relevant code in the background javascript file.
chrome.tabs.sendMessage(tab.id, {info: "info"}, function(response)
{
//This line isn't used when I am navigating without changing tabs
chrome.tabs.create({url: response.info.linkUrl}, function(tab1)
{
chrome.tabs.update(tab1.id, {url: response.info.linkUrl}, function(tab2)
{
chrome.tabs.sendMessage(tab2.id, {info: "More Info"});
});
});
});
Otherwise I am able to confirm that all of my tab side code works, once my sendMessage was delayed enough for me to see that with my own eyes. My code is able to consistently make it past validation on the page being navigated away from, confirmed by checking document.url.
You can try injecting a second content script instead of a message.
It will execute in the same context as your other script.
Something along the lines of
chrome.tabs.executeScript(tab2.id,
{code: 'showInfo("More Info);', runAt: 'document_idle'}
);
where showInfo does the same as your message handler.
It's a bit of a hack and I'm not 100% sure the load order will be correct.
Other possible solutions are more complex.
For example, you can make the content script report back that it is ready and have a handler for that, for instance you can register a listener for onMessage in the background that waits for a message from that specific tab.id, sends "More Info" and then deregisters or disables itself.
Or, you could potentially switch to programmatic injection of your content script, which would let you control load order.
In my chrome extension, I had to change popup html from background. Changes affects then and after clicking again in extension icon, the unchanged popup is showing. Why?
Every time you click away from your popup window, the window is reset. A way to fix this would be to use your background page to store session data, in your popup.js, do something like this:
chrome.runtime.getBackgroundPage(function(bg){
if(bg.myDataHTML){
document.body.innerHTML = bg.myDataHTML;
}
setInterval(function(){
bg.myDataHTML = document.body.innerHTML
},1000);
//do the rest of your work here.
})
I typically do everything in my popup inside that anonymous function to give me access to the libraries defined within my background page.
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.