I am using codepress in a CMS to edit files in the filesystem. Everything works nicely, however when trying to load the same page using jQuery load() function, codepress seems to break.
My javascript code looks like this which loads the php file with codpress, however codepress seems to not fire.
$('.content').on('click', '#fileSystemWrap a', function (event) {
event.preventDefault();
var fileName = $(this).data('file');
$('#rightColWrap').fadeOut(150, function(){
$('#rightColWrap').load('/?url=developer/edit-file.php&open=' + fileName, function(){
$('#rightColWrap').fadeIn(150);
});
});
});
Digging into codepress.js I see this at the end of the file but I'm not understanding if there is something I could add to my initial on click event listner script to help codpress fire.
if(window.attachEvent) window.attachEvent('onload',CodePress.run);
else window.addEventListener('DOMContentLoaded',CodePress.run,false);
Here is the link to codepress on sourceforge
https://sourceforge.net/projects/codepress/
To be logic : when the data are loaded, we want to initialize CodePress.
So your code should look like :
$('.content').on('click', '#fileSystemWrap a', function (event) {
event.preventDefault();
var fileName = $(this).data('file');
$('#rightColWrap').fadeOut(150, function(){
$('#rightColWrap').load('/?url=developer/edit-file.php&open=' + fileName, function(){
CodePress.run();
$('#rightColWrap').fadeIn(150);
});
});
});
If this didn't work please provide error from the console.
Edit : corrected answer, seen Robson França's comment.
Last issue was that CodePress.run; should have been written CodePress.run();
The answer was that we needed to add parentheses to CodePress.run and after the fadeIn() call.
$('#content').on('click', '#fileSystemWrap a', function (event) {
event.preventDefault();
var fileName = $(this).data('file');
$('#content').fadeOut(150, function(){
$('#content').load('/?url=developer/edit-file.php&open=' + fileName, function(){
$('#content').fadeIn(150, function(){
CodePress.run();
});
});
});
});
Related
I have a snippet in my project similar to the one seen below:
$('#field').change(function() {
var thisCondition = $(this).val();
if(thisCondition) {
$('#this_container').fadeIn();
}
});
The above snippet is working. When thisCondition evaluates to true, the container does fade in. However, I also have the snippet below that is not functioning as expected. It binds to show so that when the container fades in an event will be triggered:
$('#this_container').bind('show', function() {
$.ajax({
...
});
});
Shouldn't the snippet above react to line 5 in the change event handler? Why is the bind method not triggering?
Confirmed that show is not a valid nor jQuery-triggered event.
But you can trigger it yourself!
Try something like this :
$('#this_container').fadeIn("slow", function() {
$(this).trigger("show");
});
The show is not a valid event, neither is triggered by jQuery. You need to construct your script in a different way altogether:
$('#field').change(function() {
var thisCondition = $(this).val();
if(thisCondition) {
$.ajax({
success: function () {
$('#this_container').fadeIn();
}
});
}
});
So, you can try to bring the AJAX content, and upon a successful request, you can show the container.
try to use :
$('#this_container').fadeIn( "slow", function() {
// Animation complete
$.ajax({
...
});
});
I've been troubleshooting this problem with no luck. I'm not sure why my jQuery code isn't loaded in IE9. It's quite huge but it just basically detects svg docs in the DOM and manipulate them. Basically, this is how my code looks:
jQuery(document).ready(function($) {
// init panzoom
initPanZoom();
function initPanZoom() {
// get svg containers for each main tab
var svgs = [$("#pcb").find("svg"), $("#gerber").find("svg")];
$(".schematic-sheet").each(function(){
svgs.push($(this).find("svg"));
});
var objPlaceholders = [];
$.map(svgs, function(obj, index){
objPlaceholders[index] = new PanZoom({
svg: obj[0],
viewportClass: "svgscale",
userViewport: $("#user-viewport")[0]
});
obj.closest("div").find('.zoom-in').on('click', function(e){
e.preventDefault();
objPlaceholders[index].handleMouseClick(1.5);
});
obj.closest("div").find('.zoom-out').on('click', function(e){
e.preventDefault();
objPlaceholders[index].handleMouseClick(-1.5);
});
obj.closest("div").find('.reset').on('click', function(e){
e.preventDefault();
objPlaceholders[index].handleMouseClick(0);
});
});
}
});
The weirdest thing is at first time you load it, initPanZoom() isn't called at all. After a few minutes, when you refresh, it's then called. So there must be something wrong I don't know. Please note that this only manifests in IE9.
UPDATE
I should also note that this code is loaded on a page that's inside an iframe. And I noticed that viewing the page directly in the browser sometimes resolves the issue.
As you are using jQuery(document).ready(function($) and later changing that to $ so, please change it to $ i.e $( document ).ready(function() {
Another thing you care calling that function into the $( document ).ready(function() { so you need to cut the whole function data out from the function initPanZoom() { } and use it directly. i.e.
$( document ).ready(function()
{
// get svg containers for each main tab
var svgs = [$("#pcb").find("svg"), $("#gerber").find("svg")];
$(".schematic-sheet").each(function(){
svgs.push($(this).find("svg"));
});
var objPlaceholders = [];
$.map(svgs, function(obj, index){
objPlaceholders[index] = new PanZoom({
svg: obj[0],
viewportClass: "svgscale",
userViewport: $("#user-viewport")[0]
});
obj.closest("div").find('.zoom-in').on('click', function(e){
e.preventDefault();
objPlaceholders[index].handleMouseClick(1.5);
});
obj.closest("div").find('.zoom-out').on('click', function(e){
e.preventDefault();
objPlaceholders[index].handleMouseClick(-1.5);
});
obj.closest("div").find('.reset').on('click', function(e){
e.preventDefault();
objPlaceholders[index].handleMouseClick(0);
});
});
});
I have a problem regarding the combination of two parts of the code. This code alone is working fine:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.panelslider.min.js"></script>
<script>
$('#left-panel-link').panelslider();
$('#close-panel-bt').click(function() {
$.panelslider.close();
});
But when I add this one below, the second function (panelslider.close) is not working anymore. Moreover, the load function of the second part of the code is not working neither.
$(document).ready(function() {
$('#content').load('content/index.php');
$('ul#menuslider li a').click(function() {
var page = $(this).attr('href');
$('#content').load('content/' + page + '.php');
});
});
I probably missed something important? Any help is welcome, as I don't know which keyword to use in order to look for a solution. I already tried "combine ajax and jquery", "load not working" and others, but without success.
Thanks in advance! Jonas
Something like this:
<script>
(function($){
$('#left-panel-link').panelslider();
var content = $('#content');
content.load('content/index.php');
$(document)
.on('click', '#close-panel-bt', function() {
console.log("about to close the panel");
$.panelslider.close();
})
.on('click', 'ul#menuslider li a', function() {
var page = $(this).attr('href');
console.log("about to reload content");
content.load('content/' + page + '.php');
});
}(jQuery));
</script>
I have a small problem that should be very easy to overcome. For some reason I cant work this out. So the problem is I cannot get a button to link to some jquery. My set-up is as follows (showing the relevant code):
Default.aspx
jQuery:
function getContent() {
var data = {
numberID: 1
};
$.jsonAspNet("ContentService.asmx", "GetContent", data,
function (result) {
$('#content').html(result);
});
}
jQuery(document).ready(function () {
getContent();
});
HTML:
<div id="content"></div>
ContentService.vb
<WebMethod()> _
Public Function GetContent(number As Integer) As String
Dim sb = New StringBuilder
sb.AppendLine("<table>")
sb.AppendLine("<tr>")
sb.AppendLine("<td class='ui-widget-header ui-corner-all'>Number</td>")
sb.AppendLine("</tr>")
sb.AppendLine("<tr>")
sb.AppendLine("<td>" & number & "</td>")
sb.AppendLine("<td><a href='#' id='test' class='fg-button ui-state-default ui-corner-all'><img src='" & Context.Request.ApplicationPath & "/images/spacer.gif' class='ui-icon ui-icon-pencil' /></a></td>")
sb.AppendLine("</tr>")
sb.AppendLine("</table>")
Return sb.ToString
End Function
So that's the basics of what I have everything works but I'm not sure how to get the a button (id='test') to get linked to some jQuery. I want it to be pressed and bring up a popup.
I have tried to put the jQuery on default.aspx but this doesn't seem to work unless the button is place in the HTML on that page.
$('#test').unbind('click').click(function () {
alert('Working');
});
I'm sure this is easy to do, but I have been trying for a while and cannot seem to get it to work.
Is the problem that you're trying to bind to the element that ISN'T in existance yet?
are you calling the $('#test').unbind('click').click(function () {
alert('Working');
}); BEFORE the service has returned?
$('#test').on('click', function () {
alert('Working');
});
This will bind the event to the '#test' element once it has been inserted in to the DOM.
As you load the content via ajax, you have to bind to $('#content'). Like this:
$(function () {
$('#content').on('click', '#test', function () {
e.preventDefault(); // if a default action is not needed needed
alert('Working');
});
});
I guess this is about not preventing the default behaviour of the A href tag. Now it will probably link to '#' instead of firing the onclick event.
$('#test').on('click', function (e) {
alert('Working');
e.preventDefault();
});
You could try to wrap this in a document ready, or eventually use the .on binder from jQuery, since it's dynamic content.
Solved
It was a very small thing that caused this. The code to fix this problem is as follows:
$('#test').unbind('click').click(test);
This needed to go inside the function with the json so:
function getContent() {
var data = {
numberID: 1
};
$.jsonAspNet("ContentService.asmx", "GetContent", data,
function (result) {
$('#content').html(result);
$('#test').unbind('click').click(test);
});
}
Thank you to everyone that has tried to help me.
I'm using PHP,Smarty, jQuery, Colorbox jQuery plugin, etc. for my website. All the necessary files required have been included in index.tpl file, so I've not mentioned those files here. They are getting included and working fine.
From one smarty template file I'm calling the Colorbox popup. The code for it is as follows:
edit
{literal}
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$(".inline_edit_transaction_details").colorbox({href:$(this).attr('href'),width:999, height:999});
});
</script>
{/literal}
The lightbox is also getting displayed properly. For your reference I'm attaching the screenshot here.
Now I want to call a jQuery AJAX function upon clicking on Update link as shown in the attached image. For testing purpose I put an alert message at the beginning of AJAX function but not able to call it. For your reference I'm putting the code from smarty template below.
The code from the Colorbox popup(Smarty template) is as follows:
<td><a class="edit_user_transaction_status" href="{$control_url}{$query_path}?op=edit_user_transaction&page={$page}&txn_no={$user_transaction_details.transaction_no}&transaction_data_assign={$user_transaction_details.transaction_data_assign}&user_id={$user_id}{if $user_name!=''}&user_name={$user_name}{/if}{if $user_email_id!=''}&user_email_id={$user_email_id}{/if}{if $user_group!=''}&user_group={$user_group}&{/if}{if $user_sub_group!=''}&user_sub_group={$user_sub_group}{/if}{if $from_date!=''}&from_date={$from_date}{/if}{if $to_date!=''}&to_date={$to_date}{/if}{if $transaction_status!=''}&transaction_status={$transaction_status}{/if}{if $transaction_no!=''}&transaction_no={$transaction_no}{/if}">Update</a></td>
The jQuery AJAX function is as below:
$(document).ready(function() {
//This function is use for edit transaction status
$(".edit_user_transaction_status").click(function() { alert("Hello");
$(".edit_user_transaction_status").bind('click', function(){
$.colorbox.close();
});
e.preventDefault();
//for confirmation that status change
var ans=confirm("Are you sure to change status?");
if(!ans) {
return false;
}
var post_url = $(this).attr('href');
var transaction_status_update = $('#transaction_status_update').val();
$.ajax({
type: "POST",
url: post_url+"&transaction_status_update="+transaction_status_update,
data:$('#transaction_form').serialize(),
dataType: 'json',
success: function(data) {
var error = data.login_error;
$(".ui-widget-content").dialog("close");
//This variables use for display title and success massage of transaction update
var dialog_title = data.title;
var dialog_message = data.success_massage;
//This get link where want to rerdirect
var redirect_link = data.href;
var $dialog = $("<div class='ui-state-success'></div>")
.html("<p class='ui-state-error-success'>"+dialog_message+"</p>")
.dialog({
autoOpen: false,
modal:true,
title: dialog_title,
width: 500,
height: 80,
close: function(){
document.location.href =redirect_link;
}
});
$dialog.dialog('open');
}
});
});
});
I tried a lot to make a call to this function but couldn't give a call. It's also not giving any errors when I checked in console of firebug. So I think no syntactic errors are there. Can anyone help me in calling this function? Thanks in advance.
$(".edit_user_transaction_status").click(function(e) {
e.preventDefault(); // apply in click event not outside
alert("Hello");
});
or
$(".edit_user_transaction_status").bind('click', function(e){
e.preventDefault(); // apply in click event not outside
$.colorbox.close();
});
reference e.preventDefault