I have problem with displaying my page that is included in my template. I set a div tag with an id. Inside I have my cf include that has my test.html page. That div is hidden. So after I click on the link I want to display my page in dialog box. Here is my current code:
<div><a href="javascript:void(0)" onClick="chkLink()"> Click Here</div>
<div id="bDialog" style="display:none"><cfinclude template="test.html"></div>
JavaScript code :
function chkLink() {
$("#bDialog").dialog({
autoOpen: false,
width:750,
modal:true,
cache: false,
load.('<cfinclude template="test.html">'),
buttons: {
"Ok": function () {
$(this).dialog("close");
}
}
});
}
I tried this code but that gave me an error: SyntaxError: unterminated string literal html:'<head>. I'm not sure what I'm doing wrong. If anyone can help with this problem please let me know. Thanks in advance.
Related
Once in a while our website generates an internal error message about an object being undefined. We are using JQueryUI. Here is an example: "TypeError: X.accordion is not a function". The line of code triggering the error is in a minified version of jquery. The non-minified code looks as follows:
var $help = $('#help,#help2');
$help.accordion(
{
autoHeight: false,
navigation: true,
header: '.helpItem',
icons: false,
heightStyle: "content"
});
We have not been able to reproduce the error, but our production system generates the error several times a week.
You can see the function without having to log in to our website using the following instructions:
https://www.rephunter.net/manufacturers-sales-reps-find
Navigate down to the search box
Click on the spyglass.
On the results page, there is an accordion near the top, left of the page, which shows up briefly, but can be re-opened by clicking on "Show Help for The Page".
Put the script tag at the bottom of your page or in a $(document).ready() :
var $help = null;
$(document).ready(function(){
$help = $('#help,#help2');
$help.accordion(
{
autoHeight: false,
navigation: true,
header: '.helpItem',
icons: false,
heightStyle: "content"
});
});
I have 2 .NET web pages that have the same popup box in both pages The JavaScript is exactly the same in both pages, I copied the code from the page that works to the other page and it doesn't work. the one that doesn't work gives me the error message:
Scripts/jquery-3.3.1.js
0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'dialog'.
I have tried putting the code at the end of the page, no difference. Best I can tell jquery is being load into the page in the header when I check the page with the IE developer. Hope someone can point me in the right direction.
<link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
<link href ="~/Styles/Default.css" rel="stylesheet" />
<script src="../Scripts/jquery-3.3.1.js"></script>
<script src="../Scripts/jquery-ui-1.12.1.js"></script>
<script>
$(document).ready(function() {
$("#dd2875").dialog({
buttons: {
"Cancel": function() {
$("#dd2875").dialog('close');
}
},
dialogClass: 'myTitleClass',
draggable: false,
width: 800,
height: 400,
hide: 2000,
show: 'slidedown',
hide: 'explode',
autoOpen: false
});
$("#btnNewAccount").click(function(evt) {
evt.preventDefault();
$("#dd2875").dialog('open');
});
});
</script>
The DOM probably does not contain an element with the ID dd2875,
Verify that #dd2875 actually exists on the page at the point that you are calling dialog()
I entered the code you sent and this is what I got back in the console.
jQuery.Deferred exception: Object doesn't support property or method dialog' TypeError: Object doesn't support property or method 'dialog'
at Anonymous function (http://localhost:60086/Add_CAC_ID.aspx:14:13)
at mightThrow (http://localhost:60086/Scripts/jquery-3.3.1.js:3534:10)
at Anonymous function (http://localhost:60086/Scripts/jquery-3.3.1.js:3602:12) undefined
I figured it out, had to go back and rewrite the page one section at a time to do it. The problem was a conflict between the JavaScript and the asp validation controls. When I put the control on the page it caused the error with the dialog. I found two solutions to the conflict. I could add the first line in the page load or the second line in the JavaScript either one worked. Thanks for the help in getting me pointed in the right direction.
Unobtrusivevalidaionmode = Unobtrusivevalidaionmode .none
or
$j = $.noConflict;
Hi I am using this script to add social media icon into my site.
<div id="menu" class="shareSelector" style="width:250px; height:250px;"></div>
$(document).ready(function () {
$('.shareSelector').socialShare({
social: 'facebook,google,pinterest,twitter',
whenSelect: true,
selectContainer: '.shareSelector'
});
});
div gets the content upon clicking on it.Can we call this function without clicking div means on bodyload?
Regards:Ali
The $(document).ready(function () {}); function should run when the page loads.
Have you got the jquery in a <script> tag?
If so, the bindings are setup by the socialShare plugin, so you may need to look at that.
What does whenSelect option do?
$(document).ready(function () {
$('.shareSelector').socialShare({
social: 'facebook,google,pinterest,twitter',
whenSelect: true,
selectContainer: '.shareSelector'
});
$('.shareSelector').click()
});
Dont know about the socialShare plugin but you have an option there which says "whenSelect: true"
try false
In given below link when we refresh our page it briefly shows the expanded version before it collapses on its own. Is there a way to have it immediately be collapsed?
http://new.cgwealth.com/staff
Below are JS Code links:
http://new.cgwealth.com/pages/js/jquery-1.7.2.min.js
http://new.cgwealth.com/pages/js/accordion-jquery-ui.min.js
<script type="text/Javascript">
$(document).ready(function () {
$(".accordion").accordion({
autoHeight: false,
navigation: false,
collapsible: true,
clearStyle: true
});
});
</script>
CSS link: http://new.cgwealth.com/pages/pages/css/accordion.css
So i want to hide all the data until my accordion functionality works.
Thanks in advance
i had the same question in my last project, but i have no idea about that. Then i use a very ugly method to fix this. When i load data from my server, i add class named 'hidden'(css:display:none), and it had a effort that all data, just like text or images, all hide. And after all data loaded, i call jquery function accordion and remove class 'hidden'.
So i use this method to fix. Maybe it is valid for you.
You have to hide the content through css, and then enable the content to be show via javascript. Here is one working copy
http://jsfiddle.net/aneeshrajvj/FcHEC/
I have a button that when clicked loads an external page (same domain) in to a div and displays that div as a jQuery UI dialog box.
<div id="Dialog_box"></div>
<script type="text/javascript">
$(function() {
$("#Dialog_box").dialog({
autoOpen: false,
modal: true,
width: 500,
height: 400,
title: "Dialog",
close: function(event, ui) {
$("#Dialog_box").html(""); // Ensure the page is no longer loaded
}
});
});
function openDialog() {
$(document).ready(function() {
$("#Dialog_box").load("dialog.php").dialog('open');
});
}
</script>
<button onclick="openDialog();">Open Dialog</button>
The first time the button is clicked it opens fine. After closing it then it will no longer come back up.
First I verified that it was in fact being closed upon hitting the 'X'
$("#Dialog_box").dialog({
...
close: function(event, ui) {
alert("Closed");
}
});
And the alert was being shown. I then tried using my normal code but did not load in the page
$("#Dialog_box").dialog('open');
At this point, the dialog would open and close properly without any problems. Although I don't believe it should matter, I even tried separating out the load and dialog commands
function openDialog() {
$(document).ready(function() {
$("#Dialog_box").load("dialog.php");
$("#Dialog_box").dialog('open');
});
}
Once again, the box would display the first time but would not reappear after that.
My external file essentially looks like this
<link type="text/css" href="path/to/style.css" rel="stylesheet" />
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#Submit_button").click(function() {
// Do stuff with form data
// POST data without changing page
});
});
</script>
<form action=''>
// Input fields
<input type="button" id="Submit_button" />
</form>
Just for clarification, the problem occurs whether or not I post my form.
Why won't the dialog box re-open after I've loaded (and to my understanding, unloaded) a page in to it?
Remove the line to embed jquery.js from the external file.
This line will load jQuery again, overwrite the existing jQuery, what will destroy the already instantiated dialog-object, because it's registered in the overwritten jQuery-instance.
To clarify: you don't need to embed jquery and jqueryui again, because if you use $.load() the returned fragment will be a part of the DOM of the requesting document(they already exist there).
$(function() {
$( "#btnCallCompany" ).button().click(function() {
$( "#divOpenConversation" ).dialog({
autoOpen: true,
height: 500,
width: 650,
modal: true
});
$.get("/Conversation.aspx",function(data){
$( "#divOpenConversation" ).html(data);
});
});
});//end func